@pylonsync/loro 0.22.44 → 0.22.47

package/src/prosemirror/sync.test.ts

@@ -7,11 +7,11 @@ if (!globalThis.document) GlobalRegistrator.register();
 import { afterEach, describe, expect, test } from "bun:test";
 import { LoroDoc, LoroList, LoroMap, type ContainerID } from "loro-crdt";
 import { undo } from "loro-prosemirror";
-import { Schema } from "prosemirror-model";
+import { type Node, Schema } from "prosemirror-model";
 import { schema as basic } from "prosemirror-schema-basic";
-import { EditorState, TextSelection } from "prosemirror-state";
+import { EditorState, NodeSelection, TextSelection } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
-import { configureProseMirrorMarks, findProseMirrorContainer } from "./index";
+import { configureProseMirrorMarks, findProseMirrorContainer, writeProseMirror } from "./index";
 import { ProseMirrorSyncPlugin, ProseMirrorUndoPlugin } from "./sync";
 
 const defaultSchema = new Schema({ nodes: basic.spec.nodes, marks: basic.spec.marks });
@@ -312,7 +312,6 @@ describe("ProseMirrorSyncPlugin review fixes", () => {
     type(a, "pic ");
     a.dispatch(a.state.tr.insert(5, defaultSchema.node("image", { src: "x.png" })));
     sync();
-    const { NodeSelection } = await import("prosemirror-state");
     b.dispatch(b.state.tr.setSelection(NodeSelection.create(b.state.doc, 5)));
     caretAt(a, 1);
     type(a, "A ");
@@ -321,3 +320,110 @@ describe("ProseMirrorSyncPlugin review fixes", () => {
     expect((b.state.selection as InstanceType<typeof NodeSelection>).node.type.name).toBe("image");
   });
 });
+
+describe("ProseMirrorSyncPlugin with nested nodes", () => {
+  // A table's rows and cells, with prosemirror-tables' content rules.
+  const tableSchema = new Schema({
+    nodes: {
+      doc: { content: "block+" },
+      paragraph: { group: "block", content: "inline*", toDOM: () => ["p", 0] },
+      table: { group: "block", content: "row+", toDOM: () => ["table", ["tbody", 0]] },
+      row: { content: "cell*", toDOM: () => ["tr", 0] },
+      cell: { content: "block+", isolating: true, toDOM: () => ["td", 0] },
+      text: { group: "inline" },
+    },
+  });
+  const p = (t: string) => tableSchema.node("paragraph", null, t ? [tableSchema.text(t)] : []);
+  const table = (rows: string[][]) =>
+    tableSchema.node(
+      "table",
+      null,
+      rows.map((r) => tableSchema.node("row", null, r.map((c) => tableSchema.node("cell", null, [p(c)])))),
+    );
+  const doc = (rows: string[][]) => tableSchema.node("doc", null, [p("Owners"), table(rows)]);
+
+  // A model streaming a table: each write is the whole document again. Here
+  // the next write fills the first cell and the second. The smallest
+  // replace runs from inside one cell into the next, and ProseMirror does
+  // not join across isolating cells: the row got a fourth cell.
+  test("a document rewritten through a table reaches the editor exactly", async () => {
+    const { a, docs } = setup({ schema: tableSchema });
+    await tick();
+    const steps = [
+      doc([["Area", "Owner", "Due"], ["Rele", "", ""]]),
+      doc([["Area", "Owner", "Due"], ["Release notes", "Ben", ""]]),
+      doc([["Area", "Owner", "Due"], ["Release notes", "Ben", "Oct 25"], ["Sup", "", ""]]),
+      doc([["Area", "Owner", "Due"], ["Release notes", "Ben", "Oct 25"], ["Support inbox", "TBD", "Oct 26"]]),
+    ];
+    for (const next of steps) {
+      writeProseMirror(docs[1]!, "body", tableSchema, next);
+      docs[1]!.commit();
+      docs[0]!.import(docs[1]!.export({ mode: "update", from: docs[0]!.oplogVersion() }));
+      await tick();
+      expect(a.state.doc.toJSON()).toEqual(next.toJSON());
+    }
+  });
+
+  test("a selected cell the change does not touch stays selected", async () => {
+    const { a, docs } = setup({ schema: tableSchema });
+    await tick();
+    const write = async (next: Node) => {
+      writeProseMirror(docs[1]!, "body", tableSchema, next);
+      docs[1]!.commit();
+      docs[0]!.import(docs[1]!.export({ mode: "update", from: docs[0]!.oplogVersion() }));
+      await tick();
+    };
+    await write(doc([["Area", "Owner", "Due"], ["Rele", "", ""]]));
+    let areaCell = -1;
+    a.state.doc.descendants((node, pos) => {
+      if (areaCell < 0 && node.type.name === "cell") areaCell = pos;
+    });
+    a.dispatch(a.state.tr.setSelection(NodeSelection.create(a.state.doc, areaCell)));
+    await write(doc([["Area", "Owner", "Due"], ["Release notes", "Ben", ""]]));
+    expect(a.state.selection).toBeInstanceOf(NodeSelection);
+    expect(a.state.selection.from).toBe(areaCell);
+    expect((a.state.selection as InstanceType<typeof NodeSelection>).node.textContent).toBe("Area");
+  });
+
+  test("a selected paragraph keeps its selection when the cells around it change", async () => {
+    const { a, docs } = setup({ schema: tableSchema });
+    await tick();
+    const cells = (first: string, second: string) =>
+      tableSchema.node("doc", null, [
+        tableSchema.node("table", null, [
+          tableSchema.node("row", null, [
+            tableSchema.node("cell", null, [p("Keep"), p(first)]),
+            tableSchema.node("cell", null, [p(second)]),
+          ]),
+        ]),
+      ]);
+    const write = async (next: Node) => {
+      writeProseMirror(docs[1]!, "body", tableSchema, next);
+      docs[1]!.commit();
+      docs[0]!.import(docs[1]!.export({ mode: "update", from: docs[0]!.oplogVersion() }));
+      await tick();
+    };
+    await write(cells("Rele", ""));
+    // doc > table > row > cell > the "Keep" paragraph.
+    a.dispatch(a.state.tr.setSelection(NodeSelection.create(a.state.doc, 3)));
+    await write(cells("Release notes", "Ben"));
+    expect(a.state.doc.toJSON()).toEqual(cells("Release notes", "Ben").toJSON());
+    expect(a.state.selection).toBeInstanceOf(NodeSelection);
+    expect((a.state.selection as InstanceType<typeof NodeSelection>).node.textContent).toBe("Keep");
+  });
+
+  test("typing in a paragraph still maps the selection, not the whole block", async () => {
+    const { a, b, sync } = setup({ schema: tableSchema });
+    await tick();
+    b.dispatch(b.state.tr.replaceWith(0, b.state.doc.content.size, doc([["x", "y", "z"]]).content));
+    sync();
+    await tick();
+    // Ada's caret after "Own".
+    a.dispatch(a.state.tr.setSelection(TextSelection.create(a.state.doc, 4)));
+    b.dispatch(b.state.tr.insertText("The ", 1));
+    sync();
+    await tick();
+    expect(a.state.doc.child(0).textContent).toBe("The Owners");
+    expect(a.state.selection.from).toBe(8);
+  });
+});

