fix: issue with expanding selection down using Shift+ArrowDown

Author: christianhg

.changeset/bumpy-spoons-check.md

@@ -0,0 +1,5 @@
+---
+'@portabletext/editor': patch
+---
+
+fix: issue with expanding selection down using Shift+ArrowDown

packages/editor/gherkin-spec/selection.feature

@@ -3,6 +3,19 @@ Feature: Selection
   Background:
     Given one editor
 
+  Scenario Outline: Expanding selection down
+    Given the text <text>
+    When the caret is put <position>
+    And "{Shift>}{ArrowDown}{/Shift}" is pressed
+    And "{Shift>}{ArrowDown}{/Shift}" is pressed
+    Then <selection> is selected
+
+    Examples:
+      | text                   | position     | selection              |
+      | "foo\|bar\|baz"        | before "foo" | "foo\|bar\|"           |
+      | "foo\|>#:bar\|baz"     | before "foo" | "foo\|>#:bar\|"        |
+      | "foo\|>#:bar\|{image}" | before "foo" | "foo\|>#:bar\|{image}" |
+
   Scenario: Expanding collapsed selection backwards from empty line
     Given the text "foo|"
     And the editor is focused

packages/editor/src/behaviors/behavior.abstract.keyboard.ts

@@ -3,10 +3,13 @@ import {isTextBlock} from '@portabletext/schema'
 import {defaultKeyboardShortcuts} from '../keyboard-shortcuts/default-keyboard-shortcuts'
 import {getFocusBlock} from '../selectors/selector.get-focus-block'
 import {getFocusInlineObject} from '../selectors/selector.get-focus-inline-object'
+import {getFocusTextBlock} from '../selectors/selector.get-focus-text-block'
+import {getNextBlock} from '../selectors/selector.get-next-block'
 import {getPreviousBlock} from '../selectors/selector.get-previous-block'
 import {isSelectionCollapsed} from '../selectors/selector.is-selection-collapsed'
 import {isSelectionExpanded} from '../selectors/selector.is-selection-expanded'
 import {getBlockEndPoint} from '../utils/util.get-block-end-point'
+import {getBlockStartPoint} from '../utils/util.get-block-start-point'
 import {isEmptyTextBlock} from '../utils/util.is-empty-text-block'
 import {raise} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
@@ -22,6 +25,17 @@ const shiftLeft = createKeyboardShortcut({
     },
   ],
 })
+const shiftDown = createKeyboardShortcut({
+  default: [
+    {
+      key: 'ArrowDown',
+      shift: true,
+      meta: false,
+      ctrl: false,
+      alt: false,
+    },
+  ],
+})
 
 export const abstractKeyboardBehaviors = [
   /**
@@ -171,4 +185,93 @@ export const abstractKeyboardBehaviors = [
       ],
     ],
   }),
+
+  defineBehavior({
+    on: 'keyboard.keydown',
+    guard: ({snapshot, event, dom}) => {
+      if (!snapshot.context.selection || !shiftDown.guard(event.originEvent)) {
+        return false
+      }
+
+      const focusTextBlock = getFocusTextBlock(snapshot)
+
+      if (!focusTextBlock) {
+        return false
+      }
+
+      const nextBlock = getNextBlock(snapshot)
+
+      if (!nextBlock) {
+        return false
+      }
+
+      if (!isTextBlock(snapshot.context, nextBlock.node)) {
+        return false
+      }
+
+      const focusBlockEndPoint = getBlockEndPoint({
+        context: snapshot.context,
+        block: focusTextBlock,
+      })
+
+      // Find the DOM position of the current focus point
+      const focusRect = dom.getSelectionRect({
+        ...snapshot,
+        context: {
+          ...snapshot.context,
+          selection: {
+            anchor: snapshot.context.selection.focus,
+            focus: snapshot.context.selection.focus,
+          },
+        },
+      })
+      // Find the DOM position of the focus block end point
+      const endPointRect = dom.getSelectionRect({
+        ...snapshot,
+        context: {
+          ...snapshot.context,
+          selection: {
+            anchor: focusBlockEndPoint,
+            focus: focusBlockEndPoint,
+          },
+        },
+      })
+
+      if (!focusRect || !endPointRect) {
+        return false
+      }
+
+      if (endPointRect.top > focusRect.top) {
+        // If the end point is positioned further from the top than the current
+        // focus point, then we can deduce that the end point is on the next
+        // line. In this case, we don't want to interfere since the browser
+        // does right thing and expands the selection to the end of the current
+        // line.
+        return false
+      }
+
+      // If the end point is positioned at the same level as the current focus
+      // point, then we can deduce that the end point is on the same line. In
+      // this case, we want to expand the selection to the end of the start
+      // block. This mitigates a Chromium bug where Shift+ArrowDown can expand
+      // further into the next block.
+      const nextBlockStartPoint = getBlockStartPoint({
+        context: snapshot.context,
+        block: nextBlock,
+      })
+
+      return {nextBlockStartPoint, selection: snapshot.context.selection}
+    },
+    actions: [
+      (_, {nextBlockStartPoint, selection}) => [
+        raise({
+          type: 'select',
+          at: {
+            anchor: selection.anchor,
+            focus: nextBlockStartPoint,
+          },
+        }),
+      ],
+    ],
+  }),
 ]