Drag'n'drop support

docs/tools.md

@@ -4,14 +4,14 @@ CodeX Editor is a block-oriented editor. It means that entry composed with the l
 
 `Tool` — is a class that provide custom `Block` type. All Tools represented by `Plugins`.
 
-Each Tool should have an installation guide. 
+Each Tool should have an installation guide.
 
 ## Tool class structure
 
 ### constructor()
 
 Each Tool's instance called with an params object.
- 
+
 | Param  | Type                | Description                                     |
 | ------ | ------------------- | ----------------------------------------------- |
 | api    | [`IAPI`][iapi-link] | CodeX Editor's API methods                      |
@@ -62,7 +62,7 @@ Options that Tool can specify. All settings should be passed as static propertie
 
 ### User configuration
 
-All Tools can be configured by users. You can set up some of available settings along with Tool's class 
+All Tools can be configured by users. You can set up some of available settings along with Tool's class
 to the `tools` property of Editor Config.
 
 ```javascript
@@ -103,7 +103,7 @@ To provide paste handling for your Tool you need to define static getter `onPast
 
 ##### HTML tags handling
 
-To handle pasted HTML elements object returned from `onPaste` getter should contain following fields: 
+To handle pasted HTML elements object returned from `onPaste` getter should contain following fields:
 
 | Name | Type | Description |
 | -- | -- | -- |
@@ -140,7 +140,7 @@ Your Tool can analyze text by RegExp patterns to substitute pasted string with d
 | `patterns` | `Object` | _Optional_. `patterns` object contains RegExp patterns with their names as object's keys |
 | `patternHandler(text: string, key: string)` | `Function` | _Optional_. Gets pasted string and pattern name. Should return the same object as Tool `save` method |
 
-**Note** Editor will check pattern's full match, so don't forget to handle all available chars in there. 
+**Note** Editor will check pattern's full match, so don't forget to handle all available chars in there.
 
 Pattern will be processed only if paste was on `initialBlock` Tool and pasted string length is less than 450 characters.
 
