@panphora/clayjs 1.16.0 → 1.18.0

package/src/page/export-html.js

@@ -0,0 +1,209 @@
+// The readable snapshot: one static HTML document rendered from the live page
+// model through the same projection the saved page carries, plus the inventory
+// of every image, attachment, chart and embed it references. Nothing here
+// fetches, downloads or writes a file: inlining those resources and the export
+// action belong to the feature that calls this.
+//
+// The document keeps the content and drops the machinery: no script, stylesheet,
+// live tag, save hook or block envelope, every toggle open, and a table of
+// contents as a plain list rather than links into a page that is not running.
+import { fragmentCleaner, renderModel } from "./projection.js";
+import { documentTitle } from "./document-title.js";
+
+/** A snapshot that cannot be produced without lying about its contents. */
+export class PageExportError extends Error {
+  constructor(code, message) {
+    super(message);
+    this.name = "PageExportError";
+    this.code = code;
+  }
+}
+
+const fail = (code, message) => { throw new PageExportError(code, message); };
+
+// A reference the document may carry: bytes already inside the file, an address
+// on the origin the page was read from, or a plain http(s) URL. A script URL or a
+// second document in a data URL is refused by name, never dropped in silence.
+const DATA_IMAGE = /^data:image\/(?:png|jpe?g|gif|webp);/i;
+const SCRIPT_URL = /^(?:javascript|vbscript|data):/i;
+const REMOTE = /^https?:\/\//i;
+const ROOTED = /^\/(?!\/)/;
+const squash = (value) => String(value ?? "").trim().replace(/[\u0000-\u0020]/g, "");
+const carriable = (value) => DATA_IMAGE.test(value) || !SCRIPT_URL.test(value);
+
+function reference(raw) {
+  const s = squash(raw);
+  if (!s || s.startsWith("#")) return null;
+  if (DATA_IMAGE.test(s)) return { url: s, inline: true };
+  if (/^\/\//.test(s)) return { url: `https:${s}`, inline: false };
+  if (ROOTED.test(s) || REMOTE.test(s)) return { url: s, inline: false };
+  return undefined;
+}
+
+const RESOURCE_TAGS = { img: "image", iframe: "embed", embed: "embed", object: "embed", video: "embed", audio: "embed", source: "embed", track: "embed" };
+const SOURCE_ATTR = { object: "data" };
+const STATIC_MEDIA = /<(?:img|svg|video|audio|canvas|iframe|table)\b/i;
+const STATIC_TEXT = /<(?:meta|style|img|br|hr|input)\b[^>]*>/gi;
+
+const blockOf = (el) => el.closest?.("[data-id]")?.getAttribute("data-id") || null;
+const where = (kind, blockId) => (blockId ? `${kind} in block ${blockId}` : kind);
+
+// Every reference the document carries, in the order it appears, each named by the
+// block that holds it. Charts are listed too: their drawing is already SVG inside
+// the file, so they name no address and need nothing fetched.
+function resourcesOf(container) {
+  const out = [];
+  const seen = new Set();
+  const add = (kind, raw, blockId) => {
+    const ref = reference(raw);
+    if (ref === undefined) {
+      fail("unsafe-url", `The ${where(kind, blockId)} points at ${String(raw).trim().slice(0, 120)}, which a reading copy cannot carry`);
+    }
+    if (!ref) return;
+    const key = `${kind}\u0000${ref.url}`;
+    if (seen.has(key)) return;
+    seen.add(key);
+    out.push({ kind, url: ref.url, blockId: blockId ?? null, inline: ref.inline });
+  };
+  for (const el of container.querySelectorAll("*")) {
+    const tag = el.tagName.toLowerCase();
+    const kind = RESOURCE_TAGS[tag];
+    if (kind) add(kind, el.getAttribute(SOURCE_ATTR[tag] ?? "src"), blockOf(el));
+    if (tag === "img" || tag === "source") {
+      for (const candidate of String(el.getAttribute("srcset") ?? "").split(",")) add("image", candidate.trim().split(/\s+/)[0], blockOf(el));
+    }
+  }
+  for (const el of container.querySelectorAll('[data-type="file"]')) {
+    add("attachment", el.getAttribute("data-src"), blockOf(el));
+    add("attachment", el.querySelector("a[href]")?.getAttribute("href"), blockOf(el));
+  }
+  for (const el of container.querySelectorAll('figure[data-type="chart"]')) {
+    const blockId = blockOf(el);
+    const key = `chart\u0000${blockId ?? ""}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push({ kind: "chart", url: null, blockId: blockId ?? null, inline: true });
+  }
+  return out;
+}
+
+// The article as a reader gets it: no script, stylesheet or runtime attribute, and
+// no link to a script URL. A resource the document needs was already checked.
+function scrub(container) {
+  for (const el of [...container.querySelectorAll("script, style, link, meta, base")]) el.remove();
+  for (const el of container.querySelectorAll("*")) {
+    for (const { name, value } of [...el.attributes]) {
+      const attr = name.toLowerCase();
+      if (attr.startsWith("on") || attr === "clay" || attr === "merge" || attr === "live" || attr === "srcdoc" || attr.startsWith("data-clay") || attr.startsWith("clay-")) {
+        el.removeAttribute(name);
+        continue;
+      }
+      if (/^(href|src|action|formaction|poster|data-src|xlink:href)$/.test(attr) && !carriable(squash(value))) el.removeAttribute(name);
+    }
+  }
+}
+
+// The table of contents reads as a nested list of its entries; its anchors point at
+// a page that is not running here.
+function plainToc(container) {
+  for (const nav of container.querySelectorAll('nav[data-type="toc"]')) {
+    for (const link of [...nav.querySelectorAll("a")]) link.replaceWith(link.ownerDocument.createTextNode(link.textContent));
+  }
+}
+
+const openToggles = (model) => model.map((item) => (item.t === "toggle" ? { ...item, open: true } : item));
+
+const hasStatic = (html, clean) => {
+  const cleaned = clean.fallback(String(html ?? ""));
+  return STATIC_MEDIA.test(cleaned) || cleaned.replace(STATIC_TEXT, "").replace(/<[^>]+>/g, "").trim() !== "";
+};
+
+const escText = (text) => String(text).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+
+const READER_CSS = `:root { color-scheme: light dark; }
+body { margin: 0; background: #ffffff; color: #37352f; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; }
+article[data-page] { max-width: 46rem; margin: 0 auto; padding: 3rem 1.25rem 6rem; }
+article[data-page] > * { margin: 0.7em 0; }
+header[data-page-heading] { position: relative; margin-bottom: 1.6em; }
+header[data-page-heading] img[data-page-cover] { display: block; width: 100%; max-height: 18rem; object-fit: cover; border-radius: 6px; margin-bottom: 1em; }
+header[data-page-heading] span[data-page-icon] { display: block; font-size: 2.6em; line-height: 1.2; }
+h1, h2, h3, h4, h5, h6 { line-height: 1.25; font-weight: 650; margin: 1.2em 0 0.3em; }
+h1 { font-size: 2em; }
+h2 { font-size: 1.5em; }
+h3 { font-size: 1.2em; }
+p, li { max-width: 100%; }
+a { color: #0b6bcb; }
+blockquote { margin-left: 0; padding-left: 1em; border-left: 3px solid rgba(55, 53, 47, 0.2); color: #5b5952; }
+aside.page-callout { border: 1px solid rgba(55, 53, 47, 0.14); border-radius: 6px; padding: 0.8em 1em; background: rgba(55, 53, 47, 0.04); }
+pre { overflow-x: auto; padding: 0.9em 1em; border-radius: 6px; background: rgba(55, 53, 47, 0.06); font-size: 0.9em; }
+code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; }
+pre code { font-size: inherit; }
+details { margin: 0.4em 0; }
+details > summary { cursor: pointer; font-weight: 600; }
+details > summary h1, details > summary h2, details > summary h3 { display: inline; margin: 0; }
+hr { border: 0; border-top: 1px solid rgba(55, 53, 47, 0.18); }
+table { border-collapse: collapse; width: 100%; }
+th, td { border: 1px solid rgba(55, 53, 47, 0.18); padding: 0.4em 0.6em; text-align: left; vertical-align: top; }
+th { background: rgba(55, 53, 47, 0.04); font-weight: 600; }
+figure { margin: 1em 0; }
+figure img { max-width: 100%; height: auto; border-radius: 4px; }
+figcaption { font-size: 0.88em; color: #78766f; margin-top: 0.4em; }
+figure[data-type="chart"] svg { max-width: 100%; height: auto; }
+section[data-type="board"] { display: flex; gap: 1em; overflow-x: auto; align-items: flex-start; }
+section[data-type="board"] > div { min-width: 12rem; border: 1px solid rgba(55, 53, 47, 0.14); border-radius: 6px; padding: 0.6em 0.8em; }
+section[data-type="board"] h4 { margin: 0 0 0.4em; font-size: 0.95em; }
+section[data-type="board"] ul { list-style: none; margin: 0; padding: 0; }
+section[data-type="board"] li { border: 1px solid rgba(55, 53, 47, 0.14); border-radius: 4px; padding: 0.4em 0.5em; margin-bottom: 0.4em; }
+nav[data-type="toc"] ul { list-style: none; padding-left: 0; }
+nav[data-type="toc"] ul ul { padding-left: 1.2em; }
+li > input[type="checkbox"] { margin-right: 0.4em; }
+[data-type="file"] a { display: inline-block; padding: 0.4em 0.7em; border: 1px solid rgba(55, 53, 47, 0.18); border-radius: 4px; }
+@media (prefers-color-scheme: dark) {
+  body { background: #191919; color: #d4d4d4; }
+  aside.page-callout, th, pre { background: rgba(255, 255, 255, 0.06); }
+  th, td, section[data-type="board"] > div, section[data-type="board"] li, [data-type="file"] a { border-color: rgba(255, 255, 255, 0.16); }
+  a { color: #6cb0f5; }
+}`;
+
+function standalone(title, body) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escText(title)}</title>
+<style>
+${READER_CSS}
+</style>
+</head>
+<body>
+<article data-page="1">
+${body}
+</article>
+</body>
+</html>
+`;
+}
+
+/**
+ * One readable HTML document for the page model, and the resources it references.
+ * An address the file cannot carry, or a tool with no static rendering, throws a
+ * PageExportError naming what stopped it rather than producing a truncated file.
+ */
+export function renderExportHtml(model, { title = null, fallbackOf = null, doc = globalThis.document } = {}) {
+  if (!Array.isArray(model)) throw new TypeError("page: an export renders a projection model");
+  const clean = fragmentCleaner(doc);
+  const fallback = fallbackOf ?? ((id) => model.find((item) => item.id === id)?.artifact?.fallbackHtml ?? "");
+  for (const item of model) {
+    if (item.t === "tool" && !hasStatic(fallback(item.id), clean)) {
+      fail("unsupported-tool", `Block ${item.id} holds a tool with no static rendering, which a reading copy cannot show`);
+    }
+  }
+  const container = doc.createElement("div");
+  container.innerHTML = renderModel(openToggles(model), { fallbackOf: fallback, clean });
+  const resources = resourcesOf(container);
+  scrub(container);
+  plainToc(container);
+  const name = title ?? documentTitle(model);
+  return { html: standalone(name, container.innerHTML), title: name, resources };
+}

package/src/page/export-markdown.js

@@ -0,0 +1,361 @@
+// Markdown export: the live page record as Markdown text, and the report of what the
+// format could not carry. Nothing is dropped silently: a construct written as semantic
+// HTML from the canonical projection is listed as an extension, and a construct whose
+// meaning goes away is listed as a loss, each named per block. No parser is involved:
+// the record is read once and the text is built from it.
+import { project, renderModel, tocHtml, unitsOf } from "./projection.js";
+import { descriptors } from "./format-codec.js";
+
+const ATOM = "\uFFFC";
+const BREAK = '@{"type":"hard_break"}';
+const CODES = { b: "strong", i: "em", s: "strike", c: "code" };
+const TEXTUAL = new Set(["paragraph", "heading", "list_item", "toggle", "quote", "callout", "code_block"]);
+const KNOWN = new Set([
+  "paragraph", "heading", "list_item", "quote", "callout", "code_block", "toggle",
+  "divider", "toc", "image", "file", "table", "chart", "board", "tool", "preserved",
+]);
+// The characters that could start a construct wherever they stand, and the ones that
+// could only at the start of a line: a list marker, a setext rule, a fence, and an
+// ordered marker's dot. A backslash before one of them is Markdown's own escape, and
+// the import reads it back as the character, so the text round-trips.
+const SPECIAL = new Set(["\\", "`", "*", "_", "[", "]", "(", ")", "#", "!", ">", "|", "<", "&"]);
+const STARTS = new Set(["-", "+", "=", "~"]);
+function escText(value) {
+  const text = String(value ?? "");
+  let out = "";
+  let line = "";
+  for (const ch of text) {
+    let escape = SPECIAL.has(ch);
+    if (!escape && line === "" && STARTS.has(ch)) escape = true;
+    if (!escape && ch === "." && line !== "" && /^\d+$/.test(line)) escape = true;
+    out += escape ? `\\${ch}` : ch;
+    line = ch === "\n" ? "" : line + ch;
+  }
+  return out;
+}
+
+// A code span of any content: a fence longer than the longest backtick run inside it,
+// padded when the first or last character would otherwise touch the fence.
+function codeSpan(text) {
+  const value = String(text);
+  const longest = (value.match(/`+/g) ?? []).reduce((long, run) => Math.max(long, run.length), 0);
+  const fence = "`".repeat(longest + 1);
+  const pad = /^[`\s]|[`\s]$/.test(value) ? " " : "";
+  return `${fence}${pad}${value}${pad}${fence}`;
+}
+
+function fence(body, lang = "") {
+  const value = String(body ?? "").replace(/\r\n?/g, "\n").replace(/\n$/, "");
+  const longest = (value.match(/`+/g) ?? []).reduce((long, run) => Math.max(long, run.length), 0);
+  const mark = "`".repeat(Math.max(3, longest + 1));
+  const info = String(lang ?? "").trim().split(/\s+/)[0].replace(/`/g, "");
+  return `${mark}${info}\n${value}\n${mark}`;
+}
+
+// A link destination that would end the link at its first space or parenthesis is
+// written in angle brackets instead.
+const hrefText = (href) => (/[\s()<>]/.test(href) ? `<${href.trim().replace(/</g, "%3C").replace(/>/g, "%3E")}>` : href);
+
+// One unit's mark key as what Markdown can write: the codes it has, the link it
+// carries, and every mark it would have to drop.
+function parseKey(key) {
+  const codes = {};
+  let href = null;
+  const dropped = [];
+  for (const desc of descriptors(key)) {
+    if (desc.name === undefined) {
+      if (desc.code === "a") href = String(desc.attrs?.[0] ?? "");
+      else if (CODES[desc.code]) codes[CODES[desc.code]] = true;
+      else dropped.push(desc.code);
+      continue;
+    }
+    if (desc.name === "mention") {
+      dropped.push("mention");
+      continue;
+    }
+    if (desc.name === "date") continue;
+    dropped.push(desc.name);
+  }
+  return { codes, href, dropped };
+}
+
+// A text block's inline content as Markdown. `note` names what is being dropped in
+// this block, once per construct.
+function inline(item, note) {
+  const c = typeof item.c === "string" ? item.c : "";
+  const units = unitsOf(item.m, c.length) ?? [];
+  let out = "";
+  for (let i = 0; i < c.length;) {
+    const key = units[i] ?? "";
+    if (c[i] === ATOM && key[0] === "@") {
+      if (key === BREAK) out += "\\\n";
+      else note("inline object");
+      i++;
+      continue;
+    }
+    let j = i + 1;
+    while (j < c.length && (units[j] ?? "") === key && !(c[j] === ATOM && key[0] === "@")) j++;
+    const raw = c.slice(i, j);
+    const { codes, href, dropped } = parseKey(key);
+    for (const name of dropped) note(name);
+    let piece;
+    if (codes.code) {
+      piece = codeSpan(raw);
+      for (const name of ["strong", "em", "strike"]) if (codes[name]) note(name);
+    } else {
+      const text = escText(raw);
+      const lead = text.slice(0, text.length - text.trimStart().length);
+      const trail = text.slice(text.trimEnd().length);
+      let core = text.slice(lead.length, text.length - trail.length);
+      if (core) {
+        if (codes.em) core = `*${core}*`;
+        if (codes.strong) core = `**${core}**`;
+        if (codes.strike) core = `~~${core}~~`;
+      }
+      piece = lead + core + trail;
+    }
+    if (href) piece = `[${piece}](${hrefText(href)})`;
+    out += piece;
+    i = j;
+  }
+  return out;
+}
+
+const levelOf = (value, fallback = 2) => Math.min(6, Math.max(1, Number.isInteger(value) ? value : fallback));
+
+// The canonical projection of one block, or of a toggle with its whole body. A chart
+// is drawn against its source table, which is rendered after it and cut away again.
+function htmlFor(item, model) {
+  if (item.t === "toc") return tocHtml(item, model);
+  if (item.t === "chart") {
+    const html = renderModel([item, ...model.filter((one) => one.t === "table")]);
+    const cut = html.indexOf("\n<table");
+    return cut < 0 ? html : html.slice(0, cut);
+  }
+  return renderModel([item]);
+}
+
+const decorated = (item) => {
+  const names = [];
+  if (item.pageIcon != null && item.pageIcon !== "") names.push("Page icon");
+  if (item.pageCoverSrc != null || item.pageCoverAlt != null || item.pageCoverX != null || item.pageCoverY != null) names.push("Page cover");
+  return names;
+};
+
+// The blocks a toggle owns, which the projection nests inside it. The model lists a
+// toggle before its body, in order, so the body is the run that names it as an ancestor.
+function bodyOf(items, item) {
+  const out = [];
+  const at = items.indexOf(item);
+  const byId = new Map(items.map((one) => [one.id, one]));
+  for (let i = at + 1; i < items.length; i++) {
+    let up = items[i].parent ?? null;
+    let inside = false;
+    for (let depth = 0; up && depth < 64; depth++) {
+      if (up === item.id) { inside = true; break; }
+      up = byId.get(up)?.parent ?? null;
+    }
+    if (!inside) break;
+    out.push(items[i]);
+  }
+  return out;
+}
+
+export function exportMarkdown(blocks) {
+  const model = project(blocks ?? {});
+  const items = model.filter((one) => one && typeof one.t === "string");
+  const title = items.find((one) => one.t === "heading" && (one.level ?? 2) === 1 && (one.parent ?? null) === null) ?? null;
+  const extensions = [];
+  const losses = [];
+  const extension = (item, name) => extensions.push({ block: item.id ?? null, type: item.t, name });
+  const noteFor = (item) => {
+    const seen = new Set();
+    return (name) => {
+      if (seen.has(name)) return;
+      seen.add(name);
+      losses.push({ block: item.id ?? null, type: item.t, name });
+    };
+  };
+
+  const lines = [];
+  let listOpen = false;
+  const push = (text) => {
+    if (lines.length && lines[lines.length - 1] !== "") lines.push("");
+    lines.push(...String(text).split("\n"));
+    listOpen = false;
+  };
+  const pushItem = (text) => {
+    if (!listOpen && lines.length && lines[lines.length - 1] !== "") lines.push("");
+    lines.push(text);
+    listOpen = true;
+  };
+  const skip = new Set();
+
+  for (const raw of model) {
+    if (!raw || typeof raw.t !== "string" || skip.has(raw.id)) continue;
+    const item = raw;
+    const note = noteFor(item);
+    const t = item.t;
+
+    // A block type Markdown has no form for keeps only its text, and says so.
+    if (t === "opaque_block" || !KNOWN.has(t)) {
+      note(`opaque record (${String(item.raw?.t ?? t)})`);
+      const text = TEXTUAL.has(t) ? inline(item, note) : typeof item.c === "string" ? escText(item.c) : "";
+      if (text.trim()) push(text);
+      continue;
+    }
+
+    if (t === "paragraph") {
+      push(inline(item, note));
+      continue;
+    }
+
+    if (t === "heading") {
+      const names = item.id === title?.id ? decorated(item) : [];
+      if (names.length) {
+        for (const name of names) extension(item, name);
+        push(htmlFor(item, model));
+        continue;
+      }
+      if (item.pageIcon != null && item.pageIcon !== "") note("heading icon");
+      push(`${"#".repeat(levelOf(item.level))} ${inline(item, note)}`.trimEnd());
+      continue;
+    }
+
+    if (t === "toggle") {
+      const level = item.level === 1 || item.level === 2 || item.level === 3 ? item.level : null;
+      if (level) {
+        note("toggle collapse");
+        push(`${"#".repeat(level)} ${inline(item, note)}`);
+        continue;
+      }
+      extension(item, "Toggle");
+      const body = bodyOf(items, item);
+      for (const one of body) skip.add(one.id);
+      push(renderModel([item, ...body]));
+      continue;
+    }
+
+    if (t === "list_item") {
+      if (item.owner != null) note("owner");
+      if (item.due != null) note("due date");
+      const indent = Math.max(0, Math.min(8, Number.isInteger(item.indent) ? item.indent : 0));
+      const marker = item.kind === "ordered" ? "1." : "-";
+      const box = item.kind === "check" ? (item.checked ? " [x]" : " [ ]") : "";
+      pushItem(`${"    ".repeat(indent)}${marker}${box} ${inline(item, note)}`.trimEnd());
+      continue;
+    }
+
+    if (t === "quote") {
+      const text = inline(item, note).split("\n").map((line) => (line ? `> ${line}` : ">")).join("\n");
+      push(text);
+      continue;
+    }
+
+    if (t === "code_block") {
+      push(fence(item.c, item.lang));
+      continue;
+    }
+
+    if (t === "divider") {
+      push("---");
+      continue;
+    }
+
+    if (t === "image") {
+      const src = String(item.src ?? "");
+      if (item.width != null) note("image width");
+      if (item.align != null) note("image alignment");
+      if (!src) {
+        note("image address");
+        const alt = String(item.alt ?? "");
+        if (alt) push(escText(alt));
+        continue;
+      }
+      const alt = escText(item.alt ?? "");
+      const caption = item.caption ? ` "${String(item.caption).replace(/"/g, '\\"')}"` : "";
+      push(`![${alt}](${hrefText(src)}${caption})`);
+      continue;
+    }
+
+    if (t === "file") {
+      if (item.size != null) note("file size");
+      if (item.mime != null) note("file type");
+      const src = String(item.src ?? "");
+      const name = escText(item.name || "file");
+      push(src ? `[${name}](${hrefText(src)})` : name);
+      continue;
+    }
+
+    if (t === "table") {
+      const cols = Array.isArray(item.cols) ? item.cols : [];
+      const rows = Array.isArray(item.rows) ? item.rows : [];
+      for (const col of cols) {
+        if (col.kind != null) note("column kind");
+        if (col.width != null) note("column width");
+      }
+      if (item.sort != null) note("sort");
+      if (!cols.length) {
+        note("empty table");
+        continue;
+      }
+      const cell = (value) => {
+        const one = typeof value === "string" ? escText(value) : value && typeof value === "object" ? inline(value, note) : "";
+        return one.replace(/\n/g, " ").trim();
+      };
+      const header = cols.map((col) => escText(col.name ?? "")).join(" | ");
+      const rule = cols.map(() => "---").join(" | ");
+      const body = rows.map((row) => `| ${cols.map((col) => cell(row.cells?.[col.id])).join(" | ")} |`);
+      push([`| ${header} |`, `| ${rule} |`, ...body].join("\n"));
+      continue;
+    }
+
+    if (t === "toc") {
+      extension(item, "Table of contents");
+      push(tocHtml(item, model));
+      continue;
+    }
+
+    if (t === "chart") {
+      extension(item, "Chart");
+      push(htmlFor(item, model));
+      continue;
+    }
+
+    if (t === "board") {
+      extension(item, "Board");
+      push(htmlFor(item, model));
+      continue;
+    }
+
+    if (t === "tool") {
+      extension(item, "Tool");
+      push(htmlFor(item, model));
+      continue;
+    }
+
+    if (t === "preserved") {
+      extension(item, "Raw HTML");
+      push(htmlFor(item, model));
+      continue;
+    }
+
+    if (t === "callout") {
+      extension(item, "Callout");
+      push(htmlFor(item, model));
+    }
+  }
+
+  const text = lines.join("\n").replace(/^\n+/, "").replace(/\n+$/, "");
+  return { text: text ? `${text}\n` : "", extensions, losses, blocks: items.length };
+}
+
+// A name a download can carry: the page's, with the characters a filesystem refuses
+// replaced, never a leading or trailing dot or space.
+export function markdownFileName(name = "page") {
+  const base = String(name ?? "")
+    .replace(/[\\/:*?"<>|\u0000-\u001f]+/g, "-")
+    .replace(/^[.\s]+/, "")
+    .replace(/[.\s]+$/, "");
+  return `${base || "page"}.md`;
+}

package/src/page/features/board.js

@@ -1,12 +1,21 @@
 import { BOARD_CSS } from "../board-style.js";
 import { BoardView } from "../board-view.js";
 import { cardPanel } from "../board-panel.js";
+import { cardPanels } from "../board-views.js";
+import { addViewHook } from "../view-hooks.js";
 
-export function createFeature({ board = null, undo = null, redo = null } = {}) {
+export function createFeature({ view = null, board = null, undo = null, redo = null } = {}) {
+  const off = view ? addViewHook(view, {
+    update: (editorView) => cardPanels.get(editorView)?.sync(),
+    destroy: (editorView) => {
+      cardPanels.get(editorView)?.hide(false, false);
+      cardPanels.delete(editorView);
+    },
+  }) : () => {};
   return {
     id: "board",
-    nodeViews: board ? { board: (node, view, getPos) => new BoardView(node, view, getPos, { commands: board, undo, redo, panel: cardPanel(view) }) } : null,
+    nodeViews: board ? { board: (node, editorView, getPos) => new BoardView(node, editorView, getPos, { commands: board, undo, redo, panel: cardPanel(editorView) }) } : null,
     css: board ? BOARD_CSS : null,
-    dispose() {},
+    dispose() { off(); },
   };
 }

package/src/page/features/chart.js

@@ -0,0 +1,11 @@
+import { ChartView, refreshCharts } from "../chart.js";
+import { addViewHook } from "../view-hooks.js";
+
+export function createFeature({ view = null } = {}) {
+  const off = view ? addViewHook(view, { update: refreshCharts }) : () => {};
+  return {
+    id: "chart",
+    nodeViews: { chart: (node, editorView, getPos) => new ChartView(node, editorView, getPos) },
+    dispose() { off(); },
+  };
+}