@heycys/gallery 0.1.0 → 0.1.1

package/browser/editor/components/installed/index.mjs

@@ -1,5 +1,5 @@
 import { escapeText } from "../../../shared/escape.mjs";
-import { ATTRIBUTE, FALLBACK, INSTANCE, PACKAGE_ID, instanceMatch, refusedInCopy } from "../../../shared/components/installed.mjs";
+import { ATTRIBUTE, FALLBACK, INSTANCE, PACKAGE_ID, SLOT, SLOT_PART, componentAt, heldBy, instanceMatch, refusedInCopy, slotsIn } from "../../../shared/components/installed.mjs";
 import { wordsIn } from "../../page/clipboard/own/writers.mjs";
 import { svg } from "../icons.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
@@ -7,12 +7,16 @@ import { t } from "../../../shared/i18n/index.mjs";
 // 组件: the one kind of block every component package is to the engines, the host of a package's
 // instances (src/shared/components/installed.mjs). It uses only what a definition offers any block:
 // the engines know no package and no part of one. An instance is one block, moved, copied and
-// deleted whole, no container, nothing going in or out; its parts edited as text are text blocks of
-// this kind (file.mjs finds them, as its manifest says), and everything else in it is the component's
-// (page.mjs). A press on its outer frame or on the handle is Gallery's, as for any block.
+// deleted whole; its parts edited as text are text blocks of this kind (file.mjs finds them, as its
+// manifest says), and everything else in its own region is the component's (page.mjs). A press on
+// its outer frame or on the handle is Gallery's, as for any block. Its slots (data-doc-slot, the parts
+// its manifest edits as "flow") are the one way in and out: boxes of kind "slot", keyed by the part's
+// name, whose blocks are the document's, as a column's are (notion-lite's column: a block's own area
+// of child blocks, the frame around it none of theirs).
 //
-// Where the engines reach it (src/editor/page/ unless named): ../source/ (the scan stops at one,
-// natural.mjs and old names pass it by: `isInstance`, src/shared/components/), hints/ (`readOnly`), clipboard/own/
+// Where the engines reach it (src/editor/page/ unless named): ../source/ (the scan stops at one and
+// goes on in its slots, natural.mjs and old names pass its own region by: `isInstance`,
+// `instanceSlots`, src/shared/components/), hints/ (`readOnly`), clipboard/own/
 // (`clipboard`, copied as itself), caret.mjs (`sealed`: `editable`, where most of the page's events
 // start from), text-select/, editor.mjs's entries and the tools that go by a kit's class (`keepsKeys`,
 // page.mjs), formula/, the "/" menu, the format bar and clipboard/ (`formula`). The "/" menu and 在下方新建
@@ -23,21 +27,27 @@ import { t } from "../../../shared/i18n/index.mjs";
 
 // An instance as Markdown, the words of the file and none of what a component draws: as its package's
 // manifest says (`markdown`), each part in the file's order with `parts`, a table a table, one edited
-// as text a paragraph and any other its words and pictures, or with `text`, and where no package says,
-// its words as any whole block's.
+// as text a paragraph, a slot its blocks as each is written anywhere (notion-lite's column, `flatten`)
+// and any other its words and pictures, or with `text`, and where no package says, its words as any
+// whole block's.
 function instanceParts(unit, how) {
   const found = how.packageOf(unit.getAttribute(ATTRIBUTE));
   if (found?.markdown !== "parts") return [how.words(unit)];
   return saidParts(unit, found.parts).flatMap(({ part, edit }) => {
+    if (edit === "flow") {
+      const lines = how.lines(how.unitsOf(part)); // as a column's, not in from the margin as a disclosure's
+      return lines.length > 0 ? [lines] : [];
+    }
     if (part.matches("table")) return [how.writtenAs("table", part)];
     return (edit === "text" ? [how.own(part)] : [how.wordsIn(part).join(" · "), ...how.picturesIn(part)]).map((line) => [line]);
   }).filter(([first, ...more]) => first || more.length > 0);
 }
 
