fix(inline-tools): inline tools shortcuts now works in read-only mode (#2891)

* fix(inline-tools): inline tools shortcuts now works in read-only mode

* use ubuntu-20.04 instead of latest

Author: neSpecc

.github/workflows/bump-version-on-merge-next.yml

@@ -1,6 +1,6 @@
 name: Bump version on merge
 
-# Caution: 
+# Caution:
 # the use of "pull_request_target" trigger allows to successfully
 # run workflow even when triggered from a fork. The trigger grants
 # access to repo's secrets and gives write permission to the runner.
@@ -17,7 +17,7 @@ jobs:
   # If pull request was merged then we should check for a package version update
   check-for-no-version-changing:
     if: github.event.pull_request.merged == true
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     permissions:
       actions: write
     steps:

.github/workflows/create-a-release-draft.yml

@@ -1,6 +1,6 @@
 name: Create a release draft
 
-# Caution: 
+# Caution:
 # the use of "pull_request_target" trigger allows to successfully
 # run workflow even when triggered from a fork. The trigger grants
 # access to repo's secrets and gives write permission to the runner.
@@ -17,7 +17,7 @@ jobs:
   # If pull request was merged then we should check for a package version update
   check-version-changing:
     if: github.event.pull_request.merged == true
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     permissions:
       actions: write
     steps:
@@ -113,7 +113,7 @@ jobs:
           asset_path: dist/editorjs.umd.js
           asset_name: editorjs.umd.js
           asset_content_type: application/javascript
-          
+
       # Build and upload target Editor.js MJS build to release as artifact
       - name: Upload Release Asset
         uses: actions/upload-release-asset@v1
@@ -123,7 +123,7 @@ jobs:
           upload_url: ${{ steps.create_release.outputs.upload_url }}
           asset_path: dist/editorjs.mjs
           asset_name: editorjs.mjs
-          asset_content_type: application/javascript          
+          asset_content_type: application/javascript
 
       # Send a notification message
       - name: Send a message
@@ -132,4 +132,4 @@ jobs:
           webhook: ${{ secrets.CODEX_BOT_WEBHOOK_FRONTEND }}
           message: '🦥 [Draft release v${{ steps.package.outputs.version }}](${{ steps.create_release.outputs.html_url }}) for package [${{ steps.package.outputs.name }}](${{ steps.package.outputs.npmjs-link }}) has been created. Add changelog and publish it!'
           parse_mode: 'markdown'
-          disable_web_page_preview: true
+          disable_web_page_preview: true

.github/workflows/cypress.yml

@@ -8,7 +8,7 @@ jobs:
       matrix:
         browser: [firefox, chrome, edge]
 
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - uses: actions/setup-node@v3
         with:

.github/workflows/eslint.yml

@@ -5,7 +5,7 @@ on: [pull_request]
 jobs:
   lint:
     name: ESlint
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - uses: actions/checkout@v2
 

.github/workflows/publish-package-to-npm.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   publish:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       # Checkout to target branch
       - uses: actions/checkout@v4
@@ -62,4 +62,4 @@ jobs:
           webhook: ${{ secrets.CODEX_BOT_NOTIFY_EDITORJS_PUBLIC_CHAT }}
           message: '📦 [${{ steps.package.outputs.name }} ${{ steps.package.outputs.version }}](${{ env.GITHUB_LINK }}) was published'
           parse_mode: 'markdown'
-          disable_web_page_preview: true
+          disable_web_page_preview: true

docs/CHANGELOG.md

@@ -3,6 +3,7 @@
 ### 2.31.0
 
 - `New` - Inline tools (those with `isReadOnlySupported` specified) can now be used in read-only mode
+- `New` - Inline tools (those with `isReadOnlySupported` specified) shortcuts now work in read-only mode
 - `Improvement` - Block manager passes target tool config to the `conversionConfig.import` method on conversion
 - `Fix` - Fix selection of first block in read-only initialization with "autofocus=true"
 - `Fix` - Incorrect caret position after blocks merging in Safari

src/components/modules/toolbar/inline.ts

@@ -549,7 +549,10 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
 
         this.popover?.activateItemByName(toolName);
       },
-      on: this.Editor.UI.nodes.redactor,
+      /**
+       * We need to bind shortcut to the document to make it work in read-only mode
+       */
+      on: document,
     });
   }
 

src/components/utils/shortcuts.ts

@@ -28,7 +28,7 @@ export interface ShortcutData {
   /**
    * Element handler should be added for
    */
-  on: HTMLElement;
+  on: HTMLElement | Document;
 }
 
 /**

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

@@ -1,6 +1,6 @@
-
 import Header from '@editorjs/header';
-import type { MenuConfig } from '../../../../types/tools';
+import type { InlineTool, MenuConfig } from '../../../../types/tools';
+import { createEditorWithTextBlocks } from '../../support/utils/createEditorWithTextBlocks';
 
 describe('Inline Toolbar', () => {
   describe('Separators', () => {
@@ -174,4 +174,58 @@ describe('Inline Toolbar', () => {
         .should('have.attr', 'data-item-name', 'test-tool');
     });
   });
+
+  describe('Shortcuts', () => {
+    it('should work in read-only mode', () => {
+      const toolSurround = cy.stub().as('toolSurround');
+
+      /* eslint-disable jsdoc/require-jsdoc */
+      class Marker implements InlineTool {
+        public static isInline = true;
+        public static shortcut = 'CMD+SHIFT+M';
+        public static isReadOnlySupported = true;
+        public render(): MenuConfig {
+          return {
+            icon: 'm',
+            title: 'Marker',
+            onActivate: () => {
+              toolSurround();
+            },
+          };
+        }
+      }
+      /* eslint-enable jsdoc/require-jsdoc */
+
+      createEditorWithTextBlocks([
+        'some text',
+      ], {
+        tools: {
+          marker: Marker,
+        },
+        readOnly: true,
+      });
+
+      cy.get('[data-cy=editorjs]')
+        .find('.ce-paragraph')
+        .selectText('text');
+
+      cy.wait(300);
+
+      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,
+        }));
+      });
+
+      cy.get('@toolSurround').should('have.been.called');
+    });
+  });
 });
+

test/cypress/tests/utils/popover.cy.ts

@@ -881,7 +881,7 @@ describe('Popover', () => {
       .should('exist');
   });
 
-  it.only('shoould support i18n in nested popover', () => {
+  it('shoould support i18n in nested popover', () => {
     /**
      *
      */
@@ -1076,7 +1076,7 @@ describe('Popover', () => {
         .should('exist');
     });
 
-    it.only('should allow to reach nested popover via keyboard', () => {
+    it('should allow to reach nested popover via keyboard', () => {
       cy.createEditor({
         tools: {
           header: {