hecks 3.10.0 → 3.11.0

data/lib/hecks/projections/site/cms_editor/templates/src/browser/body_doc.js.tmpl

@@ -0,0 +1,175 @@
+__BANNER__
+
+// The domain's document body and the rich-text editor's document, converted one into the other. This
+// is the only place the two meet: the editor (body_editor.js) holds a Tiptap document while a person
+// writes, and every change is turned back into the body the domain takes and posted as the same
+// dotted-path form fields as any other value object. The editor's own format is never sent or stored.
+//
+// Plain JavaScript with no dependencies and no DOM, so the conversion runs the same in node (where
+// the specs hold it) and in the browser. The two models agree on lists because the editor's lists are
+// flat: each item is a block of its own with an `indent`, as a body's list item has a `depth`, so an
+// item converts to an item. A body list block becomes a run of items, and a run of adjacent items
+// with the same alignment and shift becomes one list block again (its kind is that of its first
+// item, and an item of the other kind carries `list_kind`). Where the editor's document holds
+// something the body cannot, it is reduced to the nearest thing the body holds.
+import { ALIGNS, MARKS, MAX_DEPTH, MAX_INDENT, safeHref } from "../ui/body_model.js";
+
+/** The editor's list item node for each kind of body list, and back. */
+const ITEMS = { bullet_list: "flatListItemUnordered", numbered_list: "flatListItemOrdered" };
+const KINDS = { flatListItemUnordered: "bullet_list", flatListItemOrdered: "numbered_list" };
+
+const whole = (value, low, high) => (Number.isInteger(Number(value)) && value !== "" && value !== null && value !== undefined ? Math.min(high, Math.max(low, Number(value))) : null);
+
+const list = (value) => (Array.isArray(value) ? value : []);
+
+const markName = (mark) => (typeof mark === "string" ? mark : mark?.name);
+
+/** The layout attributes of a block, as the editor's nodes carry them (`shift` is the block's indent). */
+function layoutAttrs(block) {
+  return { align: ALIGNS.includes(block.align) ? block.align : null, shift: whole(block.indent, 0, MAX_INDENT) };
+}
+
+/** The inline nodes of `spans`: text carrying its marks and address, and a hard break for a line break. */
+export function spansToInline(spans) {
+  const out = [];
+  for (const span of list(spans)) {
+    const names = MARKS.filter((name) => list(span?.marks).map(markName).includes(name));
+    const href = safeHref(span?.href);
+    const marks = [...names.map((type) => ({ type })), ...(href ? [{ type: "link", attrs: { href } }] : [])];
+    String(span?.text ?? "").split("\n").forEach((part, at) => {
+      if (at > 0) out.push({ type: "hardBreak" });
+      if (part !== "") out.push({ type: "text", text: part, ...(marks.length ? { marks } : {}) });
+    });
+  }
+  return out;
+}
+
+const paragraph = (spans, attrs = {}) => ({ type: "paragraph", attrs, content: spansToInline(spans) });
+
+/** The items of a body list block as flat items, numbering ordered ones as the editor does. */
+function itemsToNodes(block) {
+  const kind = block.kind;
+  const layout = layoutAttrs(block);
+  const counts = [];
+  let above = -1;
+  return list(block.items).map((item) => {
+    const depth = Math.min(whole(item?.depth, 0, MAX_DEPTH) ?? 0, above + 1);
+    above = depth;
+    counts.length = depth + 1;
+    const own = item?.list_kind in ITEMS ? item.list_kind : kind;
+    counts[depth] = own === "numbered_list" ? (counts[depth] ?? 0) + 1 : 0;
+    const attrs = { ...layout, ...(depth > 0 ? { indent: depth } : {}), ...(own === "numbered_list" ? { counter: counts[depth] } : {}) };
+    return { type: ITEMS[own], attrs, content: spansToInline(item?.spans) };
+  });
+}
+
+function blockToNodes(block) {
+  const kind = block?.kind;
+  if (kind === "divider") return [{ type: "horizontalRule" }];
+  if (kind === "image") return [{ type: "image", attrs: { mediaRef: block.media_ref ?? "", alt: block.alt ?? "", caption: block.caption ?? "" } }];
+  if (kind in ITEMS) return itemsToNodes(block);
+  const layout = layoutAttrs(block ?? {});
+  if (kind === "quote") return [{ type: "blockquote", attrs: layout, content: [paragraph(block.spans)] }];
+  if (kind === "heading") return [{ type: "heading", attrs: { level: whole(block.level, 1, 4) ?? 2, ...layout }, content: spansToInline(block.spans) }];
+  return [paragraph(block?.spans, layout)];
+}
+
+/** The editor's document for a body: a body with no blocks is one empty paragraph, as the editor needs. */
+export function bodyToDoc(body) {
+  const content = list(body?.blocks).flatMap(blockToNodes);
+  return { type: "doc", content: content.length ? content : [{ type: "paragraph", attrs: {} }] };
+}
+
+/** The mark names of an inline node, in the body's own order, and its address. */
+function marksOf(node) {
+  const held = list(node.marks);
+  const names = MARKS.filter((name) => held.some((mark) => mark.type === name));
+  const link = held.find((mark) => mark.type === "link");
+  return { marks: names.map((name) => ({ name })), href: safeHref(link?.attrs?.href) ?? undefined };
+}
+
+/** The spans of inline nodes: adjacent spans of the same marks and address become one, empty ones go. */
+export function inlineToSpans(nodes) {
+  const out = [];
+  for (const node of list(nodes)) {
+    const span = node.type === "hardBreak" ? { text: "\n", marks: [] } : node.type === "text" ? { text: node.text ?? "", ...marksOf(node) } : null;
+    if (!span || span.text === "") continue;
+    const last = out[out.length - 1];
+    const same = last && last.text !== "\n" && span.text !== "\n" && last.href === span.href && JSON.stringify(last.marks) === JSON.stringify(span.marks);
+    if (same) last.text += span.text;
+    else out.push({ text: span.text, marks: span.marks, ...(span.href ? { href: span.href } : {}) });
+  }
+  return out;
+}
+
+const withLayout = (node) => {
+  const attrs = node.attrs ?? {};
+  const shift = whole(attrs.shift, 0, MAX_INDENT);
+  return { ...(ALIGNS.includes(attrs.align) ? { align: attrs.align } : {}), ...(shift !== null && shift > 0 ? { indent: shift } : {}) };
+};
+
+const layoutKey = (node) => JSON.stringify(withLayout(node));
+
+/** Groups the run of flat items that starts `nodes[from]` into one list block; returns it and where it ends. */
+function listBlock(nodes, from) {
+  const first = nodes[from];
+  const kind = KINDS[first.type];
+  const items = [];
+  let at = from;
+  while (at < nodes.length && nodes[at].type in KINDS && layoutKey(nodes[at]) === layoutKey(first)) {
+    const node = nodes[at];
+    const above = items.length === 0 ? -1 : items[items.length - 1].depth;
+    const depth = Math.min(whole(node.attrs?.indent, 0, MAX_DEPTH) ?? 0, above + 1);
+    items.push({ spans: inlineToSpans(node.content), depth, ...(KINDS[node.type] !== kind ? { list_kind: KINDS[node.type] } : {}) });
+    at += 1;
+  }
+  return [{ kind, ...withLayout(first), items }, at];
+}
+
+function blockFromNode(node) {
+  switch (node.type) {
+    case "horizontalRule":
+      return [{ kind: "divider" }];
+    case "image":
+      return [{ kind: "image", ...(node.attrs?.mediaRef ? { media_ref: node.attrs.mediaRef } : {}), ...(node.attrs?.alt ? { alt: node.attrs.alt } : {}), ...(node.attrs?.caption ? { caption: node.attrs.caption } : {}) }];
+    case "heading":
+      return [{ kind: "heading", level: whole(node.attrs?.level, 1, 4) ?? 2, ...withLayout(node), spans: inlineToSpans(node.content) }];
+    case "blockquote":
+      return list(node.content).filter((child) => child.type === "paragraph").map((child) => ({ kind: "quote", ...withLayout(node), spans: inlineToSpans(child.content) }));
+    default:
+      return [{ kind: "paragraph", ...withLayout(node), spans: inlineToSpans(node.content) }];
+  }
+}
+
+const emptyParagraph = (block) => block.kind === "paragraph" && block.spans.length === 0 && !("align" in block) && !("indent" in block);
+
+/** The body for an editor document. Trailing empty paragraphs, which the editor keeps for typing, are not blocks. */
+export function docToBody(doc) {
+  const nodes = list(doc?.content);
+  const blocks = [];
+  for (let at = 0; at < nodes.length;) {
+    if (nodes[at].type in KINDS) {
+      const [made, next] = listBlock(nodes, at);
+      blocks.push(made);
+      at = next;
+    } else {
+      blocks.push(...blockFromNode(nodes[at]));
+      at += 1;
+    }
+  }
+  while (blocks.length > 0 && emptyParagraph(blocks[blocks.length - 1])) blocks.pop();
+  return { blocks };
+}
+
+/**
+ * What loading a body into the editor changes, so the editor can say so: a list item more than one
+ * level below the one above it is moved up, because the editor's lists cannot skip a level.
+ */
+export function reductions(body) {
+  const notes = [];
+  for (const block of list(body?.blocks)) {
+    const depths = list(block.items).map((item) => whole(item?.depth, 0, MAX_DEPTH) ?? 0);
+    if (depths.some((depth, at) => depth > (at === 0 ? 0 : depths[at - 1] + 1))) notes.push("a list item more than one level below the one above it was moved up to one level below");
+  }
+  return notes;
+}

