Scroll to focus point of expanded selections (#5968)

* Confirm undo-after-deletion scroll bug

* Scroll to focus point of expanded selections

Author: TyMick

.changeset/violet-moons-hope.md

@@ -0,0 +1,5 @@
+---
+'slate-react': minor
+---
+
+Scroll to focus point of expanded selections in `defaultScrollSelectionIntoView`

packages/slate-react/src/components/editable.tsx

@@ -1952,18 +1952,17 @@ export const defaultScrollSelectionIntoView = (
   editor: ReactEditor,
   domRange: DOMRange
 ) => {
-  // This was affecting the selection of multiple blocks and dragging behavior,
-  // so enabled only if the selection has been collapsed.
-  if (
-    domRange.getBoundingClientRect &&
-    (!editor.selection ||
-      (editor.selection && Range.isCollapsed(editor.selection)))
-  ) {
-    const leafEl = domRange.startContainer.parentElement!
+  // Scroll to the focus point of the selection, in case the selection is expanded
+  const isBackward = !!editor.selection && Range.isBackward(editor.selection)
+  const domFocusPoint = domRange.cloneRange()
+  domFocusPoint.collapse(isBackward)
+
+  if (domFocusPoint.getBoundingClientRect) {
+    const leafEl = domFocusPoint.startContainer.parentElement!
 
-    // COMPAT: In Chrome, domRange.getBoundingClientRect() can return zero dimensions for valid ranges (e.g. line breaks).
+    // COMPAT: In Chrome, domFocusPoint.getBoundingClientRect() can return zero dimensions for valid ranges (e.g. line breaks).
     // When this happens, do not scroll like most editors do.
-    const domRect = domRange.getBoundingClientRect()
+    const domRect = domFocusPoint.getBoundingClientRect()
     const isZeroDimensionRect =
       domRect.width === 0 &&
       domRect.height === 0 &&
@@ -1979,8 +1978,9 @@ export const defaultScrollSelectionIntoView = (
       }
     }
 
-    // Default behavior: use domRange's getBoundingClientRect
-    leafEl.getBoundingClientRect = domRange.getBoundingClientRect.bind(domRange)
+    // Default behavior: use domFocusPoint's getBoundingClientRect
+    leafEl.getBoundingClientRect =
+      domFocusPoint.getBoundingClientRect.bind(domFocusPoint)
     scrollIntoView(leafEl, {
       scrollMode: 'if-needed',
     })

playwright/integration/examples/richtext.test.ts

@@ -21,4 +21,46 @@ test.describe('On richtext example', () => {
       'Hello World'
     )
   })
+
+  test('undo scrolls back to restored text after deletion and scroll away', async ({
+    page,
+  }) => {
+    const editor = page.getByRole('textbox')
+
+    await editor.press('ControlOrMeta+A')
+    await editor.pressSequentially('First paragraph.')
+    await editor.press('Enter')
+    await editor.pressSequentially('Second paragraph.')
+
+    // Insert enough content to be scrollable
+    for (let i = 0; i < 20; i++) {
+      await editor.press('Enter')
+      await editor.pressSequentially('Extra paragraph.')
+    }
+
+    const firstParagraph = editor.getByText('First paragraph.')
+    const secondParagraph = editor.getByText('Second paragraph.')
+
+    // Scroll back to top and select first paragraph
+    await firstParagraph.click({ clickCount: 3 })
+
+    await expect(firstParagraph).toBeVisible()
+    await expect(firstParagraph).toBeInViewport()
+    await expect(secondParagraph).toBeVisible()
+    await expect(secondParagraph).toBeInViewport()
+
+    await editor.press('Backspace')
+    await expect(firstParagraph).toBeHidden()
+
+    await editor.press(
+      process.platform === 'darwin' ? 'Meta+ArrowDown' : 'Control+End'
+    )
+    await expect(secondParagraph).not.toBeInViewport()
+
+    // Undo deletion
+    await editor.press('ControlOrMeta+Z')
+
+    await expect(firstParagraph).toBeVisible()
+    await expect(firstParagraph).toBeInViewport()
+  })
 })