Fix behaviour of inputs editing in block settings

src/components/block.ts

@@ -191,24 +191,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

src/components/dom.ts

@@ -1,3 +1,5 @@
+import * as _ from "./utils";
+
 /**
  * DOM manipulations helper
  */
@@ -194,6 +196,30 @@ export default class Dom {
     return el.querySelectorAll(selector);
   }
 
+  /**
+   * Find all contendeditable, textarea and editable input elements passed holder contains
+   *
+   * @param holder - element where to find inputs
+   */
+  public static findAllInputs(holder: Element): HTMLElement[] {
+    const allowedInputTypes = ['text', 'password', 'email', 'number', 'search', 'tel', 'url'];
+
+    const selector = '[contenteditable], textarea, input:not([type]), ' +
+      allowedInputTypes.map((type) => `input[type="${type}"]`).join(', ');
+
+    return _.array(holder.querySelectorAll(selector))
+      /**
+       * 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

src/components/domIterator.ts

@@ -156,7 +156,8 @@ 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
        */

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,7 @@ export default class Flipper {
       _.keyCodes.ENTER,
     ];
 
-    if (this.allowArrows) {
+    if (this.allowArrows && this.iterator.currentItem !== document.activeElement) {
       handlingKeyCodeList.push(
         _.keyCodes.LEFT,
         _.keyCodes.RIGHT,
@@ -199,11 +222,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 +245,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 +260,7 @@ export default class Flipper {
     }
 
     if (typeof this.activateCallback === 'function') {
-      this.activateCallback();
+      this.activateCallback(this.iterator.currentItem);
     }
 
     event.preventDefault();

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,30 +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

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.exists) {
       const indexToInsert = BlockManager.removeSelectedBlocks();
 
       BlockManager.insertInitialBlockAtIndex(indexToInsert, true);
       Caret.setToBlock(BlockManager.currentBlock);
       _.delay(() => {
-        Caret.insertContentAtCaretPosition(reason.key);
+        Caret.insertContentAtCaretPosition((reason as KeyboardEvent).key);
       }, 20)();
     }