diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 0f886c5c..295b7367 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -1,5 +1,10 @@ # Changelog +### 2.29.1 + +- `Fix` — Toolbox wont be shown when Slash pressed with along with Shift or Alt +- `Fix` — Toolbox will be opened when Slash pressed in ASCII-capable keyboard layout. + ### 2.29.0 - `New` — Editor Config now has the `style.nonce` attribute that could be used to allowlist editor style tag for Content Security Policy "style-src" diff --git a/package.json b/package.json index a45444db..d00b8af2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@editorjs/editorjs", - "version": "2.29.0", + "version": "2.29.1", "description": "Editor.js — Native JS, based on API and Open Source", "main": "dist/editorjs.umd.js", "module": "dist/editorjs.mjs", diff --git a/src/components/modules/blockEvents.ts b/src/components/modules/blockEvents.ts index ba5ffbed..077a7dc2 100644 --- a/src/components/modules/blockEvents.ts +++ b/src/components/modules/blockEvents.ts @@ -52,13 +52,17 @@ export default class BlockEvents extends Module { case _.keyCodes.TAB: this.tabPressed(event); break; - case _.keyCodes.SLASH: - if (event.ctrlKey || event.metaKey) { - this.commandSlashPressed(); - } else { - this.slashPressed(); - } - break; + } + + /** + * Keyboard-layout independent handling of Slash key + */ + if (event.key === '/' || event.code === 'Slash') { + if (event.ctrlKey || event.metaKey) { + this.commandSlashPressed(); + } else if (!event.shiftKey && !event.altKey) { + this.slashPressed(); + } } } diff --git a/test/cypress/tests/modules/BlockEvents/Slash.cy.ts b/test/cypress/tests/modules/BlockEvents/Slash.cy.ts index 281e3012..fcb78891 100644 --- a/test/cypress/tests/modules/BlockEvents/Slash.cy.ts +++ b/test/cypress/tests/modules/BlockEvents/Slash.cy.ts @@ -23,6 +23,36 @@ describe('Slash keydown', function () { .get('.ce-popover') .should('be.visible'); }); + + [ + '{shift}', + '{alt}', + '{option}', + ].forEach((key) => { + it(`should not open Toolbox if Slash pressed with ${key}`, () => { + cy.createEditor({ + data: { + blocks: [ + { + type: 'paragraph', + data: { + text: '', + }, + }, + ], + }, + }); + + cy.get('[data-cy=editorjs]') + .find('.ce-paragraph') + .click() + .type(`${key}/`); + + cy.get('[data-cy="toolbox"]') + .get('.ce-popover') + .should('not.be.visible'); + }); + }); }); describe('pressed in non-empty block', function () {