issue-705: Leaf BlockSettings and InlineTools via keyboard (#723)

* Do not start multi-block selection on UI elements (#662) * Do not start multi-block selection on UI elements * Do not prevent mousedown event on inline toolbar actions * Remove log * Add comment * Add link to issue closes #646 * Fix loss of pointer (#666) * Fix loss of pointer when click is outside of the editor but selection is inside * Remove log * Update shortcuts module (#685) * Fixed possible grammatical typo (#681) Thanks * Update shortcuts module * update changelog * update * Remove margin top for inline-link icon (#690) * Remove margin top for inline-link icon resolves #674 * Update CHANGELOG.md * Remove unused style * Pull fresh tools * Remove changelog contents from readme (#700) * #665 API to open and close inline-toolbar (#711) * API to open and close inline-toolbar * Fixed documentation * renamed inline -> inline-toolbar * removed dist * reset editor.js * added editor.js bundle * Fixed build error * Null checks on toolbar/inline@open * updated bundle * Improve some comments * Updatd api.md CHANGELOG.md * Change feature to new instead of improvement * leaf buttons: initial * leaf inline toolbar buttons * Allow holderId work with ref on dom element (#710) * done * update types * attempt to simplify code * remove useless helper * revert holderId logic and add holder property * Apply suggestions from code review Co-Authored-By: dimensi <eddimensi@gmail.com> * update holder type on string | HTMLElement * fix typo * add deprecated notice and fix typos * fix wrong compare * fix comments * swap console.log on _.log * update types for editor config * update examples * update docs * update build * leaf inline tools and drop index after click * leaf toolbox and clear active button after activation * debugging blockSettings * Activating Open Collective (#736) Hi, I'm making updates for Open Collective. Either you or a supporter signed this repo up for Open Collective. This pull request adds backers and sponsors from your Open Collective https://opencollective.com/editorjs❤️ It adds two badges at the top to show the latest number of backers and sponsors. It also adds placeholders so that the avatar/logo of new backers/sponsors can automatically be shown without having to update your README.md. [more info](https://github.com/opencollective/opencollective/wiki/Github-banner). See how it looks on this [repo](https://github.com/apex/apex#backers). You can also add a postinstall script to let people know after npm|yarn install that you are welcoming donations (optional). [More info](https://github.com/OpenCollective/opencollective-cli) You can also add a "Donate" button to your website and automatically show your backers and sponsors there with our widgets. Have a look here: https://opencollective.com/widgets P.S: As with any pull request, feel free to comment or suggest changes. The only thing "required" are the placeholders on the README because we believe it's important to acknowledge the people in your community that are contributing (financially or with code!). Thank you for your great contribution to the open source community. You are awesome! 🙌 And welcome to the open collective community! 😊 Come chat with us in the #opensource channel on https://slack.opencollective.com - great place to ask questions and share best practices with other open source sustainers! * Do not install editor.js as dev-dependency (#731) Resolves #730 * Move codex-notifier to dependencies for typescript declarations (#728) * Close inline toolbar after creating new link by pressing ENTER (#722) * Method to clear current selection and close inline toolbar * clearSelection with optional collapsed range * refactored selection.ts * removed experimental function * Update src/components/selection.ts Co-Authored-By: tanmayv <12tanmayvijay@gmail.com> * update version, add changelog * Link Logo Image to homepage (#738) * Update README.md (#744) * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md Co-Authored-By: neSpecc <specc.dev@gmail.com> * Config minHeight option that allows to customize bottom zone (#745) * issue-739: allow Block's editable element selection (#747) * issue-739: allow Block's input selection * little improvements * update Changelog and cache inputs * small fix * delete map file * fix inputs.count condition * Fix typo in example paragraph (#749) * Fix typo * Update example-dev.html * minor release * done * requested changes * production build * update package.json * some improvements * ready for testing * update * ready * requested changes * updates * use setToBlock instead of focus * active -> focused * update * refactor types * fix inline tools flipping * inhancements * rm check for focus at the handleShowingEvent * fix IT closing after second enter * add animation to settings buttons * Click animation * Add changelog * do not patch version
codex-team · May 24, 2019 · 384cd1a · 384cd1a
1 parent 5a443b2
commit 384cd1a
Show file tree

Hide file tree

Showing 11 changed files with 421 additions and 90 deletions.
diff --git a/dist/editor.js b/dist/editor.js
diff --git a/docs/CHANGELOG.md b/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
 

diff --git a/src/components/dom.ts b/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
    */

diff --git a/src/components/modules/blockEvents.ts b/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);
   }
 }