Bug Fix For When "/" Overides external text (#2894)

* Bug Fix For When / Overides external text * Moved fix to blockEvents * Moved fix to blockEvents * Moved fix to blockEvents * Refactored test to simulate behaviour * Added fix to change log * Refactored test to mimick exact behaviour of the bug --------- Co-authored-by: Omotayo Obafemi <[email protected]> Co-authored-by: Peter <[email protected]>
codex-team · Jan 8, 2025 · d950a11 · d950a11
1 parent c9a6cfb
commit d950a11
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 0 deletions.
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -11,6 +11,7 @@
 - `Improvement` - The current block reference will be updated in read-only mode when blocks are clicked
 - `Fix` - codex-notifier and codex-tooltip moved from devDependencies to dependencies in package.json to solve type errors
 - `Fix` - Handle whitespace input in empty placeholder elements to prevent caret from moving unexpectedly to the end of the placeholder
+- `Fix` - Fix when / overides selected text outside of the editor
 - `DX` - Tools submodules removed from the repository
 
 ### 2.30.7

diff --git a/src/components/modules/blockEvents.ts b/src/components/modules/blockEvents.ts
@@ -237,6 +237,12 @@ export default class BlockEvents extends Module {
    * @param event - keydown
    */
   private slashPressed(event: KeyboardEvent): void {
+    const wasEventTriggeredInsideEditor = this.Editor.UI.nodes.wrapper.contains(event.target as Node);
+
+    if (!wasEventTriggeredInsideEditor) {
+      return;
+    }
+
     const currentBlock = this.Editor.BlockManager.currentBlock;
     const canOpenToolbox = currentBlock.isEmpty;
 

diff --git a/test/cypress/tests/modules/BlockEvents/Slash.cy.ts b/test/cypress/tests/modules/BlockEvents/Slash.cy.ts
@@ -92,6 +92,60 @@ describe('Slash keydown', function () {
         .should('eq', 'Hello/');
     });
   });
+
+  describe('pressed outside editor', function () {
+    it('should not modify any text outside editor when text block is selected', () => {
+      cy.createEditor({
+        data: {
+          blocks: [
+            {
+              type: 'paragraph',
+              data: {
+                text: '',
+              },
+            },
+          ],
+        },
+      });
+
+      cy.document().then((doc) => {
+        const title = doc.querySelector('h1');
+
+        if (title) {
+          title.setAttribute('data-cy', 'page-title');
+        }
+      });
+
+      // Step 1
+      // Click on the plus button and select the text option
+      cy.get('[data-cy=editorjs]')
+        .find('.ce-paragraph')
+        .click();
+      cy.get('[data-cy=editorjs]')
+        .find('.ce-toolbar__plus')
+        .click({ force: true });
+      cy.get('[data-cy="toolbox"] .ce-popover__container')
+        .contains('Text')
+        .click();
+
+      // Step 2
+      // Select the 'Editor.js test page' text
+      cy.get('[data-cy=page-title]')
+        .invoke('attr', 'contenteditable', 'true')
+        .click()
+        .type('{selectall}')
+        .invoke('removeAttr', 'contenteditable');
+
+      // Step 3
+      // Press the Slash key
+      cy.get('[data-cy=page-title]')
+        .trigger('keydown', { key: '/',
+          code: 'Slash',
+          which: 191 });
+
+      cy.get('[data-cy=page-title]').should('have.text', 'Editor.js test page');
+    });
+  });
 });
 
 describe('CMD+Slash keydown', function () {