diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml index 1db62120c..973af8897 100644 --- a/.github/workflows/eslint.yml +++ b/.github/workflows/eslint.yml @@ -9,15 +9,13 @@ jobs: steps: - uses: actions/checkout@v2 - - name: Cache node modules - uses: actions/cache@v1 + - name: Cache dependencies + uses: actions/cache@v4 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/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 516e2b620..5b6e04359 100644 --- a/src/components/flipper.ts +++ b/src/components/flipper.ts @@ -199,13 +199,23 @@ export default class Flipper { * * @param event - keydown event */ - private onKeyDown = (event): void => { + private onKeyDown = (event: KeyboardEvent): void => { const isReady = this.isEventReadyForHandling(event); if (!isReady) { 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/test/cypress/tests/utils/flipper.cy.ts b/test/cypress/tests/utils/flipper.cy.ts index 114a38e1e..1fad530d6 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,40 @@ describe('Flipper', () => { expect(SomePlugin.pluginInternalKeydownHandler).to.have.not.been.called; }); + + it('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); + + 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"]') + .get('.ce-popover--opened') + .as('popover') + .should('exist'); + + cy.get('@popover') + .get('.ce-popover-item--focused') + .should('not.exist'); + }); });