fix(slash): do not handle / + shift/alt, support for ascii keyboard

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"

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",

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();
+      }
     }
   }
 

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 () {