@panphora/clayjs 1.13.0 → 1.14.0

package/src/page/merge.js

@@ -0,0 +1,130 @@
+import { canon, renderModel, parseModel, fragmentCleaner } from "./projection.js";
+
+const TEXT = new Set(["paragraph", "heading", "list_item", "callout", "code_block", "toggle"]);
+const same = (a, b) => canon(a) === canon(b);
+
+function inlineOf(item, doc) {
+  const article = doc.createElement("article");
+  article.setAttribute("data-page", "");
+  article.innerHTML = renderModel([{ id: item.id, t: "paragraph", c: item.c ?? "", ...(item.m ? { m: item.m } : {}) }], { clean: fragmentCleaner(doc) });
+  return article;
+}
+
+// An incoming block whose id is not in base but whose content is the one base
+// block of its kind that no other incoming block took: a writer that dropped the
+// data-ids. It gets that block's id back, so the rest of the merge sees the edit
+// rather than a deletion and an insertion. Scans base in order, from after the
+// base item matched to the previous incoming item, and points the children of a
+// block that got its id back at that id. Returns copies.
+function restoreIds(base, incoming) {
+  const index = new Map(base.map((x, n) => [x.id, n]));
+  const used = new Set(incoming.map((x) => x.id));
+  const renamed = new Map();
+  let from = 0;
+  const out = incoming.map((x) => {
+    const at = index.get(x.id);
+    if (at !== undefined) {
+      from = at + 1;
+      return x;
+    }
+    const content = { c: x.c ?? "", m: x.m ?? null };
+    for (let k = from; k < base.length; k++) {
+      const y = base[k];
+      if (used.has(y.id) || y.t !== x.t || !same({ c: y.c ?? "", m: y.m ?? null }, content)) continue;
+      used.add(y.id);
+      from = k + 1;
+      renamed.set(x.id, y.id);
+      return { ...x, id: y.id };
+    }
+    return x;
+  });
+  return out.map((x) => (renamed.has(x.parent) ? { ...x, parent: renamed.get(x.parent) } : x));
+}
+
+// Three page models (arrays from parseModel) merged block by block: the
+// structure and every field through mergeJson, and merge3 only inside a text
+// block both sides changed. The same words changed on both sides go to the
+// incoming side; a block one side edited and the other deleted is kept. A code
+// block both sides changed keeps its incoming text, newlines and all, and
+// conflicts: merge3 on it would flatten them.
+// merge3 and mergeJson are passed in: the browser has the vendored
+// HyperMorph, the server the hyper-morph package.
+export function mergePageModels(base, current, incoming, { doc, merge3, mergeJson }) {
+  const conflicts = [];
+  const inc = restoreIds(base, incoming);
+  const b = new Map(base.map((x) => [x.id, x]));
+  const c = new Map(current.map((x) => [x.id, x]));
+  const i = new Map(inc.map((x) => [x.id, x]));
+  const current2 = current.map((x) => ({ ...x }));
+  const incoming2 = inc.map((x) => ({ ...x }));
+  const c2 = new Map(current2.map((x) => [x.id, x]));
+  const i2 = new Map(incoming2.map((x) => [x.id, x]));
+  for (const [id, was] of b) {
+    const l = c.get(id);
+    const r = i.get(id);
+    if (!l || !r || !TEXT.has(was.t) || !TEXT.has(l.t) || !TEXT.has(r.t)) continue;
+    const tb = { c: was.c ?? "", m: was.m ?? null };
+    const tl = { c: l.c ?? "", m: l.m ?? null };
+    const tr = { c: r.c ?? "", m: r.m ?? null };
+    if (same(tl, tb) || same(tr, tb) || same(tl, tr)) continue;
+    if (was.t === "code_block") {
+      for (const t of [c2.get(id), i2.get(id)]) {
+        t.c = r.c ?? "";
+        if (r.m) t.m = r.m;
+        else delete t.m;
+      }
+      conflicts.push({ id, kind: "text", local: l.c ?? "", remote: r.c ?? "" });
+      continue;
+    }
+    const res = merge3(inlineOf(was, doc), inlineOf(l, doc), inlineOf(r, doc));
+    for (const k of res.conflicts) conflicts.push({ id, kind: "text", local: k.local?.textContent ?? null, remote: k.remote?.textContent ?? null });
+    const [merged] = parseModel(res.root, { seed: "", known: new Map() });
+    for (const t of [c2.get(id), i2.get(id)]) {
+      t.c = merged.c;
+      if (merged.m) t.m = merged.m;
+      else delete t.m;
+    }
+  }
+  const order = current.map((x) => x.id);
+  for (const [id, was] of b) {
+    const l = c2.get(id);
+    if (!l || i.has(id) || same(c.get(id), was)) continue;
+    let k = order.indexOf(id) - 1;
+    while (k >= 0 && !i2.has(order[k])) k--;
+    const at = k < 0 ? 0 : incoming2.findIndex((x) => x.id === order[k]) + 1;
+    incoming2.splice(at, 0, { ...l });
+    i2.set(id, incoming2[at]);
+    conflicts.push({ id, kind: "kept-edit" });
+  }
+  const out = mergeJson(base, current2, incoming2, {
+    onConflict: (k) => conflicts.push({ kind: "field", path: k.path, local: k.local, remote: k.remote, resolved: k.resolved }),
+  });
+  const ids = new Set(out.map((x) => x.id));
+  const parentOf = (id) => (c.get(id) ?? b.get(id) ?? i.get(id))?.parent ?? null;
+  const fixed = out.map((x) => {
+    let p = x.parent ?? null;
+    while (p && !ids.has(p)) p = parentOf(p);
+    return p === (x.parent ?? null) ? x : { ...x, parent: p };
+  });
+  // Both sides moving blocks into each other leaves a parent cycle: the block
+  // whose incoming parent closes the loop keeps the tab's parent instead, and a
+  // loop that remains goes back to base.
+  const parents = new Map(fixed.map((x) => [x.id, x.parent ?? null]));
+  const loops = (id) => {
+    const seen = new Set([id]);
+    for (let p = parents.get(id); p; p = parents.get(p)) {
+      if (seen.has(p)) return true;
+      seen.add(p);
+    }
+    return false;
+  };
+  for (const x of fixed) {
+    if (!loops(x.id)) continue;
+    for (const p of [c.get(x.id)?.parent, b.get(x.id)?.parent, null]) {
+      parents.set(x.id, p && ids.has(p) ? p : null);
+      if (!loops(x.id)) break;
+    }
+  }
+  const items = fixed.map((x) => ((x.parent ?? null) === parents.get(x.id) ? x : { ...x, parent: parents.get(x.id) }));
+  return { items, conflicts };
+}

