diff --git a/.github/workflows/bump-version-on-merge-next.yml b/.github/workflows/bump-version-on-merge-next.yml index 28c346885..2a592e3c5 100644 --- a/.github/workflows/bump-version-on-merge-next.yml +++ b/.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: diff --git a/.github/workflows/create-a-release-draft.yml b/.github/workflows/create-a-release-draft.yml index 176fe2858..ec728b8ac 100644 --- a/.github/workflows/create-a-release-draft.yml +++ b/.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 \ No newline at end of file + disable_web_page_preview: true diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml index 766075563..517180066 100644 --- a/.github/workflows/cypress.yml +++ b/.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: diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml index 47d1e3a9d..1db62120c 100644 --- a/.github/workflows/eslint.yml +++ b/.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 diff --git a/.github/workflows/publish-package-to-npm.yml b/.github/workflows/publish-package-to-npm.yml index 41d5131e0..b6ec6935e 100644 --- a/.github/workflows/publish-package-to-npm.yml +++ b/.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 \ No newline at end of file + disable_web_page_preview: true diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 4863ffbe0..5e7bffe1f 100644 --- a/docs/CHANGELOG.md +++ b/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 diff --git a/src/components/modules/toolbar/inline.ts b/src/components/modules/toolbar/inline.ts index 2e596203a..5aa5f7dab 100644 --- a/src/components/modules/toolbar/inline.ts +++ b/src/components/modules/toolbar/inline.ts @@ -549,7 +549,10 @@ export default class InlineToolbar extends Module { 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, }); } diff --git a/src/components/utils/shortcuts.ts b/src/components/utils/shortcuts.ts index 12adf10c1..8cf51ff93 100644 --- a/src/components/utils/shortcuts.ts +++ b/src/components/utils/shortcuts.ts @@ -28,7 +28,7 @@ export interface ShortcutData { /** * Element handler should be added for */ - on: HTMLElement; + on: HTMLElement | Document; } /** diff --git a/test/cypress/tests/ui/InlineToolbar.cy.ts b/test/cypress/tests/ui/InlineToolbar.cy.ts index eca588172..5c337b196 100644 --- a/test/cypress/tests/ui/InlineToolbar.cy.ts +++ b/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'); + }); + }); }); + diff --git a/test/cypress/tests/utils/popover.cy.ts b/test/cypress/tests/utils/popover.cy.ts index 28ae3001f..5d42a492f 100644 --- a/test/cypress/tests/utils/popover.cy.ts +++ b/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: {