package/src/prosemirror/sync.ts

@@ -38,7 +38,7 @@ import {
   loroUndoPluginKey,
   updateLoroToPmState,
 } from "loro-prosemirror";
-import type { Node } from "prosemirror-model";
+import type { Fragment, Node } from "prosemirror-model";
 import { Plugin, TextSelection, type EditorState, type Transaction } from "prosemirror-state";
 import type { EditorView } from "prosemirror-view";
 
@@ -265,20 +265,7 @@ function applyRemote(
   const next = isEmpty(root)
     ? view.state.schema.topNodeType.createAndFill()!
     : (createNodeFromLoroObj(view.state.schema, root as never, state.mapping as never) as Node);
-  const current = view.state.doc;
-  const start = current.content.findDiffStart(next.content);
-  let tr = view.state.tr;
-  if (start != null) {
-    let { a: endA, b: endB } = current.content.findDiffEnd(next.content)!;
-    // A run of equal content at both ends can make the two ends cross.
-    const overlap = start - Math.min(endA, endB);
-    if (overlap > 0) {
-      endA += overlap;
-      endB += overlap;
-    }
-    tr = tr.replace(start, endA, next.slice(start, endB));
-  }
-  tr = withTopAttrs(tr, next);
+  let tr = withTopAttrs(replaceToMatch(view.state, next), next);
   // Nothing this editor shows changed (an echo, a change elsewhere in the row).
   if (!tr.docChanged) return;
   // A node selection, a cell selection: ProseMirror maps it through the
@@ -312,6 +299,81 @@ function applyRemote(
   view.dispatch(tr);
 }
 
+/**
+ * A transaction that turns the editor's document into `next`'s content,
+ * changing as little as it can so the selection maps through.
+ */
+function replaceToMatch(state: EditorState, next: Node): Transaction {
+  const current = state.doc;
+  const start = current.content.findDiffStart(next.content);
+  if (start == null) return state.tr;
+  let { a: endA, b: endB } = current.content.findDiffEnd(next.content)!;
+  // A run of equal content at both ends can make the two ends cross.
+  const overlap = start - Math.min(endA, endB);
+  if (overlap > 0) {
+    endA += overlap;
+    endB += overlap;
+  }
+  const fine = state.tr.replace(start, endA, next.slice(start, endB));
+  if (fine.doc.content.eq(next.content)) return fine;
+  // ProseMirror fits a slice into the place it goes, and it does not join
+  // across isolating nodes (a table's cells): the fitted result can differ
+  // from `next`. Replace whole nodes instead, as deep as the change allows,
+  // so positions in the nodes around it still map.
+  const exact = replaceChangedNodes(state, next);
+  if (exact.doc.content.eq(next.content)) return exact;
+  return state.tr.replaceWith(0, current.content.size, next.content);
+}
+
+/**
+ * Replace the nodes that differ between the editor's document and `next`,
+ * looking inside each one that keeps its type and attributes, so nodes
+ * that did not change keep their positions (and a selection on them).
+ */
+function replaceChangedNodes(state: EditorState, next: Node): Transaction {
+  const tr = state.tr;
+  replaceChangedChildren(tr, state.doc.content, next.content, 0);
+  return tr;
+}
+
+/**
+ * Turn fragment `a`, which starts at `offset` in `tr.doc`, into `b`. Works
+ * from the end, so positions before each change still hold.
+ */
+function replaceChangedChildren(tr: Transaction, a: Fragment, b: Fragment, offset: number): void {
+  let first = 0;
+  while (first < a.childCount && first < b.childCount && a.child(first).eq(b.child(first))) first++;
+  let endA = a.childCount;
+  let endB = b.childCount;
+  while (endA > first && endB > first && a.child(endA - 1).eq(b.child(endB - 1))) {
+    endA--;
+    endB--;
+  }
+  let from = offset;
+  for (let i = 0; i < first; i++) from += a.child(i).nodeSize;
+  let to = from;
+  for (let i = first; i < endA; i++) to += a.child(i).nodeSize;
+  // Children that pair up one to one: each changed one on its own. (The
+  // caller checks the result; a step ProseMirror has to fit falls back.)
+  if (endA - first === endB - first) {
+    let end = to;
+    for (let i = endA - 1; i >= first; i--) {
+      const x = a.child(i);
+      const y = b.child(i);
+      const start = end - x.nodeSize;
+      if (!x.eq(y)) {
+        if (!x.isLeaf && x.sameMarkup(y)) replaceChangedChildren(tr, x.content, y.content, start + 1);
+        else tr.replaceWith(start, end, y);
+      }
+      end = start;
+    }
+    return;
+  }
+  const nodes: Node[] = [];
+  for (let i = first; i < endB; i++) nodes.push(b.child(i));
+  tr.replaceWith(from, to, nodes);
+}
+
 /**
  * The selection as Loro cursors, bound to the character on the left of each
  * end. Null ends where the doc has no text to bind to.
@@ -346,8 +408,21 @@ function childIndexFor(node: Node, pmIndex: number): number {
  * A cursor for a document position. Walks the position's path from the
  * field's root down, so it does not depend on node identity (a replace
  * rebuilds the nodes along its path).
+ *
+ * Inside text the cursor binds to a character: by default the one on the
+ * left, so text typed at a caret goes before it. `bind: "right"` binds to the
+ * character on the right instead, for the start of a range, so text typed
+ * just before the range stays out of it. Where there is no character on that
+ * side, it binds to the other one.
  */
-export function positionToCursor(root: Node, pos: number, doc: LoroDoc, containerId: ContainerID): Cursor | null {
+export function positionToCursor(
+  root: Node,
+  pos: number,
+  doc: LoroDoc,
+  containerId: ContainerID,
+  options: { bind?: "left" | "right" } = {},
+): Cursor | null {
+  const bind = options.bind ?? "left";
   if (pos < 0 || pos > root.content.size) return null;
   const $pos = root.resolve(pos);
   let map = field(doc, containerId);
@@ -382,14 +457,14 @@ export function positionToCursor(root: Node, pos: number, doc: LoroDoc, containe
     } else {
       // The caret at the end of a text run binds to that run, so typing
       // there continues it.
-      if (runStart >= 0 && offset <= pmOffset) return textCursor(children.get(group), offset - runStart);
+      if (runStart >= 0 && offset <= pmOffset) return textCursor(children.get(group), offset - runStart, bind);
       runStart = -1;
       group += 1;
       if (offset === pmOffset) return children.getCursor(group) ?? null;
     }
     pmOffset += child.nodeSize;
   }
-  if (runStart >= 0 && offset <= pmOffset) return textCursor(children.get(group), offset - runStart);
+  if (runStart >= 0 && offset <= pmOffset) return textCursor(children.get(group), offset - runStart, bind);
   return children.getCursor(children.length) ?? null;
 }
 
@@ -403,11 +478,16 @@ function isLowSurrogate(text: string): boolean {
  * A cursor `offset` UTF-16 units into a text run, bound to the character on
  * its left (side 1: just after it), the whole character when it is a
  * surrogate pair. At the start of the run there is none, so it binds to the
- * first character.
+ * first character. With `bind` "right" it binds to the character on its
+ * right (side -1: just before it) while there is one.
  */
-function textCursor(text: unknown, offset: number): Cursor | null {
+function textCursor(text: unknown, offset: number, bind: "left" | "right"): Cursor | null {
   if (!(text instanceof LoroText)) return null;
   if (offset <= 0) return text.getCursor(0, 0) ?? null;
+  if (bind === "right" && offset < text.length) {
+    const at = isLowSurrogate(text.slice(offset, offset + 1)) ? offset - 1 : offset;
+    return text.getCursor(at, -1) ?? null;
+  }
   let start = Math.min(offset, text.length) - 1;
   if (start > 0 && isLowSurrogate(text.slice(start, start + 1))) start -= 1;
   return text.getCursor(start, 1) ?? null;