-// The parts of an instance that say something, each once and none inside another, in the file's order.
+// The parts of an instance that say something, each once and none inside another, in the file's order:
+// of its own region, a slot only as a part edited as flow and no other part.
 function saidParts(unit, parts) {
   const said = Object.values(parts).flatMap(({ at, edit }) => [...unit.querySelectorAll(at)].map((part) => ({ part, edit })))
-    .filter(({ part }) => !part.matches(`${INSTANCE}, script, style, template`) && part.parentElement.closest(INSTANCE) === unit);
+    .filter(({ part, edit }) => !part.matches(`${INSTANCE}, script, style, template`) && part.parentElement.closest(INSTANCE) === unit && heldBy(part) === unit && (edit === "flow") === part.matches(SLOT_PART));
   const found = [...new Map(said.map((each) => [each.part, each])).values()];
   return found.filter(({ part }) => !found.some((other) => other.part !== part && other.part.contains(part)))
     .sort((a, b) => (a.part.compareDocumentPosition(b.part) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1));
@@ -46,10 +56,13 @@ function saidParts(unit, parts) {
 // A copy of an instance as blocks, what other programs and a field of plain text read of it: as its
 // package says, as a page export writes it (instanceParts), but for pictures, which are no words. Its
 // words are paragraphs, as `markdown: "parts"` has them; a text part that is a heading says so for the
-// clipboard's HTML (`as`: the type it is written as there, the parts writer's).
-function copiedParts(copy, found, { serializeInner, clipboardOf, copiedType }) {
-  if (found?.markdown !== "parts" || !found.parts) return [{ type: "paragraph", html: escapeText(wordsIn(copy).join(" · ")) }].filter(({ html }) => html);
+// clipboard's HTML (`as`: the type it is written as there, the parts writer's). A slot is its blocks
+// (`flows`, by name, as the clipboard describes them), the copy's slots being empty; its words are
+// among the instance's (`words`, of it with what its slots hold).
+function copiedParts(copy, found, { serializeInner, clipboardOf, copiedType }, { flows = {}, words = wordsIn(copy) } = {}) {
+  if (found?.markdown !== "parts" || !found.parts) return [{ type: "paragraph", html: escapeText(words.join(" · ")) }].filter(({ html }) => html);
   return saidParts(copy, found.parts).flatMap(({ part, edit }) => {
+    if (edit === "flow") return flows[part.getAttribute(SLOT)] ?? [];
     if (part.matches("table")) return [clipboardOf("table").data(part, { serializeInner })].filter(Boolean);
     const html = edit === "text" ? serializeInner(part) : escapeText(wordsIn(part).join(" · "));
     const own = edit === "text" ? copiedType(part) : null;
@@ -78,11 +91,12 @@ export const ICON = svg('<path d="M4 6.75A1.75 1.75 0 0 1 5.75 5H8a2 2 0 0 1 4 0
 
 export default {
   name: "installed",
-  // Ahead of every rule of the page's: all that stands in an instance is the component's, its
-  // controls too, and one of no package, or whose component failed, says why nothing there answers.
+  // Ahead of every rule of the page's: all that stands in an instance's own region is the component's,
+  // its controls too, and one of no package, or whose component failed, says why nothing there answers.
+  // What its slots hold is the page's, each block saying what it says anywhere (componentAt).
   readOnly: [
-    { rank: 1, at: `[${FALLBACK}] *`, says: t("这个组件没有运行：内容只能看，可以整块移动、复制和删除。") },
-    { rank: 2, at: `[${ATTRIBUTE}] *`, says: null },
+    { rank: 1, at: (element) => componentAt(element) && Boolean(heldBy(element)?.hasAttribute(FALLBACK)), says: t("这个组件没有运行：内容只能看，可以整块移动、复制和删除。") },
+    { rank: 2, at: componentAt, says: null },
   ],
   attributes: [ATTRIBUTE],
   sealed: INSTANCE,
@@ -96,6 +110,11 @@ export default {
       copy: "itself",
     },
   },
+  boxes: {
+    // A slot of an instance (data-doc-slot, its manifest's part edited as flow): the document's blocks, as a
+    // column's are, a disclosure's content's rules for an empty one (holdsOne, a plain div a group).
+    slot: { role: "flow", name: t("内容区"), groups: true, holdsOne: true, selectAll: { content: true }, find: (unit, key) => slotsIn(unit).find((slot) => slot.getAttribute(SLOT) === key) ?? null },
+  },
   hosts: {
     // A part a manifest edits as text: words as in a paragraph, emptied but never split, joined or
     // taken out on its own, as a media block's caption is. No formula: the kit draws none in an
@@ -108,24 +127,51 @@ export default {
     // no unit to be made from (`data-ge-copy`).
     installed: {
       tag: "div", kind: "installed", bare: true,
-      extras: (element) => ({ package: element.getAttribute(ATTRIBUTE), ...(element.hasAttribute("data-ge-copy") ? { html: element.getAttribute("data-ge-copy") } : {}) }),
+      // Its markup is the file's, from its template or what was carried (`data-ge-copy`, its slots
+      // empty); what its slots hold goes apart, blocks made on the page as any (`children`, each in the
+      // slot `boxKeys` names), so that the commit's answer names each, as for a block made in a column.
+      extras(element, { nodes }) {
+        const held = slotsIn(element).filter((slot) => slot.hasAttribute("data-ge-box")).flatMap((slot) => (nodes?.(slot) ?? []).map((node) => [slot.getAttribute(SLOT), node]));
+        return {
+          package: element.getAttribute(ATTRIBUTE),
+          ...(element.hasAttribute("data-ge-copy") ? { html: element.getAttribute("data-ge-copy") } : {}),
+          ...(slotsIn(element).length > 0 ? { children: held.map(([, node]) => node), boxKeys: held.map(([key]) => key) } : {}),
+        };
+      },
       clipboard: {
         kind: "parts", read: instanceParts,
-        // What carries it where its unit is not (cut, another document): its markup as the kit would
-        // start it, with the ids it names itself, and what it says to whoever reads no blocks. One
-        // whose markup no clipboard may bring anywhere (a handler, a script) has none, and stays a
-        // copy within its document.
-        data(node, { serializeInner, copyOf, clipboardOf, copiedType, page }) {
+        // What carries it where its unit is not (cut, another document), and within its document too
+        // when it has slots: its markup as the kit would start it, with the ids it names itself, its
+        // slots empty, the blocks each holds described as any (`flows`, by name: blocks made on the page
+        // where it is pasted, as a disclosure's are), and what it says to whoever reads no blocks. One
+        // whose markup no clipboard may bring anywhere (a handler, a script) has none, and stays a copy
+        // within its document; so does one with a slot that is no box (words straight in it), or with a
+        // block in one the page cannot make, which then is no copy at all (clipboard/own/describe.mjs).
+        data(node, { serializeInner, copyOf, clipboardOf, copiedType, page, holding }) {
+          const slots = slotsIn(node);
+          const flows = Object.fromEntries(slots.map((slot) => [slot.getAttribute(SLOT), slot.hasAttribute("data-ge-box") ? holding?.(slot) ?? null : null]));
+          if (Object.values(flows).some((blocks) => !blocks)) return null;
           const copy = copyOf(node, { named: true });
+          const words = wordsIn(copy);
+          slotsIn(copy).forEach((slot) => slot.replaceChildren());
           const html = copy.outerHTML;
           if (html.length > CARRIED || refused(copy) || !elementOf(html, node.ownerDocument)) return null;
           const id = node.getAttribute(ATTRIBUTE);
-          return { type: "installed", package: id, html, blocks: copiedParts(copy, page("installed")?.packageOf(id), { serializeInner, clipboardOf, copiedType }) };
+          return { type: "installed", package: id, html, ...(slots.length > 0 ? { flows } : {}), blocks: copiedParts(copy, page("installed")?.packageOf(id), { serializeInner, clipboardOf, copiedType }, { flows, words }) };
         },
+        // What its slots hold, among a paste's blocks (blocks.mjs `holds`).
+        holds: (block) => (block.flows && typeof block.flows === "object" ? Object.values(block.flows).filter(Array.isArray).flat() : []),
+        // Its slots empty in its markup, each named once in `flows`, which holds blocks a slot takes.
         check(block, { string, valid }) {
           if (!string(block.package, 200) || !PACKAGE_ID.test(block.package) || !string(block.html, CARRIED) || !Array.isArray(block.blocks) || !block.blocks.every((inner) => valid(inner))) return false;
           const root = elementOf(block.html);
-          return Boolean(root?.matches(instanceMatch(block.package))) && !refused(root);
+          if (!root?.matches(instanceMatch(block.package)) || refused(root)) return false;
+          const slots = slotsIn(root);
+          if (slots.length === 0) return block.flows === undefined;
+          const names = slots.map((slot) => slot.getAttribute(SLOT));
+          const { flows } = block;
+          return Boolean(flows) && typeof flows === "object" && !Array.isArray(flows) && new Set(names).size === names.length && names.length === Object.keys(flows).length
+            && slots.every((slot) => !slot.firstElementChild && !slot.textContent.trim() && Array.isArray(flows[slot.getAttribute(SLOT)]) && flows[slot.getAttribute(SLOT)].every((inner) => valid(inner, "slot")));
         },
       },
     },

package/browser/editor/components/installed/page.mjs

@@ -1,10 +1,14 @@
-import { ARRIVING, ATTRIBUTE, DATA_MOST, DATA_SHOWN, FALLBACK, FIELDS, INSTANCE, NO_TEXT, PACKAGE_MARK, SCHEMA, fitsDataScript, instanceMatch, isDataScript, noDataPart, refusedInData, schemaAhead } from "../../../shared/components/installed.mjs";
+import { ARRIVING, ATTRIBUTE, DATA_MOST, DATA_SHOWN, FALLBACK, FIELDS, INSTANCE, NO_TEXT, PACKAGE_MARK, SCHEMA, SLOT, SLOT_PART, componentAt, fitsDataScript, heldBy, instanceMatch, isDataScript, noDataPart, refusedInData, schemaAhead, slotsIn } from "../../../shared/components/installed.mjs";
 import { referencedIds } from "../../../shared/copy-ids.mjs";
-import { language } from "../../../shared/i18n/index.mjs";
+import { language, t } from "../../../shared/i18n/index.mjs";
 import { caretAt, editable } from "../../page/caret.mjs";
+import { htmlToBlocks, parseClipboardHTML } from "../../page/clipboard/import/html.mjs";
+import { toBlocks } from "../../page/clipboard/import/to-blocks.mjs";
+import { build as buildBlock } from "../../page/clipboard/own/blocks.mjs";
 import { copyOf } from "../../page/clipboard/own/describe.mjs";
 import { ownIds } from "../../page/clipboard/own/ids.mjs";
-import { unitElement } from "../../page/core.mjs";
+import { firstHost, newHost, unitElement } from "../../page/core.mjs";
+import { addStyle } from "../../page/ui.mjs";
 import { accepts, capsFor } from "../registry.mjs";
 import { ICON } from "./index.mjs";
 import { followCatalog, followSettings, isBehind } from "./served.mjs";
@@ -38,6 +42,18 @@ import { followCatalog, followSettings, isBehind } from "./served.mjs";
 // the reader writes over someone else's change of a part (仍然调整) is a step of its own from theirs
 // (`overwrite`), so that one undo gives the file's back.
 // One past its manifest's `schema` is read-only, its words and all.
+//
+// Its slots (data-doc-slot, the parts its manifest edits as flow) are the page's: boxes of kind "slot"
+// (index.mjs), whose blocks are edited, moved and undone as anywhere, a press or a key in one no
+// component's (componentAt), whatever state the instance is in, one of no package too. Enter in a text
+// part goes into the first slot after it, as in a disclosure's title. An empty one says so while the
+// page is edited, and a click on it makes a paragraph (insert/, holdsOne), as a disclosure's content.
+// The component reads a slot (context.part) and hears what changes in it (source), and writes nothing
+// there: a slot it takes off its instance is put back where it stood (`keepSlots`), so that no commit
+// takes the reader's blocks out. An instance made on the page, from "/", a clipboard or 恢复我的, has its
+// slots as boxes made on the page, their blocks made on the page as any (`slotsMade`), which the commit
+// carries apart from its markup (index.mjs `extras`) and the answer names, so that they edit at once; a
+// copy carries them so too, in its document as well (`copiesAsItself`, index.mjs `data`).
 
 let held = null; // the map, what makes a block with no editor (the transfer worker) finds none of
 
@@ -119,9 +135,10 @@ function bring({ id, stamp, definition, kit = [], tags }) {
 const partsOf = (instance) => Object.entries(globalThis.DocKit?.description(instance.getAttribute(ATTRIBUTE))?.parts ?? {});
 // Whether an instance holds its content in a shape its manifest does not reach, as the kit was told it.
 const ahead = (instance) => schemaAhead(instance.getAttribute(SCHEMA), globalThis.DocKit?.description(instance.getAttribute(ATTRIBUTE))?.schema);
-// The elements of a part an instance holds, none of an instance in it nor of what the kit draws of a
-// script of data there, which is no element of the file's.
-const elementsOf = (instance, at) => [...instance.querySelectorAll(at)].filter((part) => !part.matches(INSTANCE) && part.parentElement.closest(INSTANCE) === instance && !part.closest(`.${DATA_SHOWN}`));
+// The elements of a part an instance holds, of its own region (none of an instance in it, none of what
+// its slots hold, no slot itself) and none of what the kit draws of a script of data there, which is
+// no element of the file's.
+const elementsOf = (instance, at) => [...instance.querySelectorAll(at)].filter((part) => !part.matches(INSTANCE) && !part.matches(SLOT_PART) && part.parentElement.closest(INSTANCE) === instance && heldBy(part) === instance && !part.closest(`.${DATA_SHOWN}`));
 
 // The elements of an instance its component writes, [[name, element]], as the server finds them
 // (file.mjs dataParts): of each part edited as data the first it holds, as context.part does. One in
@@ -170,7 +187,7 @@ const openness = (instance) => (instance.hasAttribute(FALLBACK) ? "false" : "tru
 function followFallback(instance) {
   const value = openness(instance);
   for (const part of instance.querySelectorAll('[data-ge-kind="installed"]')) {
-    if (part.parentElement.closest(INSTANCE) === instance && part.getAttribute("contenteditable") !== value) part.setAttribute("contenteditable", value);
+    if (part.parentElement.closest(INSTANCE) === instance && heldBy(part) === instance && part.getAttribute("contenteditable") !== value) part.setAttribute("contenteditable", value);
   }
 }
 
@@ -196,12 +213,40 @@ function newInstance(doc, html) {
   return instance;
 }
 
-/** An instance from what a clipboard carried (`data`): the file is written from that markup, which the commit sends. */
-export function build({ doc, block }) {
+/**
+ * The slots of a new instance as boxes made on the page, each holding what `fill(slot)` gives (blocks
+ * made on the page), or an empty paragraph, where the reader writes: what the commit writes in them
+ * goes apart from the instance's markup (index.mjs `extras`), and the page knows each block of it by
+ * the commit's answer, as one made in a new column.
+ */
+function slotsMade(doc, instance, fill) {
+  for (const slot of slotsIn(instance)) {
+    const blocks = fill(slot);
+    slot.setAttribute("data-ge-box", "");
+    slot.setAttribute("data-ge-box-kind", "slot");
+    slot.replaceChildren(...(blocks.length > 0 ? blocks : [newHost(doc, "paragraph")]));
+  }
+}
+
+// What a template's slot holds, as blocks made on the page: read as HTML pasted from elsewhere is
+// (clipboard/import/), each block what a paste makes of it there.
+function blocksOfTemplate(doc, slot) {
+  if (!slot.firstElementChild && !slot.textContent.trim()) return [];
+  const specs = htmlToBlocks(parseClipboardHTML(slot.innerHTML), {});
+  return specs.length > 0 ? toBlocks(specs, "slot").map((block) => buildBlock(doc, block)) : [];
+}
+
+/**
+ * An instance from what a clipboard carried (`data`): the file is written from that markup, which the
+ * commit sends, its slots empty; what they held comes as blocks of their own (`flows`, by name),
+ * made again here as any pasted block (`inner`).
+ */
+export function build({ doc, block, inner }) {
   const entry = entryOf(block.package);
   if (entry) bring(entry);
   const instance = newInstance(doc, block.html);
   instance.setAttribute("data-ge-copy", block.html);
+  slotsMade(doc, instance, (slot) => inner?.(block.flows?.[slot.getAttribute(SLOT)] ?? []) ?? []);
   editableParts(instance);
   return instance;
 }
@@ -232,7 +277,7 @@ const inStep = (entry) => listed && entry !== null && !overtaken(entry);
  * blocks where it came with none.
  */
 function arrive(instance) {
-  if (!instance.isConnected || instance.parentElement?.closest(INSTANCE)) return;
+  if (!instance.isConnected || heldBy(instance)) return;
   const id = instance.getAttribute(ATTRIBUTE);
   const entry = entryOf(id);
   if (isBehind(id) && !inStep(entry)) return void window.dispatchEvent(new CustomEvent("doc-components-changed"));
@@ -242,12 +287,34 @@ function arrive(instance) {
   if (!instance.querySelector("[data-ge-block], [data-ge-part]")) editableParts(instance);
 }
 
+// A slot of the page's (a box) taken off an instance still on the page, by its component's script
+// (`node`, what was taken off from `from`, before `next`; the instance itself taken off is the editor's
+// doing, and none of this): a slot is the document's, which no component writes, so it goes back where
+// it stood, what it holds with it, and the reader's blocks stay, on the page and in the file. Who
+// wrote the package hears of it.
+function keepSlots(node, from, next) {
+  if (node.nodeType !== 1 || node.matches(INSTANCE) || !from.isConnected) return;
+  const instance = from.closest(INSTANCE);
+  const slots = [node, ...node.querySelectorAll(SLOT_PART)].filter((slot) => slot.matches(`:is(${SLOT_PART})[data-ge-box]`) && !slot.parentElement?.closest(INSTANCE));
+  if (!instance || slots.length === 0) return;
+  for (const slot of slots) from.insertBefore(slot, next?.parentNode === from ? next : null);
+  console.error(`[DocKit] ${instance.getAttribute(ATTRIBUTE)}: a slot left its instance: it is put back, its blocks the document's`);
+}
+
 // A package's picture where a menu shows a mark.
 const pictureOf = ({ preview }) => (preview ? `<img src="${preview}" alt="">` : null);
 
+// A slot the file has empty (an Agent's): what a disclosure's content says (details/page.mjs), a click
+// on it making a paragraph there (insert/ clickBlank).
+const SLOT_EMPTY = `
+  [data-ge-editing] [data-doc-slot][data-ge-box]:not(:has(> *))::before { content: ${JSON.stringify(t("空白内容区。点击或拖动区块到这里。"))}; display: block; padding: 3px 2px; border-radius: 4px; color: var(--ge-tx3); cursor: pointer; transition: background 20ms ease-in; }
+  [data-ge-editing] [data-doc-slot][data-ge-box]:not(:has(> *)):hover::before { background: var(--ge-hover); }
+`;
+
 /** An instance on the page: what its events are, what Enter does in its words, and what the menus make of its package. */
-export function create({ map, newParagraph, active, sourceStep }) {
+export function create({ map, newParagraph, active, sourceStep, struct }) {
   held = map;
+  addStyle(SLOT_EMPTY);
   // Whether a key in an instance, on no field of it, is undo or redo: a button or what a component draws
   // has no undo of its own, and a press on one that wrote leaves the focus there, from where the page's
   // undo goes on through every step, as notion-lite's does from anywhere (onHistoryKey). A field keeps
@@ -294,12 +361,30 @@ export function create({ map, newParagraph, active, sourceStep }) {
     return true;
   }
   return {
-    keepsKeys: (node, event) => node?.nodeType === 1 && Boolean(node.parentElement?.closest(INSTANCE)) && !editable(node) && !pageUndo(node, event),
-    undoHere: (node) => Boolean(node.parentElement?.closest(INSTANCE)) && !editable(node),
+    keepsKeys: (node, event) => componentAt(node) && !editable(node) && !pageUndo(node, event),
+    undoHere: (node) => componentAt(node) && !editable(node),
     keys: {
-      // notion-lite's captionEnter: words of a block that are not the block's own line do not split,
-      // Enter there is a text block after the block, the caret in it.
+      // In a text part with a slot after it (in the file's order): the caret goes into the slot, as from
+      // a disclosure's title into its content (details/page.mjs), at the start of its first block, or in
+      // a paragraph made first in it, one step of undo. Else notion-lite's captionEnter: words of a
+      // block that are not the block's own line do not split, Enter there is a text block after the
+      // block, the caret in it.
       enter({ host }) {
+        const instance = host.parentElement?.closest(INSTANCE);
+        const slot = instance && slotsIn(instance).find((each) => each.hasAttribute("data-ge-box") && host.compareDocumentPosition(each) & Node.DOCUMENT_POSITION_FOLLOWING && !host.contains(each));
+        if (slot) {
+          const first = firstHost(slot);
+          if (first) caretAt(first, "start");
+          else {
+            const paragraph = newHost(document, "paragraph");
+            struct([slot], [], () => {
+              slot.prepend(paragraph);
+              return { touched: [paragraph], focus: paragraph };
+            });
+            caretAt(paragraph, "start");
+          }
+          return true;
+        }
         const unit = unitElement(host);
         const box = unit?.parentElement;
         if (!box || !accepts(box.getAttribute("data-ge-box-kind") ?? "flow", "paragraph")) return false;
@@ -311,7 +396,9 @@ export function create({ map, newParagraph, active, sourceStep }) {
     // by block types), by its id, as notion-lite's variants: a row of the menus, found by its name in
     // either language and its words, and what makes one (notion-lite's
     // insertTypedBlock: the caret in its first text part; with none, in an empty paragraph after it, as
-    // for a divider).
+    // for a divider). Its slots are boxes made on the page at once, what the template has in each made
+    // blocks of the page's (an empty paragraph where it has none), so that the reader writes in one
+    // before the instance is saved, and Enter in a text part goes into the slot after it.
     menuVariants: () => Object.fromEntries((map.components ?? []).filter(({ template, state }) => template && state === "normal").map((entry) => [entry.id, {
       label: entry.name[language],
       icon: pictureOf(entry) ?? ICON,
@@ -321,20 +408,33 @@ export function create({ map, newParagraph, active, sourceStep }) {
       create({ doc, put: place, paragraph }) {
         bring(entry);
         const instance = newInstance(doc, entry.template);
+        slotsMade(doc, instance, (slot) => blocksOfTemplate(doc, slot));
         ownIds(doc, [instance]);
         place(instance);
-        return editableParts(instance)[0] ?? place(paragraph());
+        return editableParts(instance)[0] ?? firstHost(instance) ?? place(paragraph());
       },
     }])),
+    /**
+     * Whether a copy of an instance's unit stands for it: not where it has slots, whose blocks that copy
+     * would write whole, with no ids the page knows; such an instance is copied by what it carries alone
+     * (index.mjs `data`: its slots' blocks apart), in its document too.
+     */
+    copiesAsItself: (unit) => slotsIn(unit).length === 0,
     /** What the reader calls a block of it: its package's name, where the page knows its package. */
     nameOf: (unit) => entryOf(unit.getAttribute(ATTRIBUTE))?.name[language] ?? null,
     /**
      * One the file dropped that the page still shows, a reader's to keep: it goes from now on as what a
-     * clipboard carried does, its markup as the kit would start it. Its template would not hold what
-     * the reader has.
+     * clipboard carried does, its markup as the kit would start it, its slots empty: what they hold is
+     * made on the page from now on too (sync-state.mjs asMade), and goes apart (index.mjs `extras`).
+     * Its template would not hold what the reader has.
      */
     renew(instance) {
-      if (!instance.hasAttribute("data-ge-copy")) instance.setAttribute("data-ge-copy", copyOf(instance, { named: true }).outerHTML);
+      if (!instance.hasAttribute("data-ge-copy")) {
+        const copy = copyOf(instance, { named: true });
+        const boxes = slotsIn(instance).map((slot) => slot.hasAttribute("data-ge-box"));
+        slotsIn(copy).forEach((slot, index) => { if (boxes[index]) slot.replaceChildren(); });
+        instance.setAttribute("data-ge-copy", copy.outerHTML);
+      }
       instance.setAttribute("data-ge-type", "installed");
       return true;
     },
@@ -401,12 +501,13 @@ export function create({ map, newParagraph, active, sourceStep }) {
       }
       document.addEventListener("doc-component-edit", (event) => { if (write(event.detail, event.target)) event.preventDefault(); });
       new MutationObserver((records) => {
-        for (const { type, target, addedNodes } of records) {
+        for (const { type, target, addedNodes, removedNodes, nextSibling } of records) {
           if (type === "attributes") followFallback(target);
           for (const node of addedNodes) {
             if (node.nodeType !== 1 || node.hasAttribute("data-doc-dev")) continue;
             [...(node.matches(INSTANCE) ? [node] : []), ...node.querySelectorAll(INSTANCE)].forEach(arrive);
           }
+          for (const node of removedNodes) keepSlots(node, target, nextSibling);
         }
       }).observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: [FALLBACK] });
       window.addEventListener("doc-catalog-changed", readList);

package/browser/editor/components/kit.mjs

@@ -51,6 +51,9 @@ export const CODE = Object.freeze({
 /** A highlight block, the opening summary included: the one place the editor says which elements are one. */
 export const HIGHLIGHT = Object.freeze({ match: component("highlight").match });
 
+/** A callout (提示块). */
+export const CALLOUT = Object.freeze({ match: component("callout").match });
+
 // A display formula block and an inline one (the math description's two rules).
 const [mathInline, mathBlock] = component("math").match.split(",").map((rule) => rule.trim());
 export const MATH = Object.freeze({ inline: mathInline, block: mathBlock });

package/browser/editor/components/media/page.mjs

@@ -1,6 +1,5 @@
 import { MEDIA_BLOCKS, MEDIA_CLASS, mediaBlockOf } from "../../../shared/components/index.mjs";
 import { caretAt } from "../../page/caret.mjs";
-import { UNIT } from "../../page/core.mjs";
 import { openMediaMenu } from "../../page/media-menu/index.mjs";
 import { keptByComponent } from "../../page/page-objects.mjs";
 import { blobBase64 } from "../../page/post.mjs";
@@ -8,6 +7,7 @@ import { addStyle } from "../../page/ui.mjs";
 import { barClass } from "../placeholder-bar.mjs";
 import { captionOf } from "./parts.mjs";
 import { TOOLBAR_STYLE } from "./toolbar.mjs";
+import { ZWSP } from "../../../shared/inline-spacing.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
 // What the four media blocks (图片, 文件, 网页书签, 嵌入) do on the page alike (notion-lite's
@@ -15,13 +15,17 @@ import { t } from "../../../shared/i18n/index.mjs";
 // block's menu; what is chosen replaces the placeholder with a NEW element (never the same one, so
 // that undo brings back the placeholder as it was and the file loses the block); a caption shows
 // once it is asked for or focused, goes out of sight when it is left empty, and Enter in it makes a
-// paragraph after the block. What a block makes of what is chosen (its picture, row, card or frame),
-// its menu, rows and tools are its own (image/, file/, bookmark/, embed/ page.mjs).
+// paragraph after the block; Backspace or Delete in an empty one closes it and selects its block. It
+// is plain text under the block, with no fill under the pointer or the caret. What a block makes of
+// what is chosen (its picture, row, card or frame), its menu, rows and tools are its own (image/,
+// file/, bookmark/, embed/ page.mjs).
 
 const STYLE = `${TOOLBAR_STYLE}
   /* A caption is shown with words, while it has the caret, or once 标题 asks for it (data-ge-caption), with Notion's placeholder. */
   ${MEDIA_BLOCKS.map((id) => `[data-ge-editing] .${MEDIA_CLASS[id]}[data-ge-caption] > figcaption`).join(", ")} { display: block; }
   ${MEDIA_BLOCKS.map((id) => `[data-ge-editing] .${MEDIA_CLASS[id]} > figcaption:empty::before`).join(", ")} { content: ${JSON.stringify(t("写一个标题…"))}; color: var(--ge-tx3); }
+  /* A caption is plain text under its block, as Notion's and Feishu's: no fill under the pointer or the caret (editor.mjs's --ge-text-tint). */
+  [data-ge-editing] [data-ge-kind="mediaCaption"][contenteditable="true"] { --ge-text-tint: none; }
 `;
 
 // Every media placeholder (a gray bar), by the selector the page finds it by.
@@ -30,6 +34,10 @@ const BARS = MEDIA_BLOCKS.map((id) => `main figure.${MEDIA_CLASS[id]} > .${barCl
 // What a placeholder's words were before something was under way (busy), by the words' element.
 const idleWords = new WeakMap();
 
+// A caption with nothing in it: no words, no chip (a formula, a page's link); what the browser or a
+// pad leaves (a <br>, a zero-width space) is nothing. A space is something: Backspace takes it.
+const blank = (text) => !text.textContent.replaceAll(ZWSP, "") && !text.querySelector("[data-ge-atom]");
+
 /**
  * The media blocks on the page, with what the editor gives them: struct (an undo step), say,
  * active() (the block tools may act), blocks() (the block tools), newParagraph(parent, after),
@@ -78,6 +86,30 @@ export function create({ struct, finishStep, look, say, active, blocks, newParag
     event.preventDefault();
     newParagraph(figure.parentElement, figure);
   }, true);
+  // Backspace or Delete in an empty caption closes it (the user's rule, 2026-11-06; Notion's and
+  // notion-lite's do nothing there): out of sight as when the caret leaves it, the file keeping its
+  // empty <figcaption> (no undo step: nothing of the file changes), and its block selected, as Esc
+  // there does and as Backspace selects a block above that holds no text (typing/): Backspace again
+  // deletes the block. A key held down stops at the empty caption (`repeat`), so that holding
+  // Backspace to clear its words never takes the block with them.
+  document.addEventListener("keydown", (event) => {
+    if ((event.key !== "Backspace" && event.key !== "Delete") || event.ctrlKey || event.metaKey || event.altKey || event.isComposing || event.keyCode === 229) return;
+    const text = event.target?.closest?.('[data-ge-kind="mediaCaption"]');
+    const figure = text?.parentElement?.closest("figure");
+    if (!figure || !active() || !blank(text)) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    if (!event.repeat) closeCaption(text, figure);
+  }, true);
+
+  // A caption closed: emptied of what the browser left, its mark gone, its block selected (which
+  // takes the focus off it; where the block cannot be selected, the focus leaves it all the same).
+  function closeCaption(text, figure) {
+    text.replaceChildren();
+    figure.removeAttribute("data-ge-caption");
+    select(figure);
+    if (text.contains(document.activeElement)) text.blur();
+  }
 
   /** The parts the editing of media block `id` is made from. */
   function block(id) {
@@ -133,25 +165,23 @@ export function create({ struct, finishStep, look, say, active, blocks, newParag
         if (!pasted) select(next);
         else if (picked) blocks().select(next, { quiet: true });
       },
-      /** The caption shown (an empty one too), the caret at its end. */
+      /** The caption shown (an empty one too), the caret at its end, no block left selected (notion-lite's editCaption: setSelection([])). */
       caption(figure) {
         const text = figure && captionOf(figure);
         if (!text) return;
+        blocks()?.clear();
         figure.setAttribute("data-ge-caption", "");
         caretAt(text, "end");
       },
       /**
-       * `file` pasted into `host` (a text block): a new block made by `make(doc)` below its block, then
-       * `fill(figure, file)` (its placeholder filled). Returns whether it took the file.
+       * `file` pasted: a new block made by `make(doc)`, put in its place by `put` (the paste's, clipboard/:
+       * where a block pasted there goes, one undo step; false when it could not), then `fill(figure, file)`
+       * (its placeholder filled). Returns whether it took the file.
        */
-      paste(host, file, make, fill) {
-        const unit = host?.closest?.(UNIT);
-        if (!file || !unit?.parentElement) return false;
-        const figure = make(host.ownerDocument);
-        struct([unit.parentElement], [], () => {
-          unit.after(figure);
-          return { touched: [], focus: null };
-        });
+      paste(put, file, make, fill) {
+        if (!file) return false;
+        const figure = make(document);
+        if (!put(figure)) return false;
         fill(figure, file);
         return true;
       },

package/browser/editor/components/pages.mjs

@@ -1,5 +1,4 @@
 import { create as bookmark } from "./bookmark/page.mjs";
-import { create as callout } from "./callout/page.mjs";
 import { create as code } from "./code/page.mjs";
 import { create as columns } from "./columns/page.mjs";
 import { create as details } from "./details/page.mjs";
@@ -15,6 +14,7 @@ import { create as installed } from "./installed/page.mjs";
 import { create as list } from "./list/page.mjs";
 import { create as math } from "./math/page.mjs";
 import { create as media } from "./media/page.mjs";
+import { create as heading } from "./heading/page.mjs";
 import { create as paragraph } from "./paragraph/page.mjs";
 import { create as section } from "./section/page.mjs";
 import { create as sheets } from "./sheets/page.mjs";
@@ -29,7 +29,7 @@ import { create as table } from "./table/page.mjs";
 // listeners onto the document as it is made, and media comes before the four blocks made of its
 // parts (block(id)). It is also the order they are asked in where every one is: the columns tidy
 // before the lists (`tidy`), an image takes a pasted file before a file block does (`acceptsFile`).
-const PAGES = { columns, code, list, flowchart, nodeAdder, details, dialog, callout, paragraph, section, icon, sheets, sheetPills, figure, media, image, file, bookmark, embed, math, table, installed };
+const PAGES = { columns, code, list, flowchart, nodeAdder, details, dialog, paragraph, heading, section, icon, sheets, sheetPills, figure, media, image, file, bookmark, embed, math, table, installed };
 
 /**
  * Every component's page object, by its component's name (and the flowchart's "+", nodeAdder, and a