@@ -156,7 +156,7 @@ static get onPaste() {
     },
     patternHandler: (text, key) => {
       const urlData = Youtube.onPaste.patterns[key].exec(text);
-      
+
       return {
         iframe: Youtube.makeEmbededFromURL(urlData)
       };
@@ -167,4 +167,41 @@ static get onPaste() {
 
 > Both `onPaste.handler` and `onPaste.patternHandler` can be `async` or return a `Promise`.
 
+##### Files
+
+Your Tool can handle files pasted or dropped into the Editor.
+
+To handle file you should provide `files` and `fileHandler` properties in your `onPaste` configuration object.
+
+`fileHandler` property should be a function which takes File object as an argument and returns the same object as Tool\`s `save` method.
+
+`file` property is an object with the following fields:
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| `extensions` | `string[]` | _Optional_ Array of extensions your Tool can handle |
+| `mimeTypes` | `sring[]` | _Optional_ Array of MIME types your Tool can handle |
+
+
+
+Example
+
+```javascript
+static get onPaste() {
+  return {
+    files: {
+      mimeTypes: ['image/png'],
+      extensions: ['json']
+    },
+    fileHandler: (file) => {
+      /* do smth with the file */
+
+      return {
+        data // Some extracted content
+      }
+    }
+  }
+}
+```
+
 ### Sanitize

src/components/block.ts

@@ -32,12 +32,13 @@ export default class Block {
    * CSS classes for the Block
    * @return {{wrapper: string, content: string}}
    */
-  static get CSS(): {wrapper: string, wrapperStretched: string, content: string, selected: string} {
+  static get CSS(): {wrapper: string, wrapperStretched: string, content: string, selected: string, dropTarget: string} {
     return {
       wrapper: 'ce-block',
       wrapperStretched: 'ce-block--stretched',
       content: 'ce-block__content',
       selected: 'ce-block--selected',
+      dropTarget: 'ce-block--drop-target',
     };
   }
 
@@ -363,6 +364,14 @@ export default class Block {
     return tunesElement;
   }
 
+  /**
+   * Toggle drop target state
+   * @param {boolean} state
+   */
+  public set dropTarget(state) {
+    this.holder.classList.toggle(Block.CSS.dropTarget, state);
+  }
+
   /**
    * Make default Block wrappers and put Tool`s content there
    * @returns {HTMLDivElement}

src/components/core.js

@@ -262,7 +262,7 @@ export default class Core {
    * @return {Promise}
    */
   async start() {
-    const modulesToPrepare = ['Tools', 'UI', 'BlockManager', 'Paste', 'ModificationsObserver'];
+    const modulesToPrepare = ['Tools', 'UI', 'BlockManager', 'Paste', 'DragNDrop', 'ModificationsObserver'];
 
     await modulesToPrepare.reduce(
       (promise, module) => promise.then(async () => {

src/components/modules/block-events.ts

@@ -120,6 +120,28 @@ export default class BlockEvents extends Module {
     }
   }
 
+  /**
+   * Add drop target styles
+   *
+   * @param {DragEvent} e
+   */
+  public dragOver(e: DragEvent) {
+    const block = this.Editor.BlockManager.getBlockByChildNode(e.target);
+
+    block.dropTarget = true;
+  }
+
+  /**
+   * Remove drop target style
+   *
+   * @param {DragEvent} e
+   */
+  public dragLeave(e: DragEvent) {
+    const block = this.Editor.BlockManager.getBlockByChildNode(e.target);
+
+    block.dropTarget = false;
+  }
+
   /**
    * ENTER pressed on block
    * @param {KeyboardEvent} event - keydown

src/components/modules/blockManager.js

@@ -103,6 +103,8 @@ export default class BlockManager extends Module {
     this.Editor.Listeners.on(block.holder, 'keydown', (event) => this.Editor.BlockEvents.keydown(event), true);
     this.Editor.Listeners.on(block.holder, 'mouseup', (event) => this.Editor.BlockEvents.mouseUp(event));
     this.Editor.Listeners.on(block.holder, 'keyup', (event) => this.Editor.BlockEvents.keyup(event));
+    this.Editor.Listeners.on(block.holder, 'dragover', (event) => this.Editor.BlockEvents.dragOver(event));
+    this.Editor.Listeners.on(block.holder, 'dragleave', (event) => this.Editor.BlockEvents.dragLeave(event));
   }
 
   /**
@@ -362,17 +364,18 @@ export default class BlockManager extends Module {
    * 2) Mark it as current
    *
    *  @param {Element|Text} childNode - look ahead from this node.
+   *  @param {string} caretPosition - position where to set caret
    *  @throws Error  - when passed Node is not included at the Block
    */
-  setCurrentBlockByChildNode(childNode) {
+  setCurrentBlockByChildNode(childNode, caretPosition = 'default') {
     /**
      * If node is Text TextNode
      */
     if (!$.isElement(childNode)) {
       childNode = childNode.parentNode;
     }
 
-    let parentFirstLevelBlock = childNode.closest(`.${Block.CSS.wrapper}`);
+    const parentFirstLevelBlock = childNode.closest(`.${Block.CSS.wrapper}`);
 
     if (parentFirstLevelBlock) {
       /**
@@ -381,12 +384,31 @@ export default class BlockManager extends Module {
        */
       this.currentBlockIndex = this._blocks.nodes.indexOf(parentFirstLevelBlock);
 
-      this.Editor.Caret.setToInput(childNode);
+      this.Editor.Caret.setToInput(childNode, caretPosition);
     } else {
       throw new Error('Can not find a Block from this child Node');
     }
   }
 
+  /**
+   * Return block which contents passed node
+   *
+   * @param {Node} childNode
+   * @return {Block}
+   */
+  getBlockByChildNode(childNode) {
+    /**
+     * If node is Text TextNode
+     */
+    if (!$.isElement(childNode)) {
+      childNode = childNode.parentNode;
+    }
+
+    const firstLevelBlock = childNode.closest(`.${Block.CSS.wrapper}`);
+
+    return this.blocks.find(block => block.holder === firstLevelBlock);
+  }
+
   /**
    * Swap Blocks Position
    * @param {Number} fromIndex

src/components/modules/dragNDrop.ts

@@ -0,0 +1,77 @@
+import SelectionUtils from '../selection';
+
+declare var Module: any;
+
+export default class DragNDrop extends Module {
+
+  /**
+   * If drag has been started at editor, we save it
+   *
+   * @type Boolean
+   * @private
+   */
+  private isStartedAtEditor = false;
+
+  /**
+   * Bind events
+   *
+   * @private
+   */
+  public prepare(): void {
+    this.bindEvents();
+  }
+
+  /**
+   * Add drag events listeners to editor zone
+   * @private
+   */
+  private bindEvents(): void {
+    this.Editor.Listeners.on(this.Editor.UI.nodes.holder, 'drop', this.processDrop, true);
+
+    this.Editor.Listeners.on(this.Editor.UI.nodes.holder, 'dragstart', (dragEvent: DragEvent) => {
+
+      if (SelectionUtils.isAtEditor && !SelectionUtils.isCollapsed) {
+        this.isStartedAtEditor = true;
+      }
+
+      this.Editor.InlineToolbar.close();
+    });
+
+    /* Prevent default browser behavior to allow drop on non-contenteditable elements */
+    this.Editor.Listeners.on(this.Editor.UI.nodes.holder, 'dragover', (e) => e.preventDefault(), true);
+  }
+
+  /**
+   * Handle drop event
+   *
+   * @param {DragEvent} dropEvent
+   */
+  private processDrop = async (dropEvent: DragEvent): Promise<void> => {
+    const {
+      BlockManager,
+      Paste,
+    } = this.Editor;
+
+    dropEvent.preventDefault();
+
+    BlockManager.blocks.forEach((block) => block.dropTarget = false);
+
+    if (SelectionUtils.isAtEditor && !SelectionUtils.isCollapsed && this.isStartedAtEditor) {
+      document.execCommand('delete');
+    }
+
+    this.isStartedAtEditor = false;
+
+    /**
+     * Try to set current block by drop target.
+     * If drop target (error will be thrown) is not part of the Block, set last Block as current.
+     */
+    try {
+      BlockManager.setCurrentBlockByChildNode(dropEvent.target, 'end');
+    } catch (e) {
+      BlockManager.setCurrentBlockByChildNode(BlockManager.lastBlock.holder, 'end');
+    }
+
+    Paste.processDataTransfer(dropEvent.dataTransfer, true);
+  }
+}