Moved fix to blockEvents

codex-team · Dec 21, 2024 · da53f17 · da53f17
1 parent 5a05cc6
commit da53f17
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 78 deletions.
diff --git a/src/components/modules/blockEvents.ts b/src/components/modules/blockEvents.ts
@@ -238,6 +238,12 @@ export default class BlockEvents extends Module {
    */
   private slashPressed(event: KeyboardEvent): void {
     const currentBlock = this.Editor.BlockManager.currentBlock;
+    const wasEventTriggeredInsideEditor = this.Editor.UI.nodes.wrapper.contains(event.target as Node);
+
+    if (!wasEventTriggeredInsideEditor || !currentBlock) {
+      return;
+    }
+
     const canOpenToolbox = currentBlock.isEmpty;
 
     /**

diff --git a/src/components/modules/ui.ts b/src/components/modules/ui.ts
@@ -477,12 +477,6 @@ export default class UI extends Module<UINodes> {
    * @param {KeyboardEvent} event - keyboard event
    */
   private documentKeydown(event: KeyboardEvent): void {
-    const wasEventTriggeredInsideEditor = this.nodes.wrapper.contains(event.target as Node);
-
-    if (!wasEventTriggeredInsideEditor && !this.someToolbarOpened) {
-      return;
-    }
-
     switch (event.keyCode) {
       case _.keyCodes.ENTER:
         this.enterPressed(event);

diff --git a/test/cypress/tests/modules/BlockEvents/Slash.cy.ts b/test/cypress/tests/modules/BlockEvents/Slash.cy.ts
@@ -92,6 +92,78 @@ describe('Slash keydown', function () {
         .should('eq', 'Hello/');
     });
   });
+
+  describe('pressed outside editor', function () {
+    it('should not make any changes when target is outside editor', function () {
+      // Create editor with a paragraph block
+      cy.createEditor({
+        data: {
+          blocks: [
+            {
+              type: 'paragraph',
+              data: {
+                text: 'Editor content',
+              },
+            },
+          ],
+        },
+      });
+
+      // Create a contenteditable div outside the editor
+      cy.get('[data-cy=editorjs]')
+        .parent()
+        .then(($parent) => {
+          const outsideDiv = document.createElement('div');
+
+          outsideDiv.contentEditable = 'true';
+          outsideDiv.textContent = 'Text outside editor';
+          outsideDiv.setAttribute('data-cy', 'outside-editor');
+          $parent.append(outsideDiv);
+        });
+
+      // Select text outside editor and press slash
+      cy.get('[data-cy=outside-editor]')
+        .type('{selectall}')  // Select all text in the outside div
+        .trigger('keydown', { key: '/' });  // Trigger slash key
+
+      // Verify the text outside editor wasn't changed
+      cy.get('[data-cy=outside-editor]')
+        .should('have.text', 'Text outside editor');
+
+      // Verify editor content wasn't affected
+      cy.get('[data-cy=editorjs]')
+        .find('.ce-paragraph')
+        .should('have.text', 'Editor content');
+    });
+
+    it('should make changes when target is inside editor', function () {
+      // Create editor with a paragraph block
+      cy.createEditor({
+        data: {
+          blocks: [
+            {
+              type: 'paragraph',
+              data: {
+                text: 'Editor content',
+              },
+            },
+          ],
+        },
+      });
+
+      // Select text inside editor and press slash
+      cy.get('[data-cy=editorjs]')
+        .find('.ce-paragraph')
+        .click()
+        .type('{selectall}')  // Select all text in the paragraph
+        .type('/');  // Type slash directly instead of triggering keydown
+
+      // Verify the text inside editor was changed
+      cy.get('[data-cy=editorjs]')
+        .find('.ce-paragraph')
+        .should('have.text', '/');
+    });
+  });
 });
 
 describe('CMD+Slash keydown', function () {

diff --git a/test/cypress/tests/modules/Ui.cy.ts b/test/cypress/tests/modules/Ui.cy.ts
@@ -3,78 +3,6 @@ import type EditorJS from '../../../../types/index';
 
 describe('Ui module', function () {
   describe('documentKeydown', function () {
-    describe('Events outside editor', function () {
-      it('should ignore keyboard events when target is outside editor', function () {
-        // Create editor with a paragraph block
-        cy.createEditor({
-          data: {
-            blocks: [
-              {
-                type: 'paragraph',
-                data: {
-                  text: 'Editor content',
-                },
-              },
-            ],
-          },
-        });
-
-        // Create a contenteditable div outside the editor
-        cy.get('[data-cy=editorjs]')
-          .parent()
-          .then(($parent) => {
-            const outsideDiv = document.createElement('div');
-
-            outsideDiv.contentEditable = 'true';
-            outsideDiv.textContent = 'Text outside editor';
-            outsideDiv.setAttribute('data-cy', 'outside-editor');
-            $parent.append(outsideDiv);
-          });
-
-        // Select text outside editor and press slash
-        cy.get('[data-cy=outside-editor]')
-          .type('{selectall}')  // Select all text in the outside div
-          .trigger('keydown', { key: '/' });  // Trigger slash key
-
-        // Verify the text outside editor wasn't changed
-        cy.get('[data-cy=outside-editor]')
-          .should('have.text', 'Text outside editor');
-
-        // Verify editor content wasn't affected
-        cy.get('[data-cy=editorjs]')
-          .find('.ce-paragraph')
-          .should('have.text', 'Editor content');
-      });
-
-      it('should handle keyboard events when target is inside editor', function () {
-        // Create editor with a paragraph block
-        cy.createEditor({
-          data: {
-            blocks: [
-              {
-                type: 'paragraph',
-                data: {
-                  text: 'Editor content',
-                },
-              },
-            ],
-          },
-        });
-
-        // Select text inside editor and press slash
-        cy.get('[data-cy=editorjs]')
-          .find('.ce-paragraph')
-          .click()
-          .type('{selectall}')  // Select all text in the paragraph
-          .type('/');  // Type slash directly instead of triggering keydown
-
-        // Verify the text inside editor was changed
-        cy.get('[data-cy=editorjs]')
-          .find('.ce-paragraph')
-          .should('have.text', '/');
-      });
-    });
-
     describe('Backspace', function () {
       it('should remove selected blocks', function () {
         cy.createEditor({