Drag'n'drop support

docs/tools.md

@@ -167,4 +167,34 @@ static get onPaste() {
 
 > Both `onPaste.handler` and `onPaste.patternHandler` can be `async` or return a `Promise`.
 
+### Drag'n'drop handling
+
+Your Tool can handle files drag'n'drop.
+
+To handle dropped file you should provide `onDrop` static property with 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 |
+| `handler` | `(file: File) => {data: any}` | Handler method should return the same object as `save` method |
+
+Example
+
+```javascript
+static get onDrop() {
+  return {
+    mimeTypes: ['image/*'],
+    extensions: ['json'],
+    handler: (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,223 @@
+import _ from '../utils';
+import IBlockToolData from '../interfaces/tools/block-tool-data';
+import SelectionUtils from '../selection';
+
+declare var Module: any;
+
+interface DropConfig {
+  extensions: string;
+  mimeTypes: string;
+  handler: (file: File) => IBlockToolData;
+}
+
+export default class DragNDrop extends Module {
+
+  /**
+   * If drag has been started at editor, we save it
+   *
+   * @type Boolean
+   * @private
+   */
+  private isStartedAtEditor = false;
+
+  /**
+   * Cache for Tools onDrop configs
+   *
+   * @private
+   */
+  private toolsDropConfigs: {[tool: string]: {
+    extensions: string[],
+    mimeTypes: string[],
+    handler: (file: File) => IBlockToolData,
+  }} = {};
+
+  /**
+   * Bind events and process tools configs
+   *
+   * @private
+   */
+  public async prepare(): Promise<void> {
+    this.bindEvents();
+    await this.processTools();
+  }
+
+  /**
+   * 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', () => {
+      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);
+  }
+
+  /**
+   * Get and process tool`s drop configs
+   *
+   * @private
+   */
+  private processTools(): void {
+    const tools = this.Editor.Tools.blockTools;
+
+    Object.entries(tools).forEach(this.processTool);
+  }
+
+  /**
+   * Check if onDrop config valid and save it to private property
+   *
+   * @param {string} name
+   * @param {Tool} tool
+   */
+  private processTool = ([name, tool]): void => {
+    const toolDropConfig = tool.onDrop;
+
+    if (!toolDropConfig) {
+      return;
+    }
+
+    const {handler} = toolDropConfig;
+    let {extensions, mimeTypes} = toolDropConfig;
+
+    if (!handler || typeof handler !== 'function') {
+      _.log(`Drop handler for «${name}» Tool should be a function.`);
+      return;
+    }
+
+    if (extensions && !Array.isArray(extensions)) {
+      _.log(`«extensions» property of the onDrop config for «${name}» Tool should be an array`);
+      extensions = [];
+    }
+
+    if (mimeTypes && !Array.isArray(mimeTypes)) {
+      _.log(`«mimeTypes» property of the onDrop config for «${name}» Tool should be an array`);
+      mimeTypes = [];
+    }
+
+    if (mimeTypes) {
+      mimeTypes = mimeTypes.filter((type) => {
+        if (!_.isValidMimeType(type)) {
+          _.log(`MIME type value «${type}» for the «${name}» Tool is not a valid MIME type`, 'warn');
+          return false;
+        }
+
+        return true;
+      });
+    }
+
+    this.toolsDropConfigs[name] = {
+      extensions: extensions || [],
+      mimeTypes: mimeTypes || [],
+      handler,
+    };
+  }
+
+  /**
+   * 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 && this.isStartedAtEditor) {
+      document.execCommand('delete');
+    }
+
+    this.isStartedAtEditor = false;
+
+    try {
+      BlockManager.setCurrentBlockByChildNode(dropEvent.target, 'end');
+    } catch (e) {
+      BlockManager.setCurrentBlockByChildNode(BlockManager.lastBlock.holder, 'end');
+    }
+
+    if (!dropEvent.dataTransfer.files.length) {
+      const isHTML = dropEvent.dataTransfer.types.includes('text/html');
+      let data;
+
+      if (isHTML) {
+        data = dropEvent.dataTransfer.getData('text/html');
+        data = '<p>' + data + '</p>';
+      } else {
+        data = dropEvent.dataTransfer.getData('Text');
+      }
+
+      Paste.processData(data, isHTML);
+
+      return;
+    }
+
+    let dataToInsert = [];
+
+    if (dropEvent.dataTransfer.files.length) {
+      dataToInsert = await Promise.all(
+        Array
+          .from(dropEvent.dataTransfer.items)
+          .map((item) => this.processDataTransferItem(item)),
+      );
+      dataToInsert = dataToInsert.filter((data) => !!data);
+    }
+
+    dataToInsert.forEach(
+      (data, i) => {
+        if (i === 0 && BlockManager.currentBlock && BlockManager.currentBlock.isEmpty) {
+          BlockManager.replace(data.type, data.data);
+          return;
+        }
+
+        BlockManager.insert(data.type, data.data);
+      },
+    );
+  }
+
+  /**
+   * Handle dropped files
+   * @param {DataTransferItem} item
+   */
+  private processDataTransferItem = async (item: DataTransferItem) => {
+    if (item.kind === 'string') {
+      return;
+    }
+
+    const file = item.getAsFile();
+    const extension = _.getFileExtension(file);
+
+    const foundConfig = Object
+      .entries(this.toolsDropConfigs)
+      .find(([toolName, {mimeTypes, extensions}]) => {
+        const [fileType, fileSubtype] = file.type.split('/');
+
+        const foundExt = extensions.find((ext) => ext.toLowerCase() === extension.toLowerCase());
+        const foundMimeType = mimeTypes.find((mime) => {
+            const [type, subtype] = mime.split('/');
+
+            return type === fileType && (subtype === fileSubtype || subtype === '*');
+          });
+
+        return !!foundExt || !!foundMimeType;
+      });
+
+    if (!foundConfig) {
+      return;
+    }
+
+    const [tool, {handler}] = foundConfig;
+    return {
+      data: await handler(file),
+      type: tool,
+    };
+  }
+}