data/lib/hecks/projections/site/cms_editor/templates/src/browser/body_editor.js.tmpl

@@ -0,0 +1,418 @@
+__BANNER__
+
+// The writing surface for a structured document body. A Tiptap editor (ProseMirror underneath) holds
+// the document while a person writes; every change is converted to the domain's own body by
+// body_doc.js and written into the form's hidden inputs, named by dotted path like every other value
+// object, so the editor's format is never posted and a browser with no script posts the body as it
+// was. Pasted and dropped HTML first goes through the same reducer the server uses
+// (`htmlToBodyWithNotes`), which says what it reduced.
+//
+// Lists are flat: each item is a block with an `indent`, as a body's item has a `depth`
+// (tiptap-extension-flat-list). Two things differ from the stock extensions because the page is
+// served under a strict content security policy: no style element is injected (the stylesheet has
+// ProseMirror's rules), and no style attribute is written (alignment and indent are data
+// attributes the stylesheet reads).
+import { Editor, Extension } from "@tiptap/core";
+import Blockquote from "@tiptap/extension-blockquote";
+import Image from "@tiptap/extension-image";
+import { Placeholder } from "@tiptap/extensions";
+import StarterKit from "@tiptap/starter-kit";
+import { FlatListCore, FlatListOrdered, FlatListUnordered } from "tiptap-extension-flat-list";
+
+import { ALIGNS, MAX_DEPTH, MAX_INDENT, bodyToFields, bodyToHtml, fieldsToInputs, safeHref } from "../ui/body_model.js";
+import { htmlToBodyWithNotes } from "../ui/body_parse.js";
+import { startDraft } from "./autosave.js";
+import { bodyToDoc, docToBody } from "./body_doc.js";
+
+const loadPicker = __PICKER_LOADER__;
+
+const icon = (name) => `<svg class="icon" aria-hidden="true" focusable="false"><use href="#i-${name}"/></svg>`;
+
+const make = (tag, props = {}, ...children) => {
+  const element = Object.assign(document.createElement(tag), props);
+  element.append(...children);
+  return element;
+};
+
+const BLOCKS = [
+  ["paragraph", "Paragraph"], ["h1", "Heading 1"], ["h2", "Heading 2"], ["h3", "Heading 3"], ["h4", "Heading 4"],
+  ["quote", "Quote"], ["bullet", "Bulleted list"], ["numbered", "Numbered list"],
+];
+
+/** What the faint label in the left margin of the focused block says: short, because the margin is narrow. */
+const SHORT = { paragraph: "Text", h1: "H1", h2: "H2", h3: "H3", h4: "H4", quote: "Quote", bullet: "List", numbered: "List" };
+
+const ITEMS = ["flatListItemUnordered", "flatListItemOrdered"];
+
+// Each group of the toolbar: [action, icon, tooltip].
+const GROUPS = [
+  [["bold", "bold", "Bold (Ctrl+B)"], ["italic", "italic", "Italic (Ctrl+I)"], ["underline", "underline", "Underline (Ctrl+U)"],
+    ["strike", "strike", "Strike-through (Ctrl+Shift+S)"], ["code", "code", "Code (Ctrl+E)"]],
+  [["link", "link", "Link (Ctrl+K)"], ["unlink", "unlink", "Remove link"]],
+  [["bullet", "list-bullets", "Bulleted list"], ["numbered", "list-numbers", "Numbered list"], ["outdent", "outdent", "Move out (Shift+Tab in a list)"],
+    ["indent", "indent", "Move in (Tab in a list)"]],
+  [["left", "align-left", "Align left"], ["center", "align-center", "Align centre"], ["right", "align-right", "Align right"], ["justify", "align-justify", "Justify"]],
+  [["image", "image", "Insert a picture"], ["divider", "divider", "Insert a divider"], ["break", "line-break", "Line break (Shift+Enter)"]],
+  [["undo", "undo", "Undo (Ctrl+Z)"], ["redo", "redo", "Redo (Ctrl+Shift+Z)"]],
+];
+
+/** Alignment and the block's own indent, as data attributes every block-level node carries. */
+const Layout = Extension.create({
+  name: "layout",
+  addGlobalAttributes() {
+    const pick = (attribute, name) => ({
+      default: null,
+      parseHTML: (element) => element.getAttribute(`data-${attribute}`),
+      renderHTML: (attributes) => (attributes[name] ? { [`data-${attribute}`]: String(attributes[name]) } : {}),
+    });
+    return [{
+      types: ["paragraph", "heading", "blockquote", ...ITEMS],
+      attributes: { align: pick("align", "align"), shift: pick("indent", "shift") },
+    }];
+  },
+});
+
+/** A list item sits no deeper than the body allows. */
+const DepthCap = Extension.create({
+  name: "depthCap",
+  priority: 300,
+  addKeyboardShortcuts() {
+    return { Tab: ({ editor }) => ITEMS.includes(editor.state.selection.$from.parent.type.name) && (editor.state.selection.$from.parent.attrs.indent ?? 0) >= MAX_DEPTH };
+  },
+});
+
+/** A flat item drawn as a one-item list with its indent as an attribute, not a style. */
+const bullet = FlatListUnordered.extend({
+  renderHTML({ node }) {
+    const indent = node.attrs.indent || null;
+    return ["ul", { "data-list-indent": indent }, ["li", { "data-list-indent": indent }, 0]];
+  },
+});
+
+const numbered = FlatListOrdered.extend({
+  renderHTML({ node }) {
+    const indent = node.attrs.indent || null;
+    return ["ol", { start: node.attrs.counter, "data-list-indent": indent }, ["li", { "data-list-indent": indent }, 0]];
+  },
+});
+
+/** A picture is its media key, alt text and caption; it is drawn from the picture store when there is one. */
+function picture(base) {
+  const attributes = (element) => ({
+    mediaRef: element.getAttribute("data-media-ref") ?? "",
+    alt: element.getAttribute("data-alt") ?? "",
+    caption: element.getAttribute("data-caption") ?? "",
+  });
+  return Image.extend({
+    addAttributes: () => ({ mediaRef: { default: "" }, alt: { default: "" }, caption: { default: "" } }),
+    parseHTML: () => [{ tag: "figure[data-media-ref]", getAttrs: attributes }, { tag: "img[data-media-ref]", getAttrs: attributes }],
+    renderHTML({ node }) {
+      const held = { "data-media-ref": node.attrs.mediaRef, "data-alt": node.attrs.alt, "data-caption": node.attrs.caption };
+      if (base) return ["img", { ...held, src: `${base}/${encodeURIComponent(node.attrs.mediaRef)}`, alt: node.attrs.alt }];
+      return ["span", { ...held, class: "body-media" }, `image ${node.attrs.mediaRef}${node.attrs.alt ? ` ${node.attrs.alt}` : ""}`];
+    },
+  });
+}
+
+const kindOf = (editor) => {
+  for (const level of [1, 2, 3, 4]) if (editor.isActive("heading", { level })) return `h${level}`;
+  if (editor.isActive("blockquote")) return "quote";
+  if (editor.isActive("flatListItemUnordered")) return "bullet";
+  if (editor.isActive("flatListItemOrdered")) return "numbered";
+  return "paragraph";
+};
+
+/** The top-level block holding the caret: its position and node. */
+function topBlock(editor) {
+  const { $from } = editor.state.selection;
+  if ($from.depth < 1) return null;
+  const pos = $from.before(1);
+  return { pos, node: editor.state.doc.nodeAt(pos) };
+}
+
+const wordsIn = (editor) => (editor.state.doc.textBetween(0, editor.state.doc.content.size, " ").match(/\S+/g) ?? []).length;
+
+function mount(root, base) {
+  if (root.dataset.mounted) return;
+  root.dataset.mounted = "true";
+  const fields = root.querySelector("[data-fields]");
+  const initial = JSON.parse(root.dataset.body || '{"blocks":[]}');
+  const frame = make("div", { className: "relative" });
+  const bar = make("div", { className: "sticky top-14 z-10 flex flex-nowrap items-center gap-1 overflow-x-auto border border-base-300 bg-base-100 p-1 sm:flex-wrap sm:overflow-visible", role: "toolbar" });
+  bar.setAttribute("aria-label", `Formatting for ${root.dataset.label}`);
+  // Inside a card of a list of blocks the writing is a part of the card, so its page is shorter.
+  const nested = root.closest("[data-block-list]") !== null;
+  const page = make("div", { className: `relative ${nested ? "min-h-32 px-4 py-4" : "min-h-96 px-5 py-8 sm:px-12 sm:py-12"} border border-t-0 border-base-300 bg-base-100 focus-within:border-primary` });
+  const surface = make("div");
+  const label = make("div", { className: "pointer-events-none absolute left-1 hidden w-10 overflow-hidden text-[0.6875rem] font-medium leading-tight text-muted sm:block" });
+  label.setAttribute("aria-hidden", "true");
+  const notes = make("p", { className: "mt-2 text-xs text-muted" });
+  notes.setAttribute("role", "status");
+  const status = make("p", { className: "mt-2 flex justify-between gap-4 text-xs text-muted" }, make("span", { textContent: "0 words" }), make("span"));
+  page.append(surface, label);
+  frame.append(bar, page);
+  root.querySelector("[data-fields]").before(frame, notes, status);
+  root.querySelector("[data-body-fallback]").hidden = true;
+  root.querySelector("[data-needs-script]").hidden = true;
+
+  const draft = root.hasAttribute("data-draft") ? startDraft(root) : null;
+  let editor;
+  let changed = false;
+  const buttons = new Map();
+  const say = (messages) => {
+    notes.textContent = messages.length ? `Pasted content was adjusted to fit: ${messages.join("; ")}.` : "";
+  };
+  const sync = () => {
+    const body = docToBody(editor.getJSON());
+    fields.innerHTML = fieldsToInputs(bodyToFields(body, root.dataset.name));
+    const words = wordsIn(editor);
+    status.firstChild.textContent = `${words} ${words === 1 ? "word" : "words"}`;
+  };
+
+  const toolbar = () => {
+    const select = make("select", { className: "select select-ghost select-sm w-36" });
+    select.setAttribute("aria-label", "Block type");
+    for (const [value, text] of BLOCKS) select.append(make("option", { value, textContent: text }));
+    select.addEventListener("change", () => setBlock(select.value));
+    bar.append(make("div", { className: "flex shrink-0 items-center border-r border-base-300 pr-2" }, select));
+    buttons.set("select", select);
+    for (const group of GROUPS) {
+      const holder = make("div", { className: "flex shrink-0 items-center gap-0.5 border-r border-base-300 pr-2 last:border-r-0" });
+      for (const [action, glyph, tip] of group) {
+        const button = make("button", { type: "button", className: "btn btn-ghost btn-square btn-sm" });
+        button.dataset.action = action;
+        button.setAttribute("aria-label", tip.replace(/ \(.*\)$/, ""));
+        button.setAttribute("aria-pressed", "false");
+        button.innerHTML = icon(glyph);
+        const tooltip = make("div", { className: "tooltip tooltip-bottom" }, button);
+        tooltip.dataset.tip = tip;
+        holder.append(tooltip);
+        buttons.set(action, button);
+      }
+      bar.append(holder);
+    }
+    const all = [...bar.querySelectorAll("button, select")];
+    all.forEach((control, at) => control.setAttribute("tabindex", at === 0 ? "0" : "-1"));
+    bar.addEventListener("keydown", (event) => {
+      if (!["ArrowRight", "ArrowLeft", "Home", "End"].includes(event.key) || event.target.tagName === "INPUT") return;
+      const at = all.indexOf(event.target);
+      if (at < 0 || (event.target.tagName === "SELECT" && event.key !== "Home" && event.key !== "End")) return;
+      const next = event.key === "Home" ? 0 : event.key === "End" ? all.length - 1 : (at + (event.key === "ArrowRight" ? 1 : -1) + all.length) % all.length;
+      all.forEach((control, index) => control.setAttribute("tabindex", index === next ? "0" : "-1"));
+      all[next].focus();
+      event.preventDefault();
+    });
+    bar.addEventListener("mousedown", (event) => { if (event.target.closest("button")) event.preventDefault(); });
+    bar.addEventListener("click", (event) => {
+      const button = event.target.closest("button[data-action]");
+      if (button) act(button.dataset.action);
+    });
+  };
+
+  const setBlock = (kind) => {
+    const chain = editor.chain().focus();
+    if (kind === "bullet") chain.toggleFlatListItem("flatListItemUnordered").run();
+    else if (kind === "numbered") chain.toggleFlatListItem("flatListItemOrdered").run();
+    else if (kind === "quote") (editor.isActive("blockquote") ? chain.lift("blockquote") : chain.clearNodes().setBlockquote()).run();
+    else if (kind === "paragraph") chain.clearNodes().setParagraph().run();
+    else chain.clearNodes().setHeading({ level: Number(kind.slice(1)) }).run();
+  };
+
+  const setLayout = (change) => {
+    const found = topBlock(editor);
+    if (!found) return;
+    editor.view.dispatch(editor.state.tr.setNodeMarkup(found.pos, null, { ...found.node.attrs, ...change(found.node.attrs) }));
+    editor.view.focus();
+  };
+
+  const bumpIndent = (step) => {
+    if (ITEMS.includes(editor.state.selection.$from.parent.type.name)) {
+      const depth = editor.state.selection.$from.parent.attrs.indent ?? 0;
+      if (step > 0) return depth < MAX_DEPTH && editor.chain().focus().indentFlatListItem().run();
+      return editor.chain().focus().dedentFlatListItem(true).run();
+    }
+    return setLayout((attrs) => ({ shift: Math.min(MAX_INDENT, Math.max(0, Number(attrs.shift ?? 0) + step)) || null }));
+  };
+
+  const align = (value) => setLayout((attrs) => ({ align: attrs.align === value ? null : value }));
+
+  const popover = (title, inputs, onApply, extras = []) => {
+    frame.querySelector("[data-popover]")?.remove();
+    const panel = make("div", { className: "absolute left-2 right-2 top-full z-20 mt-1 grid max-w-lg gap-3 rounded-box border border-base-300 bg-base-100 p-4 shadow-xl" });
+    panel.dataset.popover = "";
+    panel.setAttribute("role", "group");
+    panel.setAttribute("aria-label", title);
+    const controls = inputs.map(([key, text, value]) => {
+      const input = make("input", { type: "text", name: key, value, className: "input w-full" });
+      panel.append(make("label", { className: "grid gap-1 font-semibold" }, text, input));
+      return [key, input];
+    });
+    const problem = make("div", { className: "alert alert-error alert-soft", hidden: true });
+    problem.setAttribute("role", "alert");
+    const button = (text, run, className) => make("button", { type: "button", className, textContent: text, onclick: run });
+    const close = () => { panel.remove(); editor.chain().focus().run(); };
+    const apply = () => {
+      const message = onApply(Object.fromEntries(controls.map(([key, input]) => [key, input.value])));
+      if (message) { problem.textContent = message; problem.hidden = false; } else close();
+    };
+    panel.append(problem, make("div", { className: "flex flex-wrap gap-2" }, button("Apply", apply, "btn btn-neutral"), ...extras.map(([text, run]) => button(text, () => { run(); close(); }, "btn")), button("Cancel", close, "btn btn-ghost")));
+    panel.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") { event.preventDefault(); close(); }
+      if (event.key === "Enter" && event.target.tagName === "INPUT") { event.preventDefault(); apply(); }
+    });
+    frame.append(panel);
+    panel.style.top = `${bar.offsetHeight}px`;
+    controls[0][1].focus();
+    controls[0][1].select();
+  };
+
+  const link = () => {
+    const held = editor.getAttributes("link").href;
+    const unlink = () => editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    const apply = ({ href }) => {
+      const typed = href.trim();
+      if (typed === "") return unlink();
+      const safe = safeHref(typed);
+      if (!safe) return "That address is not allowed: use a path, http://, https://, mailto: or tel:.";
+      editor.chain().focus().extendMarkRange("link").setLink({ href: safe }).run();
+    };
+    popover("Link", [["href", "Link address: a path, http://, https://, mailto: or tel:", held ?? "https://"]], apply, held ? [["Remove link", unlink]] : []);
+  };
+
+  const putImage = (attrs, at) => {
+    if (at === undefined) editor.chain().focus().insertContent({ type: "image", attrs }).run();
+    else editor.view.dispatch(editor.state.tr.setNodeMarkup(at, null, attrs));
+  };
+
+  const askImage = (current, at) => {
+    if (loadPicker && root.dataset.media) {
+      loadPicker().then(({ openPicker }) => openPicker(frame, bar, {
+        url: root.dataset.media,
+        current,
+        onPick: (key, alt, caption) => { putImage({ mediaRef: key, alt, caption }, at); editor.view.focus(); },
+        onClose: () => editor.view.focus(),
+      }));
+      return;
+    }
+    const inputs = [["media", "Media key of the picture", current?.mediaRef ?? ""], ["alt", "Alt text", current?.alt ?? ""], ["caption", "Caption (optional)", current?.caption ?? ""]];
+    popover("Picture", inputs, ({ media, alt, caption }) => {
+      if (!media.trim()) return "Name the picture by its media key.";
+      putImage({ mediaRef: media.trim(), alt, caption }, at);
+    });
+  };
+
+  const act = (action) => {
+    const chain = editor.chain().focus();
+    const marks = { bold: "toggleBold", italic: "toggleItalic", underline: "toggleUnderline", strike: "toggleStrike", code: "toggleCode" };
+    if (marks[action]) return chain[marks[action]]().run();
+    if (ALIGNS.includes(action)) return align(action);
+    const handlers = {
+      link, unlink: () => chain.extendMarkRange("link").unsetLink().run(), bullet: () => setBlock("bullet"), numbered: () => setBlock("numbered"),
+      indent: () => bumpIndent(1), outdent: () => bumpIndent(-1), image: () => askImage(null), divider: () => chain.setHorizontalRule().run(),
+      break: () => chain.setHardBreak().run(), undo: () => chain.undo().run(), redo: () => chain.redo().run(),
+    };
+    return handlers[action]?.();
+  };
+
+  const refresh = () => {
+    const found = topBlock(editor);
+    const state = { bold: "bold", italic: "italic", underline: "underline", strike: "strike", code: "code", link: "link", bullet: "flatListItemUnordered", numbered: "flatListItemOrdered" };
+    for (const [action, mark] of Object.entries(state)) buttons.get(action).setAttribute("aria-pressed", String(editor.isActive(mark)));
+    for (const value of ALIGNS) buttons.get(value).setAttribute("aria-pressed", String(found?.node.attrs.align === value));
+    buttons.get("unlink").disabled = !editor.isActive("link");
+    buttons.get("undo").disabled = !editor.can().undo();
+    buttons.get("redo").disabled = !editor.can().redo();
+    buttons.get("select").value = kindOf(editor);
+    placeLabel(found);
+  };
+
+  const placeLabel = (found) => {
+    const focused = editor.isFocused && found;
+    if (!focused) {
+      label.textContent = "";
+      return;
+    }
+    const parent = editor.state.selection.$from.parent;
+    const depth = ITEMS.includes(parent.type.name) ? (parent.attrs.indent ?? 0) + 1 : 0;
+    const text = SHORT[kindOf(editor)] ?? "Text";
+    label.textContent = depth > 0 ? `${text} ${depth}` : text;
+    label.style.top = `${Math.max(0, editor.view.coordsAtPos(found.pos + 1).top - page.getBoundingClientRect().top)}px`;
+  };
+
+  const shortcuts = Extension.create({ name: "shortcuts", addKeyboardShortcuts: () => ({ "Mod-k": () => { link(); return true; } }) });
+
+  toolbar();
+  editor = new Editor({
+    element: surface,
+    injectCSS: false,
+    content: bodyToDoc(initial),
+    extensions: [
+      StarterKit.configure({
+        heading: { levels: [1, 2, 3, 4] },
+        codeBlock: false,
+        blockquote: false,
+        bulletList: false,
+        orderedList: false,
+        listItem: false,
+        listKeymap: false,
+        trailingNode: false,
+        link: { openOnClick: false, autolink: false, linkOnPaste: false, HTMLAttributes: { rel: "noopener noreferrer", target: null } },
+      }),
+      Blockquote.extend({ content: "paragraph+" }),
+      FlatListCore,
+      bullet,
+      numbered,
+      picture(base),
+      Placeholder.configure({ placeholder: "Start writing" }),
+      Layout,
+      DepthCap,
+      shortcuts,
+    ],
+    editorProps: {
+      attributes: { role: "textbox", "aria-multiline": "true", "aria-label": root.dataset.label ?? "Text", class: `prose mx-auto ${nested ? "min-h-16" : "min-h-72"} max-w-none focus:outline-none` },
+      transformPastedHTML(html) {
+        if (html.includes("data-pm-slice")) return html;
+        const { body, notes: found } = htmlToBodyWithNotes(html);
+        say(found);
+        return bodyToHtml(body);
+      },
+      handleClickOn(view, pos, node, nodePos) {
+        if (node.type.name !== "image") return false;
+        askImage({ mediaRef: node.attrs.mediaRef, alt: node.attrs.alt, caption: node.attrs.caption }, nodePos);
+        return true;
+      },
+    },
+    onUpdate() {
+      changed = true;
+      status.lastChild.textContent = draft ? "" : "Not saved yet";
+      sync();
+      draft?.touch();
+      root.dispatchEvent(new CustomEvent("editor:changed", { bubbles: true }));
+    },
+    onTransaction: () => refresh(),
+    onFocus: () => refresh(),
+    onBlur: () => {
+      label.textContent = "";
+      draft?.blur();
+    },
+  });
+  sync();
+  status.lastChild.textContent = "";
+  root.closest("form")?.addEventListener("submit", () => { if (changed) sync(); });
+  root.editor = editor;
+}
+
+/**
+ * Replaces each rendered body field with a writing surface, except those inside a list of mixed
+ * blocks: there each is mounted when its card is first opened (see `mountWithin`).
+ */
+export function mountAll() {
+  for (const root of document.querySelectorAll("[data-body-editor]")) if (!root.closest("[data-block-list]")) mount(root, root.dataset.media);
+}
+
+/** Mounts the writing surfaces inside `scope` that are shown and not yet mounted. */
+export function mountWithin(scope) {
+  for (const root of scope.querySelectorAll("[data-body-editor]:not([data-mounted])")) {
+    if (!root.closest("[hidden]")) mount(root, root.dataset.media);
+  }
+}

