Handle paste on images and blocks w\o inputs (codex-team#583)

docs/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### 2.2.24 changelog
+
+- `Improvements` *Paste handling — minor paste handling improvements
+
 ### 2.2.23 changelog
 
 - `New` *Shortcuts — copy and cut Blocks selected by CMD+A

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codex.editor",
-  "version": "2.7.23",
+  "version": "2.7.24",
   "description": "CodeX Editor. Native JS, based on API and Open Source",
   "main": "dist/codex-editor.js",
   "types": "./types/index.d.ts",

src/components/block.ts

@@ -90,11 +90,7 @@ export default class Block {
    * @param {HTMLElement} element
    */
   set currentInput(element: HTMLElement) {
-    const index = this.inputs.findIndex((input) => input === element || input.contains(element));
-
-    if (index !== -1) {
-      this.inputIndex = index;
-    }
+    this.inputIndex = this.inputs.findIndex((input) => input === element || input.contains(element));
   }
 
   /**

src/components/dom.ts

@@ -468,19 +468,20 @@ export default class Dom {
    * @return {boolean}
    */
   public static containsOnlyInlineElements(data: string | HTMLElement): boolean {
-    const wrapper = document.createElement('template');
+    let wrapper: HTMLElement;
 
     if (typeof data === 'string') {
+      wrapper = document.createElement('div');
       wrapper.innerHTML = data;
     } else {
-      wrapper.appendChild(data);
+      wrapper = data;
     }
 
     const check = (element: HTMLElement) => {
       return !Dom.blockElements.includes(element.tagName.toLowerCase())
         && Array.from(element.children).every(check);
     };
 
-    return check(wrapper);
+    return Array.from(wrapper.children).every(check);
   }
 }

src/components/modules/paste.ts

@@ -180,7 +180,7 @@ export default class Paste extends Module {
   private setCallback(): void {
     const {Listeners, UI} = this.Editor;
 
-    Listeners.on(UI.nodes.redactor, 'paste', this.handlePasteEvent);
+    Listeners.on(document,  'paste', this.handlePasteEvent);
   }
 
   /**
@@ -328,15 +328,7 @@ export default class Paste extends Module {
    * @returns {boolean}
    */
   private isNativeBehaviour(element: EventTarget): boolean {
-    const {Editor: {BlockManager}} = this;
-
-    if ( $.isNativeInput(element) ) {
-      return true;
-    }
-
-    const block = BlockManager.getBlock(element as HTMLElement);
-
-    return !block;
+    return $.isNativeInput(element);
   }
 
   /**
@@ -345,15 +337,20 @@ export default class Paste extends Module {
    * @param {ClipboardEvent} event
    */
   private handlePasteEvent = async (event: ClipboardEvent): Promise<void> => {
+    const {BlockManager, Toolbar} = this.Editor;
+
     /** If target is native input or is not Block, use browser behaviour */
     if (
-      this.isNativeBehaviour(event.target) && !event.clipboardData.types.includes('Files')
+      !BlockManager.currentBlock || this.isNativeBehaviour(event.target) && !event.clipboardData.types.includes('Files')
     ) {
       return;
     }
 
     event.preventDefault();
     this.processDataTransfer(event.clipboardData);
+
+    BlockManager.clearFocused();
+    Toolbar.close();
   }
 
   /**
@@ -362,7 +359,7 @@ export default class Paste extends Module {
    * @param {FileList} items - pasted or dropped items
    */
   private async processFiles(items: FileList) {
-    const {BlockManager} = this.Editor;
+    const {BlockManager, Tools} = this.Editor;
 
     let dataToInsert: Array<{type: string, event: PasteEvent}>;
 
@@ -373,14 +370,12 @@ export default class Paste extends Module {
     );
     dataToInsert = dataToInsert.filter((data) => !!data);
 
+    const isCurrentBlockInitial = Tools.isInitial(BlockManager.currentBlock.tool);
+    const needToReplaceCurrentBlock = isCurrentBlockInitial && BlockManager.currentBlock.isEmpty;
+
     dataToInsert.forEach(
       (data, i) => {
-        if (i === 0 && BlockManager.currentBlock && BlockManager.currentBlock.isEmpty) {
-          BlockManager.paste(data.type, data.event, true);
-          return;
-        }
-
-        BlockManager.paste(data.type, data.event);
+        BlockManager.paste(data.type, data.event, i === 0 && needToReplaceCurrentBlock);
       },
     );
   }
@@ -598,7 +593,11 @@ export default class Paste extends Module {
     const currentToolSanitizeConfig = Sanitizer.getInlineToolsConfig(BlockManager.currentBlock.name);
 
     /** If there is no pattern substitute - insert string as it is */
-    document.execCommand('insertHTML', false, Sanitizer.clean(content.innerHTML, currentToolSanitizeConfig));
+    if (BlockManager.currentBlock.currentInput) {
+      document.execCommand('insertHTML', false, Sanitizer.clean(content.innerHTML, currentToolSanitizeConfig));
+    } else {
+      this.insertBlock(dataToInsert);
+    }
   }
 
   /**

src/components/modules/ui.ts

@@ -196,22 +196,25 @@ export default class UI extends Module {
    */
   private defaultBehaviour(event: KeyboardEvent): void {
     const keyDownOnEditor = (event.target as HTMLElement).closest(`.${this.CSS.editorWrapper}`);
+    const {currentBlock} = this.Editor.BlockManager;
+    const isMetaKey = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 
     /**
-     * Ignore keydowns on document
-     * clear pointer and close toolbar
+     * Ignore keydowns on editor and meta keys
      */
-    if (!keyDownOnEditor) {
-      /**
-       * Remove all highlights and remove caret
-       */
-      this.Editor.BlockManager.dropPointer();
-
-      /**
-       * Close Toolbar
-       */
-      this.Editor.Toolbar.close();
+    if (keyDownOnEditor || currentBlock && isMetaKey) {
+      return;
     }
+
+    /**
+     * Remove all highlights and remove caret
+     */
+    this.Editor.BlockManager.dropPointer();
+
+    /**
+     * Close Toolbar
+     */
+    this.Editor.Toolbar.close();
   }
 
   /**