refactoring(modules): shortcuts module is util now (#1578)

* (refactoring)shortcuts module is util now * Fix eslint Co-authored-by: Peter Savchenko <specc.dev@gmail.com>
codex-team · Mar 4, 2021 · 2f5da52 · 2f5da52
1 parent 2a2a6f1
commit 2f5da52
Show file tree

Hide file tree

Showing 8 changed files with 202 additions and 118 deletions.
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -16,6 +16,7 @@
 - `Fix` - Fix SanitizerConfig type definition [#1513](https://github.com/codex-team/editor.js/issues/1513)
 - `Refactoring` - The Listeners module now is a util.
 - `Fix` - Editor Config now immutable [#1552](https://github.com/codex-team/editor.js/issues/1552).
+- `Refactoring` - Shortcuts module is util now
 
 ### 2.19.1
 

diff --git a/example/example-multiple.html b/example/example-multiple.html
@@ -42,6 +42,7 @@
 
    <!-- Load Editor.js's Core -->
    <script src="../dist/editor.js" onload="document.getElementById('hint-core').hidden = true"></script>
+   <script src="./tools/header/dist/bundle.js"></script><!-- Header -->
 
    <!-- Initialization -->
    <script>
@@ -50,13 +51,25 @@
       */
      var editor1 = new EditorJS({
        holder: 'editorjs1',
+       tools: {
+         header: {
+           class: Header,
+           shortcut: 'CMD+SHIFT+H'
+         }
+       }
      });
 
      /**
       * Instance #2
       */
       var editor2 = new EditorJS({
        holder: 'editorjs2',
+       tools: {
+         header: {
+           class: Header,
+           shortcut: 'CMD+SHIFT+H'
+         }
+       }
      });
    </script>
  </body>

diff --git a/src/components/modules/blockSelection.ts b/src/components/modules/blockSelection.ts
@@ -9,6 +9,7 @@ import Module from '../__module';
 import Block from '../block';
 import * as _ from '../utils';
 import $ from '../dom';
+import Shortcuts from '../utils/shortcuts';
 
 import SelectionUtils from '../selection';
 import { SanitizerConfig } from '../../../types/configs';
@@ -145,8 +146,6 @@ export default class BlockSelection extends Module {
    * to select all and copy them
    */
   public prepare(): void {
-    const { Shortcuts } = this.Editor;
-
     this.selection = new SelectionUtils();
 
     /**
@@ -181,6 +180,7 @@ export default class BlockSelection extends Module {
 
         this.handleCommandA(event);
       },
+      on: this.Editor.UI.nodes.redactor,
     });
   }
 
@@ -361,10 +361,8 @@ export default class BlockSelection extends Module {
    * De-registers Shortcut CMD+A
    */
   public destroy(): void {
-    const { Shortcuts } = this.Editor;
-
     /** Selection shortcut */
-    Shortcuts.remove('CMD+A');
+    Shortcuts.remove(this.Editor.UI.nodes.redactor, 'CMD+A');
   }
 
   /**

diff --git a/src/components/modules/shortcuts.ts b/src/components/modules/shortcuts.ts
diff --git a/src/components/modules/toolbar/inline.ts b/src/components/modules/toolbar/inline.ts
@@ -6,6 +6,8 @@ import { InlineTool, InlineToolConstructable, ToolConstructable, ToolSettings }
 import Flipper from '../../flipper';
 import I18n from '../../i18n';
 import { I18nInternalNS } from '../../i18n/namespace-internal';
+import Shortcuts from '../../utils/shortcuts';
+import { EditorModules } from '../../../types-internal/editor-modules';
 
 /**
  * Inline Toolbar elements
@@ -87,6 +89,38 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
    */
   private flipper: Flipper = null;
 
+  /**
+   * Internal inline tools: Link, Bold, Italic
+   */
+  private internalTools: {[name: string]: InlineToolConstructable} = {};
+
+  /**
+   * Editor modules setter
+   *
+   * @param {EditorModules} Editor - Editor's Modules
+   */
+  public set state(Editor: EditorModules) {
+    this.Editor = Editor;
+
+    const { Tools } = Editor;
+
+    /**
+     * Set internal inline tools
+     */
+    Object
+      .entries(Tools.internalTools)
+      .filter(([, toolClass]: [string, ToolConstructable | ToolSettings]) => {
+        if (_.isFunction(toolClass)) {
+          return toolClass[Tools.INTERNAL_SETTINGS.IS_INLINE];
+        }
+
+        return (toolClass as ToolSettings).class[Tools.INTERNAL_SETTINGS.IS_INLINE];
+      })
+      .map(([name, toolClass]: [string, InlineToolConstructable | ToolSettings]) => {
+        this.internalTools[name] = _.isFunction(toolClass) ? toolClass : (toolClass as ToolSettings).class;
+      });
+  }
+
   /**
    * Toggles read-only mode
    *
@@ -185,7 +219,13 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
     }
 
     this.nodes.wrapper.classList.remove(this.CSS.inlineToolbarShowed);
-    this.toolsInstances.forEach((toolInstance) => {
+    Array.from(this.toolsInstances.entries()).forEach(([name, toolInstance]) => {
+      const shortcut = this.getToolShortcut(name);
+
+      if (shortcut) {
+        Shortcuts.remove(this.Editor.UI.nodes.redactor, shortcut);
+      }
+
       /**
        * @todo replace 'clear' with 'destroy'
        */
@@ -621,40 +661,7 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
       event.preventDefault();
     });
 
-    /**
-     * Enable shortcuts
-     * Ignore tool that doesn't have shortcut or empty string
-     */
-    const toolSettings = Tools.getToolSettings(toolName);
-
-    let shortcut = null;
-
-    /**
-     * Get internal inline tools
-     */
-    const internalTools: string[] = Object
-      .entries(Tools.internalTools)
-      .filter(([, toolClass]: [string, ToolConstructable | ToolSettings]) => {
-        if (_.isFunction(toolClass)) {
-          return toolClass[Tools.INTERNAL_SETTINGS.IS_INLINE];
-        }
-
-        return (toolClass as ToolSettings).class[Tools.INTERNAL_SETTINGS.IS_INLINE];
-      })
-      .map(([ name ]: [string, InlineToolConstructable | ToolSettings]) => name);
-
-    /**
-     * 1) For internal tools, check public getter 'shortcut'
-     * 2) For external tools, check tool's settings
-     * 3) If shortcut is not set in settings, check Tool's public property
-     */
-    if (internalTools.includes(toolName)) {
-      shortcut = this.inlineTools[toolName][Tools.INTERNAL_SETTINGS.SHORTCUT];
-    } else if (toolSettings && toolSettings[Tools.USER_SETTINGS.SHORTCUT]) {
-      shortcut = toolSettings[Tools.USER_SETTINGS.SHORTCUT];
-    } else if (tool.shortcut) {
-      shortcut = tool.shortcut;
-    }
+    const shortcut = this.getToolShortcut(toolName);
 
     if (shortcut) {
       this.enableShortcuts(tool, shortcut);
@@ -683,14 +690,43 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
     });
   }
 
+  /**
+   * Get shortcut name for tool
+   *
+   * @param toolName — Tool name
+   */
+  private getToolShortcut(toolName): string | void {
+    const { Tools } = this.Editor;
+
+    /**
+     * Enable shortcuts
+     * Ignore tool that doesn't have shortcut or empty string
+     */
+    const toolSettings = Tools.getToolSettings(toolName);
+    const tool = this.toolsInstances.get(toolName);
+
+    /**
+     * 1) For internal tools, check public getter 'shortcut'
+     * 2) For external tools, check tool's settings
+     * 3) If shortcut is not set in settings, check Tool's public property
+     */
+    if (Object.keys(this.internalTools).includes(toolName)) {
+      return this.inlineTools[toolName][Tools.INTERNAL_SETTINGS.SHORTCUT];
+    } else if (toolSettings && toolSettings[Tools.USER_SETTINGS.SHORTCUT]) {
+      return toolSettings[Tools.USER_SETTINGS.SHORTCUT];
+    } else if (tool.shortcut) {
+      return tool.shortcut;
+    }
+  }
+
   /**
    * Enable Tool shortcut with Editor Shortcuts Module
    *
    * @param {InlineTool} tool - Tool instance
    * @param {string} shortcut - shortcut according to the ShortcutData Module format
    */
   private enableShortcuts(tool: InlineTool, shortcut: string): void {
-    this.Editor.Shortcuts.add({
+    Shortcuts.add({
       name: shortcut,
       handler: (event) => {
         const { currentBlock } = this.Editor.BlockManager;
@@ -718,6 +754,7 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
         event.preventDefault();
         this.toolClicked(tool);
       },
+      on: this.Editor.UI.nodes.redactor,
     });
   }
 

diff --git a/src/components/modules/toolbar/toolbox.ts b/src/components/modules/toolbar/toolbox.ts
@@ -6,6 +6,7 @@ import Flipper from '../../flipper';
 import { BlockToolAPI } from '../../block';
 import I18n from '../../i18n';
 import { I18nInternalNS } from '../../i18n/namespace-internal';
+import Shortcuts from '../../utils/shortcuts';
 
 /**
  * HTMLElements used for Toolbox UI
@@ -306,12 +307,13 @@ export default class Toolbox extends Module<ToolboxNodes> {
    * @param {string} shortcut - shortcut according to the ShortcutData Module format
    */
   private enableShortcut(tool: BlockToolConstructable, toolName: string, shortcut: string): void {
-    this.Editor.Shortcuts.add({
+    Shortcuts.add({
       name: shortcut,
       handler: (event: KeyboardEvent) => {
         event.preventDefault();
         this.insertNewBlock(tool, toolName);
       },
+      on: this.Editor.UI.nodes.redactor,
     });
   }
 
@@ -327,7 +329,7 @@ export default class Toolbox extends Module<ToolboxNodes> {
         const shortcut = this.getToolShortcut(toolName, tools[toolName]);
 
         if (shortcut) {
-          this.Editor.Shortcuts.remove(shortcut);
+          Shortcuts.remove(this.Editor.UI.nodes.redactor, shortcut);
         }
       }
     }