From b11ab5b3bfb955a1c815ddaa2a215b092bfaf03d Mon Sep 17 00:00:00 2001
From: Peter Savchenko <specc.dev@gmail.com>
Date: Wed, 26 Feb 2025 22:32:30 +0300
Subject: [PATCH] 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 516e2b62..5b393564 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 5aa5f7da..77aa74f5 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<InlineToolbarNodes> {
    * 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 a4d3baad..783f2cf8 100644
--- a/src/components/modules/ui.ts
+++ b/src/components/modules/ui.ts
@@ -477,6 +477,8 @@ export default class UI extends Module<UINodes> {
    * @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 114a38e1..8c214e9a 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');
+  });
 });