@panphora/clayjs 1.16.0 → 1.17.0

package/src/page/inline.js

@@ -14,28 +14,41 @@
 // encodeForMerge (replay.js) gives each one a code of its own.
 // A mark this schema has no type for keeps its token or named descriptor
 // instead of throwing (format-codec.js): the unit's key is written back exactly
-// as it was read.
+// as it was read. A mark of this schema with no compact code of its own is
+// written as a named descriptor too, x[name, attrs], so a new mark never takes a
+// letter an older writer already reads.
 import { model } from "../vendor/prosemirror.vendor.js";
 import { descriptors, entriesOf, isOpaque, keyOf, opaqueMark } from "./format-codec.js";
+import { nativeAttrs } from "./format-native.js";
 
 export const ATOM = "";
 export const CODES = { strong: "b", em: "i", strike: "s", code: "c", link: "a" };
+const NATIVE = new Set(["underline", "text_color", "highlight"]);
 const NAMES = Object.fromEntries(Object.entries(CODES).map(([name, code]) => [code, name]));
 
 export function markKey(marks) {
   let key = "";
+  const named = [];
   for (const mark of marks) {
     if (isOpaque(mark)) {
       key += keyOf(mark.attrs.entries);
       continue;
     }
     const code = CODES[mark.type.name];
-    if (!code) throw new TypeError(`page: the mark ${mark.type.name} has no key code`);
+    if (!code) {
+      // A mark with no compact letter travels as a named descriptor, after the codes
+      // and in the codec's order: one of the four formats only with attrs it writes,
+      // any other (a mention, a date) with its own attrs.
+      const native = nativeAttrs(mark.type.name, mark.attrs);
+      if (!native && NATIVE.has(mark.type.name)) throw new TypeError(`page: the mark ${mark.type.name} has no key code`);
+      named.push({ name: mark.type.name, attrs: native ?? mark.attrs });
+      continue;
+    }
     key += code;
     const names = Object.keys(mark.type.attrs);
     if (names.length) key += JSON.stringify(names.map((name) => mark.attrs[name]));
   }
-  return key;
+  return named.length ? key + keyOf(named) : key;
 }
 
 const parsed = new WeakMap();
