Fix inline shortcut registration failure when multiple EditorJS instances share a page

docs/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### 2.31.7
+
+- `Fix` - Multiple EditorJS instances on the same page now properly register inline tool shortcuts
+
 ### 2.31.6
 
 - `Fix` - Widen `sanitize` type on `BlockTool` and `BaseToolConstructable` to accept per-field `SanitizerConfig`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.31.6",
+  "version": "2.31.7",
   "description": "Editor.js — open source block-style WYSIWYG editor with JSON output",
   "main": "dist/editorjs.umd.js",
   "module": "dist/editorjs.mjs",

src/components/modules/toolbar/inline.ts

@@ -110,7 +110,7 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
       const shortcut = this.getToolShortcut(tool.name);
 
       if (shortcut !== undefined) {
-        Shortcuts.remove(this.Editor.UI.nodes.redactor, shortcut);
+        Shortcuts.remove(document, shortcut);
       }
 
       /**

src/components/utils/shortcuts.ts

@@ -41,24 +41,16 @@ class Shortcuts {
   /**
    * All registered shortcuts
    *
-   * @type {Map<Element, Shortcut[]>}
+   * @type {Map<HTMLElement | Document, Shortcut[]>}
    */
-  private registeredShortcuts: Map<Element, Shortcut[]> = new Map();
+  private registeredShortcuts: Map<HTMLElement | Document, Shortcut[]> = new Map();
 
   /**
    * Register shortcut
    *
    * @param shortcut - shortcut options
    */
   public add(shortcut: ShortcutData): void {
-    const foundShortcut = this.findShortcut(shortcut.on, shortcut.name);
-
-    if (foundShortcut) {
-      throw Error(
-        `Shortcut ${shortcut.name} is already registered for ${shortcut.on}. Please remove it before add a new handler.`
-      );
-    }
-
     const newShortcut = new Shortcut({
       name: shortcut.name,
       on: shortcut.on,
@@ -75,7 +67,7 @@ class Shortcuts {
    * @param element - Element shortcut is set for
    * @param name - shortcut name
    */
-  public remove(element: Element, name: string): void {
+  public remove(element: HTMLElement | Document, name: string): void {
     const shortcut = this.findShortcut(element, name);
 
     if (!shortcut) {
@@ -104,7 +96,7 @@ class Shortcuts {
    * @param shortcut - shortcut name
    * @returns {number} index - shortcut index if exist
    */
-  private findShortcut(element: Element, shortcut: string): Shortcut | void {
+  private findShortcut(element: HTMLElement | Document, shortcut: string): Shortcut | void {
     const shortcuts = this.registeredShortcuts.get(element) || [];
 
     return shortcuts.find(({ name }) => name === shortcut);

test/cypress/tests/ui/InlineToolbar.cy.ts

@@ -176,6 +176,96 @@ describe('Inline Toolbar', () => {
   });
 
   describe('Shortcuts', () => {
+    it('should activate the focused editor\'s tool when shortcut is pressed with multiple instances on the page', () => {
+      const toolActivated1 = cy.stub().as('toolActivated1');
+      const toolActivated2 = cy.stub().as('toolActivated2');
+
+      /* eslint-disable jsdoc/require-jsdoc */
+      class Marker1 implements InlineTool {
+        public static isInline = true;
+        public static shortcut = 'CMD+SHIFT+M';
+        public render(): MenuConfig {
+          return {
+            icon: 'm',
+            title: 'Marker',
+            onActivate: () => { toolActivated1(); },
+          };
+        }
+      }
+      class Marker2 implements InlineTool {
+        public static isInline = true;
+        public static shortcut = 'CMD+SHIFT+M';
+        public render(): MenuConfig {
+          return {
+            icon: 'm',
+            title: 'Marker',
+            onActivate: () => { toolActivated2(); },
+          };
+        }
+      }
+      /* eslint-enable jsdoc/require-jsdoc */
+
+      /** Create first editor */
+      cy.createEditor({
+        data: {
+          blocks: [ { type: 'paragraph', data: { text: 'First editor text' } } ],
+        },
+        tools: { marker: Marker1 },
+      });
+
+      /** Create second editor with a different holder */
+      cy.window().then((win) => {
+        const holder = win.document.createElement('div');
+
+        holder.id = 'editorjs2';
+        holder.dataset.cy = 'editorjs2';
+        win.document.body.appendChild(holder);
+
+        return new Promise<void>((resolve) => {
+          const editor2 = new win.EditorJS({
+            holder: 'editorjs2',
+            data: {
+              blocks: [ { type: 'paragraph', data: { text: 'Second editor text' } } ],
+            },
+            tools: { marker: Marker2 },
+          });
+
+          editor2.isReady.then(() => resolve());
+        });
+      });
+
+      /** Select text in first editor to open its inline toolbar and register its shortcuts */
+      cy.get('[data-cy=editorjs]')
+        .find('.ce-paragraph')
+        .selectText('editor');
+
+      /** Select text in second editor — closes the first editor's toolbar and opens the second's */
+      cy.get('[data-cy=editorjs2]')
+        .find('.ce-paragraph')
+        .selectText('editor');
+
+      /** Wait for the second editor's inline toolbar to be visible before dispatching the shortcut */
+      cy.get('[data-cy=editorjs2] [data-cy="inline-toolbar"] .ce-popover__container')
+        .should('be.visible');
+
+      cy.document().then((doc) => {
+        doc.dispatchEvent(new KeyboardEvent('keydown', {
+          bubbles: true,
+          cancelable: true,
+          key: 'M',
+          code: 'KeyM',
+          keyCode: 77,
+          which: 77,
+          metaKey: true,
+          shiftKey: true,
+        }));
+      });
+
+      /** Second editor's shortcut should fire, first editor's should not */
+      cy.get('@toolActivated2').should('have.been.called');
+      cy.get('@toolActivated1').should('not.have.been.called');
+    });
+
     it('should work in read-only mode', () => {
       const toolSurround = cy.stub().as('toolSurround');