fix: prevent flipper navigation when shift key is pressed

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)

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;
     }

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);

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