fix: ignore out-of-bounds positions (#47)

Author: ocavue

src/lib.ts

@@ -13,7 +13,8 @@ import {
   type Value,
 } from "loro-crdt";
 import { type Attrs, Mark, Node, Schema } from "prosemirror-model";
-import { EditorState } from "prosemirror-state";
+import { type EditorState, TextSelection } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
 
 export type LoroChildrenListType = LoroList<
   LoroMap<LoroNodeContainerType> | LoroText
@@ -691,3 +692,30 @@ export function clearChangedNodes(
     }
   }
 }
+
+/**
+ * Set a text selection between the given anchor and head positions. This
+ * function will ignore out-of-bounds positions, and find a valid selection near
+ * the given positions.
+ */
+export function safeSetSelection(
+  view: EditorView,
+  anchor: number,
+  head?: number,
+): void {
+  const doc = view.state.doc;
+  const docSize = doc.content.size;
+  if (
+    anchor < 0 ||
+    anchor > docSize ||
+    (head != null && (head < 0 || head > docSize))
+  ) {
+    return;
+  }
+
+  const $anchor = doc.resolve(anchor);
+  const $head = head != null ? doc.resolve(head) : undefined;
+
+  const selection = TextSelection.between($anchor, $head || $anchor);
+  view.dispatch(view.state.tr.setSelection(selection));
+}

src/sync-plugin.ts

@@ -1,34 +1,35 @@
-import {
-  type ContainerID,
+import type {
+  ContainerID,
+  Cursor,
   LoroDoc,
-  type LoroEventBatch,
+  LoroEventBatch,
   LoroMap,
-  type Subscription,
+  Subscription,
 } from "loro-crdt";
 import { Fragment, Slice } from "prosemirror-model";
 import {
-  EditorState,
+  type EditorState,
   Plugin,
   PluginKey,
   type StateField,
-  TextSelection,
 } from "prosemirror-state";
-import { EditorView } from "prosemirror-view";
+import type { EditorView } from "prosemirror-view";
 
+import {
+  convertPmSelectionToCursors,
+  cursorToAbsolutePosition,
+} from "./cursor-plugin";
 import {
   clearChangedNodes,
   createNodeFromLoroObj,
   type LoroDocType,
   type LoroNodeContainerType,
   type LoroNodeMapping,
   ROOT_DOC_KEY,
+  safeSetSelection,
   updateLoroToPmState,
 } from "./lib";
 import { configLoroTextStyle } from "./text-style";
-import {
-  convertPmSelectionToCursors,
-  cursorToAbsolutePosition,
-} from "./cursor-plugin";
 import { loroUndoPluginKey } from "./undo-plugin";
 
 export const loroSyncPluginKey = new PluginKey<LoroSyncPluginState>(
@@ -227,25 +228,36 @@ function updateNodeOnLoroEvent(view: EditorView, event: LoroEventBatch) {
     type: "non-local-updates",
   });
   view.dispatch(tr);
-  Promise.resolve().then(() => {
-    if (anchor && focus) {
-      const state = loroSyncPluginKey.getState(
-        view.state,
-      ) as LoroSyncPluginState;
-      const anchorPos = cursorToAbsolutePosition(
-        anchor,
-        state.doc,
-        state.mapping,
-      )[0];
-      const focusPos =
-        focus && cursorToAbsolutePosition(focus, state.doc, state.mapping)[0];
-      const selection = TextSelection.create(
-        view.state.tr.doc,
-        anchorPos,
-        focusPos ?? undefined,
-      );
-      const tr = view.state.tr.setSelection(selection);
-      view.dispatch(tr);
-    }
+
+  if (anchor == null) {
+    return;
+  }
+  setTimeout(() => {
+    syncCursorsToPmSelection(view, anchor, focus);
   });
 }
+
+/**
+ * Update ProseMirror selection based on the given Loro cursors.
+ */
+export function syncCursorsToPmSelection(
+  view: EditorView,
+  anchor: Cursor,
+  focus?: Cursor,
+) {
+  const state = loroSyncPluginKey.getState(view.state);
+  if (!state) {
+    return;
+  }
+
+  const { doc, mapping } = state;
+  const anchorPos = cursorToAbsolutePosition(anchor, doc, mapping)[0];
+  const focusPos = focus && cursorToAbsolutePosition(focus, doc, mapping)[0];
+  if (anchorPos == null) {
+    return;
+  }
+
+  // If the cursors are synced faster than the document, then the cursors might
+  // be out of bounds. Thus, we need to check if the cursors are out of bounds.
+  safeSetSelection(view, anchorPos, focusPos);
+}

src/undo-plugin.ts

@@ -6,14 +6,10 @@ import {
   Plugin,
   PluginKey,
   type StateField,
-  TextSelection,
 } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
-import {
-  convertPmSelectionToCursors,
-  cursorToAbsolutePosition,
-} from "./cursor-plugin";
-import { loroSyncPluginKey } from "./sync-plugin";
+import { convertPmSelectionToCursors } from "./cursor-plugin";
+import { loroSyncPluginKey, syncCursorsToPmSelection } from "./sync-plugin";
 import { configLoroTextStyle } from "./text-style";
 
 export interface LoroUndoPluginProps {
@@ -130,35 +126,13 @@ export const LoroUndoPlugin = (props: LoroUndoPluginProps): Plugin => {
           return;
         }
 
-        const anchor = meta.cursors[0] ?? null;
-        const focus = meta.cursors[1] ?? null;
+        const anchor: Cursor | undefined = meta.cursors[0];
+        const focus: Cursor | undefined = meta.cursors[1];
         if (anchor == null) {
           return;
         }
-
         setTimeout(() => {
-          try {
-            const anchorPos = cursorToAbsolutePosition(
-              anchor,
-              loroState.doc,
-              loroState.mapping,
-            )[0];
-            const focusPos =
-              focus &&
-              cursorToAbsolutePosition(
-                focus,
-                loroState.doc,
-                loroState.mapping,
-              )[0];
-            const selection = TextSelection.create(
-              view.state.doc,
-              anchorPos,
-              focusPos ?? undefined,
-            );
-            view.dispatch(view.state.tr.setSelection(selection));
-          } catch (e) {
-            console.error(e);
-          }
+          syncCursorsToPmSelection(view, anchor, focus);
         }, 0);
       });
       return {