@pylonsync/loro 0.22.46 → 0.22.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pylonsync/loro",
-  "version": "0.22.46",
+  "version": "0.22.50",
   "description": "Pylon's local-first React layer — wraps loro-crdt with a registry, useLoroDoc hook, and the binary WS wire-format decoder that mirrors crates/router/encode_crdt_frame.",
   "publishConfig": {
     "access": "public"
@@ -23,8 +23,8 @@
     "check": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@pylonsync/react": "0.22.46",
-    "@pylonsync/sync": "0.22.46",
+    "@pylonsync/react": "0.22.50",
+    "@pylonsync/sync": "0.22.50",
     "loro-crdt": "^1.10.6"
   },
   "peerDependencies": {

package/src/prosemirror/ranges.test.ts

@@ -8,8 +8,9 @@ import { Schema } from "prosemirror-model";
 import { schema as basic } from "prosemirror-schema-basic";
 import { EditorState, TextSelection } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
-import { configureProseMirrorMarks, findProseMirrorContainer } from "./index";
+import { configureProseMirrorMarks, findProseMirrorContainer, readProseMirror, writeProseMirror } from "./index";
 import {
+  resolveRangesInDoc,
   diffMatches,
   encodeRange,
   mapSpans,
@@ -884,3 +885,33 @@ test("an in-place undo after an outside retype does not keep the retyped range",
   expect(reanchored).toEqual([]);
   void a;
 });
+
+// A server function has no editor: it reads the document from the doc.
+test("resolveRangesInDoc finds a range in the doc as it is now, or says it is gone", () => {
+  const doc = new LoroDoc();
+  const body = doc.getMap("row").setContainer("body", new LoroMap());
+  body.setContainer("attributes", new LoroMap());
+  body.setContainer("children", new LoroList());
+  doc.commit();
+  configureProseMirrorMarks(doc, schema);
+  const p = (t: string) => schema.node("paragraph", null, [schema.text(t)]);
+  writeProseMirror(doc, "body", schema, schema.node("doc", null, [p("Hello world"), p("Second")]));
+  doc.commit();
+  const containerId = findProseMirrorContainer(doc, "body")!;
+  const state = EditorState.create({ schema, doc: readProseMirror(doc, "body", schema)! });
+  // "world": after "Hello " in the first paragraph (position 1 is its start).
+  const anchor = encodeRange(state, doc, containerId, 7, 12);
+  const text = (r: { from: number; to: number }) => readProseMirror(doc, "body", schema)!.textBetween(r.from, r.to);
+
+  writeProseMirror(doc, "body", schema, schema.node("doc", null, [p("Oh, hello world"), p("Second")]));
+  doc.commit();
+  const [moved] = resolveRangesInDoc(doc, "body", schema, [{ id: "a", ...anchor }]);
+  expect(moved!.gone).toBe(false);
+  expect(text(moved!)).toBe("world");
+
+  writeProseMirror(doc, "body", schema, schema.node("doc", null, [p("Oh, hello"), p("Second")]));
+  doc.commit();
+  expect(resolveRangesInDoc(doc, "body", schema, [{ id: "a", ...anchor }])[0]!.gone).toBe(true);
+  // A doc with no document in the field.
+  expect(resolveRangesInDoc(new LoroDoc(), "body", schema, [{ id: "a", ...anchor }])[0]!.gone).toBe(true);
+});

package/src/prosemirror/ranges.ts

@@ -17,6 +17,10 @@
  *   // For a margin: where each range is now, or `gone`.
  *   resolveRanges(view.state, doc, containerId, ranges)
  *
+ *   // In a server function, with no editor: positions in the document
+ *   // readProseMirror (or editProseMirror's state) gives for the doc now.
+ *   resolveRangesInDoc(doc, "body", schema, ranges)
+ *
  * The binding writes some edits as a delete and an insert: splitting or
  * joining paragraphs moves text into new characters, and a cursor on a moved
  * character no longer names it. The editor that makes such an edit still
@@ -26,14 +30,18 @@
  * again. Until then, other editors draw a range only where its cursors find
  * it, so never on characters that replaced its own.
  */
-import type { ContainerID, LoroDoc } from "loro-crdt";
-import { loroSyncPluginKey } from "loro-prosemirror";
-import type { Node } from "prosemirror-model";
+import type { ContainerID, LoroDoc, LoroMap } from "loro-crdt";
+import { createNodeFromLoroObj, loroSyncPluginKey } from "loro-prosemirror";
+import type { Node, Schema } from "prosemirror-model";
 import { type EditorState, Plugin, PluginKey, type Transaction } from "prosemirror-state";
 import { Decoration, DecorationSet, type EditorView } from "prosemirror-view";
 import { decodeCursor, encodeCursor } from "./cursors";
+import { findProseMirrorContainer } from "./index";
 import { cursorToPosition, positionToCursor } from "./sync";
 
+/** Loro containers to the ProseMirror nodes made from them (loro-prosemirror's mapping). */
+type Mapping = Map<ContainerID, Node | Node[]>;
+
 /** A range as encoded cursors (see {@link encodeRange}). */
 export interface EncodedRange {
   from: string | null;
@@ -116,22 +124,38 @@ export function encodeRange(
   return { from: start ? encodeCursor(start) : null, to: end ? encodeCursor(end) : null };
 }
 
+/** The mapping of an editor bound with ProseMirrorSyncPlugin, or null without one. */
+function syncMapping(state: EditorState): Mapping | null {
+  const sync = loroSyncPluginKey.getState(state) as { mapping?: Mapping } | undefined;
+  return sync?.mapping ?? null;
+}
+
 /** Where a stored cursor is now, and whether its character was deleted. */
 function locate(
   encoded: string | null | undefined,
   state: EditorState,
   doc: LoroDoc,
   containerId: ContainerID,
+): { pos: number; moved: boolean } | null {
+  const mapping = syncMapping(state);
+  return mapping ? locateIn(encoded, state.doc, mapping, doc, containerId) : null;
+}
+
+function locateIn(
+  encoded: string | null | undefined,
+  root: Node,
+  mapping: Mapping,
+  doc: LoroDoc,
+  containerId: ContainerID,
 ): { pos: number; moved: boolean } | null {
   if (!encoded) return null;
-  const sync = loroSyncPluginKey.getState(state) as { mapping?: Map<ContainerID, Node | Node[]> } | undefined;
   const cursor = decodeCursor(encoded);
-  if (!sync?.mapping || !cursor) return null;
-  const inDoc = (pos: number | null) => pos != null && pos >= 0 && pos <= state.doc.content.size;
+  if (!cursor) return null;
+  const inDoc = (pos: number | null) => pos != null && pos >= 0 && pos <= root.content.size;
   try {
-    const exact = cursorToPosition(cursor, doc, containerId, sync.mapping);
+    const exact = cursorToPosition(cursor, doc, containerId, mapping);
     if (inDoc(exact)) return { pos: exact!, moved: false };
-    const near = cursorToPosition(cursor, doc, containerId, sync.mapping, { acceptMoved: true });
+    const near = cursorToPosition(cursor, doc, containerId, mapping, { acceptMoved: true });
     return inDoc(near) ? { pos: near!, moved: true } : null;
   } catch {
     return null;
@@ -159,10 +183,43 @@ export function resolveRanges(
   doc: LoroDoc,
   containerId: ContainerID,
   ranges: Array<Pick<AnchoredRange, "id" | "from" | "to">>,
+): ResolvedRange[] {
+  const mapping = syncMapping(state);
+  return resolveWith(state.doc, mapping, doc, containerId, ranges);
+}
+
+/**
+ * {@link resolveRanges} for code with no editor, such as a server function:
+ * the positions are in `field`'s document as the doc holds it now, the
+ * document `readProseMirror` returns and `editProseMirror` hands its
+ * `change`. Every range is `gone` when the doc has no document in `field`.
+ */
+export function resolveRangesInDoc(
+  doc: LoroDoc,
+  field: string,
+  schema: Schema,
+  ranges: Array<Pick<AnchoredRange, "id" | "from" | "to">>,
+): ResolvedRange[] {
+  const containerId = findProseMirrorContainer(doc, field);
+  const map = containerId ? (doc.getContainerById(containerId) as LoroMap | undefined) : undefined;
+  if (!containerId || !map || map.get("nodeName") == null) {
+    return ranges.map((r) => ({ id: r.id, from: 0, to: 0, gone: true }));
+  }
+  const mapping: Mapping = new Map();
+  const root = createNodeFromLoroObj(schema, map as never, mapping as never) as Node;
+  return resolveWith(root, mapping, doc, containerId, ranges);
+}
+
+function resolveWith(
+  root: Node,
+  mapping: Mapping | null,
+  doc: LoroDoc,
+  containerId: ContainerID,
+  ranges: Array<Pick<AnchoredRange, "id" | "from" | "to">>,
 ): ResolvedRange[] {
   return ranges.map((r) => {
-    const from = locate(r.from, state, doc, containerId);
-    const to = locate(r.to, state, doc, containerId);
+    const from = mapping ? locateIn(r.from, root, mapping, doc, containerId) : null;
+    const to = mapping ? locateIn(r.to, root, mapping, doc, containerId) : null;
     const at = from?.pos ?? to?.pos ?? 0;
     if (!from || !to || (from.moved && to.moved) || to.pos <= from.pos) return { id: r.id, from: at, to: at, gone: true };
     return { id: r.id, from: from.pos, to: to.pos, gone: false };

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.