Fix behaviour of inputs editing in block settings (#1123)

codex-team · Jun 2, 2020 · 26b19a3 · 26b19a3
1 parent e1500f7
commit 26b19a3
Show file tree

Hide file tree

Showing 12 changed files with 241 additions and 142 deletions.
diff --git a/dist/editor.js b/dist/editor.js
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -14,6 +14,7 @@
 - `Improvements` - Add code of conduct
 - `Improvements` - Disabled useCapture flag for a block keydown handling. That will allow plugins to override keydown and stop event propagation, for example, to make own Tab behavior.
 - `Improvements` - All modules now might have `destroy` method called on Editor.js destroy
+- `Improvements` - Block settings can contain text inputs, focus will be restored after settings closed [#1090](https://github.com/codex-team/editor.js/issues/1090)
 - `Fix` - Editor's styles won't be appended to the `<head>` when another instance have already do that [#1079](https://github.com/codex-team/editor.js/issues/1079)
 - `Fix` - Fixed wrong toolbar icon centering in Firefox [#1120](https://github.com/codex-team/editor.js/pull/1120)
 - `Fix` - Toolbox: Tool's order in Toolbox now saved in accordance with `tools` object keys order [#1073](https://github.com/codex-team/editor.js/issues/1073)

diff --git a/src/components/block/index.ts b/src/components/block/index.ts
@@ -243,24 +243,7 @@ export default class Block {
       return this.cachedInputs;
     }
 
-    const content = this.holder;
-    const allowedInputTypes = ['text', 'password', 'email', 'number', 'search', 'tel', 'url'];
-
-    const selector = '[contenteditable], textarea, input:not([type]), ' +
-      allowedInputTypes.map((type) => `input[type="${type}"]`).join(', ');
-
-    let inputs = _.array(content.querySelectorAll(selector));
-
-    /**
-     * If contenteditable element contains block elements, treat them as inputs.
-     */
-    inputs = inputs.reduce((result, input) => {
-      if ($.isNativeInput(input) || $.containsOnlyInlineElements(input)) {
-        return [...result, input];
-      }
-
-      return [...result, ...$.getDeepestBlockElements(input)];
-    }, []);
+    const inputs = $.findAllInputs(this.holder);
 
     /**
      * If inputs amount was changed we need to check if input index is bigger then inputs array length

diff --git a/src/components/dom.ts b/src/components/dom.ts
@@ -1,3 +1,5 @@
+import * as _ from './utils';
+
 /**
  * DOM manipulations helper
  */
@@ -194,6 +196,35 @@ export default class Dom {
     return el.querySelectorAll(selector);
   }
 
+  /**
+   * Returns CSS selector for all text inputs
+   */
+  public static get allInputsSelector(): string {
+    const allowedInputTypes = ['text', 'password', 'email', 'number', 'search', 'tel', 'url'];
+
+    return '[contenteditable], textarea, input:not([type]), ' +
+      allowedInputTypes.map((type) => `input[type="${type}"]`).join(', ');
+  }
+
+  /**
+   * Find all contendeditable, textarea and editable input elements passed holder contains
+   *
+   * @param holder - element where to find inputs
+   */
+  public static findAllInputs(holder: Element): HTMLElement[] {
+    return _.array(holder.querySelectorAll(Dom.allInputsSelector))
+      /**
+       * If contenteditable element contains block elements, treat them as inputs.
+       */
+      .reduce((result, input) => {
+        if (Dom.isNativeInput(input) || Dom.containsOnlyInlineElements(input)) {
+          return [...result, input];
+        }
+
+        return [...result, ...Dom.getDeepestBlockElements(input)];
+      }, []);
+  }
+
   /**
    * Search for deepest node which is Leaf.
    * Leaf is the vertex that doesn't have any child nodes

diff --git a/src/components/domIterator.ts b/src/components/domIterator.ts
@@ -1,4 +1,6 @@
 import Dom from './dom';
+import * as _ from './utils';
+import SelectionUtils from './selection';
 
 /**
  * Iterator above passed Elements list.
@@ -156,11 +158,11 @@ export default class DomIterator {
       focusedButtonIndex = (this.items.length + focusedButtonIndex - 1) % this.items.length;
     }
 
-    if (Dom.isNativeInput(this.items[focusedButtonIndex])) {
+    if (Dom.canSetCaret(this.items[focusedButtonIndex])) {
       /**
-       * Focus input
+       * Focus input with micro-delay to ensure DOM is updated
        */
-      this.items[focusedButtonIndex].focus();
+      _.delay(() => SelectionUtils.setCursor(this.items[focusedButtonIndex]), 50)();
     }
 
     /**

diff --git a/src/components/flipper.ts b/src/components/flipper.ts
@@ -31,7 +31,7 @@ export interface FlipperOptions {
   /**
    * Optional callback for button click
    */
-  activateCallback?: () => void;
+  activateCallback?: (item: HTMLElement) => void;
 }
 
 /**
@@ -62,7 +62,7 @@ export default class Flipper {
   /**
    * Call back for button click/enter
    */
-  private readonly activateCallback: () => void;
+  private readonly activateCallback: (item: HTMLElement) => void;
 
   /**
    * @class
@@ -73,44 +73,6 @@ export default class Flipper {
     this.allowArrows = typeof options.allowArrows === 'boolean' ? options.allowArrows : true;
     this.iterator = new DomIterator(options.items, options.focusedItemClass);
     this.activateCallback = options.activateCallback;
-
-    /**
-     * Listening all keydowns on document and react on TAB/Enter press
-     * TAB will leaf iterator items
-     * ENTER will click the focused item
-     */
-    document.addEventListener('keydown', (event) => {
-      const isReady = this.isEventReadyForHandling(event);
-
-      if (!isReady) {
-        return;
-      }
-
-      /**
-       * Prevent only used keys default behaviour
-       * (allows to navigate by ARROW DOWN, for example)
-       */
-      if (Flipper.usedKeys.includes(event.keyCode)) {
-        event.preventDefault();
-      }
-
-      switch (event.keyCode) {
-        case _.keyCodes.TAB:
-          this.handleTabPress(event);
-          break;
-        case _.keyCodes.LEFT:
-        case _.keyCodes.UP:
-          this.flipLeft();
-          break;
-        case _.keyCodes.RIGHT:
-        case _.keyCodes.DOWN:
-          this.flipRight();
-          break;
-        case _.keyCodes.ENTER:
-          this.handleEnterPress(event);
-          break;
-      }
-    }, false);
   }
 
   /**
@@ -141,6 +103,13 @@ export default class Flipper {
     if (items) {
       this.iterator.setItems(items);
     }
+
+    /**
+     * Listening all keydowns on document and react on TAB/Enter press
+     * TAB will leaf iterator items
+     * ENTER will click the focused item
+     */
+    document.addEventListener('keydown', this.onKeyDown);
   }
 
   /**
@@ -149,6 +118,8 @@ export default class Flipper {
   public deactivate(): void {
     this.activated = false;
     this.dropCursor();
+
+    document.removeEventListener('keydown', this.onKeyDown);
   }
 
   /**
@@ -168,6 +139,20 @@ export default class Flipper {
     this.flipRight();
   }
 
+  /**
+   * Focuses previous flipper iterator item
+   */
+  public flipLeft(): void {
+    this.iterator.previous();
+  }
+
+  /**
+   * Focuses next flipper iterator item
+   */
+  public flipRight(): void {
+    this.iterator.next();
+  }
+
   /**
    * Drops flipper's iterator cursor
    *
@@ -177,6 +162,44 @@ export default class Flipper {
     this.iterator.dropCursor();
   }
 
+  /**
+   * KeyDown event handler
+   *
+   * @param event - keydown event
+   */
+  private onKeyDown = (event): void => {
+    const isReady = this.isEventReadyForHandling(event);
+
+    if (!isReady) {
+      return;
+    }
+
+    /**
+     * Prevent only used keys default behaviour
+     * (allows to navigate by ARROW DOWN, for example)
+     */
+    if (Flipper.usedKeys.includes(event.keyCode)) {
+      event.preventDefault();
+    }
+
+    switch (event.keyCode) {
+      case _.keyCodes.TAB:
+        this.handleTabPress(event);
+        break;
+      case _.keyCodes.LEFT:
+      case _.keyCodes.UP:
+        this.flipLeft();
+        break;
+      case _.keyCodes.RIGHT:
+      case _.keyCodes.DOWN:
+        this.flipRight();
+        break;
+      case _.keyCodes.ENTER:
+        this.handleEnterPress(event);
+        break;
+    }
+  };
+
   /**
    * This function is fired before handling flipper keycodes
    * The result of this function defines if it is need to be handled or not
@@ -190,7 +213,9 @@ export default class Flipper {
       _.keyCodes.ENTER,
     ];
 
-    if (this.allowArrows) {
+    const isCurrentItemIsFocusedInput = this.iterator.currentItem == document.activeElement;
+
+    if (this.allowArrows && !isCurrentItemIsFocusedInput) {
       handlingKeyCodeList.push(
         _.keyCodes.LEFT,
         _.keyCodes.RIGHT,
@@ -199,11 +224,7 @@ export default class Flipper {
       );
     }
 
-    if (!this.activated || handlingKeyCodeList.indexOf(event.keyCode) === -1) {
-      return false;
-    }
-
-    return true;
+    return this.activated && handlingKeyCodeList.indexOf(event.keyCode) !== -1;
   }
 
   /**
@@ -226,20 +247,6 @@ export default class Flipper {
     }
   }
 
-  /**
-   * Focuses previous flipper iterator item
-   */
-  private flipLeft(): void {
-    this.iterator.previous();
-  }
-
-  /**
-   * Focuses next flipper iterator item
-   */
-  private flipRight(): void {
-    this.iterator.next();
-  }
-
   /**
    * Enter press will click current item if flipper is activated
    *
@@ -255,7 +262,7 @@ export default class Flipper {
     }
 
     if (typeof this.activateCallback === 'function') {
-      this.activateCallback();
+      this.activateCallback(this.iterator.currentItem);
     }
 
     event.preventDefault();

diff --git a/src/components/modules/blockEvents.ts b/src/components/modules/blockEvents.ts
@@ -46,10 +46,6 @@ export default class BlockEvents extends Module {
       case _.keyCodes.TAB:
         this.tabPressed(event);
         break;
-
-      case _.keyCodes.ESC:
-        this.escapePressed(event);
-        break;
     }
   }
 
@@ -158,31 +154,6 @@ export default class BlockEvents extends Module {
     }
   }
 
-  /**
-   * Escape pressed
-   * If some of Toolbar components are opened, then close it otherwise close Toolbar
-   *
-   * @param {Event} event - escape keydown event
-   */
-  public escapePressed(event): void {
-    /**
-     * Clear blocks selection by ESC
-     */
-    this.Editor.BlockSelection.clearSelection(event);
-
-    if (this.Editor.Toolbox.opened) {
-      this.Editor.Toolbox.close();
-    } else if (this.Editor.BlockSettings.opened) {
-      this.Editor.BlockSettings.close();
-    } else if (this.Editor.ConversionToolbar.opened) {
-      this.Editor.ConversionToolbar.close();
-    } else if (this.Editor.InlineToolbar.opened) {
-      this.Editor.InlineToolbar.close();
-    } else {
-      this.Editor.Toolbar.close();
-    }
-  }
-
   /**
    * Add drop target styles
    *

diff --git a/src/components/modules/blockSelection.ts b/src/components/modules/blockSelection.ts
@@ -188,17 +188,20 @@ export default class BlockSelection extends Module {
     this.nativeInputSelected = false;
     this.readyToBlockSelection = false;
 
+    const isKeyboard = reason && (reason instanceof KeyboardEvent);
+    const isPrintableKey = isKeyboard && _.isPrintableKey((reason as KeyboardEvent).keyCode);
+
     /**
      * If reason caused clear of the selection was printable key and any block is selected,
      * remove selected blocks and insert pressed key
      */
-    if (this.anyBlockSelected && reason && reason instanceof KeyboardEvent && _.isPrintableKey(reason.keyCode)) {
+    if (this.anyBlockSelected && isKeyboard && isPrintableKey && !SelectionUtils.isSelectionExists) {
       const indexToInsert = BlockManager.removeSelectedBlocks();
 
       BlockManager.insertInitialBlockAtIndex(indexToInsert, true);
       Caret.setToBlock(BlockManager.currentBlock);
       _.delay(() => {
-        Caret.insertContentAtCaretPosition(reason.key);
+        Caret.insertContentAtCaretPosition((reason as KeyboardEvent).key);
       }, 20)();
     }