@heycys/gallery 0.1.1 → 0.1.2

package/browser/editor/page/commit.mjs

@@ -7,7 +7,7 @@ import { rangeAt, rangeOffsets } from "./marks.mjs";
 import { pageOfKind, pageOfUnit } from "./page-objects.mjs";
 import { containerTypeOf, pack, project } from "./sync-state.mjs";
 import { outsideKey, randomBlockId } from "../../shared/ids.mjs";
-import { CHART_DATA, CHART_SOURCE } from "../../shared/table-chart.mjs";
+import { CHART_SOURCE, TABLE_READERS } from "../../shared/table-chart.mjs";
 
 // The page's commits (autosave; docs/editor.md, "Commits"). A commit is what changed on the page
 // since the last one, as collectEdits finds it against the layout and baselines the last commit
@@ -803,12 +803,18 @@ export function createCommits({ root, map, baselines, units, boxes, getLayout, s
     baselines.set(id, html);
     return id;
   };
+  // How many blocks holding text blocks of their own (a list item's paragraphs) asLoaded made anew, those
+  // in them made anew with them: pathIndex finds a unit's blocks again then.
+  let rewrites = 0;
+  const holdsBlocks = (host) => host.querySelector("[contenteditable='true']") !== null;
   // A text block as a load of the page shows the file's (its inline elements of the report's own
   // atoms, written back as they are: core.mjs prepareBlock), the caret where it stood.
   const asLoaded = (host, { inner, atoms = [], kind, caps }) => {
     const selection = host.ownerDocument.getSelection();
     const place = selection?.rangeCount && host.contains(selection.anchorNode) ? rangeOffsets(host, selection.getRangeAt(0)) : null;
+    const held = holdsBlocks(host);
     prepareBlock(host, { inner, atoms, kind, caps });
+    if (held || holdsBlocks(host)) rewrites++;
     if (place) select(rangeAt(host, place));
   };
   // The selection in a text block someone else's words are about to be merged into, as it stands among the
@@ -883,14 +889,26 @@ export function createCommits({ root, map, baselines, units, boxes, getLayout, s
     const hosts = [...element.querySelectorAll("[contenteditable='true']")].filter((host) => host.parentElement?.closest("[data-ge-unit], [data-ge-unit-kind]") === element);
     return hosts.length === blocks.length ? hosts : null;
   };
-  // The text block of `element` (a unit of the page) that is the file's { self } or { path } one.
-  const blockElement = (element, block) => {
+  // The text block of `element` (a unit of the page) that is the file's { self } or { path } one: the first
+  // of its own whose path (pathFrom) is that one. `find`: the unit's text blocks by path (pathIndex), which a
+  // caller asking of each of a unit's blocks makes once: found anew for each block, a table of 500 rows had
+  // its thousand cells walked, each past its row's 500 siblings, for each of the thousand the answer named,
+  // the page standing still for a minute after each commit there.
+  const blockElement = (element, block, find = pathIndex(element)) => {
     // Its own text: the element itself, or the span of its own its description's `title` names (a Sheet tab's name).
     if (block.self) return element.matches("[contenteditable='true']") ? element : BLOCK_TYPES[blockTypeOf(element)]?.title?.(element) ?? null;
     if (!Array.isArray(block.path) || block.path[0] !== "unit") return null;
-    const want = JSON.stringify(block.path);
-    const owner = (host) => host.parentElement?.closest("[data-ge-unit], [data-ge-unit-kind]");
-    return [...element.querySelectorAll("[contenteditable='true']")].find((host) => owner(host) === element && JSON.stringify(pathFrom(element, host)) === want) ?? null;
+    return find(JSON.stringify(block.path));
+  };
+  // The text blocks of `element` by path, for asking of many in turn: found once (hostsByPath), and again only
+  // once a block holding blocks of its own was made anew as the file gives it (asLoaded's `rewrites`).
+  const pathIndex = (element) => {
+    let index = null;
+    let made = -1;
+    return (want) => {
+      if (made !== rewrites) [index, made] = [hostsByPath(element), rewrites];
+      return index.get(want) ?? null;
+    };
   };
 
   /**
@@ -1003,8 +1021,9 @@ export function createCommits({ root, map, baselines, units, boxes, getLayout, s
       // of the page's (its words would go over theirs): it keeps the one the page had, but where nobody else wrote.
       const matched = new Set();
       const inOrder = inFileOrder(element, fact.blocks);
+      const find = pathIndex(element);
       for (const [index, block] of fact.blocks.entries()) {
-        const host = blockElement(element, block) ?? inOrder?.[index];
+        const host = blockElement(element, block, find) ?? inOrder?.[index];
         if (!host) continue;
         const fresh = blockOf(host) === null;
         const own = registerBlock(host, pending, block, unit);
@@ -1196,7 +1215,8 @@ export function createCommits({ root, map, baselines, units, boxes, getLayout, s
    * Take in the answer to a commit (build's `pending`, the endpoint's receipt; `alone`: nobody but
    * this page wrote the file since it showed it, see adopt). Returns { conflicts, merged: hosts now
    * showing a merge, stale: a merge the page could not show, outdated: it runs a manifest that is no
-   * more, forced: the page units a change the reader said to make anyway went in for, all it held }.
+   * more, forced: the page units a change the reader said to make anyway went in for, all it held,
+   * rekeyed: the keys of tables it set otherwise on the page, [element, name, old, new | null] }.
    * A conflict of a change sent as the reader said to make it anyway says so (`again`).
    */
   function apply(pending, receipt, { alone = true } = {}) {
@@ -1221,24 +1241,31 @@ export function createCommits({ root, map, baselines, units, boxes, getLayout, s
       else if (element) proposals.set(identityOf(element), id);
     }
     for (const [key, hash] of Object.entries(receipt.hashes ?? {})) if (map.units[Number(key)]) map.units[Number(key)].hash = hash;
-    // The keys of charts drawn from tables the file gave the blocks the commit made, other than the
-    // page chose (source/chart-keys.mjs: one the file had meanwhile): theirs on the page too, so
-    // that each card draws the table the file links it to ({ old: new | null }, null: off a table).
+    // The keys of tables the file gave the blocks the commit made and the tables it keyed (a view's
+    // 视图 ›: the key its frame took, an attribute of the unit), other than the page chose
+    // (source/chart-keys.mjs: one the file had meanwhile): theirs on the page too, so that each card and
+    // view reads the table the file links it to ({ old: new | null }, null: off a table); `rekeyed` says
+    // which it changed ([element, name, old, new | null]), for the undo steps that recorded them (history.mjs).
+    const rekeyed = [];
     if (receipt.chartKeys) {
-      for (const element of pending.made.values()) {
+      const keyed = [...pending.units.values()].filter(({ change }) => change?.attribute === CHART_SOURCE).map(({ id }) => unitElement(id)).filter(Boolean);
+      for (const element of [...pending.made.values(), ...keyed]) {
         // A copy not written yet sends its keys again: the file's now.
         const sent = element?.getAttribute(COPY_KEYS);
         if (sent) {
           const keys = Object.fromEntries(Object.entries(JSON.parse(sent)).map(([from, to]) => [from, to !== null && Object.hasOwn(receipt.chartKeys, to) ? receipt.chartKeys[to] : to]));
           element.setAttribute(COPY_KEYS, JSON.stringify(keys));
         }
-        for (const node of element ? [element, ...element.querySelectorAll(`[${CHART_DATA}], [${CHART_SOURCE}]`)] : []) {
-          for (const name of [CHART_DATA, CHART_SOURCE]) {
+        const names = [CHART_SOURCE, ...TABLE_READERS];
+        for (const node of element ? [element, ...element.querySelectorAll(names.map((name) => `[${name}]`).join(", "))] : []) {
+          for (const name of names) {
             const key = node.getAttribute(name);
             if (key === null || !Object.hasOwn(receipt.chartKeys, key)) continue;
             const next = receipt.chartKeys[key];
             if (typeof next === "string") node.setAttribute(name, next);
             else if (next === null && name === CHART_SOURCE) node.removeAttribute(name);
+            else continue;
+            rekeyed.push([node, name, key, next]);
           }
         }
       }
@@ -1498,13 +1525,14 @@ export function createCommits({ root, map, baselines, units, boxes, getLayout, s
     }
     setLayout(next);
     marks();
-    return { conflicts, merged, stale, outdated: shownAgain, forced: [...landed] };
+    return { conflicts, merged, stale, outdated: shownAgain, forced: [...landed], rekeyed };
   }
 
   // A text committed: what it replaced (the first time this page committed it), what it is now, and what
   // the commits of it between left it as (`earlier`, the newest TEXTS_KEPT): someone writing back what
   // they read then puts back what the page committed after. Back as it was first, it is asked of what it
   // was between, as a part of what a component writes is (noteWrite): an undo is a commit like any other.
+  // `at`: when it was last committed, which puts the journals of two tabs' pages in order (autosave.mjs).
   function committedText(key, sent) {
     const mine = sources.get(sent.id);
     const was = journal.get(key);
@@ -1512,7 +1540,7 @@ export function createCommits({ root, map, baselines, units, boxes, getLayout, s
     if (mine === undefined) return void journal.delete(key);
     const earlier = [...new Set([...(was?.earlier ?? []), ...(was ? [was.mine] : [])])].filter((text) => text !== mine && text !== original).slice(-TEXTS_KEPT);
     if (mine === original && earlier.length === 0) return void journal.delete(key);
-    journal.set(key, { key, block: blockRef(sent.id), original, mine, ...(earlier.length > 0 ? { earlier } : {}) });
+    journal.set(key, { key, block: blockRef(sent.id), original, mine, ...(earlier.length > 0 ? { earlier } : {}), at: Date.now() });
   }
 
   // A part of what a unit's component writes, written by a commit (`before`, `after`: the hashes the file
@@ -1626,6 +1654,12 @@ export function createCommits({ root, map, baselines, units, boxes, getLayout, s
   /** Whether unit `unit` stands inside one of `units` on the page: what someone else's write took out with it is decided with it. */
   const heldWithin = (unit, units) => units.some((other) => other !== unit && unitsWithin(other).includes(unit));
 
+  /** The unit the page shows with file id `id` (not deleted on the page), or null: a block an earlier load made, still there. */
+  const unitOf = (id) => {
+    const unit = typeof id === "string" ? map.units.findIndex((each, index) => each?.blockId === id && !removed.has(index) && unitElement(index)) : -1;
+    return unit < 0 ? null : unit;
+  };
+
   /** The text of the blocks in a unit the page shows (the reader's words), or "". */
   const unitText = (unit) => {
     const element = unitElement(unit);
@@ -1741,7 +1775,7 @@ export function createCommits({ root, map, baselines, units, boxes, getLayout, s
   }
 
   return {
-    build, apply, collect, current, marks, counts, buffer, texts, resolve, committed, unjournal, placedUnits, putBack, heldWithin, unitText, written, carry, dataOfUnit, heldOtherwise, rewrite, issues, removed, pageIds, idFor,
+    build, apply, collect, current, marks, counts, buffer, texts, resolve, committed, unjournal, placedUnits, putBack, heldWithin, unitOf, unitText, written, carry, dataOfUnit, heldOtherwise, rewrite, issues, removed, pageIds, idFor,
     /** The id a unit of the page has in the file, or the one it proposes for it; null for none. */
     fileId: (unit) => map.units[unit]?.blockId ?? map.units[unit]?.proposed ?? null,
     /** The hash a unit of the page has in the file now (its map's, kept by every answer); null for none (changes/ finds the Agent's blocks by it). */
@@ -1803,11 +1837,35 @@ export const nodeHTML = (node) => [node?.title, node?.html, node?.restore?.sourc
 // Where a text block of the page sits in its unit, as the server's scan writes it (pathIn): the
 // element steps from the unit down, each [tag, index among the parent's children of that tag, how
 // many there are]. Only to find the element a path of the file names (blockElement), never to say where a block is.
-function pathFrom(unit, host) {
-  const steps = [];
+// `steps`: each element's step, kept for the next path asked of the same unit (hostsByPath): its parent's
+// children are counted once, for all of them.
+function pathFrom(unit, host, steps = new Map()) {
+  const path = [];
   for (let node = host; node && node !== unit; node = node.parentElement) {
-    const same = [...(node.parentElement?.children ?? [])].filter((child) => child.localName === node.localName);
-    steps.unshift([node.localName, same.indexOf(node), same.length]);
+    if (!steps.has(node)) {
+      const children = node.parentElement?.children ?? [node];
+      const counts = new Map();
+      for (const child of children) {
+        const at = counts.get(child.localName) ?? 0;
+        counts.set(child.localName, at + 1);
+        steps.set(child, [child.localName, node.parentElement ? at : -1]);
+      }
+      for (const child of children) steps.get(child).push(node.parentElement ? counts.get(child.localName) : 0);
+    }
+    path.unshift(steps.get(node));
+  }
+  return ["unit", ...path];
+}
+
+// The text blocks of `unit` (a unit of the page) that are its own, no unit's inside it, by their path (pathFrom,
+// as JSON): the first of each, in the page's order.
+function hostsByPath(unit) {
+  const steps = new Map();
+  const found = new Map();
+  for (const host of unit.querySelectorAll("[contenteditable='true']")) {
+    if (host.parentElement?.closest("[data-ge-unit], [data-ge-unit-kind]") !== unit) continue;
+    const path = JSON.stringify(pathFrom(unit, host, steps));
+    if (!found.has(path)) found.set(path, host);
   }
-  return ["unit", ...steps];
+  return found;
 }

package/browser/editor/page/conflicts.mjs

@@ -2,7 +2,7 @@ import { blocksText, partOwner, plainText } from "./core.mjs";
 import { reveal } from "./folded.mjs";
 import { wordDiff } from "./merge.mjs";
 import { PANEL_STYLE, panelGone, panelShown } from "./panel.mjs";
-import { addStyle, button, element, mount } from "./ui.mjs";
+import { addStyle, element, mount, textButton } from "./ui.mjs";
 import { t } from "../../shared/i18n/index.mjs";
 
 // The conflicts the page holds back (docs/editor.md, "Conflicts"), each a card in one panel: what
@@ -66,7 +66,7 @@ function describe(entry, restorable) {
     if (entry.reason === "changed") return { text: t("这一段你和 AI 同时改了同一处。"), both: true, diff: true, actions: [[t("保留我的"), "mine", true], [t("使用最新版本"), "theirs"]] };
     if (entry.reason === "missing") return { text: t("你修改的这一块已被 AI 删除。"), actions: [...(restorable ? [[t("恢复我的"), "restore", true]] : []), [t("接受删除"), "accept"], copy] };
     if (entry.reason === "structure") return { text: t("你修改的这一处所在的组件已被 AI 改过结构，没法确定对应的位置。"), actions: [[t("使用最新版本"), "theirs"], copy] };
-    if (packageChanged(entry)) return { text: t("这个组件的组件包刚刚变了，这处文字不再能修改，你的修改没有写进文件。"), actions: [[t("使用最新版本"), "theirs"], copy] };
+    if (packageChanged(entry)) return { text: t("这个自定义块刚刚变了，这处文字不再能修改，你的修改没有写进文件。"), actions: [[t("使用最新版本"), "theirs"], copy] };
     return { text: t("这一处在文件里找不到唯一对应的位置，没有保存。"), actions: [[t("使用最新版本"), "theirs"], copy] };
   }
   if (entry.kind === "unit") {
@@ -123,7 +123,7 @@ export function createConflicts({ act, nodeOf, restorable, copyBlock, say }) {
       panelShown(panel);
     }
     const conflicts = [...cards.values()].every(({ entry }) => !unfit(entry));
-    const head = element("div", { class: "ge-conflicts-head" }, element("span", { text: conflicts ? t("{0} 处冲突待处理", cards.size) : t("{0} 处内容待处理", cards.size) }), button(t("收起"), () => { panel.hidden = true; }, { "data-quiet": "" }));
+    const head = element("div", { class: "ge-conflicts-head" }, element("span", { text: conflicts ? t("{0} 处冲突待处理", cards.size) : t("{0} 处内容待处理", cards.size) }), textButton(t("收起"), () => { panel.hidden = true; }, { quiet: true }));
     panel.replaceChildren(head, ...[...cards.values()].map(({ node }) => node));
   }
 
@@ -139,7 +139,7 @@ export function createConflicts({ act, nodeOf, restorable, copyBlock, say }) {
     const buttons = element("div", { class: "ge-actions" });
     const quiet = element("span", { class: "ge-conflict-quiet" }); // looking, not deciding: on the right
     for (const [label, action, primary] of actions) {
-      buttons.append(button(label, async () => {
+      buttons.append(textButton(label, async () => {
         if (action === "copy-block") {
           const node = nodeOf(entry);
           if (!node?.isConnected || !copyBlock(node)) say(t("没能完成，请再试一次。"), "error");
@@ -166,16 +166,16 @@ export function createConflicts({ act, nodeOf, restorable, copyBlock, say }) {
     if (diff && mine && theirs) {
       const legend = element("div", { class: "ge-conflict-label" }, element("span", { class: "ge-chip", "data-mine": "", text: t("你的") }), element("span", { class: "ge-chip", "data-theirs": "", text: t("AI 的") }));
       const view = element("div", { hidden: "" }, legend, element("div", { class: "ge-version" }));
-      const toggle = button(t("查看局部差异"), () => {
+      const toggle = textButton(t("查看局部差异"), () => {
         view.hidden = !view.hidden;
         versions.hidden = !view.hidden;
         toggle.textContent = view.hidden ? t("查看局部差异") : t("查看两个版本");
         if (!view.hidden) view.lastElementChild.replaceChildren(...diffNodes(mine, theirs));
-      }, { "data-quiet": "" });
+      }, { quiet: true });
       quiet.append(toggle);
       node.append(view);
     }
-    if (nodeOf(entry)) quiet.append(button(t("定位"), () => locate(entry.key), { "data-quiet": "" }));
+    if (nodeOf(entry)) quiet.append(textButton(t("定位"), () => locate(entry.key), { quiet: true }));
     if (quiet.childElementCount > 0) buttons.append(quiet);
     node.append(buttons);
     return node;

package/browser/editor/page/core.mjs

@@ -40,7 +40,7 @@ const WRAPPERS = new Set(["UL", "OL", "BLOCKQUOTE"]);
 
 // An inline element of the report's own, as the scanner judges it (source/blocks.mjs): its
 // attributes as the file writes them (not the page's data-ge-* markers).
-const isOwnAtom = (node) => ownInline(node.localName, [...node.attributes].filter(({ name }) => !MARKER.test(name)), node.textContent.trim() !== "");
+const isOwnAtom =(node) => ownInline(node.localName, [...node.attributes].filter(({ name }) => !MARKER.test(name)), node.textContent.trim() !== "");
 
 // A block's atoms in `root` (its source parsed), in the order of the file, as the scanner lists
 // them (source/blocks.mjs inlineMode): the outermost formulas, links shown with their icon and inline
@@ -88,6 +88,7 @@ export function prepareBlock(element, { inner, atoms, kind = "flow", caps = [] }
   const template = element.ownerDocument.createElement("template");
   template.innerHTML = inner;
   template.content.querySelectorAll("*").forEach((node) => node.setAttribute("data-ge-src", ""));
+  HOSTS[kind]?.pictures?.show(template.content); // a cell's pictures shown where the server serves them
   const sourceAtoms = atomsIn(template.content, kind === "text" && caps.includes("plain"));
   const drawnAtoms = sourceAtoms.filter((atom) => atom.matches(ATOM_SELECTOR)); // a formula as the kit drew it
   // The blocks a list item holds are blocks of their own: only its text before them is rebuilt.
@@ -342,15 +343,16 @@ export function matchesSource(element, inner) {
 export function serializeInner(element) {
   const inner = HOSTS[element.getAttribute?.("data-ge-kind")]?.inner;
   if (inner) return inner(element);
-  // A table cell's lists are its text (单元格里的列表); any other block's are blocks of their own.
-  const lists = element.getAttribute?.("data-ge-kind") === "cell";
-  return serializeNodes(ownNodes(element), lists).replace(/<br>\s*$/, "");
+  // A table cell's lists are its text (单元格里的列表); any other block's are blocks of their own. A
+  // kind of text block that holds pictures (a cell's: HOSTS `pictures`) writes them; any other none.
+  const kind = element.getAttribute?.("data-ge-kind");
+  return serializeNodes(ownNodes(element), kind === "cell", HOSTS[kind]?.pictures ?? null).replace(/<br>\s*$/, "");
 }
 
 // A list in a table cell, its items' inline content (a line break holding an empty item's caret left out).
-function serializeList(list) {
+function serializeList(list, pictures = null) {
   const tag = list.tagName.toLowerCase();
-  const items = [...list.children].filter((item) => item.tagName === "LI").map((item) => `<li>${serializeNodes([...item.childNodes]).replace(/<br>\s*$/, "")}</li>`);
+  const items = [...list.children].filter((item) => item.tagName === "LI").map((item) => `<li>${serializeNodes([...item.childNodes], false, pictures).replace(/<br>\s*$/, "")}</li>`);
   return items.length > 0 ? `<${tag}>${items.join("")}</${tag}>` : "";
 }
 
@@ -438,7 +440,7 @@ const spaced = (text) => escapeTyped(text).replace(/ *\u00a0[ \u00a0]*/g, " ");
 // shows where they were, changes/) are no content: left out, the text on either side of one is
 // written as one text, as it was before the node split it (a space either side of it the one space
 // it was, never two).
-function serializeNodes(nodes, lists = false) {
+function serializeNodes(nodes, lists = false, pictures = null) {
   let html = "";
   let text = null; // a text node's, not written yet: the text after an editor's node joins it
   let across = false; // an editor's node stands between it and what comes next
@@ -456,17 +458,20 @@ function serializeNodes(nodes, lists = false) {
     if (text !== null) html += spaced(text);
     text = null;
     across = false;
-    html += serializeNode(node, lists);
+    html += serializeNode(node, lists, pictures);
   }
   return text === null ? html : html + spaced(text);
 }
 
-function serializeNode(node, lists = false) {
+// `pictures`: the host's (HOSTS `pictures`: write(element) its markup, "" for one of no file, null for no picture).
+function serializeNode(node, lists = false, pictures = null) {
   // A text node holding nothing but a zero-width space keeps the caret after a mark the editor
   // made (markdown/, typing shortcuts); it is never content.
   if (node.nodeType === 3) return node.data === ZWSP ? "" : spaced(node.data);
   if (node.nodeType !== 1) return "";
-  if (isList(node)) return lists ? serializeList(node) : "";
+  if (isList(node)) return lists ? serializeList(node, pictures) : "";
+  const picture = pictures?.write(node) ?? null;
+  if (picture !== null) return picture;
   const atom = node.getAttribute("data-ge-atom");
   if (atom !== null && ATOM_SOURCE.has(atom)) return ATOM_SOURCE.get(atom);
   // Elements from the source keep the author's tag and attributes; only elements the browser
@@ -475,7 +480,7 @@ function serializeNode(node, lists = false) {
   // and their text kept.
   const fromSource = node.hasAttribute("data-ge-src") && node.tagName in TAGS;
   const tag = fromSource ? node.tagName.toLowerCase() : TAGS[node.tagName];
-  const inner = serializeNodes([...node.childNodes]);
+  const inner = serializeNodes([...node.childNodes], false, pictures);
   const ink = node.tagName === "SPAN" ? [...node.classList].filter(isInkClass) : [];
   if (ink.length > 0) return inner ? `<span class="${ink.join(" ")}">${inner}</span>` : "";
   // Small text's end part (its Tab: components/paragraph/page.mjs), at the line's right end.
@@ -574,6 +579,9 @@ export function newTail(container, type) {
 // New blocks split off `from` are paragraphs, or list items in a list.
 const newBlock = (doc, tag, from) => newHost(doc, tag === "li" ? "item" : "paragraph", from);
 
+/** A new, empty paragraph, as a split makes one outside a list (the page's title's Enter: typing/ enterBody). */
+export const newParagraphHost = (doc) => newBlock(doc, "p", null);
+
 // The element a text block made on the page is part of when it is not a block of its own: the
 // summary of a new disclosure, a new code block (its code's pre, its title's block), the header of a
 // new detail card.
@@ -720,10 +728,12 @@ const isFormula = (node) => node.matches(".doc-math-inline");
  * text with the format bar's marks (marks: false drops them, links: false drops links), a formula
  * of this page as its chip (another one, KaTeX's or the kit's \(…\), as the chip formula(tex) makes,
  * or else as its TeX source; `formulas` false, each as its source), a link shown with its icon as the
- * chip mention(mentionOf(it)) makes (else a link of its title); blocks and line breaks start new
- * lines, and everything else gives only its text.
+ * chip mention(mentionOf(it)) makes (else a link of its title), an element what picture(element)
+ * makes of it (a cell's picture: page/table/pictures.mjs; null nothing, undefined no picture: none
+ * given, no picture is one); blocks and line breaks start new lines, and everything else gives only
+ * its text.
  */
-export function pastedLines(doc, html, { marks = true, links = true, formula = null, formulas = true, mention = null } = {}) {
+export function pastedLines(doc, html, { marks = true, links = true, formula = null, formulas = true, mention = null, picture = null } = {}) {
   const template = doc.createElement("template");
   template.innerHTML = html;
   const lines = [[]];
@@ -777,6 +787,12 @@ export function pastedLines(doc, html, { marks = true, links = true, formula = n
         }
       }
       if (/^(STYLE|SCRIPT|TEMPLATE|META|TITLE|LINK|NOSCRIPT|BUTTON|SVG)$/i.test(child.tagName) || child.matches('[aria-hidden="true"], .ge-code-gutter, [data-doc-dev]')) continue;
+      // A picture, where `picture` takes it (undefined: no picture): what it makes of it, else nothing.
+      const made = picture?.(child);
+      if (made !== undefined) {
+        if (made) push(target, made);
+        continue;
+      }
       if (child.tagName === "BR") {
         if (target) push(target, doc.createTextNode(" "));
         else newLine();
@@ -794,7 +810,7 @@ export function pastedLines(doc, html, { marks = true, links = true, formula = n
         continue;
       }
       walk(child, mark);
-      if (mark.textContent.trim() || mark.querySelector("[data-ge-atom]")) push(target, mark);
+      if (mark.textContent.trim() || mark.querySelector("[data-ge-atom]") || (picture && mark.firstElementChild)) push(target, mark);
       else if (mark.textContent) push(target, doc.createTextNode(mark.textContent));
     }
   };

package/browser/editor/page/custom-page.mjs

@@ -0,0 +1,106 @@
+import { startBoard } from "./board/index.mjs";
+import { relayTo } from "./notices.mjs";
+import { connectWorkbench } from "./session.mjs";
+
+// A custom page inside a workbench (src/server/routes.mjs serves it at /pages/<slug> with this module;
+// docs/workbench.md "Custom pages"): no document editor, the session, by which the workbench shows it
+// as it shows a document's page, and its boards' editing (./board/: the cards moved, resized, added,
+// taken out, their settings and their blocks' writes, through the page service, by the page map the
+// server writes in its head), which shows the page again only once nothing of it waits. Its session's
+// slug is "@<slug>", the page's address in the workbench (#@<slug>), which no document's slug can be.
+// It answers the session's own commands (theme, keys, scroll-top: src/editor/page/session.mjs),
+// prepare-close (once the board's ops sent are answered: each is written at once, nothing else waits),
+// add-card (the top bar's 添加自定义块: the library of the page's first board, under the button's place that
+// the workbench sends) and, on the home page, restore-defaults (恢复默认卡片, the sidebar's: the board's, one step of its
+// undo; its answer { ok, added, skipped } the workbench says) and undo-restore ({ cards }: that step
+// undone while it is the board's last, the workbench's 撤销),
+// and sends ready, reload (its live script heard that page.html or page.json changed, or a block it
+// holds: the workbench loads it again in a hidden frame and swaps it in once drawn), open (a link to a
+// document or another page, or a block's context.workspace.open: doc-open-request) and key. Opened on its own (not in a frame of the workbench), it has no
+// session: its board edits all the same, and the live script reloads it.
+
+const slug = decodeURIComponent(location.pathname.split("/")[2] ?? "");
+const IDLE = { editing: false, pending: false, saving: false, offline: false, conflicts: 0, unfit: 0, changed: false };
+// Nothing stands over a custom page as a modal.
+const NO_MODALS = { open: () => [], listen() {}, closeTop: () => false };
+
+let board = null;
+const session = connectWorkbench({
+  slug: `@${slug}`,
+  snapshot: () => ({ title: document.title, icon: null, state: IDLE }),
+  commands: {
+    "prepare-close": async () => {
+      await board?.idle();
+      return { ok: true };
+    },
+    // 添加自定义块 of the workbench's top bar: the library opens in the page, at `anchor` (the button's place in
+    // this frame's coordinates; none: in the middle of the window), the first board's.
+    "add-card": async ({ anchor } = {}) => (board ? board.addCard({ anchor }) : { ok: false, reason: "board" }),
+    ...(slug === "home" ? {
+      "restore-defaults": async () => (board ? board.restoreDefaults() : { ok: false, reason: "board" }),
+      "undo-restore": async ({ cards }) => (board ? board.undoRestore(cards) : { ok: false, reason: "board" }),
+    } : {}),
+  },
+  modals: NO_MODALS,
+});
+
+// The page map (routes.mjs: its slug, its token, the version it was served at, its blocks): the boards edit.
+let map = null;
+try {
+  map = JSON.parse(document.querySelector("script[data-ge-page]")?.textContent ?? "null");
+} catch {}
+board = map?.token ? startBoard({ map, reload: () => (session ? session.reload() : location.reload()), hosted: Boolean(session) }) : null;
+// The live script (routes.mjs) shows the page again through the workbench, which swaps a new page in
+// once drawn: no reload seen; once the board's own writes, a drag, a form or a field typed in are done.
+if (board) window.__galleryEditReload = () => board.swap();
+
+if (session) {
+  // Its notices (a card someone else changed) are the workbench's toasts, as a document's page's are.
+  relayTo(session.notice, session.noticeRoom);
+  if (!board) window.__galleryEditReload = () => session.reload();
+
+  // A block's context.workspace.open (the kit's runtime/workspace.js: 我的待办's item, 最近编辑's
+  // document): a document, at its block where it names one, or a custom page, opened in the workbench.
+  addEventListener("doc-open-request", (event) => {
+    const { slug = null, block = null, page = null } = event.detail ?? {};
+    event.preventDefault();
+    session.open(page ? { hash: `@${page}` } : { target: slug, block });
+  });
+
+  // A link to a document or a page of the workbench goes there in the workbench, never in this frame:
+  // a workbench's address (#<link>, #@<slug>, /#…), a document's page (/generated/<slug>.html) or its
+  // file (../<slug>/doc.html), a custom page's served path (/pages/<slug>, the page alone that gallery
+  // page open gives, or written relative to this one: "reading" from /pages/home). Another site's
+  // opens in a tab of its own.
+  addEventListener("click", (event) => {
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    const link = event.target instanceof Element ? event.target.closest("a[href]") : null;
+    if (!link || link.hasAttribute("download")) return;
+    const raw = link.getAttribute("href") ?? "";
+    // A place in this page (an element of that id) is the browser's to go to.
+    if (raw.startsWith("#") && raw.length > 1 && document.getElementById(decodeURIComponent(raw.slice(1)))) return;
+    let url;
+    try {
+      url = new URL(raw, location.href);
+    } catch {
+      return;
+    }
+    if (url.origin !== location.origin) {
+      event.preventDefault();
+      window.open(url.href, "_blank", "noopener");
+      return;
+    }
+    const custom = /^\/pages\/([a-z0-9-]+)\/?$/.exec(url.pathname)?.[1];
+    const page = /^\/generated\/([a-z0-9-]+)\.html$/.exec(url.pathname)?.[1] ?? /^\/([a-z0-9-]+)\/(?:doc|report)\.html$/.exec(url.pathname)?.[1];
+    if (custom) {
+      event.preventDefault();
+      session.open({ hash: `@${custom}` });
+    } else if (page) {
+      event.preventDefault();
+      session.open({ target: page, block: url.hash.slice(1) || null });
+    } else if ((url.pathname === "/" || raw.startsWith("#")) && url.hash.length > 1) {
+      event.preventDefault();
+      session.open({ hash: decodeURIComponent(url.hash.slice(1)) });
+    }
+  });
+}