@heycys/gallery 0.0.0-stage → 0.1.1

package/browser/editor/page/clipboard/own/rules.mjs

@@ -0,0 +1,44 @@
+// What a pasted block must be to go into the page (pure): the rules checkBlocks (blocks.mjs, the
+// clipboard's own data, which is not trusted) and import/to-blocks.mjs (another program's content,
+// made into blocks that pass) both go by, so that one rule is one function.
+
+import { BLOCK_TYPES, clipboardOf } from "../../../components/registry.mjs";
+
+/** The kind of unit a described block becomes (for accepts()); undefined for a type the page has none of. */
+export const kindOfBlock = (block) => (block.type === "copy" ? block.kind : BLOCK_TYPES[block.type]?.kind);
+
+/**
+ * Described blocks with each run of list items copied on their own (an item carrying its list's
+ * kind, `list`: notion-lite's item is a block of its type) made a list of that kind, the items no
+ * longer carrying it, and each run of a flowchart's nodes copied on their own a flowchart: where a
+ * box takes no items or nodes (asLists), and for other programs (export.mjs).
+ */
+export function groupItems(blocks) {
+  const out = [];
+  const runs = new Set();
+  for (const block of blocks) {
+    const { run } = clipboardOf(block.type);
+    if (!run) {
+      out.push(block);
+      continue;
+    }
+    const { list: kind = run, ...item } = block;
+    const last = out.at(-1);
+    if (runs.has(last) && last.type === kind) last.blocks.push(item);
+    else {
+      const run = { type: kind, blocks: [item] };
+      runs.add(run);
+      out.push(run);
+    }
+  }
+  return out;
+}
+
+const IMAGE_SOURCE = /^(https?:\/\/[^\s"<>]+|data:image\/(png|jpe?g|gif|webp|svg\+xml);base64,[a-z0-9+/=]+)$/i;
+const WEB_PAGE = /^https?:\/\/[^\s"<>]+$/i;
+
+/** Whether `src` is an address a pasted image may have: a web address, or a data: picture. */
+export const imageSource = (src) => typeof src === "string" && src.length <= 15e6 && IMAGE_SOURCE.test(src);
+
+/** Whether `src` is an address a pasted embed may have: a web page's. */
+export const webPage = (src) => typeof src === "string" && src.length <= 2000 && WEB_PAGE.test(src);

package/browser/editor/page/clipboard/own/selection.mjs

@@ -0,0 +1,159 @@
+import { escapeText } from "../../../../shared/escape.mjs";
+import { UNIT, serializeInner, textEnd } from "../../core.mjs";
+import { askClipboard, clipboardOf, sizeValue } from "../../../components/registry.mjs";
+import { isMark } from "../../marks.mjs";
+import { colorOf, copiedType, describe } from "./describe.mjs";
+import { groupItems } from "./rules.mjs";
+
+// Selected text as the clipboard's own description (docs/editor.md, "Copying text"), after
+// notion-lite (editor/input/clipboard/index.js: a selection in one text area, and segmentSpecs for one
+// across blocks):
+//   in one text block  its inline HTML (selectedHtml: the format bar's marks, a chip as its source),
+//                      and no block: neither a list's marker nor a heading's size goes with it;
+//   across blocks      blocks, each of its type (describeAcross): the first from where the selection
+//                      starts, those between whole, the last up to where it ends; a list's items each an
+//                      item of its kind (`list`, as an item selected on its own) with its checked state
+//                      and what of the blocks it holds the selection reaches, a quote's paragraphs in a
+//                      quote, and a highlight block, a callout, a disclosure or a section the selection ends in
+//                      with what of it comes before the end (its icon, its title), a tabs area with the
+//                      tab shown and what of its panel comes before the end; a flowchart's nodes a
+//                      flowchart with its direction (never loose paragraphs: its steps are no items),
+//                      the node it ends in a node with what of it comes before the end. Around where it
+//                      starts, a highlight block, a callout, a disclosure, a section, a flowchart's node, an item
+//                      whose own text comes before it, a row of columns, a column or a tabs area are not
+//                      copied, only what of them it holds (notion-lite copies no block its start is in:
+//                      a callout, a toggle, a list item's parent; a row of columns it flattens wherever).
+// What of a block this takes is the unit's to say (`clipboard.piece`, `across`, `endsIn`).
+
+/**
+ * `range` (a selection in `host`) kept to the block's own text (a list item's ends before the blocks
+ * it holds) and widened over a chip (a formula, a link shown with its icon) an end stands inside;
+ * an end at a chip's very start (where Chrome's triple click stops) or a start at its very end
+ * leaves it out, as the selection drawn does.
+ */
+export function ownRange(host, range) {
+  const part = range.cloneRange();
+  const own = host.ownerDocument.createRange();
+  own.setStart(host, 0);
+  own.setEnd(host, textEnd(host));
+  if (part.compareBoundaryPoints(part.START_TO_START, own) < 0) part.setStart(host, 0);
+  if (part.compareBoundaryPoints(part.END_TO_END, own) > 0) part.setEnd(host, textEnd(host));
+  const chipOf = (node) => {
+    const chip = (node?.nodeType === 1 ? node : node?.parentElement)?.closest("[data-ge-atom]");
+    return chip && chip !== host && host.contains(chip) ? chip : null;
+  };
+  // Whether nothing of `chip` stands between its start (or its end) and the point.
+  const atEdge = (chip, node, offset, end) => {
+    const between = host.ownerDocument.createRange();
+    between.selectNodeContents(chip);
+    if (end) between.setStart(node, offset);
+    else between.setEnd(node, offset);
+    return between.toString() === "";
+  };
+  const first = chipOf(part.startContainer);
+  if (first && atEdge(first, part.startContainer, part.startOffset, true)) part.setStartAfter(first);
+  else if (first) part.setStartBefore(first);
+  const last = chipOf(part.endContainer);
+  if (last && atEdge(last, part.endContainer, part.endOffset, false)) part.setEndBefore(last);
+  else if (last) part.setEndAfter(last);
+  return part;
+}
+
+/**
+ * The inline HTML of `range` in `host` (ownRange), as serializeInner writes a block's: the format
+ * bar's marks (those around it too, as a word selected in bold), a chip as its source, a table
+ * cell's lists; code as its text, a line break between its lines.
+ */
+export function selectedHtml(host, range) {
+  const doc = host.ownerDocument;
+  const holder = doc.createElement("div");
+  const kind = host.getAttribute("data-ge-kind");
+  if (kind) holder.setAttribute("data-ge-kind", kind); // a cell's lists are its text, code is text alone
+  const part = ownRange(host, range);
+  let content = part.cloneContents();
+  for (let node = part.commonAncestorContainer; node && node !== host && host.contains(node); node = node.parentNode) {
+    if (!isMark(node)) continue; // a word selected in bold is bold (notion-lite's slice of the text keeps its marks)
+    const mark = node.cloneNode(false);
+    mark.append(content);
+    content = mark;
+  }
+  holder.append(content);
+  const html = serializeInner(holder);
+  return kind === "code" ? html.replace(/\n/g, "<br>") : html;
+}
+
+// A block's words, what the page shows of it (what it draws for readers' sake and the editor's left out).
+function wordsOf(unit) {
+  const copy = unit.cloneNode(true);
+  copy.querySelectorAll('[aria-hidden="true"], [data-doc-dev], .ge-code-gutter').forEach((node) => node.remove());
+  return copy.textContent.replace(/\s+/g, " ").trim();
+}
+
+/**
+ * A selection across blocks described (notion-lite segmentSpecs): `range` the selection, `texts` its
+ * text by text block ([{ host, range }]: body text, headings, list items),
+ * `wholes` the blocks it takes whole (text-select/ piecesOf). The list's items at the top carry their
+ * list's kind; inside a block, runs of them are lists (groupItems). Were none of it found among the
+ * page's blocks, its texts are paragraphs: a copy of a selection is never empty.
+ */
+export function describeAcross(range, { texts, wholes }) {
+  const pieces = new Map(texts.map((piece) => [piece.host, piece.range]));
+  const taken = new Set(wholes);
+  const holdsAny = (unit) => texts.some(({ host }) => unit.contains(host)) || wholes.some((node) => unit.contains(node));
+  const holdsAll = (unit) => {
+    const own = unit.ownerDocument.createRange();
+    own.selectNode(unit);
+    return range.compareBoundaryPoints(range.START_TO_START, own) <= 0 && range.compareBoundaryPoints(range.END_TO_END, own) >= 0;
+  };
+  // The blocks of a box it holds some of, in a group of blocks too (a tab not shown holds none), and
+  // through what stands in a box but is neither block nor box (a detail card, its panel).
+  const walk = (box) => [...box.children].flatMap((child) => (child.hidden ? []
+    : child.matches(UNIT) || pieces.has(child) || taken.has(child) ? blocksOf(child) : walk(child)));
+  // A block taken whole as a copy of blocks describes it; one the page cannot make (a report's own
+  // widget, a card not saved yet) as its words.
+  const whole = (unit) => {
+    const block = describe(unit);
+    if (block) return [block];
+    const words = wordsOf(unit);
+    return words ? [{ type: "paragraph", html: escapeText(words) }] : [];
+  };
+  // A text block's part, of its type as a copy of the block describes it (a quote's paragraph a
+  // paragraph, the quote around it); a title, no block of its own, a paragraph (notion-lite's page
+  // title and captions: a text block each).
+  const piece = (host) => {
+    const html = selectedHtml(host, pieces.get(host));
+    const part = askClipboard("piece", host, html, what);
+    if (part) return part;
+    const type = host.parentElement?.hasAttribute("data-ge-box") ? copiedType(host) : null;
+    const color = colorOf(host);
+    return { type: type ?? "paragraph", html, ...(color ? { color } : {}) };
+  };
+  // The boxes of a block it holds some of (a row's columns are blocks, its tabs area's panels boxes).
+  const boxesOf = (unit) => (unit.hasAttribute("data-ge-box") ? [unit]
+    : [...unit.querySelectorAll("[data-ge-box]")].filter((box) => !box.hidden && box.parentElement?.closest(UNIT) === unit));
+  // What a block's hooks are told.
+  const what = {
+    walk, holdsAll, holdsAny, boxesOf, groupItems, colorOf, sizeValue, serializeInner, describe,
+    startsIn: (unit) => unit.contains(range.startContainer), // the selection starts in it
+    blocksIn: (boxes) => groupItems(boxes.flatMap(walk)),
+  };
+  const container = (unit) => {
+    const through = askClipboard("across", unit, what);
+    if (through) return through;
+    if (holdsAll(unit)) {
+      const block = describe(unit);
+      if (block) return [block];
+    }
+    // Where it ends: the block with what of it comes before the end.
+    const ending = what.startsIn(unit) ? undefined : askClipboard("endsIn", unit, what);
+    return ending ?? walk(unit).filter((block) => !clipboardOf(block.type).lead);
+  };
+  function blocksOf(unit) {
+    if (taken.has(unit)) return whole(unit);
+    if (pieces.has(unit)) return [piece(unit)];
+    return holdsAny(unit) ? container(unit) : [];
+  }
+  const main = range.startContainer.ownerDocument.querySelector("main");
+  const blocks = main ? walk(main) : [];
+  return blocks.length > 0 ? blocks : texts.map(({ host, range: part }) => ({ type: "paragraph", html: selectedHtml(host, part) }));
+}

package/browser/editor/page/clipboard/own/writers.mjs

@@ -0,0 +1,315 @@
+import { escapeMarkup, escapeText } from "../../../../shared/escape.mjs";
+import { iconMarkup } from "../../../../shared/emoji/icon-value.mjs";
+import { BLOCK_LEVEL } from "../../../../shared/html-tree.mjs";
+import { TEXT_TYPES, clipboardOf, unitClipboard } from "../../../components/registry.mjs";
+
+// The writers by `clipboard.kind` (notion-lite's serialize.js, src/blocks/README.md): how each kind of
+// block is written out, one table for the two that write. A block that says no kind is a paragraph.
+//
+//   copied(block, how, clip)    Markdown of a block described for the clipboard (export.mjs), as lines
+//   exported(unit, how, clip)   Markdown of an element of a report, for a page export and 复制页面内容
+//                               (src/transfer/markdown.mjs), as lines
+//   html(block, how, clip)      the clipboard's text/html of a described block; `clip.html`, where it
+//                               says one, names the writer of this instead of its kind
+//   list                        its blocks stand one line apart beside another list
+//   opens                       an element of it is an aside's first line
+//   silent(block)               a described block of it says nothing, and takes no empty line
+//
+// The two Markdowns are not one: a description has its text as the clipboard keeps it, an element
+// holds pictures, files of the report's folder and charts, and each has its own ways (a page export
+// starts a list from its number and leaves empty paragraphs out, as Notion's export; the clipboard
+// follows Notion's copy). What they share is a helper here; where the bytes differ a kind has its
+// two sides. `clip` is what the block's definition says: a writer reads no element's markup, and what
+// it needs of one it asks of `clip.read`; its kinds are this table's own words, notion-lite's where it
+// has the same.
+//
+// `how` is what each caller gives its writers: { inline(html), block(block), lines(blocks),
+// portable(html), html(block) } in export.mjs, and { inline(html), own(host), lines(units),
+// held(units), heldIn(box), plain(node), words(node), media(src, kind, name), opening(units, title),
+// packageOf(id), … } in src/transfer/markdown.mjs. No module here wants a document as it loads: a worker imports this
+// before it has one.
+
+const INDENT = "    ";
+const indented = (lines) => lines.map((line) => (line ? `${INDENT}${line}` : line));
+
+// What in a whole block sets its words apart (wordsIn): a block, always; and what lays out a word or
+// two, wherever nothing stands straight in the element around it. Next to words of that element's own
+// it is one of them: a unit, a number in a color. What shows none of its text is left out.
+const BLOCKS = [...BLOCK_LEVEL].join(", ");
+const PIECES = "button, label, span";
+const SHOWS_NONE = "script, style, template, noscript, svg, title, desc, canvas, select, textarea, object";
+
+/**
+ * The words of `block` (a whole block, a card's drawing), all that it shows, as runs that BLOCKS and
+ * PIECES end, in the file's order; `more` other elements of text (an SVG's text), but `without`.
+ */
+export function wordsIn(block, more = "", without = null) {
+  const blocks = [BLOCKS, more].filter(Boolean).join(", ");
+  const said = [];
+  const read = (node) => {
+    const ownWords = [...node.childNodes].some((child) => child.nodeType === 3 && child.data.trim());
+    const breaks = ownWords ? blocks : `${blocks}, ${PIECES}`;
+    let run = "";
+    const end = () => {
+      const words = run.replace(/\s+/g, " ").trim();
+      if (words) said.push(words);
+      run = "";
+    };
+    for (const child of node.childNodes) {
+      if (child.nodeType === 3) run += child.data;
+      else if (child.nodeType !== 1 || child === without) continue;
+      else if (child.matches(breaks) || child.querySelector(breaks)) {
+        end();
+        read(child);
+      } else if (!child.matches(SHOWS_NONE)) run += child.textContent;
+    }
+    end();
+  };
+  read(block);
+  return said;
+}
+
+/**
+ * Text as Markdown with a line that starts as a tag of HTML or a code fence held to being words, its
+ * first character escaped, which every reader takes for that character: read as it stands such a
+ * line opens a block that takes in what follows. Other words are left as they are, as in notion-lite.
+ */
+export const heldToWords = (text) => text.replace(/^([ \t]*)(<(?=[!/a-z])|(?=```))/gim, "$1\\$2");
+
+// Blocks of lines, an empty line between them.
+function apart(parts) {
+  const out = [];
+  for (const part of parts) out.push(...(out.length ? [""] : []), ...part);
+  return out;
+}
+
+// What opens with its block and is no block of its text: a described one's, an element's.
+const leads = (block) => clipboardOf(block.type).lead;
+const unitLeads = (unit) => unitClipboard(unit).lead;
+// A described highlight block's or `headed` entry's first line and the blocks under it: its emoji (an
+// icon of a set or a picture none) and its first text block's words, then the rest of its blocks.
+function opening(blocks, how) {
+  const icon = blocks.find(leads)?.icon;
+  const [first, ...rest] = blocks.filter((block) => !leads(block));
+  const title = first && TEXT_TYPES.has(first.type);
+  const head = [/^\p{Extended_Pictographic}/u.test(icon ?? "") ? icon : "", title ? how.inline(first.html) : ""].filter(Boolean).join(" ");
+  return { head, after: title ? rest : [first, ...rest].filter(Boolean) };
+}
+
+// The emoji an icon element shows.
+const emojiOf = (icon, how) => (icon && /\p{Extended_Pictographic}/u.test(how.plain(icon)) ? how.plain(icon) : "");
+
+/**
+ * An element's first line and the units under it: the emoji that leads `units` and the words of
+ * `title(first)`, the element it says of the first after the icon (null: no words), then the rest.
+ */
+export function unitOpening(units, title, how) {
+  const icon = units.find(unitLeads);
+  const rest = units.filter((child) => child !== icon);
+  const words = title(rest[0]);
+  return { head: [emojiOf(icon, how), words ? how.own(words) : ""].filter(Boolean).join(" "), rest: rest.filter((child) => child !== words) };
+}
+
+// A described list's entry: an item, what it holds 4 spaces in; a `headed` one, its emoji and title
+// on the item's line, the rest of its blocks under it.
+function entry(item, marker, how) {
+  if (clipboardOf(item.type).headed) {
+    const { head, after } = opening(item.blocks, how);
+    return [...`${marker}${head}`.split("\n"), ...indented(how.lines(after))];
+  }
+  return [...`${marker}${how.inline(item.html)}`.split("\n"), ...(item.lists ?? []).flatMap((each) => how.block(each)).map((line) => `${INDENT}${line}`)];
+}
+
+// The words on the line of an entry (a list item, a disclosure) over the lines it holds (`held`): its
+// own, or, where it has none over them, a non-breaking space, so that a viewer gives it a line of its
+// own above them, its marker on it, as the page shows it (with nothing there a list item's first block
+// would stand on its line, and after an empty line it would be none of the item's). The import reads
+// that space as no words (import/markdown.mjs).
+const lineOf = (words, held) => words || (held.length > 0 ? "&nbsp;" : "");
+
+// A list by its tag and the marker of an entry (`number` its number, `gap` what follows a to-do's box).
+const list = (tag, marker) => ({
+  list: true,
+  copied: (block, how) => block.blocks.flatMap((item, index) => entry(item, marker(index + 1, item.checked, " "), how)),
+  exported(unit, how, clip) {
+    const { start, items } = clip.read(unit, how);
+    return items.flatMap(({ checked, written }, index) => {
+      const { text, held } = written();
+      const [first, ...rest] = text.split("\n");
+      const under = how.held(held);
+      return [`${marker(start + index, checked, "  ")}${text ? first : lineOf(text, under)}`, ...rest.map((line) => `${INDENT}${line}`), ...under];
+    });
+  },
+  html: (block, how) => `<${tag}>${block.blocks.map(how.html).join("")}</${tag}>`,
+});
+
+// Code fenced: its title in bold where it has one (a file's name: Notion's code has none). The fence is
+// longer than any at the start of one of its lines, which would close it.
+function fence({ title, language, lines }) {
+  const mark = "`".repeat(Math.max(2, ...lines.map((line) => /^\s*(`*)/.exec(line)[1].length)) + 1);
+  return [...(title ? [`**${title}**`, ""] : []), `${mark}${language}`, ...lines, mark];
+}
+
+const math = (tex) => ["$$", ...tex.split("\n"), "$$"];
+
+// A table's grid (`clip.grid`) as a Markdown table, its cells on one line; `cell`, a cell's Markdown.
+const piped = (data, columns, cell, clip) => clip.grid(data, columns, (html) => cell(html).trim().replace(/\s*\n\s*/g, " ").replace(/\|/g, "\\|")).flatMap((row, index) => {
+  const line = `| ${row.join(" | ")} |`;
+  return index === 0 ? [line, `| ${row.map(() => "---").join(" | ")} |`] : [line];
+});
+
+// A line and the caption (`node`, an element) below it as a paragraph (Notion's).
+function captioned(line, node, how) {
+  const said = node ? how.inline(how.serializeInner(node)) : "";
+  return said ? [line, "", said] : [line];
+}
+
+// A card that is a link: its label and address, a file of the report's folder through `how.media`.
+function linked(unit, how, clip) {
+  const link = clip.read(unit, how);
+  return link ? captioned(`[${link.label}](${link.file ? how.media(link.src, "file", link.name) : link.src})`, link.caption, how) : [];
+}
+
+const paragraph = {
+  opens: true,
+  copied: (block, how) => how.inline(block.html ?? "").split("\n"),
+  exported(unit, how) {
+    const said = how.own(unit);
+    return said ? said.split("\n") : [];
+  },
+  html: (block, how) => `<p>${how.portable(block.html ?? "")}</p>`,
+};
+
+const todo = list("ul", (_, checked, gap) => `- [${checked ? "x" : " "}]${gap}`);
+
+export const WRITERS = {
+  paragraph,
+  heading: {
+    opens: true,
+    copied: (block, how, { level }) => `${"#".repeat(level)} ${how.inline(block.html ?? "")}`.split("\n"),
+    exported(unit, how, { level }) {
+      const said = how.own(unit);
+      return said ? `${"#".repeat(level)} ${said}`.split("\n") : [];
+    },
+    html: (block, how, { level }) => `<h${level}>${how.portable(block.html ?? "")}</h${level}>`,
+  },
+  bullet: list("ul", () => "- "),
+  number: list("ol", (at) => `${at}. `),
+  todo: { ...todo, html: (block, how) => `<ul>${block.blocks.map((item) => how.html({ ...item, html: `${item.checked ? "[x]" : "[ ]"} ${item.html}` })).join("")}</ul>` },
+  quote: {
+    copied: (block, how) => block.blocks.flatMap((inner, index) => [...(index > 0 ? [""] : []), ...how.inline(inner.html).split("\n")]).map((line) => `> ${line}`),
+    exported(unit, how) {
+      const parts = how.unitsOf(unit).map((child) => (how.isHost(child) ? how.own(child) : how.lines([child]).join("\n"))).filter(Boolean);
+      return parts.flatMap((part, index) => [...(index > 0 ? [""] : []), ...part.split("\n")]).map((line) => (line ? `> ${line}` : ">"));
+    },
+    html: (block, how) => `<blockquote>${block.blocks.map(how.html).join("")}</blockquote>`,
+  },
+  aside: {
+    copied(block, how) {
+      const { head, after } = opening(block.blocks, how);
+      return ["<aside>", ...head.split("\n"), "", ...(after.length ? [...how.lines(after), ""] : []), "</aside>"];
+    },
+    exported(unit, how) {
+      const { head, rest } = unitOpening(how.unitsOf(unit), (first) => (first && WRITERS[unitClipboard(first).kind].opens ? first : null), how);
+      const after = how.lines(rest);
+      return ["<aside>", ...(head ? head.split("\n") : []), "", ...(after.length ? [...after, ""] : []), "</aside>"];
+    },
+    html: (block, how) => `<div>${block.blocks.map(how.html).join("")}</div>`,
+  },
+  // A disclosure: "- " and its title, its blocks 4 spaces in (Notion writes a toggle as an item), but
+  // no list: an empty line stands between it and a list beside it.
+  toggle: {
+    copied: (block, how) => [`- ${how.inline(block.html)}`, ...indented(how.lines(block.blocks))],
+    exported(unit, how, clip) {
+      const { title, content, without } = clip.read(unit);
+      const words = title ? how.inline(how.serializeInner(title)) : "";
+      const under = content ? how.heldIn(content, without) : [];
+      return [`- ${lineOf(words, under)}`, ...under];
+    },
+    html: (block, how) => `<details open><summary>${how.portable(block.html)}</summary>${block.blocks.map(how.html).join("")}</details>`,
+  },
+  code: {
+    copied: (block) => fence({ language: block.language ?? "", lines: block.text.split("\n") }),
+    exported: (unit, how, clip) => fence(clip.read(unit, how)),
+    html: (block) => `<pre><code${block.language ? ` class="language-${escapeMarkup(block.language)}"` : ""}>${escapeText(block.text)}</code></pre>`,
+  },
+  // An empty one says nothing: no $$ $$ to read back as nothing.
+  equation: {
+    silent: (block) => !block.tex.trim(),
+    copied: (block) => math(block.tex),
+    exported(unit, how, clip) {
+      const { tex } = clip.read(unit, how);
+      return tex ? math(tex) : [];
+    },
+    html: (block) => (block.tex.trim() ? `<p>$$${escapeText(block.tex)}$$</p>` : ""),
+  },
+  hr: {
+    copied: () => ["---"],
+    exported: () => ["---"],
+    html: () => "<hr>",
+  },
+  table: {
+    copied: (block, how, clip) => piped(block, block.rows[0].length, how.inline, clip),
+    exported(unit, how, clip) {
+      const data = clip.read(unit, how);
+      return data.rows.length === 0 ? [] : piped(data, Math.max(...data.rows.map((row) => row.length)), how.inline, clip);
+    },
+    // A merged cell keeps its spans (colspan, rowspan): its row has fewer cells.
+    html(block, how) {
+      const spans = (r, i) => {
+        const [down, across] = block.spans?.[r]?.[i] ?? [1, 1];
+        return `${across > 1 ? ` colspan="${across}"` : ""}${down > 1 ? ` rowspan="${down}"` : ""}`;
+      };
+      const row = (cells, tag, r) => `<tr>${cells.map((cell, i) => `<${tag}${spans(r, i)}>${how.portable(cell)}</${tag}>`).join("")}</tr>`;
+      const [first, ...rest] = block.rows;
+      return `<table>${block.header ? `<thead>${row(first, "th", 0)}</thead>` : ""}<tbody>${(block.header ? rest : block.rows).map((cells, index) => row(cells, "td", index + (block.header ? 1 : 0))).join("")}</tbody></table>`;
+    },
+  },
+  // Only the blocks it holds.
+  flatten: {
+    copied: (block, how) => how.lines(block.blocks),
+    exported: (unit, how, clip) => how.lines(clip.blocks?.(unit, how) ?? how.unitsOf(unit)),
+  },
+  // Each tab's name, a line before its panel's blocks.
+  tabs: {
+    copied: (block, how) => block.tabs.flatMap((tab, index) => [...(index > 0 ? [""] : []), tab.title, ...(tab.blocks.length ? ["", ...how.lines(tab.blocks)] : [])]),
+    exported(unit, how, clip) {
+      return clip.read(unit, how).flatMap(({ name, units }, index) => {
+        const inner = how.lines(units);
+        return [...(index > 0 ? [""] : []), ...(name ? [name] : []), ...(inner.length ? [...(name ? [""] : []), ...inner] : [])];
+      });
+    },
+    html: (block, how) => block.tabs.map((tab) => `<h3>${escapeText(tab.title)}</h3>${tab.blocks.map(how.html).join("")}`).join(""),
+  },
+  // Cards are copied as themselves (a copy has its own Markdown and HTML), so these write a page export alone.
+  image: {
+    exported(unit, how, clip) {
+      const image = clip.read(unit, how);
+      return image ? captioned(`![${image.label}](${how.media(image.src, "image", image.name)})`, image.caption, how) : [];
+    },
+  },
+  media: { exported: linked },
+  bookmark: { exported: linked },
+  // The parts `clip.read` gives of an element, an empty line between them; a description's blocks in turn.
+  // An instance of a package, by its parts: in its HTML a part of words is of the type it says it is
+  // written as there (`as`: its heading), in Markdown a paragraph.
+  parts: {
+    copied: (block, how) => how.lines(block.blocks),
+    exported: (unit, how, clip) => apart(clip.read(unit, how)),
+    html: (block, how) => block.blocks.map((inner) => how.html(typeof inner.as === "string" && TEXT_TYPES.has(inner.as) ? { ...inner, type: inner.as } : inner)).join(""),
+  },
+  // A report's own widget, and a part of a block a file left standing alone: its blocks of text on
+  // one line, then its pictures.
+  words: {
+    exported(unit, how, clip) {
+      const said = how.wordsIn(unit, "", clip?.without);
+      return apart([...(said.length ? [said.join(" · ")] : []), ...how.picturesIn(unit)].map((line) => [line]));
+    },
+  },
+  // What leads a block is written with that block's first line, or not at all.
+  icon: { ...paragraph, opens: false, silent: () => true, exported: () => [], html: (block) => iconMarkup(block.icon) },
+  // The text/html of blocks that are written in a list's run.
+  item: { html: (block, how) => `<li>${how.portable(block.html)}${(block.lists ?? []).map(how.html).join("")}</li>` },
+  node: { html: (block, how) => `<li>${block.blocks.filter((each) => !leads(each)).map(how.html).join("")}</li>` }, // a 流程图's node, its blocks in an ordered list's item
+  section: { html: (block, how) => `<section>${block.blocks.map(how.html).join("")}</section>` },
+};