fix: clamp stale selection offsets in withYjs to prevent toDOMPoint crash (#349)

When a peer shortens (or replaces) the text node under the local cursor
via a null-origin yjs transaction (Y.applyUpdate without origin — used
by row prefetch, version reset/revert paths), withYjs#applyRemoteEvents
restores the cached selection without re-validating its offsets against
the new tree. The path stays reachable, the offset overshoots the new
text length, and slate-react's render-time selection sync crashes in
toDOMPoint with "Cannot resolve a DOM point from Slate point".

Validate via the existing offset-aware `isValidSelection`, clamp via
`findNearestValidSelection`, and deselect as a last resort. Apply the
same offset check to `initializeDocumentContent` so the reconnect path
doesn't re-introduce the same precondition. Add a regression test that
fails on the pre-fix code (3 scenarios: shrink past cursor, shrink
under cursor at the reported offset, sanity-check that appends remain
valid).

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: appflowy

src/application/slate-yjs/__tests__/withYjs.selection.test.ts

@@ -0,0 +1,217 @@
+/**
+ * Regression tests for the "Cannot resolve a DOM point from Slate point" crash.
+ *
+ * Background
+ * ----------
+ * withYjs#applyRemoteEvents caches editor.selection BEFORE applying remote
+ * events to editor.children, then restores it after the events are applied.
+ * For transactions with `origin === null` (e.g. bare `Y.applyUpdate(doc, state)`
+ * calls in row prefetch, version reset, version revert, etc.) this overwrite
+ * is unconditional — the cached selection is written back without re-validating
+ * its offsets against the new text-node lengths. When a remote update shortens
+ * the text under the local cursor, the restored selection keeps a path that
+ * still exists but an offset past the end of the new text. Slate-react's
+ * render-time selection sync then calls ReactEditor.toDOMPoint, which finds
+ * the DOM text shorter than the requested offset and throws.
+ *
+ * These tests assert the DESIRED post-fix behavior:
+ *   • After a remote shrink, the selection is either cleared OR clamped so
+ *     that `isValidSelection` returns true (offset within new text length).
+ *   • A remote append leaves a valid selection unchanged.
+ *
+ * Until withYjs#applyRemoteEvents and #initializeDocumentContent are updated
+ * to validate offsets (e.g. via `isValidSelection` + clamp/deselect), the two
+ * shrink tests are expected to FAIL — that's how they protect against the
+ * regression.
+ */
+
+import { expect } from '@jest/globals';
+import { createEditor, Editor, Range, Transforms } from 'slate';
+import * as Y from 'yjs';
+
+import { yDocToSlateContent } from '@/application/slate-yjs/utils/convert';
+import { isValidSelection } from '@/application/slate-yjs/utils/transformSelection';
+import { YjsEditorKey, YTextMap } from '@/application/types';
+
+import {
+  generateId,
+  getTestingDocData,
+  insertBlock,
+  withTestingYDoc,
+  withTestingYjsEditor,
+} from './withTestingYjsEditor';
+
+jest.mock('nanoid');
+// __mocks__/lodash-es.ts and __mocks__/lodash-es/isEqual.ts are auto-applied
+// for npm modules. They provide a partial surface that breaks translateYEvents
+// here (auto-mocked `omit` is undefined; auto-mocked `isEqual` always returns
+// true so text events get routed into the block-update branch). Use the real
+// implementations so this test exercises the real applyRemoteEvents flow.
+jest.mock('lodash-es', () => jest.requireActual('lodash'));
+jest.mock('lodash-es/isEqual', () => jest.requireActual('lodash/isEqual'));
+
+/** Find the slate path of the first text leaf inside the first paragraph. */
+function findFirstLeafPath(editor: Editor): number[] {
+  for (const [node, path] of Editor.nodes(editor, { at: [], match: (n) => 'text' in n })) {
+    if (typeof (node as { text: string }).text === 'string') {
+      return path;
+    }
+  }
+
+  throw new Error('No text leaf found in editor.children');
+}
+
+/**
+ * Mutate `remoteDoc` (which mirrors `localDoc`) and ship the diff to
+ * `localDoc` with origin=Remote, so withYjs treats it as a remote event.
+ */
+function shipRemoteUpdate(
+  remoteDoc: Y.Doc,
+  localDoc: Y.Doc,
+  mutate: (textMap: YTextMap) => void
+) {
+  const before = Y.encodeStateVector(localDoc);
+  const { meta } = getTestingDocData(remoteDoc);
+  const textMap = meta.get(YjsEditorKey.text_map) as YTextMap;
+
+  mutate(textMap);
+
+  const diff = Y.encodeStateAsUpdateV2(remoteDoc, before);
+
+  // Use origin=null to exercise withYjs#applyRemoteEvents's "restore cached
+  // selection" branch (the buggy one). Other origins skip that branch and
+  // rely on Slate's per-operation selection transforms, which clamp offsets
+  // automatically and hide the bug.
+  Y.applyUpdateV2(localDoc, diff);
+}
+
+function buildSyncedPair(blockId: string, initialText: string) {
+  const pageId = generateId();
+  const remoteDoc = withTestingYDoc(pageId);
+  const remoteBlock = insertBlock({
+    doc: remoteDoc,
+    blockObject: {
+      id: blockId,
+      ty: 'paragraph',
+      relation_id: blockId,
+      text_id: blockId,
+      data: '{}',
+    },
+  });
+
+  remoteBlock.applyDelta([{ insert: initialText }]);
+
+  const localDoc = new Y.Doc();
+
+  Y.applyUpdateV2(localDoc, Y.encodeStateAsUpdateV2(remoteDoc));
+
+  return { remoteDoc, localDoc };
+}
+
+describe('withYjs selection restoration after remote events', () => {
+  it('keeps selection valid when remote shrink occurs under cursor', () => {
+    const blockId = generateId();
+    const { remoteDoc, localDoc } = buildSyncedPair(blockId, 'Hello World');
+
+    const editor = withTestingYjsEditor(createEditor(), localDoc);
+
+    editor.connect();
+
+    // Sanity-check the slate tree mirrors the yjs tree.
+    expect(editor.children).toEqual(yDocToSlateContent(localDoc)?.children ?? []);
+
+    // Place the local "cursor" at the end of "Hello World" (offset 11).
+    const leafPath = findFirstLeafPath(editor);
+
+    expect(Editor.string(editor, leafPath)).toBe('Hello World');
+
+    Transforms.select(editor, { path: leafPath, offset: 11 });
+
+    expect(editor.selection).not.toBeNull();
+    expect(Range.isCollapsed(editor.selection!)).toBe(true);
+    expect(editor.selection!.anchor.offset).toBe(11);
+    expect(isValidSelection(editor, editor.selection!)).toBe(true);
+
+    // Collaborator shrinks the same text to "Hi".
+    shipRemoteUpdate(remoteDoc, localDoc, (textMap) => {
+      const text = textMap.get(blockId);
+
+      expect(text).toBeDefined();
+      expect(text!.toString()).toBe('Hello World');
+
+      text!.delete(0, text!.length);
+      text!.insert(0, 'Hi');
+    });
+
+    // Editor tree reflects "Hi" (length 2).
+    expect(Editor.string(editor, leafPath)).toBe('Hi');
+
+    // Post-fix expectation: the selection must NOT be left pointing past the
+    // end of the new text. Either it is cleared, or its offset is clamped to
+    // within the new text length. Anything else is the crash precondition
+    // that fires "Cannot resolve a DOM point from Slate point" on next render.
+    if (editor.selection !== null) {
+      expect(isValidSelection(editor, editor.selection)).toBe(true);
+      expect(editor.selection.anchor.offset).toBeLessThanOrEqual(2);
+      expect(editor.selection.focus.offset).toBeLessThanOrEqual(2);
+    }
+  });
+
+  it('keeps selection valid when remote trims to before the cursor offset', () => {
+    const blockId = generateId();
+    const { remoteDoc, localDoc } = buildSyncedPair(blockId, 'The quick brown fox');
+
+    const editor = withTestingYjsEditor(createEditor(), localDoc);
+
+    editor.connect();
+    const leafPath = findFirstLeafPath(editor);
+
+    // Cursor at offset 16 — the offending offset from the original error message.
+    Transforms.select(editor, { path: leafPath, offset: 16 });
+    expect(isValidSelection(editor, editor.selection!)).toBe(true);
+
+    shipRemoteUpdate(remoteDoc, localDoc, (textMap) => {
+      const text = textMap.get(blockId)!;
+
+      // Trim to "The quick" (length 9), well under offset 16.
+      text.delete(9, text.length - 9);
+    });
+
+    expect(Editor.string(editor, leafPath)).toBe('The quick');
+
+    // Post-fix: offset 16 is past the new length 9, so the selection must
+    // be cleared or clamped (offset <= 9) — never left at 16.
+    if (editor.selection !== null) {
+      expect(isValidSelection(editor, editor.selection)).toBe(true);
+      expect(editor.selection.anchor.offset).toBeLessThanOrEqual(9);
+      expect(editor.selection.focus.offset).toBeLessThanOrEqual(9);
+    }
+  });
+
+  it('sanity: remote append leaves a valid selection unchanged', () => {
+    // If a remote update only LENGTHENS text under the cursor, the cached
+    // offset stays in-bounds and selection remains valid. This proves the bug
+    // is specifically offset > new text length, not "any remote event
+    // invalidates selection".
+    const blockId = generateId();
+    const { remoteDoc, localDoc } = buildSyncedPair(blockId, 'Hello');
+
+    const editor = withTestingYjsEditor(createEditor(), localDoc);
+
+    editor.connect();
+    const leafPath = findFirstLeafPath(editor);
+
+    Transforms.select(editor, { path: leafPath, offset: 5 });
+    expect(isValidSelection(editor, editor.selection!)).toBe(true);
+
+    shipRemoteUpdate(remoteDoc, localDoc, (textMap) => {
+      const text = textMap.get(blockId)!;
+
+      text.insert(text.length, ' World');
+    });
+
+    expect(Editor.string(editor, leafPath)).toBe('Hello World');
+    expect(editor.selection!.anchor.offset).toBe(5);
+    expect(isValidSelection(editor, editor.selection!)).toBe(true);
+  });
+});

src/application/slate-yjs/plugins/withYjs.ts

@@ -1,10 +1,10 @@
 import { BaseRange, Descendant, Editor, Operation, Transforms } from 'slate';
-import { ReactEditor } from 'slate-react';
 import Y, { Transaction, YEvent } from 'yjs';
 
 import { translateYEvents } from '@/application/slate-yjs/utils/applyToSlate';
 import { applyToYjs } from '@/application/slate-yjs/utils/applyToYjs';
 import { yDocToSlateContent } from '@/application/slate-yjs/utils/convert';
+import { findNearestValidSelection, isValidSelection } from '@/application/slate-yjs/utils/transformSelection';
 import { CollabOrigin, YjsEditorKey, YSharedRoot } from '@/application/types';
 
 type LocalChange = {
@@ -116,11 +116,16 @@ export function withYjs<T extends Editor>(
       e.children = content.children;
     }
 
-    if (selection && !ReactEditor.hasRange(editor, selection)) {
+    // `ReactEditor.hasRange` only checks path existence, not whether each
+    // offset is within its node's text length. After a content swap the path
+    // can still resolve while the offset overshoots the new text — that's the
+    // "Cannot resolve a DOM point from Slate point" precondition. Use the
+    // offset-aware validator instead.
+    if (selection && !isValidSelection(e, selection)) {
       try {
         Transforms.select(e, Editor.start(editor, [0]));
-      } catch (e) {
-        console.error(e);
+      } catch (err) {
+        console.error(err);
         editor.deselect();
       }
     }
@@ -155,13 +160,34 @@ export function withYjs<T extends Editor>(
       translateYEvents(e, events);
     }
 
-    // Update my cursor position
+    // Restore the cached cursor. The cached selection's paths may still be
+    // reachable in the new tree while its offsets overshoot the new text
+    // length (e.g. a peer shortened the text under the cursor). Applying it
+    // unchanged would leave editor.selection at offset > text length, which
+    // crashes slate-react's render-time selection sync (`toDOMPoint`). Clamp
+    // via `findNearestValidSelection`, falling back to deselect if no point
+    // can be recovered.
     try {
       if (newSelection) {
-        Transforms.select(editor, newSelection);
+        if (isValidSelection(editor, newSelection)) {
+          Transforms.select(editor, newSelection);
+        } else {
+          const clamped = findNearestValidSelection(editor, newSelection);
+
+          if (clamped) {
+            Transforms.select(editor, clamped);
+          } else {
+            editor.deselect();
+          }
+        }
       }
     } catch (error) {
       console.error(error);
+      try {
+        editor.deselect();
+      } catch {
+        // Selection may already be null.
+      }
     }
 
     // Restore the apply function to store local changes after applying remote changes