fix: proper position tracking for uninitialized doc #2759

Author: nperez0111

packages/core/src/yjs/extensions/RelativePositionMapping.test.ts

@@ -28,6 +28,58 @@ function setupTwoWaySync(doc1: Y.Doc, doc2: Y.Doc) {
 }
 
 describe("RelativePositionMapping (yjs)", () => {
+  it("should return the same position when no changes are made", () => {
+    const ydoc = new Y.Doc();
+    const remoteYdoc = new Y.Doc();
+
+    const localEditor = BlockNoteEditor.create(
+      withCollaboration({
+        collaboration: {
+          fragment: ydoc.getXmlFragment("doc"),
+          user: { color: "#ff0000", name: "Local User" },
+          provider: undefined,
+        },
+      }),
+    );
+    const div = document.createElement("div");
+    localEditor.mount(div);
+
+    const remoteEditor = BlockNoteEditor.create(
+      withCollaboration({
+        collaboration: {
+          fragment: remoteYdoc.getXmlFragment("doc"),
+          user: { color: "#ff0000", name: "Remote User" },
+          provider: undefined,
+        },
+      }),
+    );
+
+    const remoteDiv = document.createElement("div");
+    remoteEditor.mount(remoteDiv);
+    setupTwoWaySync(ydoc, remoteYdoc);
+
+    const nodeSize = localEditor.prosemirrorState.doc.nodeSize;
+    const positions: number[] = [];
+    for (let i = 0; i < nodeSize; i++) {
+      positions.push(trackPosition(localEditor, i)());
+    }
+
+    expect(positions).toMatchInlineSnapshot(`
+      [
+        0,
+        1,
+        2,
+        3,
+        4,
+        5,
+        6,
+        7,
+      ]
+    `);
+
+    localEditor.unmount();
+    remoteEditor.unmount();
+  });
   it("should update the local position when collaborating", () => {
     const ydoc = new Y.Doc();
     const remoteYdoc = new Y.Doc();
@@ -92,6 +144,80 @@ describe("RelativePositionMapping (yjs)", () => {
     remoteEditor.unmount();
   });
 
+  it("should match the same positions", () => {
+    const ydoc = new Y.Doc();
+    const remoteYdoc = new Y.Doc();
+
+    const localEditor = BlockNoteEditor.create(
+      withCollaboration({
+        collaboration: {
+          fragment: ydoc.getXmlFragment("doc"),
+          user: { color: "#ff0000", name: "Local User" },
+          provider: undefined,
+        },
+      }),
+    );
+    const div = document.createElement("div");
+    localEditor.mount(div);
+
+    const remoteEditor = BlockNoteEditor.create(
+      withCollaboration({
+        collaboration: {
+          fragment: remoteYdoc.getXmlFragment("doc"),
+          user: { color: "#ff0000", name: "Remote User" },
+          provider: undefined,
+        },
+      }),
+    );
+
+    const remoteDiv = document.createElement("div");
+    remoteEditor.mount(remoteDiv);
+    setupTwoWaySync(ydoc, remoteYdoc);
+
+    localEditor.replaceBlocks(localEditor.document, [
+      {
+        type: "paragraph",
+        content: "Hello World",
+      },
+    ]);
+
+    const nodeSize = localEditor.prosemirrorState.doc.nodeSize;
+    const positions: (() => number)[] = [];
+    for (let i = 0; i < nodeSize; i++) {
+      positions.push(trackPosition(localEditor, i));
+    }
+
+    localEditor._tiptapEditor.commands.insertContentAt(3, "Test ");
+
+    expect(positions.map((getPos) => getPos())).toMatchInlineSnapshot(`
+      [
+        0,
+        1,
+        2,
+        3,
+        9,
+        10,
+        11,
+        12,
+        13,
+        14,
+        15,
+        16,
+        17,
+        18,
+        19,
+        20,
+        21,
+        22,
+        23,
+      ]
+    `);
+    ydoc.destroy();
+    remoteYdoc.destroy();
+    localEditor.unmount();
+    remoteEditor.unmount();
+  });
+
   it("should handle multiple transactions when collaborating", () => {
     const ydoc = new Y.Doc();
     const remoteYdoc = new Y.Doc();

packages/core/src/yjs/extensions/RelativePositionMapping.ts

@@ -4,6 +4,7 @@ import {
   ySyncPluginKey,
 } from "y-prosemirror";
 import { createExtension } from "../../editor/BlockNoteExtension.js";
+import type { PositionMappingExtension } from "../../extensions/index.js";
 
 export const RelativePositionMappingExtension = createExtension(
   ({ editor }) => {
@@ -16,6 +17,23 @@ export const RelativePositionMappingExtension = createExtension(
         if (!ySyncPluginState) {
           throw new Error("YSync plugin state not found");
         }
+
+        // 0 is a special case & always should map to itself
+        if (position === 0) {
+          return () => 0;
+        }
+
+        // If the document is empty, it has not been synced yet
+        if (ySyncPluginState.binding.type.length === 0) {
+          // so, we just fallback to the prosemirror position mapping extension
+          // If a remote transaction or sync happens in this case. The position map will be invalidated,
+          // and the positions will be moved to the end of the document
+          // This is acceptable, because the document had not been synced so there are no positions to map properly into
+          return editor
+            .getExtension<typeof PositionMappingExtension>("positionMapping")
+            ?.mapPosition(position, side);
+        }
+
         const relativePosition = absolutePositionToRelativePosition(
           position + (side === "right" ? 1 : -1),
           ySyncPluginState.binding.type,