imrovement(flipper): allow to select next/prev line by shift arrows (#2918)

* fix: prevent flipper navigation when shift key is pressed

* rm logs

* feat: improve line selection with Shift + Up/Down

* fix lint action

* fix action

* upd

Author: neSpecc

.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

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
 

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)

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');
+  });
 });