issue-705: Leaf BlockSettings and InlineTools via keyboard

docs/CHANGELOG.md

@@ -4,6 +4,7 @@
 ### 2.14
 
 - `Fix` *Config* — User config now has higher priority than internal settings
+- `New` — Ability to work with Block Actions and Inline Toolbar from the keyboard by Tab.
 
 ### 2.13
 

src/components/dom.ts

@@ -520,6 +520,80 @@ export default class Dom {
   }
 
   /**
+   * Leafs nodes inside the target list from active element
+   *
+   * @param {HTMLElement[]} nodeList - target list of nodes
+   * @param {number} activeIndex — index of active node. By default it must be -1
+   * @param {string} direction - leaf direction. Can be 'left' or 'right'
+   * @param {string} activeCSSClass - css class that will be added
+   *
+   * @return {Number} index of active node
+   */
+  public static leafNodesAndReturnIndex(nodeList: HTMLElement[], activeIndex: number, direction: string, activeCSSClass: string): number {
+    /**
+     * If activeButtonIndex === -1 then we have no chosen Tool in Toolbox
+     */
+    if (activeIndex === -1) {
+      /**
+       * Normalize "previous" Tool index depending on direction.
+       * We need to do this to highlight "first" Tool correctly
+       *
+       * Order of Tools: [0] [1] ... [n - 1]
+       *   [0 = n] because of: n % n = 0 % n
+       *
+       * Direction 'right': for [0] the [n - 1] is a previous index
+       *   [n - 1] -> [0]
+       *
+       * Direction 'left': for [n - 1] the [0] is a previous index
+       *   [n - 1] <- [0]
+       *
+       * @type {number}
+       */
+      activeIndex = direction === 'right' ? -1 : 0;
+    } else {
+      /**
+       * If we have chosen Tool then remove highlighting
+       */
+      nodeList[activeIndex].classList.remove(activeCSSClass);
+    }
+
+    /**
+     * Count index for next Tool
+     */
+    if (direction === 'right') {
+      /**
+       * If we go right then choose next (+1) Tool
+       * @type {number}
+       */
+      activeIndex = (activeIndex + 1) % nodeList.length;
+    } else {
+      /**
+       * If we go left then choose previous (-1) Tool
+       * Before counting module we need to add length before because of "The JavaScript Modulo Bug"
+       * @type {number}
+       */
+      activeIndex = (nodeList.length + activeIndex - 1) % nodeList.length;
+    }
+
+    if (Dom.isNativeInput(nodeList[activeIndex])) {
+      /**
+       * Focus input
+       */
+      nodeList[activeIndex].focus();
+    }
+
+    /**
+     * Highlight new chosen Tool
+     */
+    nodeList[activeIndex].classList.add(activeCSSClass);
+
+    /**
+     * Return Active index
+     */
+    return activeIndex;
+  }
+
+  /*
    * Helper for get holder from {string} or return HTMLElement
    * @param element
    */

src/components/modules/blockEvents.ts

@@ -3,8 +3,10 @@
  */
 import Module from '../__module';
 import _ from '../utils';
