@heycys/gallery 0.1.0 → 0.1.2

package/browser/editor/page/clipboard/index.mjs

@@ -1,16 +1,17 @@
-import { escapeMarkup, escapeTyped } from "../../../shared/escape.mjs";
+import { escapeMarkup, escapeText, escapeTyped } from "../../../shared/escape.mjs";
 import { mayBePage } from "../../../shared/page-address.mjs";
 import { OUTER, boldThroughout, boxKind, can, holdsAtoms, isEmpty, isFirstLine, isHost, keepLine, nestedLists, newTail, pastedLines, removable, removalTarget, splitBelow, UNIT, textEnd, unitElement } from "../core.mjs";
 import { formulaMaker } from "../formula/index.mjs";
 import { inlineItems, spaceAround } from "../../../shared/inline-spacing.mjs";
 import { caretAt, editable, hostOf, select } from "../caret.mjs";
 import { formatRange, joinMarks, outOfMarks, rangeAt, rangeOffsets } from "../marks.mjs";
-import { BASIC_UNITS, KIND_NAMES, accepts, clipboardOf, takesFormula, texOnly } from "../../components/registry.mjs";
+import { BASIC_UNITS, HOSTS, KIND_NAMES, accepts, clipboardOf, takesFormula, texOnly } from "../../components/registry.mjs";
 import { listType } from "../../components/list/index.mjs";
 import { nodeAround } from "../../components/flowchart/index.mjs";
 import { cellsData } from "../../components/table/index.mjs";
 import { MIME, OLD_MIME, PASTED_SOURCE, build, checkBlocks, describe, describeAcross, formats, groupItems, holdsFormulas, joinedHtml, kindOfBlock, ownData, ownRange, parse, parseCells, parseText, plainText, prefixCopies, relinkCopies, reportOf, selectedHtml, textFormats, unmadeCopy } from "./own/index.mjs";
 import { bareAddress, externalContent, readExternal } from "./import/read.mjs";
+import { parseClipboardHTML, tableRows } from "./import/html.mjs";
 import { fromMarkdown } from "./import/markdown.mjs";
 import { addressOf } from "../links/address.mjs";
 import { pageObjects, pageOf, typedAsIs } from "../page-objects.mjs";
@@ -32,7 +33,7 @@ import { t } from "../../../shared/i18n/index.mjs";
 //   Ctrl+V reads the clipboard in Notion's order: the page's own blocks (or text), else another
 //     program's content (import/read.mjs) as blocks, one formatted line, or plain text; picture
 //     files (a screenshot) become images, unless they come with Office's or a table's HTML (Excel
-//     puts a picture of the cells beside them).
+//     puts a picture of the cells beside them), right after the block, where blocks pasted there go.
 //   With the caret in a text block: one line goes in at the caret, keeping the format bar's marks
 //     where the block takes them, its own alone (not the caret's: notion-lite's text pasted) (text
 //     copied in a block of the page with its line breaks); blocks
@@ -47,6 +48,9 @@ import { t } from "../../../shared/i18n/index.mjs";
 //     block that takes links.
 //   With blocks selected: the blocks go after them, in the first box out from there that takes them all;
 //     and so with the caret on a formula block, which has no text to paste into.
+//   Into a table's cells (table/cells.mjs, what the clipboard holds as cells: cellsOf), cells go from
+//     the caret's cell or the selected ones; in a cell, picture files are pictures of the cell
+//     (单元格里的图片, table/pictures.mjs), and a table pasted anywhere keeps its cells' pictures.
 // One undo step. Images and embeds of an address are filled once on the page (one step with the paste).
 
 /**
@@ -62,8 +66,9 @@ import { t } from "../../../shared/i18n/index.mjs";
  * for words), or null. titleBold(): whether bold
  * is armed at the caret (a flowchart node's empty title: format-bar/), so that what is pasted there
  * is bold as what is typed is. showCaret(): the caret in view after text went in (caret.mjs).
+ * pictures(): the pictures of table cells (table/pictures.mjs: fromFiles, resolve, maker), or null.
  */
