From b11ab5b3bfb955a1c815ddaa2a215b092bfaf03d Mon Sep 17 00:00:00 2001 From: Peter Savchenko Date: Wed, 26 Feb 2025 22:32:30 +0300 Subject: [PATCH 1/6] fix: prevent flipper navigation when shift key is pressed --- src/components/flipper.ts | 10 ++++++ src/components/modules/toolbar/inline.ts | 2 ++ src/components/modules/ui.ts | 2 ++ test/cypress/tests/utils/flipper.cy.ts | 44 ++++++++++++++++++++++-- 4 files changed, 55 insertions(+), 3 deletions(-) diff --git a/src/components/flipper.ts b/src/components/flipper.ts index 516e2b620..5b3935648 100644 --- a/src/components/flipper.ts +++ b/src/components/flipper.ts @@ -206,6 +206,16 @@ export default class Flipper { return; } + const isShiftKey = event.shiftKey; + + /** + * If shift key is pressed, do nothing + * Allows to select next/prev lines of text using keyboard + */ + if (isShiftKey === true) { + return; + } + /** * Prevent only used keys default behaviour * (allows to navigate by ARROW DOWN, for example) diff --git a/src/components/modules/toolbar/inline.ts b/src/components/modules/toolbar/inline.ts index 5aa5f7dab..77aa74f51 100644 --- a/src/components/modules/toolbar/inline.ts +++ b/src/components/modules/toolbar/inline.ts @@ -102,6 +102,8 @@ export default class InlineToolbar extends Module { * Hides Inline Toolbar */ public close(): void { + console.warn('close'); + if (!this.opened) { return; } diff --git a/src/components/modules/ui.ts b/src/components/modules/ui.ts index a4d3baad3..783f2cf8b 100644 --- a/src/components/modules/ui.ts +++ b/src/components/modules/ui.ts @@ -477,6 +477,8 @@ export default class UI extends Module { * @param {KeyboardEvent} event - keyboard event */ private documentKeydown(event: KeyboardEvent): void { + console.log('documentKeydown', event); + switch (event.keyCode) { case _.keyCodes.ENTER: this.enterPressed(event); diff --git a/test/cypress/tests/utils/flipper.cy.ts b/test/cypress/tests/utils/flipper.cy.ts index 114a38e1e..8c214e9a5 100644 --- a/test/cypress/tests/utils/flipper.cy.ts +++ b/test/cypress/tests/utils/flipper.cy.ts @@ -46,10 +46,10 @@ class SomePlugin { } describe('Flipper', () => { - it('should prevent plugins event handlers from being called while keyboard navigation', () => { - const ARROW_DOWN_KEY_CODE = 40; - const ENTER_KEY_CODE = 13; + const ARROW_DOWN_KEY_CODE = 40; + const ENTER_KEY_CODE = 13; + it('should prevent plugins event handlers from being called while keyboard navigation', () => { const sampleText = 'sample text'; cy.createEditor({ @@ -101,4 +101,42 @@ describe('Flipper', () => { expect(SomePlugin.pluginInternalKeydownHandler).to.have.not.been.called; }); + + it.only('should not flip when shift key is pressed', () => { + cy.createEditor({ + data: { + blocks: [ + { + type: 'paragraph', + data: { + text: 'Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor\'s Core.', + }, + }, + ], + }, + autofocus: true, + }); + + cy.get('[data-cy=editorjs]') + .get('.ce-paragraph') + .as('paragraph') + .selectTextByOffset([0, 10]) + .wait(200) + .type('{shift}{downArrow}'); + + // .trigger('keydown', { keyCode: ARROW_DOWN_KEY_CODE, + // shiftKey: true }) + // .trigger('keydown', { keyCode: ARROW_DOWN_KEY_CODE, + // shiftKey: true }); + + // eslint-disable-next-line cypress/require-data-selectors + cy.get('[data-cy="inline-toolbar"]') + .get('.ce-popover--opened') + .as('popover') + .should('exist'); + + cy.get('@popover') + .get('.ce-popover-item--focused') + .should('not.exist'); + }); }); From 3e33808d1488b2628d5f8ecdd4078b6f51f0cc1e Mon Sep 17 00:00:00 2001 From: Peter Savchenko Date: Wed, 26 Feb 2025 22:33:24 +0300 Subject: [PATCH 2/6] rm logs --- src/components/modules/toolbar/inline.ts | 2 -- src/components/modules/ui.ts | 2 -- 2 files changed, 4 deletions(-) diff --git a/src/components/modules/toolbar/inline.ts b/src/components/modules/toolbar/inline.ts index 77aa74f51..5aa5f7dab 100644 --- a/src/components/modules/toolbar/inline.ts +++ b/src/components/modules/toolbar/inline.ts @@ -102,8 +102,6 @@ export default class InlineToolbar extends Module { * Hides Inline Toolbar */ public close(): void { - console.warn('close'); - if (!this.opened) { return; } diff --git a/src/components/modules/ui.ts b/src/components/modules/ui.ts index 783f2cf8b..a4d3baad3 100644 --- a/src/components/modules/ui.ts +++ b/src/components/modules/ui.ts @@ -477,8 +477,6 @@ export default class UI extends Module { * @param {KeyboardEvent} event - keyboard event */ private documentKeydown(event: KeyboardEvent): void { - console.log('documentKeydown', event); - switch (event.keyCode) { case _.keyCodes.ENTER: this.enterPressed(event); From 62d9dba890719e8ba7e0128de390b7e478fac3e8 Mon Sep 17 00:00:00 2001 From: Peter Savchenko Date: Sat, 8 Mar 2025 12:56:03 +0300 Subject: [PATCH 3/6] feat: improve line selection with Shift + Up/Down --- docs/CHANGELOG.md | 2 ++ src/components/flipper.ts | 2 +- test/cypress/tests/utils/flipper.cy.ts | 12 +++++------- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index e3e4dd9d7..82aab6541 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -14,6 +14,8 @@ - `Fix` - Fix the memory leak issue in `Shortcuts` class - `Fix` - Fix when / overides selected text outside of the editor - `DX` - Tools submodules removed from the repository +- `Improvement` - Shift + Down/Up will allow to select next/previous line instead of Inline Toolbar flipping + ### 2.30.7 diff --git a/src/components/flipper.ts b/src/components/flipper.ts index 5b3935648..5b6e04359 100644 --- a/src/components/flipper.ts +++ b/src/components/flipper.ts @@ -199,7 +199,7 @@ export default class Flipper { * * @param event - keydown event */ - private onKeyDown = (event): void => { + private onKeyDown = (event: KeyboardEvent): void => { const isReady = this.isEventReadyForHandling(event); if (!isReady) { diff --git a/test/cypress/tests/utils/flipper.cy.ts b/test/cypress/tests/utils/flipper.cy.ts index 8c214e9a5..1fad530d6 100644 --- a/test/cypress/tests/utils/flipper.cy.ts +++ b/test/cypress/tests/utils/flipper.cy.ts @@ -102,7 +102,7 @@ describe('Flipper', () => { expect(SomePlugin.pluginInternalKeydownHandler).to.have.not.been.called; }); - it.only('should not flip when shift key is pressed', () => { + it('should not flip when shift key is pressed', () => { cy.createEditor({ data: { blocks: [ @@ -121,13 +121,11 @@ describe('Flipper', () => { .get('.ce-paragraph') .as('paragraph') .selectTextByOffset([0, 10]) - .wait(200) - .type('{shift}{downArrow}'); + .wait(200); - // .trigger('keydown', { keyCode: ARROW_DOWN_KEY_CODE, - // shiftKey: true }) - // .trigger('keydown', { keyCode: ARROW_DOWN_KEY_CODE, - // shiftKey: true }); + cy.get('@paragraph') + .trigger('keydown', { keyCode: ARROW_DOWN_KEY_CODE, + shiftKey: true }); // eslint-disable-next-line cypress/require-data-selectors cy.get('[data-cy="inline-toolbar"]') From 41a1bc160b0e88dae4e4eb877865f67458510f6b Mon Sep 17 00:00:00 2001 From: Peter Savchenko Date: Mon, 10 Mar 2025 19:20:07 +0300 Subject: [PATCH 4/6] fix lint action --- .github/workflows/eslint.yml | 12 +++++------- src/components/flipper.ts | 2 +- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml index 1db62120c..7d99d1c7d 100644 --- a/.github/workflows/eslint.yml +++ b/.github/workflows/eslint.yml @@ -1,6 +1,6 @@ name: ESLint CodeX -on: [pull_request] +on: [push, pull_request] jobs: lint: @@ -9,15 +9,13 @@ jobs: steps: - uses: actions/checkout@v2 - - name: Cache node modules - uses: actions/cache@v1 + - name: Cache dependencies + uses: actions/cache@v2 with: - path: node_modules + path: ~/.npm key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }} restore-keys: | - ${{ runner.OS }}-build-${{ env.cache-name }}- - ${{ runner.OS }}-build- - ${{ runner.OS }}- + ${{ runner.os }}-node- - run: yarn - run: yarn lint diff --git a/src/components/flipper.ts b/src/components/flipper.ts index 5b6e04359..cff4e8619 100644 --- a/src/components/flipper.ts +++ b/src/components/flipper.ts @@ -213,7 +213,7 @@ export default class Flipper { * Allows to select next/prev lines of text using keyboard */ if (isShiftKey === true) { - return; + // return; } /** From 1928823b53201aa0fe07034546474fd884491a6f Mon Sep 17 00:00:00 2001 From: Peter Savchenko Date: Mon, 10 Mar 2025 19:22:51 +0300 Subject: [PATCH 5/6] fix action --- .github/workflows/eslint.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml index 7d99d1c7d..973af8897 100644 --- a/.github/workflows/eslint.yml +++ b/.github/workflows/eslint.yml @@ -1,6 +1,6 @@ name: ESLint CodeX -on: [push, pull_request] +on: [pull_request] jobs: lint: @@ -10,7 +10,7 @@ jobs: - uses: actions/checkout@v2 - name: Cache dependencies - uses: actions/cache@v2 + uses: actions/cache@v4 with: path: ~/.npm key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }} From 0de7447a173287045f418bfb02e65026707ef92c Mon Sep 17 00:00:00 2001 From: Peter Savchenko Date: Mon, 10 Mar 2025 20:11:00 +0300 Subject: [PATCH 6/6] upd --- src/components/flipper.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/flipper.ts b/src/components/flipper.ts index cff4e8619..5b6e04359 100644 --- a/src/components/flipper.ts +++ b/src/components/flipper.ts @@ -213,7 +213,7 @@ export default class Flipper { * Allows to select next/prev lines of text using keyboard */ if (isShiftKey === true) { - // return; + return; } /**