+import SelectionUtils from '../selection';
 
 export default class BlockEvents extends Module {
+
   /**
    * All keydowns on Block
    * @param {KeyboardEvent} event - keydown
@@ -62,7 +64,12 @@ export default class BlockEvents extends Module {
       return;
     }
 
-    this.Editor.Toolbar.close();
+    /**
+     * Close Toolbar on any keypress except TAB, because TAB leafs Tools
+     */
+    if (event.keyCode !== _.keyCodes.TAB) {
+      this.Editor.Toolbar.close();
+    }
 
     const cmdKey = event.ctrlKey || event.metaKey;
     const altKey = event.altKey;
@@ -110,6 +117,10 @@ export default class BlockEvents extends Module {
 
     const {currentBlock} = this.Editor.BlockManager;
 
+    if (!currentBlock) {
+      return;
+    }
+
     /** Prevent Default behaviour */
     event.preventDefault();
     event.stopPropagation();
@@ -119,31 +130,77 @@ export default class BlockEvents extends Module {
       direction = shiftKey ? 'left' : 'right';
 
     /**
-     * Don't show Plus and Toolbox near not-inital Tools
+     * For empty Blocks we show Plus button via Toobox only for initial Blocks
      */
-    if (!this.Editor.Tools.isInitial(currentBlock.tool)) {
-      return;
-    }
-
-    if (currentBlock.isEmpty) {
+    if (this.Editor.Tools.isInitial(currentBlock.tool) && currentBlock.isEmpty) {
+      /**
+       * Work with Toolbox
+       * ------------------
+       *
+       * If Toolbox is not open, then just open it and show plus button
+       * Next Tab press will leaf Toolbox Tools
+       */
       if (!this.Editor.Toolbar.opened) {
         this.Editor.Toolbar.open(false , false);
         this.Editor.Toolbar.plusButton.show();
+      } else {
+        this.Editor.Toolbox.leaf(direction);
       }
 
       this.Editor.Toolbox.open();
-    }
+    } else if (!currentBlock.isEmpty && !SelectionUtils.isCollapsed) {
+      /**
+       * Work with Inline Tools
+       * -----------------------
+       *
+       * If InlineToolbar is not open, just open it and focus first button
+       * Next Tab press will leaf InlineToolbar Tools
+       */
+      if (this.Editor.InlineToolbar.opened) {
+        this.Editor.InlineToolbar.leaf(direction);
+      }
+    } else {
+      /**
+       * Open Toolbar and show BlockSettings
+       */
+      if (!this.Editor.Toolbar.opened) {
+        this.Editor.BlockManager.currentBlock.focused = true;
+        this.Editor.Toolbar.open(true, false);
+        this.Editor.Toolbar.plusButton.hide();
+      }
 
-    if (this.Editor.Toolbox.opened) {
-      this.Editor.Toolbox.leaf(direction);
+      /**
+       * Work with Block Tunes
+       * ----------------------
+       *
+       * If BlockSettings is not open, then open BlockSettings
+       * Next Tab press will leaf Settings Buttons
+       */
+      if (!this.Editor.BlockSettings.opened) {
+        this.Editor.BlockSettings.open();
+      }
+
+      this.Editor.BlockSettings.leaf(direction);
     }
   }
 
   /**
    * Escape pressed
-   * @param event
+   * If some of Toolbar components are opened, then close it otherwise close Toolbar
+   *
+   * @param {Event} event
    */
-  public escapePressed(event): void { }
+  public escapePressed(event): void {
+    if (this.Editor.Toolbox.opened) {
+      this.Editor.Toolbox.close();
+    } else if (this.Editor.BlockSettings.opened) {
+      this.Editor.BlockSettings.close();
+    } else if (this.Editor.InlineToolbar.opened) {
+      this.Editor.InlineToolbar.close();
+    } else {
+      this.Editor.Toolbar.close();
+    }
+  }
 
   /**
    * Add drop target styles
@@ -231,18 +288,31 @@ export default class BlockEvents extends Module {
      * Don't handle Enter keydowns when Tool sets enableLineBreaks to true.
      * Uses for Tools like <code> where line breaks should be handled by default behaviour.
      */
-    if (tool && tool[this.Editor.Tools.apiSettings.IS_ENABLED_LINE_BREAKS]) {
+    if (tool
+      && tool[this.Editor.Tools.apiSettings.IS_ENABLED_LINE_BREAKS]
+      && !this.Editor.BlockSettings.opened
+      && !this.Editor.InlineToolbar.opened) {
       return;
     }
 
     if (this.Editor.Toolbox.opened && this.Editor.Toolbox.getActiveTool) {
       event.preventDefault();
       event.stopPropagation();
       event.stopImmediatePropagation();
+
       this.Editor.Toolbox.toolButtonActivate(event, this.Editor.Toolbox.getActiveTool);
       return;
     }
 
+    if (this.Editor.InlineToolbar.opened && this.Editor.InlineToolbar.focusedButton) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+
+      this.Editor.InlineToolbar.focusedButton.click();
+      return;
+    }
+
     /**
      * Allow to create linebreaks by Shift+Enter
      */
@@ -441,8 +511,15 @@ export default class BlockEvents extends Module {
    */
   private needToolbarClosing(event) {
     const toolboxItemSelected = (event.keyCode === _.keyCodes.ENTER && this.Editor.Toolbox.opened),
-      flippingToolboxItems = event.keyCode === _.keyCodes.TAB;
+      blockSettingsItemSelected = (event.keyCode === _.keyCodes.ENTER && this.Editor.BlockSettings.opened),
+      flippingToolbarItems = event.keyCode === _.keyCodes.TAB;
 
-    return !(event.shiftKey || flippingToolboxItems || toolboxItemSelected);
+    /**
+     * Do not close Toolbar in cases:
+     * 1. ShiftKey pressed (or combination with shiftKey)
+     * 2. When Toolbar is opened and Tab leafs its Tools
+     * 3. When Toolbar's component is opened and some its item selected
+     */
+    return !(event.shiftKey || flippingToolbarItems || toolboxItemSelected || blockSettingsItemSelected);
   }
 }