From da53f1793dbd854eff9276055dad773991ff66fc Mon Sep 17 00:00:00 2001 From: Omotayo Obafemi Date: Sat, 21 Dec 2024 16:03:00 +0000 Subject: [PATCH] Moved fix to blockEvents --- src/components/modules/blockEvents.ts | 6 ++ src/components/modules/ui.ts | 6 -- .../tests/modules/BlockEvents/Slash.cy.ts | 72 +++++++++++++++++++ test/cypress/tests/modules/Ui.cy.ts | 72 ------------------- 4 files changed, 78 insertions(+), 78 deletions(-) diff --git a/src/components/modules/blockEvents.ts b/src/components/modules/blockEvents.ts index c48bba536..b069be14a 100644 --- 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 index adf8e9648..a4d3baad3 100644 --- a/src/components/modules/ui.ts +++ b/src/components/modules/ui.ts @@ -477,12 +477,6 @@ export default class UI extends Module { * @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 index 0d9db5fc1..5b81b3c8a 100644 --- 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 index 2009c6917..eaf2246a8 100644 --- 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({