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 <omotayo@testlio.com>
Co-authored-by: Peter <specc.dev@gmail.com>

Author: 3 people

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

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;
 

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