data/lib/hecks/projections/site/cms_editor/templates/src/browser/epoch.js.tmpl

@@ -0,0 +1,61 @@
+__BANNER__
+
+// Moments between the domain and the person. The domain holds whole seconds since 1970 UTC; a person
+// reads and writes a date and a time in their own time zone. These functions turn one into the other
+// with the browser's own zone (the `TZ` environment variable under node), touch no page, and are held
+// under node in several zones. A date (no time) is the start of that day in the person's zone.
+
+const pad = (number, width = 2) => String(number).padStart(width, "0");
+
+/** The moment as a native input holds it: `YYYY-MM-DDTHH:MM` (`datetime-local`) or `YYYY-MM-DD` (`date`), in the local zone. */
+export function toLocal(seconds, mode) {
+  const moment = new Date(seconds * 1000);
+  const day = `${pad(moment.getFullYear(), 4)}-${pad(moment.getMonth() + 1)}-${pad(moment.getDate())}`;
+  return mode === "date" ? day : `${day}T${pad(moment.getHours())}:${pad(moment.getMinutes())}`;
+}
+
+/** The whole seconds a native input's text stands for in the local zone, or null when it is not a date. */
+export function fromLocal(text, mode) {
+  const found = /^(\d{4,6})-(\d{2})-(\d{2})(?:T(\d{2}):(\d{2}))?$/.exec(text ?? "");
+  if (!found) return null;
+  const [year, month, day] = found.slice(1, 4).map(Number);
+  const moment = new Date(2000, 0, 1, 0, 0, 0, 0);
+  moment.setFullYear(year, month - 1, day);
+  if (mode !== "date") moment.setHours(Number(found[4] ?? 0), Number(found[5] ?? 0), 0, 0);
+  const seconds = Math.floor(moment.getTime() / 1000);
+  return Number.isFinite(seconds) && moment.getDate() === day ? seconds : null;
+}
+
+/** The moment in the person's own words and zone: `Oct 7, 2026` or `Oct 7, 2026, 2:30 PM`. */
+export function formatMoment(seconds, mode) {
+  const style = mode === "date" ? { dateStyle: "medium" } : { dateStyle: "medium", timeStyle: "short" };
+  return new Intl.DateTimeFormat(undefined, style).format(new Date(seconds * 1000));
+}
+
+const UNITS = [
+  ["year", 31_536_000],
+  ["month", 2_592_000],
+  ["day", 86_400],
+  ["hour", 3_600],
+  ["minute", 60],
+];
+
+const startOfDay = (moment) => new Date(moment.getFullYear(), moment.getMonth(), moment.getDate()).getTime();
+
+/** How far from `now` (whole seconds) the moment is, in words: `in 3 days`, `2 hours ago`, `yesterday`. */
+export function relative(seconds, now, mode) {
+  const words = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" });
+  if (mode === "date") return words.format(Math.round((startOfDay(new Date(seconds * 1000)) - startOfDay(new Date(now * 1000))) / 86_400_000), "day");
+  const apart = seconds - now;
+  const [unit, size] = UNITS.find(([, span]) => Math.abs(apart) >= span) ?? ["second", 1];
+  return words.format(Math.trunc(apart / size), unit);
+}
+
+/** The person's zone as words: `Europe/Paris (UTC+02:00)`, the offset being the one in force at `seconds`. */
+export function zoneLabel(seconds) {
+  const minutes = -new Date(seconds * 1000).getTimezoneOffset();
+  const sign = minutes < 0 ? "-" : "+";
+  const offset = `UTC${sign}${pad(Math.floor(Math.abs(minutes) / 60))}:${pad(Math.abs(minutes) % 60)}`;
+  const name = new Intl.DateTimeFormat().resolvedOptions().timeZone;
+  return name ? `${name} (${offset})` : offset;
+}