package/src/page/model.js

@@ -5,14 +5,15 @@
 // text and `m` its mark keys, one per UTF-16 unit, left out when there are none
 // (inline.js). Attributes equal to their schema default are left out, so
 // a block's JSON is as small as the block. A table keeps its rows as an object
-// keyed by row id ({ pos, cells: { <col id>: text } }), never a list, because a
+// keyed by row id ({ pos, cells: { <col id>: cell } }), never a list, because a
 // list in a live store is written whole and two tabs adding rows keep one.
 //
 // Order is (pos, id): pos strings compare as plain strings, and the id breaks
 // the tie two tabs inserting at the same spot leave behind. Ids and positions
 // are only ever assigned by a local edit (identityPlugin), never on open.
 import { model, state, transform } from "../vendor/prosemirror.vendor.js";
-import { flatten, unflatten } from "./inline.js";
+import { flatten, unflatten, unitsOf, runsOf } from "./inline.js";
+import { cellText } from "./rich/cell.js";
 
 export const REMOTE = "clay-page-remote";
 
@@ -85,13 +86,29 @@ function attrsJson(node) {
   return out;
 }
 
+// A table cell as the record keeps it: its text when it has no marks and no
+// line breaks, otherwise { c, m } in the text blocks' inline encoding.
+export function cellValue(cell) {
+  const { c, m } = flatten(cell.content);
+  return m.some(Boolean) ? { c, m: runsOf(m) } : c;
+}
+
+export function cellContent(schema, value) {
+  if (value !== null && typeof value === "object" && typeof value.c === "string") {
+    const units = unitsOf(value.m, value.c.length);
+    if (units) return unflatten(schema, value.c, units, schema.nodes.table_cell);
+  }
+  const text = cellText(value);
+  return text ? schema.text(text) : null;
+}
+
 export function blockJson(node) {
   const out = { t: node.type.name, pos: node.attrs.pos, ...attrsJson(node) };
   if (node.type.name === "table") {
     const rows = {};
     node.forEach((row) => {
       const cells = {};
-      row.forEach((cell) => { cells[cell.attrs.col] = cell.textContent; });
+      row.forEach((cell) => { cells[cell.attrs.col] = cellValue(cell); });
       rows[row.attrs.id] = { pos: row.attrs.pos, cells };
     });
     out.rows = rows;
@@ -116,17 +133,14 @@ export function nodeFromBlock(schema, id, blockValue) {
     const { table_row: rowType, table_cell: cellType } = schema.nodes;
     const children = orderedIds(rows || {}).map((rid) => rowType.createChecked(
       { id: rid, pos: rows[rid].pos },
-      cols.map((col) => {
-        const text = rows[rid].cells?.[col];
-        return cellType.createChecked({ col }, text ? schema.text(String(text)) : null);
-      }),
+      cols.map((col) => cellType.createChecked({ col }, cellContent(schema, rows[rid].cells?.[col]))),
     ));
     return schema.nodes.table.createChecked({ ...attrs, id, pos }, children);
   }
   const type = schema.nodes[t];
   if (!type) throw new RangeError(`page: unknown block type ${t}`);
   // A record from before the flat form holds ProseMirror's inline JSON.
-  const content = typeof c === "string" ? unflatten(schema, c, m, type) : Array.isArray(c) && c.length ? model.Fragment.fromJSON(schema, c) : null;
+  const content = typeof c === "string" ? unflatten(schema, c, unitsOf(m, c.length), type) : Array.isArray(c) && c.length ? model.Fragment.fromJSON(schema, c) : null;
   return type.create({ ...attrs, id, pos }, content);
 }
 
@@ -198,10 +212,57 @@ export function repairSiblings(items, prefix) {
   return out;
 }
 
+// True when every step of tr edits inside one top-level textblock: its text
+// and marks change, never which blocks the page has, their order or attrs.
+export function insideTextblocks(tr) {
+  for (let i = 0; i < tr.steps.length; i++) {
+    const step = tr.steps[i];
+    if (step instanceof transform.ReplaceStep) {
+      if (step.slice.openStart || step.slice.openEnd) return false;
+      for (let j = 0; j < step.slice.content.childCount; j++) if (!step.slice.content.child(j).isInline) return false;
+    } else if (!(step instanceof transform.AddMarkStep || step instanceof transform.RemoveMarkStep)) return false;
+    const $from = tr.docs[i].resolve(step.from), $to = tr.docs[i].resolve(step.to);
+    if ($from.depth !== 1 || $to.depth !== 1 || $from.index(0) !== $to.index(0) || !$from.parent.isTextblock) return false;
+  }
+  return true;
+}
+
 export function identityPlugin() {
+  // Documents with nothing to repair. An edit inside textblocks keeps a
+  // document that way, so it skips the walk over every block.
+  const clean = new WeakSet();
+  const ready = (doc) => {
+    const ids = new Set();
+    let previous = null, valid = true;
+    doc.forEach((node) => {
+      if (!node.attrs.id || ids.has(node.attrs.id) || !isKey(node.attrs.pos) || (previous !== null && previous >= node.attrs.pos)) valid = false;
+      ids.add(node.attrs.id);
+      previous = node.attrs.pos;
+      if (node.type.name !== "table") return;
+      const rows = new Set();
+      let rowPrevious = null;
+      node.forEach((row) => {
+        if (!row.attrs.id || rows.has(row.attrs.id) || !isKey(row.attrs.pos) || (rowPrevious !== null && rowPrevious >= row.attrs.pos)) valid = false;
+        rows.add(row.attrs.id);
+        rowPrevious = row.attrs.pos;
+      });
+    });
+    return valid;
+  };
   return new state.Plugin({
+    state: {
+      init(_config, editor) { if (ready(editor.doc)) clean.add(editor.doc); return null; },
+      apply() { return null; },
+    },
     appendTransaction(transactions, old, next) {
-      if (!transactions.some((tr) => tr.docChanged && !tr.getMeta(REMOTE))) return null;
+      if (clean.has(old.doc) && transactions.every(insideTextblocks)) {
+        clean.add(next.doc);
+        return null;
+      }
+      if (!transactions.some((tr) => tr.docChanged && !tr.getMeta(REMOTE))) {
+        if (clean.has(old.doc) && ready(next.doc)) clean.add(next.doc);
+        return null;
+      }
       const tr = next.tr;
       const fix = (node, at, change) => { if (change) tr.setNodeMarkup(at, null, { ...node.attrs, ...change }); };
       // Of two holders of an id, the one with the old block's content keeps it
@@ -235,6 +296,7 @@ export function identityPlugin() {
         node.forEach((row, rowOffset) => rows.push({ node: row, at: offset + 1 + rowOffset }));
         repairSiblings(items(rows), "r").forEach((change, i) => fix(rows[i].node, rows[i].at, change));
       }
+      if (!tr.docChanged) clean.add(next.doc);
       return tr.docChanged ? tr : null;
     },
   });

package/src/page/placeholder.js

@@ -0,0 +1,23 @@
+import { state, view as pmView } from "../vendor/prosemirror.vendor.js";
+import { schema } from "./schema.js";
+
+const { Decoration, DecorationSet } = pmView;
+
+export const PLACEHOLDER_TEXT = "Type / for blocks";
+
+export function placeholderPlugin(text = PLACEHOLDER_TEXT) {
+  return new state.Plugin({
+    props: {
+      decorations(st) {
+        const { selection } = st;
+        if (!selection.empty) return null;
+        const $from = selection.$from;
+        if ($from.depth !== 1) return null;
+        const node = $from.parent;
+        if (node.type !== schema.nodes.paragraph || node.content.size) return null;
+        const pos = $from.before(1);
+        return DecorationSet.create(st.doc, [Decoration.node(pos, pos + node.nodeSize, { class: "page-placeholder", "data-placeholder": text })]);
+      },
+    },
+  });
+}