-export function createClipboard({ editing, blocks, struct, recordText, say, loadKatex = async () => Boolean(globalThis.katex), mention: mentionFor = null, linkPasted = () => {}, pageLink = async () => null, titleBold = () => false, showCaret = () => {} }) {
+export function createClipboard({ editing, blocks, struct, recordText, say, loadKatex = async () => Boolean(globalThis.katex), mention: mentionFor = null, linkPasted = () => {}, pageLink = async () => null, titleBold = () => false, showCaret = () => {}, pictures = () => null }) {
   // ---------- copying ----------
 
   // Ctrl+C or Ctrl+X with blocks selected (and no text): the blocks go to the clipboard, and with
@@ -75,7 +80,7 @@ export function createClipboard({ editing, blocks, struct, recordText, say, load
       copyText(event, selection.getRangeAt(0));
       return;
     }
-    const picked = editing() ? blocks().picked : [];
+    const picked = editing() ? blocks().folds.takenWith(blocks().picked) : []; // a folded heading with what it hides (fold/)
     if (picked.length === 0) return;
     event.preventDefault();
     // A list's item selected on its own carries its list's kind (notion-lite's item is a block of its
@@ -86,7 +91,7 @@ export function createClipboard({ editing, blocks, struct, recordText, say, load
     });
     const refused = picked.find((_, index) => !described[index]);
     if (refused) {
-      say(refusalOf(refused), "note", 6000);
+      say(refusalOf(unmade(refused)), "note", 6000); // the block in it the page cannot make, as a selection across blocks says it
       return;
     }
     // A cut takes the blocks off the page, where a card's copy is of its unit: what is made only of its unit is refused, not lost.
@@ -217,10 +222,14 @@ export function createClipboard({ editing, blocks, struct, recordText, say, load
     // are (its HTML, a table of one cell, the import unwraps with a divider after it); more a table
     // of them as they were, not as another program's table comes in (made over: a header row, its
     // numbers read).
-    const cells = parseCells(cellsData(data) || "null");
-    if (cells?.length === 1 && cells[0].length === 1) return { kind: "rich", html: cells[0][0], own: true };
+    // The report they were copied from: their pictures are its files.
+    const copied = cellsData(data);
+    const cells = parseCells(copied || "null");
+    const from = cells ? reportIn(copied) : null;
+    const whence = from ? { from, same: from === reportOf(document) } : {};
+    if (cells?.length === 1 && cells[0].length === 1) return { kind: "rich", html: cells[0][0], own: true, ...whence };
     const table = cells ? checkBlocks([{ type: "table", rows: cells }]) : null;
-    if (table) return { kind: "blocks", blocks: table, own: true };
+    if (table) return { kind: "blocks", blocks: table, own: true, ...whence };
     // Text of this page copied by the browser (a selection in a block): one line holding the page's
     // chips (a formula, a link shown with its icon, one left empty) is its text again, each chip as
     // it was (pastedLines), not what another program's HTML would make of it.
@@ -252,6 +261,14 @@ export function createClipboard({ editing, blocks, struct, recordText, say, load
   // Inline formulas pasted as the page's own (KaTeX loaded: formula/ formulaMaker).
   let formula = null;
 
+  // A table's cells' pictures pasted (made files of the document's folder first: table/pictures.mjs
+  // resolve), what a cell built of them shows (maker).
+  let picture = null;
+
+  // Whether what is pasted was copied in this document (`same`): the keys of tables in it are kept,
+  // given anew or taken off by that (own/chart-keys.mjs relinkCopies).
+  let here = true;
+
   // Images and embeds pasted with an address: filled now they are on the page.
   const fillMedia = (made) => {
     for (const figure of made.flatMap((node) => [node, ...node.querySelectorAll(`[${PASTED_SOURCE}]`)]).filter((node) => node.hasAttribute?.(PASTED_SOURCE))) {
@@ -261,13 +278,30 @@ export function createClipboard({ editing, blocks, struct, recordText, say, load
     }
   };
 
-  // Files pasted by `at`: a block below it for the first of them the first component takes, in the
-  // order of the page objects (`acceptsFile`, `fromFiles`: notion-lite's fileBlockDef; a picture an
-  // image, any other file a file block). Returns whether one did.
-  const fromFiles = (at, files) => pageObjects().some((page) => {
-    const file = page.acceptsFile && [...files].find(page.acceptsFile);
-    return Boolean(file) && page.fromFiles(at, [file]);
-  });
+  // Files pasted by `at`: a block for the first of them the first component takes, in the order of the
+  // page objects (`acceptsFile`, `fromFiles`: notion-lite's fileBlockDef; a picture an image, any other
+  // file a file block). Where it goes is the paste's (notion-lite's pasteFiles, moveBlocks(ids, { parent:
+  // anchor.parent, after })): right after the block of `at` (unitElement: a new code block's code stands
+  // for the block), whole, where a block pasted there goes (placeFor: the first box out that takes it, a
+  // list or quote that does not splitting after the block), one undo step (`put`, handed to the
+  // component, which makes the block and fills it). Returns whether one did.
+  const fromFiles = (at, files) => {
+    const unit = unitElement(at);
+    if (!unit?.closest("main")) return false;
+    const put = (block) => {
+      const place = placeFor(unit, [block.getAttribute("data-ge-unit-kind")]);
+      if (!place) {
+        say(t("这里放不下这种块。"));
+        return false;
+      }
+      struct(place.parents, [], () => ({ touched: [], focus: null, created: placeAfter(place, [block]) }));
+      return true;
+    };
+    return pageObjects().some((page) => {
+      const file = page.acceptsFile && [...files].find(page.acceptsFile);
+      return Boolean(file) && page.fromFiles(put, [file]);
+    });
+  };
 
   // ---------- blocks into the page ----------
 
@@ -284,7 +318,9 @@ export function createClipboard({ editing, blocks, struct, recordText, say, load
     let stays = false;
     let box = anchor.parentElement;
     while (!takes(box)) {
-      const outer = box?.closest(OUTER);
+      // A container made on the page and not written yet (a list just made of "- ", whose
+      // contenteditable OUTER passes over) is the block around what it holds, as the file's is.
+      const outer = box?.closest(`${OUTER}, [data-ge-new][data-ge-box]`);
       if (!outer?.closest("main")) return null;
       parents.push(box);
       // A list or a quote whose box does not take them splits after the anchor.
@@ -461,8 +497,8 @@ export function createClipboard({ editing, blocks, struct, recordText, say, load
     const [first, ...rest] = list;
     const joins = !replace && first.type === "paragraph" && !first.color;
     const placed = asLists(unit, joins ? rest : list);
-    const made = placed.map((block) => build(document, block, { formula, mention }));
-    relinkCopies(document, made); // a pasted card and its table linked to each other alone
+    const made = placed.map((block) => build(document, block, { formula, mention, picture }));
+    relinkCopies(document, made, { same: here }); // a pasted card or view and its table linked to each other alone
     prefixCopies(document, made); // a copy's drawing names its own markers
     const place = made.length ? placeAtCaret(unit, made, placed.map(kindOfBlock)) : { anchor: unit, box: unit.parentElement, parents: [unit.parentElement], splits: [] };
     if (!place) {
@@ -512,8 +548,8 @@ export function createClipboard({ editing, blocks, struct, recordText, say, load
       return;
     }
     const list = asLists(anchor, pasted);
-    const made = list.map((block) => build(document, block, { formula, mention }));
-    relinkCopies(document, made); // a pasted card and its table linked to each other alone
+    const made = list.map((block) => build(document, block, { formula, mention, picture }));
+    relinkCopies(document, made, { same: here }); // a pasted card or view and its table linked to each other alone
     prefixCopies(document, made); // a copy's drawing names its own markers
     const place = placeFor(anchor, list.map(kindOfBlock));
     if (!place) {
@@ -632,15 +668,22 @@ export function createClipboard({ editing, blocks, struct, recordText, say, load
     if (!data || (!host && picked.length === 0)) return;
     event.preventDefault();
     const anchor = host ?? picked.at(-1);
-    // Picture or other files (a screenshot): an image or a file block below the block, unless they
+    // Picture or other files (a screenshot): an image or a file block after the block, unless they
     // come with the page's own blocks, or Office's or a table's HTML (Excel's picture of its cells).
     const files = data.files;
+    const selection = getSelection();
+    const range = host && selection.rangeCount && host.contains(selection.getRangeAt(0).startContainer) ? selection.getRangeAt(0).cloneRange() : null;
     if (files?.length > 0 && !ownData(data)) {
       const external = externalContent(data);
+      // In a table's cell: pictures of the cell, at the caret (单元格里的图片).
+      if (!external.fromOffice && !external.isTable && range && HOSTS[host.getAttribute("data-ge-kind")]?.pictures && pictures() && [...files].some((file) => /^image\//.test(file.type))) {
+        const at = rangeOffsets(host, range);
+        const made = await pictures().fromFiles(files);
+        if (made.length > 0 && host.isConnected) insertNodes(host, rangeAt(host, at), made, { own: true, join: false });
+        return;
+      }
       if (!external.fromOffice && !external.isTable && fromFiles(host ?? anchor, files)) return;
     }
-    const selection = getSelection();
-    const range = host && selection.rangeCount && host.contains(selection.getRangeAt(0).startContainer) ? selection.getRangeAt(0).cloneRange() : null;
     if (host && !range) return;
     // In code: the text with its lines.
     if (host && typedAsIs(host, (data.getData("text/plain") || "").replace(/\r\n?/g, "\n"))) return;
@@ -663,6 +706,7 @@ export function createClipboard({ editing, blocks, struct, recordText, say, load
     const formulas = content.kind === "blocks" ? holdsFormulas(content.blocks) : content.kind === "rich" && content.html.includes("doc-math-inline");
     if (formulas && (!host || takesFormula(host)) && (await loadKatex())) formula = formulaMaker();
     if (mentionFor) mention = (parts) => mentionFor(parts, Boolean(content.same), content.from);
+    here = content.same !== false;
     // An address alone, which HTML that reads as no text beside it does not change.
     const href = content.own && content.kind === "blocks" ? null : bareAddress(data) ?? (content.kind === "plain" ? addressOf(content.text) : null);
     const words = href ? (data.getData("text/plain") || content.text || href).trim() : ""; // read now: the clipboard's data goes with its event
@@ -670,6 +714,9 @@ export function createClipboard({ editing, blocks, struct, recordText, say, load
     // writes, by its title, so that no file holds a port. Never a web page's views.
     const page = href && mayBePage(href) && (!host || can(host, "links")) ? await pageLink(href) : null;
     if (page) content = { kind: "rich", html: `<a href="${escapeMarkup(page.href)}">${escapeMarkup(page.title)}</a>` };
+    // A table's cells' pictures, made files of the document's folder before the table is (one undo step with it).
+    const celled = content.kind === "blocks" ? pictureTexts(content.blocks) : [];
+    if (celled.length > 0 && pictures()) picture = pictures().maker(await pictures().resolve(celled, content.from ?? null));
     try {
       if (!host) {
         // With blocks selected: blocks after them (text as paragraphs, Markdown read).
@@ -681,7 +728,7 @@ export function createClipboard({ editing, blocks, struct, recordText, say, load
         return;
       }
       if (!host.isConnected || !host.contains(range.startContainer)) return;
-      // An address alone: a link wherever the block takes them (a cell, a callout, a caption too).
+      // An address alone: a link wherever the block takes them (a cell, a caption too).
       if (href && can(host, "links")) {
         const link = document.createElement("a");
         link.setAttribute("href", page?.href ?? href);
@@ -706,7 +753,43 @@ export function createClipboard({ editing, blocks, struct, recordText, say, load
     } finally {
       formula = null;
       mention = null;
+      picture = null;
+      here = true;
+    }
+  }
+
+
+  /**
+   * The clipboard as rows of cells for a paste into a table's cells (table/cells.mjs: the caret in a
+   * cell, or cells selected), each cell its inline HTML: { rows, from } (`from`: the report the
+   * page's own was copied from, whose files its pictures are), or null when it holds nothing. In
+   * Notion's order (872952): the page's cells (the table tools' copy), its text or blocks (ownCells);
+   * another program's table, HTML that is one table and no words outside it (Excel, Google Sheets,
+   * Feishu, Notion, Yuque, a web page's: import/html.mjs tableRows), its cells with their marks, links,
+   * colors as the import maps them, line breaks and pictures, a table of one column too; a Markdown
+   * table (its text alone: Yuque's Markdown, a .md file's), read as a paste's Markdown with its cells'
+   * pictures; tab-separated lines (Excel's and Google Sheets' text), two lines or more of as many cells,
+   * two or more, a cell in quotes holding tabs, line breaks and "" a quote; else its text, one cell
+   * holding its lines.
+   */
+  function cellsOf(data) {
+    const copied = cellsData(data);
+    const cells = parseCells(copied || "null");
+    if (cells) return { rows: cells, from: reportIn(copied) };
+    const own = ownCells(data);
+    if (own) return { rows: own, from: origin(ownData(data)).from };
+    const external = externalContent(data);
+    const table = external.html ? tableRows(parseClipboardHTML(external.html), { colors: external.colors }) : null;
+    if (table?.length) return { rows: table.map((row) => row.map((cell) => richHtml(cell, { pictures: true }))), from: null };
+    const text = external.text.replace(/\n+$/, "");
+    if (/^\s*\|/m.test(text)) {
+      const made = toBlocks(fromMarkdown(text), null, HELD);
+      if (made.length === 1 && Array.isArray(made[0].rows)) return { rows: made[0].rows, from: null }; // a table alone
     }
+    const lines = tabbed(text);
+    const html = (words) => escapeText(words).replace(/\n/g, "<br>");
+    if (lines) return { rows: lines.map((row) => row.map(html)), from: null };
+    return text.trim() ? { rows: [[html(text)]], from: null } : null;
   }
 
   /**
@@ -728,7 +811,54 @@ export function createClipboard({ editing, blocks, struct, recordText, say, load
     return html ? [[html]] : null;
   }
 
-  return { copy, copyAcross, copyBlocks, ownCells, paste, blocksAt };
+  return { copy, copyAcross, copyBlocks, cellsOf, paste, blocksAt };
+}
+
+// The inline HTML among described blocks (`value`, at any depth) that holds pictures: a table's cells' (单元格里的图片).
+function pictureTexts(value, found = []) {
+  if (typeof value === "string") {
+    if (value.includes("<img")) found.push(value);
+  } else if (Array.isArray(value)) value.forEach((each) => pictureTexts(each, found));
+  else if (value && typeof value === "object") Object.values(value).forEach((each) => pictureTexts(each, found));
+  return found;
+}
+
+// The report the table tools' copy of cells says it was copied from, or null.
+function reportIn(copied) {
+  try {
+    const from = JSON.parse(copied)?.report;
+    return typeof from === "string" ? from : null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Tab-separated lines as rows of cells (Excel's and Google Sheets' text, Notion's rule, 872952: two
+ * lines or more, each of as many cells, two or more), or null. A cell starting with a quote is in
+ * quotes, holding tabs and line breaks, "" a quote in it (Excel's quoting).
+ */
+export function tabbed(text) {
+  if (!text.includes("\t")) return null;
+  const rows = [[]];
+  let cell = "";
+  let quoted = false;
+  for (let i = 0; i < text.length; i++) {
+    const character = text[i];
+    if (quoted) {
+      if (character !== '"') cell += character;
+      else if (text[i + 1] === '"') cell += text[++i];
+      else quoted = false;
+    } else if (character === '"' && cell === "") quoted = true;
+    else if (character === "\t" || character === "\n") {
+      rows.at(-1).push(cell);
+      cell = "";
+      if (character === "\n") rows.push([]);
+    } else cell += character;
+  }
+  rows.at(-1).push(cell);
+  const width = rows[0].length;
+  return rows.length > 1 && width > 1 && rows.every((row) => row.length === width) ? rows : null;
 }
 
 // What a field of plain text takes of the clipboard, as one line: the text of the page's own blocks

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

@@ -1,10 +1,10 @@
 import { escapeText } from "../../../../shared/escape.mjs";
-import { newContainer, newHost, pastedLines } from "../../core.mjs";
+import { heldIn, newContainer, newHost, pastedLines } from "../../core.mjs";
 import { pageBuild } from "../../../components/builders.mjs";
-import { BLOCK_TYPES, COPIED_AS_ITSELF, TEXT_TYPES, TOGGLES, UNSAID, accepts, clipboardHooks, clipboardOf, isLead, sizeValue } from "../../../components/registry.mjs";
+import { BLOCK_TYPES, COPIED_AS_ITSELF, HOLDS_ONE, TEXT_TYPES, TOGGLES, UNSAID, accepts, clipboardHooks, clipboardOf, isLead, sizeValue } from "../../../components/registry.mjs";
 import { BLOCK_COLORS } from "../../../components/colors.mjs";
 import { MAX_CELL_HTML } from "../../../components/table/index.mjs";
-import { copied, copyOf, reportOf } from "./describe.mjs";
+import { copied, copyOf } from "./describe.mjs";
 import { imageSource, kindOfBlock, webPage } from "./rules.mjs";
 
 // Described blocks (describe.mjs and selection.mjs, and import/to-blocks.mjs for other programs' content) made (build),
@@ -62,7 +62,8 @@ export function checkBlocks(blocks) {
  */
 export function unmadeCopy(doc, blocks) {
   for (const block of blocks) {
-    const found = block.type === "copy" ? ((doc && copied(doc, block)) || block.data ? null : block) : unmadeCopy(doc, heldBy(block));
+    // A copy made of its data is made of what that holds too (an instance's slots: a card in one).
+    const found = block.type === "copy" ? ((doc && copied(doc, block)) ? null : block.data ? unmadeCopy(doc, heldBy(block.data)) : block) : unmadeCopy(doc, heldBy(block));
     if (found) return found;
   }
   return null;
@@ -112,10 +113,10 @@ export function parseText(data) {
 /**
  * Inline HTML as nodes of the format bar's marks only, its lines with <br> between them; formulas
  * of other pages made the page's own by `formula(tex)` where given, links shown with their icon by
- * `mention(parts)` (pastedLines).
+ * `mention(parts)`, pictures by `picture(img)` (a table cell's: pastedLines).
  */
-function inline(doc, html, { formula = null, mention = null } = {}) {
-  return pastedLines(doc, html, { formula, mention }).flatMap((line, index) => (index > 0 ? [doc.createElement("br"), ...line] : line));
+function inline(doc, html, { formula = null, mention = null, picture = null } = {}) {
+  return pastedLines(doc, html, { formula, mention, picture }).flatMap((line, index) => (index > 0 ? [doc.createElement("br"), ...line] : line));
 }
 
 
@@ -128,7 +129,8 @@ function colored(element, block) {
 /**
  * A new block of the page from a described one (checked). `formula(tex)`: an inline formula chip of
  * the page (none: their TeX as text); `mention(parts)`: a link shown with its icon (none: a link of
- * its title). What each type adds is its definition's: `clipboard.build`, or the `build` of its
+ * its title); `picture(img)`: a table cell's picture (none: nothing; `what.inline(html, { pictures:
+ * true })` asks for it, a cell's text alone holding pictures). What each type adds is its definition's: `clipboard.build`, or the `build` of its
  * page.mjs (builders.mjs); a container is filled with its blocks, a text type with its inline HTML.
  */
 export function build(doc, block, options = {}) {
@@ -143,18 +145,17 @@ export function build(doc, block, options = {}) {
       copy.setAttribute("data-ge-unit-kind", block.kind);
       return copy;
     }
-    // Elsewhere: a new one of its data (pasteBlocks checked it has some), the key a chart reads a
-    // table by kept within the report it was copied from (chart-keys.mjs), no other report's.
-    const data = { ...block.data };
-    if (block.report !== reportOf(doc)) delete data.chart;
-    return build(doc, data, options);
+    // Elsewhere: a new one of its data (pasteBlocks checked it has some), with the key a chart or a
+    // view reads a table by, which the paste then keeps, gives anew or takes off, in another document
+    // too (chart-keys.mjs relinkCopies: a table pasted there alone loses it, one with its reader is a pair).
+    return build(doc, block.data, options);
   }
   const what = {
     doc,
     block,
     host: (type = block.type) => newHost(doc, type),
     box: (type = block.type) => newContainer(doc, type),
-    inline: (html) => inline(doc, html, options),
+    inline: (html, { pictures = false } = {}) => inline(doc, html, pictures ? options : { ...options, picture: null }),
     inner: (blocks) => blocks.map((each) => build(doc, each, options)),
     one: (each) => build(doc, each, options),
     colored: (element) => colored(element, block),
@@ -165,8 +166,16 @@ export function build(doc, block, options = {}) {
   };
   const made = clipboardOf(block.type).build ?? pageBuild(block.type);
   if (made) return made(what);
-  const element = BLOCK_TYPES[block.type]?.box ? what.box() : what.host();
-  element.append(...(BLOCK_TYPES[block.type]?.box ? what.inner(block.blocks) : what.inline(block.html)));
+  const { box, leaf } = BLOCK_TYPES[block.type] ?? {};
+  const element = box ? what.box() : what.host();
+  element.append(...(box ? what.inner(block.blocks) : what.inline(block.html)));
+  // A box that always holds a block (holdsOne: a highlight block, a callout) described with none (one
+  // the file has empty, copied or cut) holds an empty block of its `leaf` (a paragraph, as a new one
+  // made from "/" holds), after its lead (a highlight block's icon), as one a change empties does
+  // (core.mjs tidyEmptied) and a disclosure's content made again (details/page.mjs): a block to write
+  // in, and one the commit writes, where a box of no blocks is written by none (core.mjs nodeOf) and
+  // was gone at the next reload.
+  if (leaf && HOLDS_ONE.has(box) && heldIn(element).length === 0) element.append(what.host(leaf));
   return what.colored(element);
 }
 

package/browser/editor/page/clipboard/own/chart-keys.mjs

@@ -1,53 +1,66 @@
-import { CHART_DATA, CHART_SOURCE, nextChartKey } from "../../../../shared/table-chart.mjs";
+import { CHART_SOURCE, TABLE_READERS, nextChartKey } from "../../../../shared/table-chart.mjs";
 import { COPY_KEYS } from "../../../components/figure/index.mjs";
 
-// The keys of charts drawn from tables in what a paste made (docs/editor.md, "Copying blocks"): a
-// chart drawn from a table names the table by a key (src/shared/table-chart.mjs), and what a paste
-// makes of a card or a table carries its original's: a copy of it (data-ge-type="copy"), or a table
-// made anew of its data (components/table tableData `chart`: one cut, one whose original is gone or
-// changed since the copy). The rules, by key:
-//   - a card and a table pasted together are a pair of their own: both take a new key, the first of
-//     t1, t2 … the page does not hold, so that two pairs never cross;
-//   - a table pasted without its card keeps its key while no table on the page carries it (a cut
-//     table put back, one whose original was deleted: the card draws it again); otherwise it is a
-//     table alone, its key taken off (a chart draws the first table of its key, which could be it);
-//   - a card pasted alone keeps its key: it draws the same table as its original, both drawing it.
+// The keys of tables in what a paste made (docs/editor.md, "Copying blocks"): a chart drawn from a
+// table and a view of one (an instance of a custom block that reads tables) name the table by a key
+// (src/shared/table-chart.mjs: TABLE_READERS, a reader), and what a paste makes of a card, a view or a
+// table carries its original's: a copy of it (data-ge-type="copy"), what a clipboard carried of a view
+// (its markup), or a table made anew of its data (components/table tableData `chart`: one cut, one whose
+// original is gone or changed since the copy, one of another document). The rules, by key:
+//   - a reader and a table pasted together are a pair of their own: both take a new key, the first of
+//     t1, t2 … the page does not hold, so that two pairs never cross (a table copied with its board
+//     is a board of its own), in its document or another;
+//   - a table pasted without its reader keeps its key while no table on the page carries it (a cut
+//     table put back, one whose original was deleted: the card draws it again); otherwise, and in
+//     another document, it is a table alone, its key taken off (a reader reads the first table of its
+//     key, which could be it; another document's readers are no readers of it);
+//   - a reader pasted alone keeps its key in its document: it reads the same table as its original,
+//     both reading it; in another document it takes it off (`same` false: the clipboard's document is
+//     not this one), as the table it read is not there and one there carrying the key is no table of
+//     its (keys are t1, t2 … in every document): a view of no table, never one reading and changing that.
 // A copy's new keys ride on it (COPY_KEYS) to the server, which writes them into the copy's source
 // (core.mjs nodeOf: { copy, keys }; source/text.mjs copiedSource); a table made anew is written with
-// its own. The commit makes sure of both against the file as it is then (source/chart-keys.mjs) and
-// says what it changed (page/commit.mjs).
+// its own, a view with its own or none (components/installed extras `from`). The commit makes sure of
+// them against the file as it is then (source/chart-keys.mjs) and says what it changed (page/commit.mjs).
 
 // What carries a key in `root` and in what its templates hold.
+const NAMES = [CHART_SOURCE, ...TABLE_READERS];
+const CARRIES = NAMES.map((name) => `[${name}]`).join(", ");
 const carriers = (root) => [
-  ...(root.matches?.(`[${CHART_DATA}], [${CHART_SOURCE}]`) ? [root] : []),
-  ...root.querySelectorAll(`[${CHART_DATA}], [${CHART_SOURCE}]`),
+  ...(root.matches?.(CARRIES) ? [root] : []),
+  ...root.querySelectorAll(CARRIES),
   ...[...root.querySelectorAll("template")].flatMap((template) => carriers(template.content)),
 ];
-const keysOf = (node) => [node.getAttribute(CHART_DATA), node.getAttribute(CHART_SOURCE)].filter((key) => key !== null);
+const keysOf = (node) => NAMES.map((name) => node.getAttribute(name)).filter((key) => key !== null);
+const readerKey = (node) => TABLE_READERS.map((name) => node.getAttribute(name)).find((key) => key !== null) ?? null;
 
-/** The blocks a paste made (`made`, not on the page yet), the keys of their cards and tables made their own. */
-export function relinkCopies(doc, made) {
+/**
+ * The blocks a paste made (`made`, not on the page yet), the keys of their cards, views and tables made
+ * their own; `same`: the clipboard's document is this one (clipboard/index.mjs origin).
+ */
+export function relinkCopies(doc, made, { same = true } = {}) {
   const inMade = made.flatMap(carriers);
-  const hosts = inMade.filter((node) => node.hasAttribute(CHART_DATA));
+  const hosts = inMade.filter((node) => readerKey(node) !== null);
   const frames = inMade.filter((node) => node.hasAttribute(CHART_SOURCE));
-  if (frames.length === 0) return;
+  if (frames.length === 0 && (same || hosts.length === 0)) return;
   const onPage = carriers(doc);
   const taken = new Set([...onPage, ...inMade].flatMap(keysOf));
-  const renamed = new Map(); // a key -> its new value, null: taken off a table
-  for (const key of new Set(frames.map((frame) => frame.getAttribute(CHART_SOURCE)))) {
-    if (hosts.some((host) => host.getAttribute(CHART_DATA) === key)) {
+  const renamed = new Map(); // a key -> its new value, null: taken off
+  const tabled = new Set(frames.map((frame) => frame.getAttribute(CHART_SOURCE)));
+  for (const key of tabled) {
+    if (hosts.some((host) => readerKey(host) === key)) {
       const next = nextChartKey(taken);
       taken.add(next);
       renamed.set(key, next);
-    } else if (onPage.some((node) => node.getAttribute(CHART_SOURCE) === key)) renamed.set(key, null);
+    } else if (!same || onPage.some((node) => node.getAttribute(CHART_SOURCE) === key)) renamed.set(key, null);
   }
+  if (!same) for (const host of hosts) if (!tabled.has(readerKey(host))) renamed.set(readerKey(host), null);
   const sent = new Map(); // a copy -> its keys { old: new | null }
-  for (const [name, nodes] of [[CHART_DATA, hosts], [CHART_SOURCE, frames]]) {
+  for (const [name, nodes] of [...TABLE_READERS.map((reader) => [reader, hosts]), [CHART_SOURCE, frames]]) {
     for (const node of nodes) {
       const key = node.getAttribute(name);
-      if (!renamed.has(key)) continue;
+      if (key === null || !renamed.has(key)) continue;
       const next = renamed.get(key);
-      if (next === null && name === CHART_DATA) continue; // a card keeps the key of a table pasted alone
       if (next === null) node.removeAttribute(name);
       else node.setAttribute(name, next);
       const copy = node.closest('[data-ge-type="copy"]');

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

@@ -2,7 +2,7 @@ import { isHost, nestedBlocks, serializeInner, unitsOf } from "../../core.mjs";
 import { BLOCK_TYPES, COPIED_AS_ITSELF, COPY_KEEPS, TEXT_TYPES, askClipboard, clipboardOf, sizeValue, unitClipboard } from "../../../components/registry.mjs";
 import { BLOCK_COLORS } from "../../../components/colors.mjs";
 import { containerType, typeOf } from "../../convert.mjs";
-import { pageOfType } from "../../page-objects.mjs";
+import { pageOfType, pageOfUnit } from "../../page-objects.mjs";
 import { referencedIds } from "../../../../shared/copy-ids.mjs";
 
 // Selected blocks as the clipboard's own description (docs/editor.md, "Copying blocks"): each
@@ -64,6 +64,10 @@ export function copied(doc, block) {
   if (block.report !== reportOf(doc)) return null;
   const unit = doc.querySelector(`main [data-ge-unit="${block.unit}"]`);
   if (!unit || unit.getAttribute("data-ge-unit-kind") !== block.kind) return null;
+  // One whose unit's copy cannot stand for it (`copiesAsItself`: an instance with slots) is made of
+  // what it carries, here too: that copy would hold blocks the file writes whole, with ids no answer
+  // of a commit gives the page (source/apply.mjs restoredText names the block alone).
+  if (pageOfUnit(unit)?.copiesAsItself?.(unit) === false) return null;
   const copy = copyOf(unit);
   return (typeof block.data?.html === "string" ? copy.outerHTML === block.html : copy.textContent === block.text) ? unit : null;
 }
@@ -84,12 +88,6 @@ const plain = (node) => (node?.textContent ?? "").replace(/\s+/g, " ").trim();
 /** What copies of a block the page could make: { type, html, text, blocks, lists }, or null. */
 export function describe(node) {
   const kind = node.getAttribute("data-ge-unit-kind");
-  if (COPIES.has(kind)) {
-    if (!node.hasAttribute("data-ge-unit") || node.hasAttribute("data-ge-new")) return null; // not in the file yet
-    const copy = copyOf(node);
-    const data = unitClipboard(node).data?.(node, { serializeInner, copyOf, clipboardOf, copiedType, page: pageOfType });
-    return { type: "copy", kind, unit: Number(node.getAttribute("data-ge-unit")), report: reportOf(node.ownerDocument), text: copy.textContent, html: copy.outerHTML, ...(data ? { data } : {}) };
-  }
   // What an element holds: its units. One that is no box has none (a list of a class of its own:
   // source/units.mjs boxKind), and what stands in it is read as it stands.
   const holding = (box) => {
@@ -98,6 +96,17 @@ export function describe(node) {
     const blocks = (units.length > 0 || box.hasAttribute("data-ge-box") ? units : [...box.children]).map(describe);
     return blocks.every(Boolean) ? blocks : null;
   };
+  // Copied as itself. One whose unit's copy cannot stand for it (`copiesAsItself` of its page object:
+  // an instance with slots, whose blocks that copy would write whole) is copied by what it carries
+  // alone (`data`, those blocks described apart), and is no copy where it carries nothing (a block in a
+  // slot the page cannot make).
+  if (COPIES.has(kind)) {
+    if (!node.hasAttribute("data-ge-unit") || node.hasAttribute("data-ge-new")) return null; // not in the file yet
+    const copy = copyOf(node);
+    const data = unitClipboard(node).data?.(node, { serializeInner, copyOf, clipboardOf, copiedType, page: pageOfType, holding });
+    if (!data && pageOfUnit(node)?.copiesAsItself?.(node) === false) return null;
+    return { type: "copy", kind, unit: Number(node.getAttribute("data-ge-unit")), report: reportOf(node.ownerDocument), text: copy.textContent, html: copy.outerHTML, ...(data ? { data } : {}) };
+  }
   const what = { page: pageOfType, holding, describe, copiedType, isHost, nestedBlocks, serializeInner, plain, colorOf, sizeValue };
   const block = askClipboard("describe", node, what);
   if (block !== undefined) return block;

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

@@ -10,16 +10,16 @@ import { WRITERS, heldToWords } from "./writers.mjs";
 // Copied blocks for other programs (notion-lite serialize.js, after Notion 210528 / 389867: the
 // Markdown its export writes, and HTML that reads as the same), each block by the writer of its kind
 // (writers.mjs). Pasted back here without the clipboard's own data, both read as the same blocks
-// (import/), but for a callout: its Markdown a highlight block, its HTML a paragraph.
+// (import/), but for a callout: its Markdown a highlight block, its HTML a group of its blocks.
 //   text/plain  Markdown: # … #### headings, "- " / "1. " / "- [ ] " items (an item's lists 4 spaces
-//               in), "> " quotes, <aside> callouts (a highlight block: its emoji and text, its blocks;
-//               a callout: its text),
+//               in), "> " quotes, <aside> callouts (a highlight block and a callout: its emoji, a highlight
+//               block's, and the text of its first block, its other blocks),
 //               ``` code (its language), $$ formula blocks (an empty one: none), | tables |, ---, a disclosure as an item
 //               holding its blocks, a tabs area as each tab's name and blocks (a row of columns, copied
 //               as itself, as its text); **bold** *italic* ~~strike~~ `code` $formula$, links as their text
 //               (Notion's plain text); a list's items one line apart, other blocks an empty line; a
 //               line that would read as a tag or a fence escaped (writers.mjs heldToWords).
-//   text/html   plain markup: p (a callout's too), h1–h4, ul / ol / li ("[x] " / "[ ] " before a to-do's text), blockquote,
+//   text/html   plain markup: p, a div of a highlight block's or a callout's blocks, h1–h4, ul / ol / li ("[x] " / "[ ] " before a to-do's text), blockquote,
 //               details, pre > code.language-x, hr, table, a formula block as $$ … $$ (an empty one:
 //               nothing, as in Markdown) and an inline one
 //               as $ … $ (Notion's export), colors as the kit's classes with their color in a style.
@@ -27,8 +27,8 @@ import { WRITERS, heldToWords } from "./writers.mjs";
 // both. Text selected in one block (textFormats) is its inline HTML for other programs, and as plain
 // text its words alone (notion-lite's inlinePlain: no list's marker, no Markdown).
 
-// The kit's light colors, for programs without its styles (src/shared/colors.mjs).
-const INK = Object.fromEntries(COLORS.flatMap(({ name, text, fill }) => [[`doc-text-${name}`, `color:${text[0]}`], [`doc-highlight-${name}`, `background-color:${fill[0]}`]]));
+// The kit's light colors (a background on words its words' fill), for programs without its styles (src/shared/colors.mjs).
+const INK = Object.fromEntries(COLORS.flatMap(({ name, text, mark }) => [[`doc-text-${name}`, `color:${text[0]}`], [`doc-highlight-${name}`, `background-color:${mark[0]}`]]));
 const FORMULA = /^\s*\\\(([\s\S]*)\\\)\s*$/;
 
 // Inline HTML (the format bar's marks: serializeInner's) as nodes to walk, a link shown with its icon