@panphora/clayjs 1.17.0 → 1.18.0

package/src/loader.js

@@ -86,10 +86,11 @@ export async function boot(base, params, readyResolve, manifest = null, suppleme
   const regionPolicy = await MODULES["lib/region-policy.js"]();
 
   const hasSap = Boolean(document.querySelector("[sap]"));
+  const hasVariants = document.querySelectorAll("head style[clay-variant]").length >= 2;
   // derive.js imports the sapjs core only when no sap.js script took the page over.
   const hasSapJs = Boolean(document.querySelector('script[src*="sap.js"]'));
   bootPhase.holdSettle = hasSap && isEditMode;
-  const plan = resolveModules(params, isEditMode, { isDraftMode, hasSap, canEdit, templateSource: templateSource() });
+  const plan = resolveModules(params, isEditMode, { isDraftMode, hasSap, hasVariants, canEdit, templateSource: templateSource() });
   // Where edits land, resolved once: a visitor draft saves into its draft slot, the
   // demo plugin into localStorage, and everything else to the host. setMode takes no
   // destination, and V4 has no draft-to-host transition.
@@ -126,16 +127,22 @@ export async function boot(base, params, readyResolve, manifest = null, suppleme
   // Nothing is fetched for it here: the decision and the controller behind it wait for the
   // first switch, so this costs a reader with a declaration no more than one attribute.
   if (document.documentElement.getAttribute("clay-mode-switch") === "live") {
-    const editing = resolveModules(params, true, { isDraftMode, hasSap, canEdit, templateSource: templateSource() });
+    const editing = resolveModules(params, true, { isDraftMode, hasSap, hasVariants, canEdit, templateSource: templateSource() });
     loaded["core/edit-mode.js"].noteLiveSwitch({
       edit: editing,
       // The plan a view boot would have resolved, not the edit plan this boot resolved: an
       // exit imports it and starts its reader, and an edit-only module belongs to the
       // session being left.
-      view: resolveModules(params, false, { isDraftMode, hasSap, canEdit, templateSource: templateSource() }),
+      view: resolveModules(params, false, { isDraftMode, hasSap, hasVariants, canEdit, templateSource: templateSource() }),
       loaded,
       modules: MODULES,
-      attach: attachPluginMember,
+      // A live entry attaches the edit plugins after boot: clay.plugins names them from then on.
+      attach: (path, mod) => {
+        attachPluginMember(path, mod);
+        const name = PLUGIN_NAMES[path];
+        const named = window.clay.plugins;
+        if (name && Array.isArray(named) && !named.includes(name)) window.clay.plugins = Object.freeze([...named, name]);
+      },
       attachEditCore,
       announce,
       loadEditHints: loadEditHints ? editHints(loadEditHints, manifest, editing, hasSapJs) : null,
@@ -146,6 +153,9 @@ export async function boot(base, params, readyResolve, manifest = null, suppleme
   // leases before a plugin can take input. A reader returns at the first line.
   await loaded["core/edit-mode.js"].activateInitialMode();
   window.clay.plugins = Object.freeze([...plan.plugins, ...plan.late].map((path) => PLUGIN_NAMES[path]));
+  // What an edit session here would load, so view-mode chrome can offer an edit-only feature.
+  const editPlan = isEditMode ? plan : resolveModules(params, true, { isDraftMode, hasSap, hasVariants, canEdit, templateSource: templateSource() });
+  window.clay.editPlugins = Object.freeze([...editPlan.plugins, ...editPlan.late].map((path) => PLUGIN_NAMES[path]));
 
   for (const path of plan.plugins) {
     // A plugin that throws on evaluation degrades to absent. Unguarded, its

package/src/page/adopt-boot.js

@@ -54,6 +54,7 @@ export function installAdoption({
   notice = () => {},
   snapshot = () => null,
   mergeTagless = false,
+  seeded = false,
   writerReady = () => Promise.resolve(),
   adopted = () => {},
   hold = suspendAutosave,
@@ -216,7 +217,7 @@ export function installAdoption({
   }
 
   doc.addEventListener("clay:sync-applied", onFrame);
-  if (source) run(source, true);
+  if (source && !seeded) run(source, true);
 
   return {
     // Resolves once everything queued so far has been attempted, with the boot

package/src/page/awareness.js

@@ -54,6 +54,12 @@ const caretElement = (doc, name, color) => {
 
 const labelOf = (person) => (typeof person.name === "string" && person.name.trim() ? person.name.trim() : "Someone");
 
+let barrier = false;
+if (typeof document !== "undefined") {
+  document.addEventListener("clay:presence-quiesce", () => { barrier = true; });
+  document.addEventListener("clay:presence-resume", () => { barrier = false; });
+}
+
 /**
  * The decorations one snapshot produces in one document.
  *
@@ -104,14 +110,20 @@ export function createPageAwareness({ binding, view, store = presenceStore, epoc
   styleWithLegacyId(STYLE_ID, STYLE_CSS, STYLE_ID, ["editor-ui"]);
   const doc = view.dom.ownerDocument;
   let disposed = false;
-  let focused = true;
+  // The exit's barrier, and the clear that came with it: while it runs this tab
+  // publishes nothing, so a caret move or a doc change during the barrier cannot put
+  // a target back the session is about to release.
+  let quiesced = barrier;
+  // Focus is a fact about the document, not a guess: an editor mounted in a background
+  // tab is not focused, and publishing a target for it would claim a caret nobody holds.
+  let focused = typeof view.hasFocus === "function" ? view.hasFocus() === true : view.dom.contains(doc.activeElement);
   let pending = null;
   const isComposing = () => (composing ? composing() === true : view.composing === true);
 
   const supported = () => store.getSnapshot().pageAwareness !== false;
 
   const publish = (state = view.state) => {
-    if (disposed) return;
+    if (disposed || quiesced) return;
     if (!supported() || !focused || isComposing()) {
       store.setTarget(null);
       return;
@@ -167,6 +179,19 @@ export function createPageAwareness({ binding, view, store = presenceStore, epoc
     schedule();
   });
 
+  // The edit participant reaches these, so the page's target goes quiet with the
+  // sender during the exit's barrier and comes back with it on a refused exit.
+  const quiesce = () => {
+    if (disposed) return;
+    quiesced = true;
+    store.setTarget(null);
+  };
+  const resume = () => {
+    if (disposed) return;
+    quiesced = false;
+    publish();
+  };
+
   const onFocus = () => { focused = true; publish(); schedule(); };
   const onBlur = () => { focused = false; store.setTarget(null); };
   const onHide = () => { store.setTarget(null); };
@@ -176,6 +201,8 @@ export function createPageAwareness({ binding, view, store = presenceStore, epoc
   view.dom.addEventListener("blur", onBlur);
   view.dom.addEventListener("compositionend", onCompositionEnd);
   doc.addEventListener("pagehide", onHide);
+  doc.addEventListener("clay:presence-quiesce", quiesce);
+  doc.addEventListener("clay:presence-resume", resume);
   view.updateState(view.state.reconfigure({ plugins: [...view.state.plugins, plugin] }));
   publish();
   schedule();
@@ -184,6 +211,8 @@ export function createPageAwareness({ binding, view, store = presenceStore, epoc
     epoch,
     refresh,
     plugin,
+    quiesce,
+    resume,
     get decorations() {
       return awarenessKey.getState(view.state) ?? DecorationSet.empty;
     },
@@ -199,6 +228,8 @@ export function createPageAwareness({ binding, view, store = presenceStore, epoc
       view.dom.removeEventListener("blur", onBlur);
       view.dom.removeEventListener("compositionend", onCompositionEnd);
       doc.removeEventListener("pagehide", onHide);
+      doc.removeEventListener("clay:presence-quiesce", quiesce);
+      doc.removeEventListener("clay:presence-resume", resume);
       store.setTarget(null);
       store.releaseTarget();
       if (!view.isDestroyed) {

package/src/page/blocks.js

@@ -9,7 +9,7 @@ import { safeHref, safeSrc } from "./link.js";
 import { flatten, runsOf, unflatten, unitsOf } from "./inline.js";
 import { OPAQUE_MARK, opaqueMark } from "./format-codec.js";
 import { NATIVE_NAMES, nativeAttrs } from "./format-native.js";
-import { DEFAULTS, MARKS, OPAQUE, envelopeAttrs, envelopeRecord, marksAttrs, marksEntries } from "./projection.js";
+import { DEFAULTS, MARKS, OPAQUE, envelopeAttrs, envelopeRecord, marksAttrs, marksEntries, toggleLevel } from "./projection.js";
 
 const alignOf = (a) => (a === "left" || a === "right" ? a : null);
 
@@ -37,7 +37,9 @@ const asStep = (dispatch) => dispatch && ((tr) => dispatch(history.closeHistory(
 //   hidden    some toggle above it is closed
 //   subEnd    index of the last block of its subtree (itself when it has none)
 // A subtree is always contiguous, so it is the range [ents[i].at, ents[subEnd].end].
-export function outline(doc) {
+// `reveal` is a set of toggle ids a link opened for this reader only: a revealed
+// toggle reads as open here, and its saved `open` is untouched.
+export function outline(doc, reveal = null) {
   const ents = [];
   const toggleAt = new Map();
   let run = [];
@@ -53,8 +55,9 @@ export function outline(doc) {
       if (run.length) up = run[run.length - 1];
       run.push(i);
     } else run = [];
-    const hidden = t >= 0 && (ents[t].hidden || !ents[t].node.attrs.open);
-    ents.push({ node, at, end: at + node.nodeSize, i, up, depth: t >= 0 ? ents[t].depth + 1 : 0, hidden, subEnd: i });
+    const open = isToggle(node) && (node.attrs.open || !!reveal?.has(node.attrs.id));
+    const hidden = t >= 0 && (ents[t].hidden || !ents[t].open);
+    ents.push({ node, at, end: at + node.nodeSize, i, up, depth: t >= 0 ? ents[t].depth + 1 : 0, hidden, open, subEnd: i });
     if (isToggle(node) && node.attrs.id) toggleAt.set(node.attrs.id, i);
   });
   for (let j = ents.length - 1; j >= 0; j--) {
@@ -131,11 +134,19 @@ export function structureFixes(doc, oldDoc = null) {
 }
 
 export function structurePlugin() {
+  const valid = new WeakSet();
   return new Plugin({
     appendTransaction(trs, old, next) {
       if (!trs.some((tr) => tr.docChanged && !tr.getMeta(REMOTE))) return null;
+      if (valid.has(old.doc) && sameStructure(old.doc, next.doc)) {
+        valid.add(next.doc);
+        return null;
+      }
       const fixes = structureFixes(next.doc, old.doc);
-      if (!fixes.length) return null;
+      if (!fixes.length) {
+        valid.add(next.doc);
+        return null;
+      }
       const tr = next.tr;
       for (const f of fixes) tr.setNodeMarkup(f.at, null, f.attrs);
       return tr;
@@ -643,9 +654,22 @@ export function backspaceBodyBlock(st, dispatch) {
 
 // ---- open / closed ----------------------------------------------------------
 
+// A reveal is edit-mode state, never a document attribute: the toggle ids a followed link
+// opened live in the collapse plugin's own state, so nothing is saved, no undo step is
+// made and no peer is told.
+export const REVEAL = "page-reveal";
+
+export function revealToggles(tr, ids) {
+  return ids.length ? tr.setMeta(REVEAL, { add: ids }) : tr;
+}
+
+// A toggle the person opens or closes themselves drops any reveal a link left on it:
+// the override never outlives the decision it saved them.
 export function setOpen(st, ti, open, ents = outline(st.doc)) {
   const e = ents[ti];
-  return st.tr.setNodeMarkup(e.at, null, { ...e.node.attrs, open }).setMeta("addToHistory", false);
+  return st.tr.setNodeMarkup(e.at, null, { ...e.node.attrs, open })
+    .setMeta("addToHistory", false)
+    .setMeta(REVEAL, { clear: [e.node.attrs.id] });
 }
 
 export function toggleOpenAtSelection(st, dispatch) {
@@ -662,7 +686,7 @@ export function toggleOpenAtSelection(st, dispatch) {
 export function hiddenRanges(ents) {
   const out = [];
   for (const e of ents) {
-    if (!isToggle(e.node) || e.hidden || e.node.attrs.open || e.subEnd === e.i) continue;
+    if (!isToggle(e.node) || e.hidden || e.open || e.subEnd === e.i) continue;
     out.push({ line: e.at + 1, sumEnd: e.end - 1, from: e.end, to: ents[e.subEnd].end });
   }
   return out;
@@ -759,35 +783,55 @@ export function sameStructure(a, b) {
   return true;
 }
 
-function collapseState(doc) {
-  const ents = outline(doc);
-  return { decos: decorationsFor(doc, ents), ranges: hiddenRanges(ents) };
+const NO_REVEAL = new Set();
+
+function collapseState(doc, reveal = NO_REVEAL) {
+  const ents = outline(doc, reveal);
+  return { decos: decorationsFor(doc, ents), ranges: hiddenRanges(ents), reveal };
 }
 
+// The block decorations of a long document in one linear pass. ProseMirror's
+// DecorationSet scans every top-level node decoration for each child the view
+// visits and each decoration it maps, which is quadratic in blocks; this set
+// holds only node decorations at the top and finds a toggle's widget by binary
+// search. It is built directly in document order instead of through create().
+let OutlineSet = null;
+const outlineSet = () => OutlineSet ??= class extends pmView.DecorationSet {
+  forChild(offset, node) {
+    if (node.isLeaf) return pmView.DecorationSet.empty;
+    const c = this.children;
+    let lo = 0, hi = c.length / 3;
+    while (lo < hi) { const mid = (lo + hi) >> 1; if (c[mid * 3] < offset) lo = mid + 1; else hi = mid; }
+    return lo * 3 < c.length && c[lo * 3] === offset ? c[lo * 3 + 2] : pmView.DecorationSet.empty;
+  }
+};
+
 export function decorationsFor(doc, ents = outline(doc)) {
   const { Decoration, DecorationSet } = pmView;
   const markers = orderedMarkers(ents);
-  const decos = [];
+  const local = [], children = [];
   for (const e of ents) {
     const attrs = {};
     if (e.hidden) { attrs.class = "page-hidden"; attrs["aria-hidden"] = "true"; }
     if (e.depth) attrs.style = `--page-depth:${e.depth}`;
     if (markers.has(e.i)) attrs["data-marker"] = markers.get(e.i);
-    if (isToggle(e.node)) attrs["aria-expanded"] = e.node.attrs.open ? "true" : "false";
-    if (Object.keys(attrs).length) decos.push(Decoration.node(e.at, e.end, attrs));
+    if (isToggle(e.node)) attrs["aria-expanded"] = e.open ? "true" : "false";
+    if (Object.keys(attrs).length) local.push(Decoration.node(e.at, e.end, attrs));
     if (isToggle(e.node) && !e.hidden) {
-      decos.push(Decoration.widget(e.at + 1, () => disclosure(e.node), { side: -1, ignoreSelection: true, key: `t:${e.node.attrs.id}:${e.node.attrs.open}` }));
+      const widget = Decoration.widget(0, () => disclosure(e.node, e.open), { side: -1, ignoreSelection: true, key: `t:${e.node.attrs.id}:${e.open}` });
+      children.push(e.at, e.end, new DecorationSet([widget], []));
     }
   }
-  return DecorationSet.create(doc, decos);
+  if (!local.length && !children.length) return DecorationSet.empty;
+  return new (outlineSet())(local, children);
 }
 
-function disclosure(node) {
+function disclosure(node, open = node.attrs.open) {
   const b = document.createElement("button");
   b.type = "button";
   b.className = "page-toggle-button";
   b.contentEditable = "false";
-  b.setAttribute("aria-label", node.attrs.open ? "Collapse" : "Expand");
+  b.setAttribute("aria-label", open ? "Collapse" : "Expand");
   b.setAttribute("data-toggle", node.attrs.id || "");
   return b;
 }
@@ -799,13 +843,15 @@ export function collapsePlugin() {
     state: {
       init: (_, s) => collapseState(s.doc),
       apply(tr, value, old, s) {
+        const meta = tr.getMeta(REVEAL);
+        if (meta) {
+          const reveal = new Set(value.reveal);
+          for (const id of meta.add ?? []) reveal.add(id);
+          for (const id of meta.clear ?? []) reveal.delete(id);
+          return collapseState(s.doc, reveal);
+        }
         if (!tr.docChanged) return value;
-        if (!sameStructure(old.doc, s.doc)) return collapseState(s.doc);
-        const m = tr.mapping;
-        return {
-          decos: value.decos.map(m, s.doc),
-          ranges: value.ranges.map((r) => ({ line: m.map(r.line, -1), sumEnd: m.map(r.sumEnd), from: m.map(r.from), to: m.map(r.to, -1) })),
-        };
+        return collapseState(s.doc, value.reveal);
       },
     },
     appendTransaction(trs, old, next) {
@@ -1002,7 +1048,12 @@ export function flattenPastedHTML(html, doc = globalThis.document) {
         t.setAttribute("data-page-toggle", k);
         if (child.hasAttribute("open")) t.setAttribute("data-open", "true");
         if (parentKey) t.setAttribute("data-page-parent", parentKey);
-        if (summary) t.append(...summary.childNodes);
+        // A toggle heading saves as a heading in its summary: keep the level, paste its text.
+        const head = summary?.querySelector(":scope > h1, :scope > h2, :scope > h3");
+        if (head) {
+          t.setAttribute("data-level", head.tagName[1]);
+          t.append(...head.childNodes);
+        } else if (summary) t.append(...summary.childNodes);
         target.appendChild(t);
         for (const c of [...child.childNodes]) if (c !== summary) { const box = doc.createElement("div"); box.appendChild(c); walk(box, k, target); }
         continue;
@@ -1043,6 +1094,8 @@ export function flattenPastedHTML(html, doc = globalThis.document) {
     if (parent) for (const piece of pieces) piece.setAttribute("data-page-parent", parent);
     child.replaceWith(...pieces);
   }
+  const sliced = root.querySelector("[data-pm-slice]");
+  if (sliced) out.firstElementChild?.setAttribute("data-pm-slice", sliced.dataset.pmSlice);
   return out.innerHTML;
 }
 
@@ -1080,14 +1133,19 @@ const pastedOpaqueMarks = (dom) => {
   try { return { entries: marksEntries(dom.getAttribute(MARKS)) }; } catch { return false; }
 };
 
+// clipboard-shape.js: lists and tables on the clipboard.
+let shape = null;
+export const loadClipboardShape = () => import("./clipboard-shape.js").then((mod) => { shape = mod; }, () => {});
+
 // The clipboard parser: the schema has toDOM only, so paste gets its own rules.
 export const clipboardParser = new model.DOMParser(parseSchema, [
+  { tag: "table", node: "table", getAttrs: (d) => shape?.table(d) ?? false, getContent: (d) => shape.rows(d) },
   { tag: `div[${OPAQUE}]`, node: "opaque_block", getAttrs: pastedOpaque, getContent: pastedOpaqueContent },
   { tag: `span[${MARKS}]`, mark: OPAQUE_MARK, getAttrs: pastedOpaqueMarks },
   { tag: "div[data-page-li]", node: "list_item", getAttrs: (d) => ({ kind: d.getAttribute("data-kind") || "bullet", indent: +d.getAttribute("data-indent") || 0, checked: d.getAttribute("data-checked") === "true", parent: parentAttr(d) }) },
   { tag: "div.page-li", node: "list_item", getAttrs: (d) => ({ kind: d.getAttribute("data-kind") || "bullet", indent: +d.getAttribute("data-indent") || 0, checked: d.getAttribute("data-checked") === "true", parent: parentAttr(d) }) },
-  { tag: "div[data-page-toggle]", node: "toggle", getAttrs: (d) => ({ id: d.getAttribute("data-page-toggle"), open: d.getAttribute("data-open") === "true", parent: parentAttr(d) }) },
-  { tag: "div.page-toggle", node: "toggle", getAttrs: (d) => ({ id: d.getAttribute("data-id"), open: d.getAttribute("data-open") === "true", parent: null }) },
+  { tag: "div[data-page-toggle]", node: "toggle", getAttrs: (d) => ({ id: d.getAttribute("data-page-toggle"), open: d.getAttribute("data-open") === "true", parent: parentAttr(d), level: toggleLevel(Number(d.getAttribute("data-level"))) }) },
+  { tag: "div.page-toggle", node: "toggle", getAttrs: (d) => ({ id: d.getAttribute("data-id"), open: d.getAttribute("data-open") === "true", parent: null, level: toggleLevel(Number(d.getAttribute("data-level"))) }) },
   { tag: "h1", node: "heading", getAttrs: (d) => ({ level: 1, parent: parentAttr(d) }) },
   { tag: "h2", node: "heading", getAttrs: (d) => ({ level: 2, parent: parentAttr(d) }) },
   { tag: "h3", node: "heading", getAttrs: (d) => ({ level: 3, parent: parentAttr(d) }) },
@@ -1173,6 +1231,7 @@ class ClipboardSerializer extends model.DOMSerializer {
       if (isToggle(n) && n.attrs.id) dom.setAttribute("data-page-toggle", n.attrs.id);
       if (n.type === N.image && n.attrs.width) dom.setAttribute("data-width", String(n.attrs.width));
     });
+    shape?.copy(fragment, doms);
     return out;
   }
 }
@@ -1223,9 +1282,10 @@ function writesFormat(slice) {
 
 function pasteFormat(view, event, slice) {
   const from = view.state.selection.from, to = view.state.selection.to;
+  const before = view.state.doc;
   const plain = () => {
     const text = slice.content.textBetween(0, slice.content.size, "\n", " ");
-    if (!view.isDestroyed && text) view.dispatch(view.state.tr.insertText(text, from, to));
+    if (!view.isDestroyed && text && view.state.doc === before) view.dispatch(view.state.tr.insertText(text, from, to));
     return false;
   };
   import("./format-native-commands.js").then(({ pasteFormats }) => pasteFormats(view, slice, from, to), plain);
@@ -1234,12 +1294,14 @@ function pasteFormat(view, event, slice) {
 
 export function pastePlugin() {
   return new Plugin({
+    view() { loadClipboardShape(); return {}; },
     props: {
       handlePaste(view, event, slice) {
         if (writesFormat(slice)) return pasteFormat(view, event, slice);
         return pasteIntoClosedSummary(view, event, slice);
       },
       clipboardSerializer,
+      clipboardTextSerializer: (slice) => shape?.text(slice),
       transformPastedHTML: (html) => flattenPastedHTML(html),
       clipboardParser,
       clipboardTextParser: (text, _$ctx, plain) => (plain ? null : parseListText(text)),

package/src/page/boot-pack.js

@@ -14,7 +14,7 @@ export { installAdoption, ADOPTION_TIMEOUT_MS } from "./adopt-boot.js";
 export { classifyFile, readBack } from "./adopt.js";
 export { mergePageModels } from "./merge.js";
 export { canon } from "./projection.js";
-export { renderFromTags } from "./save-projection.js";
+export { renderFromTags, acceptedPageState } from "./save-projection.js";
 export { blocksFromYValue } from "./ybind/decode.js";
 export { createYPageBinding } from "./ybind/binding.js";
 export { yValueOf } from "./ybind/provider.js";

package/src/page/chart-tables.js

@@ -1,11 +1,29 @@
 import { schema } from "./schema.js";
 import { orderedIds } from "./model.js";
 
-// The tables a chart can be drawn from: a top-level table with at least one
-// column. The insert menu reads this without the chart module itself, which only
+// The tables a chart can be drawn from: a top-level table with a labels column
+// and at least one more to plot. The insert menu reads this without the chart module itself, which only
 // a document that takes a chart loads.
 export function chartTables(doc) {
   const tables = [];
-  doc.forEach((node) => { if (node.type === schema.nodes.table && orderedIds(node.attrs.cols).length) tables.push(node); });
+  doc.forEach((node) => { if (node.type === schema.nodes.table && orderedIds(node.attrs.cols).length > 1) tables.push(node); });
   return tables;
 }
+
+// A table's name for a person: the heading before it with no other table in
+// between, else its place among the tables, so a chart and the picker name it
+// without a stored title.
+export function tableName(doc, tableId) {
+  let name = "";
+  let count = 0;
+  let found = null;
+  doc.forEach((node) => {
+    if (found !== null) return;
+    if (node.type === schema.nodes.heading) name = node.textContent;
+    if (node.type !== schema.nodes.table) return;
+    count += 1;
+    if (node.attrs.id === tableId) found = name || `Table ${count}`;
+    name = "";
+  });
+  return found;
+}