@@ -49,15 +62,26 @@ export function marksOf(schema, key) {
   marks = [];
   const opaque = [];
   for (const desc of descriptors(key)) {
-    const name = desc.code === undefined ? null : NAMES[desc.code];
+    // A named descriptor this schema does have a type for is that mark, not an opaque
+    // entry: one of the four formats only with attrs it writes, any other mark only
+    // with attributes its type declares. Anything else stays opaque, so nothing is lost.
+    if (desc.code === undefined) {
+      const native = nativeAttrs(desc.name, desc.attrs);
+      const type = schema.marks[desc.name];
+      if (native) marks = type.create(native).addToSet(marks);
+      else if (type && !NATIVE.has(desc.name) && Object.keys(desc.attrs ?? {}).every((field) => Object.hasOwn(type.attrs, field))) marks = type.create(desc.attrs).addToSet(marks);
+      else opaque.push(desc);
+      continue;
+    }
+    const name = NAMES[desc.code];
     if (!name) {
       opaque.push(desc);
       continue;
     }
-    const type = schema.marks[name];
-    if (!type) throw new TypeError(`page: unknown mark code ${desc.code} in ${key}`);
-    const attrs = desc.attrs ? Object.fromEntries(Object.keys(type.attrs).map((field, j) => [field, desc.attrs[j]])) : null;
-    marks = type.create(attrs).addToSet(marks);
+    const coded = schema.marks[name];
+    if (!coded) throw new TypeError(`page: unknown mark code ${desc.code} in ${key}`);
+    const attrs = desc.attrs ? Object.fromEntries(Object.keys(coded.attrs).map((field, j) => [field, desc.attrs[j]])) : null;
+    marks = coded.create(attrs).addToSet(marks);
   }
   if (opaque.length) marks = opaqueMark(entriesOf(opaque)).addToSet(marks);
   cache.set(key, marks);

package/src/page/items.js

@@ -12,7 +12,8 @@ import { pickFiles, hostPlace } from "./media.js";
 import { makeTable, insertTableNode } from "./table.js";
 import { pickCsv } from "./csv-import.js";
 import { makeBoard, insertBoardNode } from "./board.js";
-import { chartFromSlash, chartTables } from "./chart.js";
+import { chartTables } from "./chart-tables.js";
+import { viewFeatures } from "./view-hooks.js";
 
 const { TextSelection } = state;
 const N = schema.nodes;
@@ -27,6 +28,7 @@ export const BLOCK_TYPES = [
   { key: "check", label: "Checklist", description: "Tasks to tick off", icon: "☐", type: "list_item", attrs: { kind: "check" }, hint: "[]", aliases: ["todo", "to-do", "task", "check", "checkbox"] },
   { key: "toggle", label: "Toggle", description: "Hide details under a line", icon: "▸", type: "toggle", attrs: { open: true }, hint: ">", aliases: ["collapse", "details", "fold"] },
   { key: "callout", label: "Callout", description: "Make a note stand out", icon: "!", type: "callout", aliases: ["note", "aside", "info"] },
+  { key: "quote", label: "Quote", description: "Set text apart as a quotation", icon: "\u201c", type: "quote", hint: "\"", aliases: ["blockquote", "quotation", "cite"] },
   { key: "code", label: "Code", description: "Code with highlighting", icon: "</>", type: "code_block", hint: "```", aliases: ["pre", "snippet"] },
 ];
 
@@ -41,6 +43,10 @@ export const INSERT_ITEMS = [
 
 export const CHART_ITEM = { key: "chart", label: "Chart", description: "A bar or line chart from a table", icon: "📊", aliases: ["graph", "plot", "bar", "line"], insert: "chart" };
 
+// The chart module and its view part load together, before the block draws: a
+// document that never takes a chart never fetches either.
+export const loadChartPart = (view) => (viewFeatures.get(view)?.ensure("chart") ?? Promise.resolve()).catch(() => {}).then(() => import("./chart.js"));
+
 export const MENU_ITEMS = [...BLOCK_TYPES, ...INSERT_ITEMS];
 
 export const insertItemsFor = (st, items = MENU_ITEMS) => (chartTables(st.doc).length ? [...items, CHART_ITEM] : items);
@@ -176,14 +182,20 @@ export function rankItems(items, query) {
 
 // What a pick does in the insert menu for the block at `index`. A divider and
 // the file pickers have their own placement; a block type retypes an empty line
-// and otherwise goes into a new block below the line's whole subtree.
+// and otherwise goes into a new block below the line's whole subtree. A block
+// type from a later format asks the format gate before it writes anything.
 export function runItem(view, item, index, remove = null) {
+  if (item.type !== "quote") return insertItem(view, item, index, remove);
+  return import("./format-native-commands.js").then(({ runFormat }) => runFormat(view, () => insertItem(view, item, index, remove)));
+}
+
+function insertItem(view, item, index, remove = null) {
   const st = view.state;
   if (item.insert === "image" || item.insert === "file") return pickFiles(view, item.insert === "image" ? "image/*" : "", hostPlace(st, index), remove);
   if (item.insert === "csv") return pickCsv(view, remove);
   if (item.insert === "table") return insertTableNode(st, view.dispatch, makeTable(), remove, null, index);
   if (item.insert === "board") return insertBoardNode(st, view.dispatch, makeBoard(), remove, index);
-  if (item.insert === "chart") return chartFromSlash(view, index, remove);
+  if (item.insert === "chart") return loadChartPart(view).then(({ chartFromSlash }) => chartFromSlash(view, index, remove));
   let tr = st.tr;
   if (remove) tr.delete(remove.from, remove.to);
   const node = tr.doc.child(index);

package/src/page/markdown.js

@@ -124,7 +124,31 @@ export const MARKDOWN_RULES = [
   ...INLINE_RULES,
 ];
 
-export const markdownPlugin = () => inputrules.inputRules({ rules: MARKDOWN_RULES });
+// The shortest shortcut that quotes a line: `" ` typed at the start of a
+// paragraph. It writes a floor-1 block, so it asks the format gate first and
+// converts only when the gate answered applied; the transaction it dispatches is
+// the input-rule one, recorded on this plugin so Backspace puts the literal `" `
+// back and undo keeps the conversion whole. The typed space is never swallowed:
+// when the format cannot be written, the space is inserted as itself.
+function quoteShortcut(plugin, view, from, to, text) {
+  if (text !== " " || from !== to) return false;
+  const st = view.state;
+  const $from = st.doc.resolve(from);
+  const node = $from.parent;
+  if ($from.depth !== 1 || node.type !== N.paragraph || $from.parentOffset !== 1 || node.textContent !== '"') return false;
+  if (!view.editable || typeof view.runFormatCommand !== "function") return false;
+  const plain = () => { if (!view.isDestroyed) view.dispatch(st.tr.insertText(" ", from, to)); };
+  const at = $from.before(1);
+  import("./format-native-commands.js").then(({ quoteFromSpace }) => quoteFromSpace(plugin, view, { at, from, to }, plain), plain);
+  return true;
+}
+
+export const markdownPlugin = () => {
+  const plugin = inputrules.inputRules({ rules: MARKDOWN_RULES });
+  const rules = plugin.props.handleTextInput;
+  plugin.props.handleTextInput = (view, from, to, text) => quoteShortcut(plugin, view, from, to, text) || rules(view, from, to, text);
+  return plugin;
+};
 
 // "| Name | Owner |" then Enter at the end of a paragraph: the paragraph becomes
 // a table with those column names and one empty row, the caret in its first cell.
@@ -150,7 +174,7 @@ export function backspaceToParagraph(st, dispatch) {
   const { $from, empty } = st.selection;
   if (!empty || $from.depth !== 1 || $from.parentOffset !== 0) return false;
   const n = $from.parent;
-  if (!(n.type === N.heading || n.type === N.callout || (n.type === N.code_block && n.content.size === 0))) return false;
+  if (!(n.type === N.heading || n.type === N.callout || n.type === N.quote || (n.type === N.code_block && n.content.size === 0))) return false;
   if (dispatch) dispatch(asStep(st.tr.setNodeMarkup($from.before(), N.paragraph, { id: n.attrs.id, pos: n.attrs.pos, parent: n.attrs.parent })));
   return true;
 }

package/src/page/mention-picker.js

@@ -0,0 +1,99 @@
+// The people picker the @ command draws: one listbox at the caret, outside the saved
+// article and never in it. It is built from the editor's own menu markup, so it needs no
+// stylesheet of its own, and it takes no focus: the caret and the typed query stay in the
+// document, and the active row is announced through the editor's aria-activedescendant as
+// the slash menu does. A name is only ever text.
+export const PICKER = "page-mention-picker";
+export const OPTION = "page-menu-item";
+const EMPTY = "No people to mention";
+
+let count = 0;
+
+// The people a picker may offer: the ones the document already names, with the host's live
+// list laid over them by id, so a renamed person is shown under the name the host answers
+// with. Nothing is invented when the host has no list.
+export function peopleFrom(saved = [], allowed = null) {
+  const byId = new Map();
+  for (const person of saved ?? []) if (person && typeof person.id === "string") byId.set(person.id, person);
+  for (const person of Array.isArray(allowed) ? allowed : []) if (person && typeof person.id === "string") byId.set(person.id, person);
+  return [...byId.values()];
+}
+
+export const filterPeople = (people, query) => {
+  const q = String(query ?? "").trim().toLowerCase();
+  if (!q) return people;
+  return people.filter((person) => String(person.name ?? "").toLowerCase().includes(q));
+};
+
+// The shell takes the words a command shows, so a date command reuses the same listbox:
+// same placement, same rows, same keyboard, and its own name for what it lists.
+export function createMentionPicker({ document: doc = globalThis.document, onPick = () => {}, label = "Mention a person", empty = EMPTY } = {}) {
+  const id = `page-mentions-${++count}`;
+  const el = doc.createElement("div");
+  el.className = `page-menu ${PICKER}`;
+  el.id = id;
+  el.setAttribute("role", "listbox");
+  el.setAttribute("aria-label", label);
+  el.hidden = true;
+  let people = [];
+  let active = 0;
+
+  const draw = () => {
+    if (!people.length) {
+      const none = doc.createElement("div");
+      none.className = "page-menu-title";
+      none.textContent = empty;
+      el.replaceChildren(none);
+      return;
+    }
+    el.replaceChildren(...people.map((person, i) => {
+      const row = doc.createElement("button");
+      row.type = "button";
+      row.className = `${OPTION}${i === active ? " is-active" : ""}`;
+      row.id = `${id}-${i}`;
+      row.dataset.index = String(i);
+      row.setAttribute("role", "option");
+      row.setAttribute("aria-selected", String(i === active));
+      row.textContent = String(person.name ?? "");
+      row.addEventListener("mousedown", (event) => event.preventDefault());
+      row.addEventListener("click", () => onPick(i));
+      return row;
+    }));
+  };
+
+  // The caret the list hangs from, in the page's own placement variables: the same ones
+  // the block menu writes, so the existing menu stylesheet paints and lifts it.
+  const place = (at) => {
+    el.style.setProperty("--page-pop-x", `${at.x}px`);
+    el.style.setProperty("--page-pop-y", `${at.y}px`);
+  };
+
+  return {
+    el,
+    show: (next, at = null) => {
+      people = next;
+      active = 0;
+      draw();
+      if (at) place(at);
+      el.hidden = false;
+    },
+    move: (step) => {
+      if (!people.length) return;
+      active = (active + step + people.length) % people.length;
+      draw();
+    },
+    activeId: () => (people.length ? `${id}-${active}` : null),
+    index: () => active,
+    personAt: (i) => people[i] ?? null,
+    hide: () => {
+      el.hidden = true;
+      people = [];
+      active = 0;
+      el.replaceChildren();
+    },
+    destroy() {
+      this.hide();
+      el.remove();
+    },
+  };
+}

package/src/page/merge.js

@@ -1,6 +1,6 @@
 import { canon, renderModel, parseModel, fragmentCleaner } from "./projection.js";
 
-const TEXT = new Set(["paragraph", "heading", "list_item", "callout", "code_block", "toggle"]);
+const TEXT = new Set(["paragraph", "heading", "list_item", "callout", "quote", "code_block", "toggle"]);
 const same = (a, b) => canon(a) === canon(b);
 
 function inlineOf(item, doc) {

package/src/page/projection.js

@@ -11,6 +11,7 @@
 import { chartModel, renderChartSvg } from "./rich/chart.js";
 import { cellText } from "./rich/cell.js";
 import { bounded, descriptors, entriesOf, keyOf, normalizeEntries } from "./format-codec.js";
+import { nativeAttrs } from "./format-native.js";
 
 export const ATOM = "";
 export const BREAK = '@{"type":"hard_break"}';
@@ -26,6 +27,13 @@ const KNOWN = new Set(CODES);
 export const OPAQUE = "data-clay-page-opaque";
 export const VALUE = "data-clay-page-value";
 export const MARKS = "data-clay-page-marks";
+// A person mention's span states its id plainly beside the envelope that carries it:
+// the label is the text, and a reader without the editor shows a name, never a link.
+export const MENTION = "data-page-mention";
+// A date mention reads as a `time` element: the text is the ISO date and `datetime`
+// repeats it, so a reader without the editor shows the day and no zone or reminder.
+export const DATE = "data-page-date";
+const DAY = /^\d{4}-\d{2}-\d{2}$/;
 const ENVELOPE = "1";
 const STRUCTURAL = new Set(["id", "t", "parent", "c", "m"]);
 const knownType = (t) => Object.hasOwn(DEFAULTS, t);
@@ -36,6 +44,7 @@ export const DEFAULTS = {
   heading: { parent: null, level: 2 },
   list_item: { parent: null, kind: "bullet", indent: 0, checked: false, owner: null, due: null },
   callout: { parent: null },
+  quote: { parent: null },
   code_block: { parent: null, lang: "" },
   toggle: { parent: null, open: false },
   divider: { parent: null },
@@ -47,7 +56,7 @@ export const DEFAULTS = {
   tool: { parent: null, artifact: null, rev: null, state: {} },
   preserved: { parent: null, html: "" },
 };
-const TEXT = new Set(["paragraph", "heading", "list_item", "callout", "code_block", "toggle"]);
+const TEXT = new Set(["paragraph", "heading", "list_item", "callout", "quote", "code_block", "toggle"]);
 
 const same = (a, b) => canon(a) === canon(b);
 
@@ -146,18 +155,25 @@ export function runsOf(units) {
   return out;
 }
 
-// A mark key as { marks: { b: true, a: ["href"] ... }, entries: [...] }, the
-// entries being the descriptors of every mark this runtime has no code for, in
-// the codec's canonical order.
+// A mark key as { marks: { b: true, a: ["href"] ... }, native: [...], entries: [...] }:
+// the codes this runtime knows, the named descriptors of the four formats it
+// writes (format-native.js), and the entries of every mark it has no code for,
+// each in the codec's canonical order.
 function marksOfKey(key) {
-  const marks = {};
-  if (!key || key[0] === "@") return { marks, entries: [] };
+  const marks = {}, native = [];
+  if (!key || key[0] === "@") return { marks, native: [], entries: [] };
   const opaque = [];
   for (const desc of descriptors(key)) {
-    if (desc.name === undefined && KNOWN.has(desc.code)) marks[desc.code] = desc.attrs ?? true;
+    if (desc.name === undefined) {
+      if (KNOWN.has(desc.code)) marks[desc.code] = desc.attrs ?? true;
+      else opaque.push(desc);
+      continue;
+    }
+    const attrs = nativeAttrs(desc.name, desc.attrs);
+    if (attrs) native.push({ name: desc.name, attrs });
     else opaque.push(desc);
   }
-  return { marks, entries: opaque.length ? entriesOf(opaque) : [] };
+  return { marks, native, entries: opaque.length ? entriesOf(opaque) : [] };
 }
 
 // One unit's key, as the record keeps it: the codes this runtime knows, then
@@ -165,8 +181,8 @@ function marksOfKey(key) {
 const unitKey = (key, text, i) => {
   if (!key) return "";
   if (key[0] === "@") return key === BREAK && text[i] === ATOM ? key : "";
-  const { marks, entries } = marksOfKey(key);
-  return keyOfMarks(safeMarks(marks), entries);
+  const { marks, native, entries } = marksOfKey(key);
+  return keyOfMarks(safeMarks(marks), native.length ? [...entries, ...entriesOf(native)] : entries);
 };
 
 // A link to a script URL is never kept: it would run on the page's origin when a
@@ -410,6 +426,10 @@ const escText = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>
 const escAttr = (s) => escText(String(s)).replace(/"/g, "&quot;");
 const attr = (name, value) => (value === null || value === undefined ? "" : ` ${name}="${escAttr(value)}"`);
 
+// The element each of the four formats is read as in the saved article; the
+// text color and the highlight carry their palette key as data-color.
+const NATIVE_TAGS = { underline: "u", text_color: "span", highlight: "mark" };
+
 export function renderInline(c, m, marksEnvelopes = true) {
   const units = unitsOf(m, c.length) || [];
   let html = "";
@@ -425,13 +445,22 @@ export function renderInline(c, m, marksEnvelopes = true) {
     }
     let j = i + 1;
     while (j < c.length && (units[j] || "") === key && !(c[j] === ATOM && key[0] === "@")) j++;
-    const { marks, entries } = marksOfKey(key);
+    const { marks, native, entries } = marksOfKey(key);
     const want = NEST.filter((code) => marks[code]).map((code) => ({ code, sig: code + JSON.stringify(marks[code]), tag: code === "a" ? "a" : TAGS[code], href: code === "a" ? marks.a[0] : null }));
-    if (entries.length && marksEnvelopes) want.push({ sig: `marks${canon(entries)}`, tag: "span", entries });
+    for (const n of native) want.push({ sig: `native${n.name}${canon(n.attrs)}`, tag: NATIVE_TAGS[n.name], color: n.attrs.color ?? null });
+    const mention = entries.find((entry) => entry.name === "mention");
+    const date = entries.find((entry) => entry.name === "date");
+    const day = date && DAY.test(String(date.attrs.date)) ? String(date.attrs.date) : null;
+    if (entries.length && marksEnvelopes) want.push({ sig: `marks${canon(entries)}`, tag: day ? "time" : "span", entries, mention: mention?.attrs.id, day });
     let keep = 0;
     while (keep < open.length && keep < want.length && open[keep].sig === want[keep].sig) keep++;
     closeTo(keep);
-    for (const w of want.slice(keep)) { html += w.entries ? `<span${marksEnvelope(w.entries)}>` : w.tag === "a" ? `<a${attr("href", w.href)}>` : `<${w.tag}>`; open.push(w); }
+    for (const w of want.slice(keep)) {
+      if (w.entries) html += w.day ? `<time${attr("datetime", w.day)}${attr(DATE, "")}${marksEnvelope(w.entries)}>` : `<span${marksEnvelope(w.entries)}${attr(MENTION, w.mention)}>`;
+      else if (w.tag === "a") html += `<a${attr("href", w.href)}>`;
+      else html += w.color ? `<${w.tag}${attr("data-color", w.color)}>` : `<${w.tag}>`;
+      open.push(w);
+    }
     html += escText(c.slice(i, j));
     i = j;
   }
@@ -454,6 +483,7 @@ function renderLeaf(item, clean, tables) {
     case "paragraph": return `<p${at}>${inlineOf(item)}</p>`;
     case "heading": { const h = `h${item.level ?? 2}`; return `<${h}${at}>${inlineOf(item)}</${h}>`; }
     case "callout": return `<aside${at} class="page-callout">${inlineOf(item)}</aside>`;
+    case "quote": return `<blockquote${at}>${inlineOf(item)}</blockquote>`;
     case "code_block": return `<pre${at}${attr("data-lang", item.lang || null)}><code>${escText(item.c ?? "")}</code></pre>`;
     case "divider": return `<hr${at}>`;
     case "image": return `<figure${at} data-type="image"${attr("data-align", item.align ?? null)}><img${attr("src", item.src ?? "")}${attr("alt", item.alt ?? "")}${attr("width", item.width ?? null)}>${item.caption ? `<figcaption>${escText(item.caption)}</figcaption>` : ""}</figure>`;
@@ -561,6 +591,17 @@ export function renderBlocks(blocks, opts) {
 const DROP_TAGS = new Set(["SCRIPT", "STYLE", "TEMPLATE", "NOSCRIPT"]);
 const INLINE_TAGS = new Set(["A", "ABBR", "B", "BDI", "BDO", "BR", "CITE", "CODE", "DATA", "DEL", "DFN", "EM", "FONT", "I", "INS", "KBD", "LABEL", "MARK", "Q", "S", "SAMP", "SMALL", "SPAN", "STRIKE", "STRONG", "SUB", "SUP", "TIME", "U", "VAR", "WBR"]);
 
+// The named descriptor an inline element stands for, when it is one of the four
+// formats: <u>, <mark> and a <span data-color> with a palette key. Anything else
+// is not a format this runtime reads natively.
+function nativeOfEl(tag, el) {
+  if (tag === "u") return { name: "underline", attrs: {} };
+  if (tag !== "mark" && tag !== "span") return null;
+  if (tag === "span" && !el.hasAttribute("data-color")) return null;
+  const name = tag === "mark" ? "highlight" : "text_color";
+  return { name, attrs: { color: el.getAttribute("data-color") } };
+}
+
 // Inline content of el as { c, units }, minus the children skip(child) names.
 function inlineOfEl(el, skip = () => false) {
   let c = "";
@@ -579,7 +620,7 @@ function inlineOfEl(el, skip = () => false) {
       if (tag === "br") { c += ATOM; units.push(BREAK); continue; }
       if (tag === "span" && child.hasAttribute("data-atom")) { c += ATOM; units.push(child.getAttribute("data-atom")); continue; }
       const next = { ...marks };
-      if (tag === "span" && child.hasAttribute(MARKS)) {
+      if ((tag === "span" || tag === "time") && child.hasAttribute(MARKS)) {
         walk(child, next, normalizeEntries([...entries, ...entriesOfEnvelope(child.getAttribute(MARKS))]));
         continue;
       }
@@ -588,7 +629,8 @@ function inlineOfEl(el, skip = () => false) {
       else if (tag === "s" || tag === "del" || tag === "strike") next.s = true;
       else if (tag === "code") next.c = true;
       else if (tag === "a" && child.hasAttribute("href")) next.a = [child.getAttribute("href")];
-      walk(child, next, entries);
+      const named = nativeOfEl(tag, child);
+      walk(child, next, named ? [...entries, named] : entries);
     }
   };
   walk(el, {}, []);
@@ -672,6 +714,7 @@ export function parseArticle(article) {
     if (tag === "P" && !onlyImage) return push(el, "paragraph", parent, { ...omitDefaults("paragraph", P), ...tf(el) });
     if (/^H[1-6]$/.test(tag)) return push(el, "heading", parent, { ...omitDefaults("heading", { ...P, level: +tag[1] }), ...tf(el) });
     if (tag === "ASIDE") return push(el, "callout", parent, { ...omitDefaults("callout", P), ...tf(el) });
+    if (tag === "BLOCKQUOTE") return push(el, "quote", parent, { ...omitDefaults("quote", P), ...tf(el) });
     if (tag === "PRE") {
       const code = el.querySelector(":scope > code");
       return push(el, "code_block", parent, { ...omitDefaults("code_block", { ...P, lang: el.getAttribute("data-lang") || "" }), c: (code || el).textContent });

package/src/page/save-projection.js

@@ -53,4 +53,43 @@ export function projectInto(clone) {
   if (!customTitle(clone)) writeTitle(clone, title);
 }
 
+/**
+ * The page state a final save clone carries, or null.
+ *
+ * One page tag is one page state: a Yjs page never has two, a tag holding plain block
+ * data is a page's own content rather than one, and a tag that does not parse is not one
+ * either. The value is copied, because the store keeps writing to its own after the
+ * capture and a checkpoint must prove the bytes this capture sent.
+ *
+ * Registered with core/snapshot only by the recovery integration, so a page that
+ * journals nothing never reads it.
+ *
+ * @param {HTMLElement} root - the save clone, after every transform
+ * @returns {?Object}
+ */
+export function pageStateOfClone(root) {
+  const tags = pageTags(root);
+  if (tags.length !== 1) return null;
+  let value;
+  try { value = parseJsonRelaxed(tags[0].textContent); }
+  catch { return null; }
+  const { v, g, y } = value ?? {};
+  if (v !== 1 || !y || typeof y !== "object" || Array.isArray(y)) return null;
+  return { v, g, y: { ...y } };
+}
+
+/**
+ * The canonical article one page state projects to.
+ *
+ * The same projection the save writes into the capture's article, run over the state a
+ * capture pinned or a host handed back. A state whose projection is not the article
+ * that was accepted is not a proof of those bytes, whichever transform changed it.
+ *
+ * @param {Object|string} state - a page value, or the page tag text holding one
+ * @returns {string}
+ */
+export function articleOfPageState(state) {
+  return renderFromTags([typeof state === "string" ? state : JSON.stringify(state)]).html;
+}
+
 addDocumentTransform(projectInto);

package/src/page/save-states.js

@@ -1,5 +1,5 @@
 import { captureForSaveAndComparison } from "../core/snapshot.js";
-import { downloadHtml, documentName } from "../core/conflict-download.js";
+import { downloadHtml, documentName } from "../core/download.js";
 
 // One plain state per save refusal code, so the indicator, the toast and the
 // page plugin all read the same answer. `saved` is the only happy one; every

package/src/page/schema.js

@@ -50,6 +50,12 @@ export const schema = new model.Schema({
         "data-checked": n.attrs.checked ? "true" : "false",
       }), 0],
     },
+    quote: {
+      group: "block",
+      content: "inline*",
+      attrs: block,
+      toDOM: (n) => ["blockquote", ref(n), 0],
+    },
     callout: {
       group: "block",
       content: "inline*",
@@ -174,5 +180,32 @@ export const schema = new model.Schema({
       inclusive: false,
       toDOM: (m) => ["a", { href: safeHref(m.attrs.href) }, 0],
     },
+    // A person mention is ordinary text with this mark over it: the name is the label
+    // and `id` is the people registry's reference. It links nowhere and notifies nobody.
+    mention: {
+      attrs: { id: {} },
+      inclusive: false,
+      excludes: "mention date link",
+      toDOM: (m) => ["span", { "data-page-mention": m.attrs.id }, 0],
+    },
+    // A date mention is the calendar date as ordinary ISO text with this mark over it:
+    // `date` is YYYY-MM-DD, and no time, zone, reminder or relative word is stored.
+    date: {
+      attrs: { date: {} },
+      inclusive: false,
+      excludes: "mention date link",
+      toDOM: (m) => ["time", { datetime: m.attrs.date, "data-page-date": "" }, 0],
+    },
+    // The floor-1 formats (format-native.js): written as named descriptors,
+    // drawn as the elements the saved article keeps for them.
+    underline: { toDOM: () => ["u", 0] },
+    text_color: {
+      attrs: { color: {} },
+      toDOM: (m) => ["span", { "data-color": m.attrs.color }, 0],
+    },
+    highlight: {
+      attrs: { color: {} },
+      toDOM: (m) => ["mark", { "data-color": m.attrs.color }, 0],
+    },
   },
 });

package/src/page/themes/content.css

@@ -2,6 +2,11 @@
   article[data-page] {
     --page-link: #164583;
     --page-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+    --page-color-gray: #5B5953; --page-color-brown: #8A5A1E; --page-color-orange: #B4531A; --page-color-yellow: #7A6210; --page-color-green: #3E6A28;
+    --page-color-blue: #1F5A8A; --page-color-purple: #5E4596; --page-color-pink: #A23E6E; --page-color-red: #9E3B2F;
+    --page-mark-bg-gray: rgba(35, 34, 31, 0.12); --page-mark-bg-brown: rgba(138, 90, 30, 0.20); --page-mark-bg-orange: rgba(180, 83, 26, 0.20);
+    --page-mark-bg-yellow: rgba(122, 98, 16, 0.22); --page-mark-bg-green: rgba(62, 106, 40, 0.20); --page-mark-bg-blue: rgba(31, 90, 138, 0.18);
+    --page-mark-bg-purple: rgba(94, 69, 150, 0.18); --page-mark-bg-pink: rgba(162, 62, 110, 0.18); --page-mark-bg-red: rgba(158, 59, 47, 0.18);
     min-height: 100vh;
     box-sizing: border-box;
     padding: var(--page-pad-top) 16px 30vh;
@@ -42,5 +47,24 @@
   article[data-page] th, article[data-page] td { min-width: 120px; padding: 6px 10px; border-inline-end: 1px solid var(--page-rule); border-block-end: 1px solid var(--page-rule); text-align: start; white-space: pre-wrap; }
   article[data-page] th { background: var(--page-code-bg); color: var(--page-ink-soft); font-weight: 600; }
   article[data-page] th[data-kind="number"], article[data-page] td[data-kind="number"] { text-align: end; }
-  article[data-page] blockquote { color: var(--page-ink-soft); border-inline-start: 1px solid var(--page-rule); padding-inline-start: var(--page-indent); }
+  article[data-page] blockquote { color: var(--page-ink-soft); padding-inline-start: var(--page-indent); }
+  article[data-page] span[data-color="gray"] { color: var(--page-color-gray); }
+  article[data-page] span[data-color="brown"] { color: var(--page-color-brown); }
+  article[data-page] span[data-color="orange"] { color: var(--page-color-orange); }
+  article[data-page] span[data-color="yellow"] { color: var(--page-color-yellow); }
+  article[data-page] span[data-color="green"] { color: var(--page-color-green); }
+  article[data-page] span[data-color="blue"] { color: var(--page-color-blue); }
+  article[data-page] span[data-color="purple"] { color: var(--page-color-purple); }
+  article[data-page] span[data-color="pink"] { color: var(--page-color-pink); }
+  article[data-page] span[data-color="red"] { color: var(--page-color-red); }
+  article[data-page] mark[data-color="gray"] { background: var(--page-mark-bg-gray); }
+  article[data-page] mark[data-color="brown"] { background: var(--page-mark-bg-brown); }
+  article[data-page] mark[data-color="orange"] { background: var(--page-mark-bg-orange); }
+  article[data-page] mark[data-color="yellow"] { background: var(--page-mark-bg-yellow); }
+  article[data-page] mark[data-color="green"] { background: var(--page-mark-bg-green); }
+  article[data-page] mark[data-color="blue"] { background: var(--page-mark-bg-blue); }
+  article[data-page] mark[data-color="purple"] { background: var(--page-mark-bg-purple); }
+  article[data-page] mark[data-color="pink"] { background: var(--page-mark-bg-pink); }
+  article[data-page] mark[data-color="red"] { background: var(--page-mark-bg-red); }
+  article[data-page] mark { color: inherit; }
 }

package/src/page/themes/light-1.css

@@ -95,6 +95,11 @@
   article[data-page] {
     --page-link: #164583;
     --page-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+    --page-color-gray: #5B5953; --page-color-brown: #8A5A1E; --page-color-orange: #B4531A; --page-color-yellow: #7A6210; --page-color-green: #3E6A28;
+    --page-color-blue: #1F5A8A; --page-color-purple: #5E4596; --page-color-pink: #A23E6E; --page-color-red: #9E3B2F;
+    --page-mark-bg-gray: rgba(35, 34, 31, 0.12); --page-mark-bg-brown: rgba(138, 90, 30, 0.20); --page-mark-bg-orange: rgba(180, 83, 26, 0.20);
+    --page-mark-bg-yellow: rgba(122, 98, 16, 0.22); --page-mark-bg-green: rgba(62, 106, 40, 0.20); --page-mark-bg-blue: rgba(31, 90, 138, 0.18);
+    --page-mark-bg-purple: rgba(94, 69, 150, 0.18); --page-mark-bg-pink: rgba(162, 62, 110, 0.18); --page-mark-bg-red: rgba(158, 59, 47, 0.18);
     min-height: 100vh;
     box-sizing: border-box;
     padding: var(--page-pad-top) 16px 30vh;
@@ -135,7 +140,26 @@
   article[data-page] th, article[data-page] td { min-width: 120px; padding: 6px 10px; border-inline-end: 1px solid var(--page-rule); border-block-end: 1px solid var(--page-rule); text-align: start; white-space: pre-wrap; }
   article[data-page] th { background: var(--page-code-bg); color: var(--page-ink-soft); font-weight: 600; }
   article[data-page] th[data-kind="number"], article[data-page] td[data-kind="number"] { text-align: end; }
-  article[data-page] blockquote { color: var(--page-ink-soft); border-inline-start: 1px solid var(--page-rule); padding-inline-start: var(--page-indent); }
+  article[data-page] blockquote { color: var(--page-ink-soft); padding-inline-start: var(--page-indent); }
+  article[data-page] span[data-color="gray"] { color: var(--page-color-gray); }
+  article[data-page] span[data-color="brown"] { color: var(--page-color-brown); }
+  article[data-page] span[data-color="orange"] { color: var(--page-color-orange); }
+  article[data-page] span[data-color="yellow"] { color: var(--page-color-yellow); }
+  article[data-page] span[data-color="green"] { color: var(--page-color-green); }
+  article[data-page] span[data-color="blue"] { color: var(--page-color-blue); }
+  article[data-page] span[data-color="purple"] { color: var(--page-color-purple); }
+  article[data-page] span[data-color="pink"] { color: var(--page-color-pink); }
+  article[data-page] span[data-color="red"] { color: var(--page-color-red); }
+  article[data-page] mark[data-color="gray"] { background: var(--page-mark-bg-gray); }
+  article[data-page] mark[data-color="brown"] { background: var(--page-mark-bg-brown); }
+  article[data-page] mark[data-color="orange"] { background: var(--page-mark-bg-orange); }
+  article[data-page] mark[data-color="yellow"] { background: var(--page-mark-bg-yellow); }
+  article[data-page] mark[data-color="green"] { background: var(--page-mark-bg-green); }
+  article[data-page] mark[data-color="blue"] { background: var(--page-mark-bg-blue); }
+  article[data-page] mark[data-color="purple"] { background: var(--page-mark-bg-purple); }
+  article[data-page] mark[data-color="pink"] { background: var(--page-mark-bg-pink); }
+  article[data-page] mark[data-color="red"] { background: var(--page-mark-bg-red); }
+  article[data-page] mark { color: inherit; }
 }