@heycys/gallery 0.1.0 → 0.1.1

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

@@ -0,0 +1,447 @@
+import { t } from "../../../shared/i18n/index.mjs";
+import { onPreferences, preference } from "../../../shared/preferences.mjs";
+import { readText, rangeOf } from "../annotate/anchors.mjs";
+import { GONE_WORDS, nestedBlocks } from "../core.mjs";
+import { createFills } from "../fills.mjs";
+import { FOLLOW, task } from "../frames.mjs";
+import { onSettle, own, provide } from "../overlays.mjs";
+import { failure, postAnswer } from "../post.mjs";
+import { addStyle } from "../ui.mjs";
+import { UNDO_SHOWN, createBar } from "./bar.mjs";
+import { GHOST_STYLE, createGhosts } from "./ghost.mjs";
+import { editsBy, goneMark, placeOf, putMark, takeMark } from "./gone-words.mjs";
+import { wordMarks } from "./words.mjs";
+
+// The Agent's changes on the page (docs/editor.md "Agent's changes"), as Cursor reviews an Agent's:
+// what an Agent wrote to the report since the reader last kept or reverted it (the server's review,
+// editor/changes.mjs, read at the editor's start and never holding it back, drawn once the page is
+// ready), marked without a change to the file: a block added (or changed with no words to tell, or
+// whose words cannot be compared) a green fill (fills.mjs), words added the 批注's look in green (a
+// CSS highlight under the 批注's own), the words taken out shown where they were, in red struck
+// through (gone-words.mjs: an empty inline mark of the editor's own, its words drawn by CSS, which
+// nothing that reads or writes the block's content takes), the blocks deleted shown where they were,
+// a ghost of them in red struck through in room made for it (ghost.mjs, drawn in the overlay layer:
+// nothing of it in the document). Nothing to rest the pointer on: all of it shows at once. The reader
+// editing a block takes its words taken out away first (the keys, input, an input method, a paste,
+// cut or drop in it, the format bar over it), and they are not drawn in it again until the caret has
+// left it (the review read again then). The bar at the window's bottom (bar.mjs) says how many blocks
+// and offers 撤回 (the server writes the baseline back: the reader's own saved edits stay; undone within
+// UNDO_SHOWN from the bar of the page shown again) and 确认 (no more marks). 显示变更 off (设置),
+// nothing is drawn and a review read is kept at once, quietly. The page reads the review again when
+// its server says it changed (another tab kept it, an Agent wrote more) and 1.5s after a commit of its
+// own while the bar shows. Not on a page opened on its own in a frame (?solo), printed, or presented
+// (the preview's ?present has no editor).
+
+const ROUTE = "/__gallery/edit/changes";
+const REREAD_AFTER = 1500; // after a commit of the page's own, the review read again this long after (the reader paused)
+const LEFT_AFTER = 150; // the caret left a block the reader edited: the review read again this long after (once saved)
+const KEEP_TRIES = 3; // a quiet keep refused (the review grew meanwhile) is tried again this often
+// What may edit the block it happens in: its words taken out go first (gone-words.mjs editsBy for a key).
+const EDITS = ["keydown", "beforeinput", "compositionstart", "paste", "cut", "drop", "dragstart"];
+
+const STYLE = `
+  ::highlight(ge-diff-add) { background-color: var(--ge-diff-add); text-decoration: underline 2px var(--ge-diff-add-line); }
+  .ge-diff-del { user-select: none; pointer-events: none; }
+  .ge-diff-del::before { content: attr(data-ge-gone-words); border-radius: 3px; background: var(--ge-diff-del); color: var(--ge-diff-del-text); text-decoration: line-through; text-decoration-color: var(--ge-diff-del-text); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
+  .ge-diff-del[data-ge-gone-lead]::before { margin-left: .28em; }
+  .ge-diff-del[data-ge-gone-tail]::after { content: " "; }
+  ${GHOST_STYLE}
+  @media print { ::highlight(ge-diff-add) { background-color: transparent; text-decoration: none; } .ge-diff-del, .ge-diff-halo { display: none; } }
+`;
+
+const highlights = () => Boolean(globalThis.CSS?.highlights && globalThis.Highlight);
+const holdsSelection = (block) => {
+  const selection = getSelection();
+  return selection.rangeCount > 0 && (block.contains(selection.anchorNode) || block.contains(selection.focusNode));
+};
+
+/**
+ * slug, token: the map's; commits(), autosave(): the page's (made later than this); flush(): what
+ * waits saved now (as Ctrl+S); say(text, kind); session: sessionStorage (storage.mjs storageOf), where
+ * a revert's undo is kept over the page shown again; across: the selection across blocks (text-select/:
+ * texts(), redraw(texts)), kept on its words while marks go and come. Returns { start(),
+ * committed(receipt), leave() }.
+ */
+export function createChanges({ slug, token, commits, autosave, flush, say, session, across = null }) {
+  const undoKey = `gallery-edit:${slug}:changes-undo`;
+  const shows = () => preference("showChanges");
+  let review = null; // the review as last read and drawn: { stamp, counts, added, changed, removed }
+  let started = false;
+  let left = false;
+  let busy = false; // 撤回, 确认 or 撤销 under way
+  let reading = read(); // at once: the page's start does not wait for it
+  let rereadTimer = 0;
+  let keepTries = 0;
+  let offering = 0; // until when the bar offers 撤销 of this tab's revert
+  const filled = new Set(); // block elements filled green
+  const changedBlocks = new Map(); // a text block -> its words in the baseline
+  const added = new Map(); // a text block -> the ranges of its words added (the green highlight's)
+  let dels = []; // the words taken out shown: { node, block }
+  const edited = new Set(); // text blocks the reader edited since their words taken out were drawn
+  const ghosts = createGhosts();
+  let fills = null;
+  const bar = createBar({ revert: () => revert(), accept: () => keep() });
+
+  function read() {
+    return postAnswer(ROUTE, token, { slug, action: "read" });
+  }
+
+  // ---------- finding the blocks it names (in the file now) ----------
+  const unitOf = (id) => document.querySelector(`[data-ge-unit="${id}"]`);
+  const body = () => document.querySelector("main");
+  function find(ref) {
+    if (!ref) return null;
+    const main = body() ?? document;
+    if (ref.title) return main.querySelector('[data-ge-kind="title"]'); // the page's own title, as the editor made it a text block
+    if (ref.id) return main.querySelector(`[data-block-id="${CSS.escape(ref.id)}"]`);
+    if (typeof ref.hash !== "string") return null;
+    const list = commits();
+    if (!list) return null;
+    let nth = 0;
+    for (const node of main.querySelectorAll("[data-ge-unit]")) {
+      if (list.fileHash(Number(node.getAttribute("data-ge-unit"))) !== ref.hash) continue;
+      if (nth++ === ref.nth) return node;
+    }
+    return null;
+  }
+  // A unit's own text blocks in the page's order (the server's: its scope line's first, if a table's).
+  function ownBlocks(unit, ref) {
+    if (ref.title) return [unit];
+    const owner = (block) => {
+      const at = block.closest("[data-ge-unit], [data-ge-lead]");
+      return at?.hasAttribute("data-ge-lead") && !at.hasAttribute("data-ge-unit") ? unitOf(at.getAttribute("data-ge-lead")) : at;
+    };
+    const lead = document.querySelector(`[data-ge-lead="${unit.getAttribute("data-ge-unit")}"]`);
+    const within = (root) => [root, ...root.querySelectorAll("[data-ge-block]")].filter((block) => block.hasAttribute("data-ge-block") && owner(block) === unit);
+    return [...(lead && lead !== unit ? within(lead) : []), ...within(unit)];
+  }
+  // A text block's words as the server reads them: a list item's own, not the blocks it holds.
+  const readBlock = (block) => {
+    const held = nestedBlocks(block);
+    return readText([block], held.length ? { skip: (child) => held.includes(child) } : undefined);
+  };
+
+  // ---------- drawing ----------
+  const frames = task("changes", { run: place, fail: () => keepingAcross(takeDown) });
+  // A selection across blocks (text-select/) kept on its words while marks go and come: its ends are
+  // points of its own, which a text node joined again (takeMark) would leave off the page, and so its
+  // pieces' live ranges are taken first (a text node split, putMark, they follow; one joined, takeMark
+  // sets them) and it is drawn again from them.
+  function keepingAcross(change) {
+    const texts = across?.texts() ?? null;
+    change(texts ? texts.map(({ range }) => range) : []);
+    if (texts) across.redraw(texts);
+  }
+  function takeDown(ranges = []) {
+    fills?.clear();
+    for (const { node } of dels) if (node.isConnected) takeMark(node, ranges);
+    dels = [];
+    ghosts.clear();
+    filled.clear();
+    changedBlocks.clear();
+    added.clear();
+    if (highlights()) CSS.highlights.delete("ge-diff-add");
+  }
+
+  function draw() {
+    keepingAcross((ranges) => drawNow(ranges));
+  }
+  function drawNow(ranges) {
+    takeDown(ranges);
+    if (!review || !shows()) {
+      edited.clear();
+      return;
+    }
+    addStyle(STYLE);
+    fills ??= createFills({ kind: "changes", className: "ge-diff-halo", stands: (block) => filled.has(block) });
+    for (const { ref } of review.added) {
+      const unit = find(ref);
+      if (unit) filled.add(unit);
+    }
+    for (const change of review.changed) {
+      const unit = find(change.ref);
+      if (!unit) continue;
+      if (change.whole) {
+        filled.add(unit);
+        continue;
+      }
+      const blocks = ownBlocks(unit, change.ref);
+      for (const { nth, base } of change.texts ?? []) {
+        if (blocks[nth]) changedBlocks.set(blocks[nth], base);
+      }
+    }
+    // A block the reader edited keeps its words taken out away while the caret is in it.
+    for (const block of [...edited]) if (!changedBlocks.has(block) || !holdsSelection(block)) edited.delete(block);
+    for (const [block, base] of changedBlocks) markWords(block, base, !edited.has(block));
+    paintAdded();
+    for (const group of review.removed) {
+      const anchor = group.before ? find(group.before) : group.after ? find(group.after) : body();
+      if (anchor) ghosts.add(group, anchor, group.before ? "before" : group.after ? "after" : "into");
+    }
+    if (filled.size || added.size || dels.length || ghosts.count) frames.wake();
+  }
+
+  // A changed text block's marks: the ranges of its words added (live: they follow the reader's
+  // typing), and, `taken`, its words taken out put in where they were (from the last, so that each
+  // place read before is still where it was: a text node is split only after it).
+  function markWords(block, base, taken) {
+    const text = readBlock(block);
+    const { ins, cuts } = wordMarks(base, text.text);
+    added.set(block, ins.map(([from, to]) => rangeOf(text, from, to)).filter(Boolean));
+    if (!taken) return;
+    for (const { at, text: words } of [...cuts].reverse()) {
+      const where = placeOf(text, at);
+      if (!where) continue;
+      const node = goneMark(words, document, { before: text.text[at - 1], after: text.text[at] });
+      const entry = { node, block };
+      own(node, "changes", { owner: block, alive: () => block.contains(node) && dels.includes(entry) });
+      putMark(node, where);
+      dels.push(entry);
+    }
+  }
+
+  function paintAdded() {
+    if (!highlights()) return;
+    const ranges = [...added.values()].flat();
+    if (ranges.length === 0) return void CSS.highlights.delete("ge-diff-add");
+    const highlight = new Highlight(...ranges);
+    highlight.priority = -1; // a 批注's marks over these
+    CSS.highlights.set("ge-diff-add", highlight);
+  }
+
+  // Each frame something may have moved: the fills where their blocks are, the ghosts where their rooms are.
+  function place() {
+    if (!review) return false;
+    fills?.paint([...filled].filter((block) => block.isConnected));
+    ghosts.place();
+    return filled.size || ghosts.count ? FOLLOW : false;
+  }
+
+  // What the page's edits took off the page goes with it (a block deleted, its marks): the words taken
+  // out shown in a block deleted or turned into another are taken out of it too, so that undo, which
+  // puts the very same element back, puts back none of them.
+  // A copy of a mark that a change made (a cell turned into a header cell or back, cells merged or
+  // filled, a disclosure's title made a paragraph, a block duplicated: whatever clones a block's
+  // content) stands for nothing and goes at once, before the overlays' audit would find it a stray:
+  // the review read again after the change's commit draws the words taken out where they are then.
+  onSettle(() => {
+    const drawn = dels.length > 0;
+    for (const block of [...filled]) if (!block.isConnected) filled.delete(block);
+    dels = dels.filter((entry) => {
+      if (entry.block.isConnected && entry.node.isConnected) return true;
+      if (entry.node.parentNode) takeMark(entry.node);
+      return false;
+    });
+    if (drawn) {
+      const ours = new Set(dels.map((entry) => entry.node));
+      for (const node of document.querySelectorAll(`main ${GONE_WORDS}`)) if (!ours.has(node)) takeMark(node);
+    }
+    ghosts.settle();
+  });
+
+  // ---------- the reader edits a block holding words taken out ----------
+  // They go first, before the edit touches the block (window, capture: before the editor's own
+  // listeners): the text either side of each one text node again, the caret where it was, and the
+  // block's words added marked anew (a range that ended in the half that went would cover the wrong
+  // words). The block is `edited`: drawn without them until the caret leaves it.
+  // The blocks an edit may touch: the one it happens in, those the selection reaches, the browser's
+  // or the page's across blocks (text-select/, which the browser's then holds none of).
+  function blocksOf(event) {
+    const selection = getSelection();
+    const range = selection.rangeCount ? selection.getRangeAt(0) : null;
+    const target = event?.target instanceof Node ? event.target : null;
+    const reached = across?.texts()?.map(({ host }) => host) ?? [];
+    const hit = new Set();
+    for (const { block } of dels) {
+      if (hit.has(block)) continue;
+      if ((target && block.contains(target)) || (range && range.intersectsNode(block)) || reached.some((host) => host === block || host.contains(block) || block.contains(host))) hit.add(block);
+    }
+    return hit;
+  }
+  function takeOut(blocks) {
+    if (blocks.size === 0) return;
+    keepingAcross((ranges) => {
+      for (const entry of dels) if (blocks.has(entry.block) && entry.node.isConnected) takeMark(entry.node, ranges);
+    });
+    dels = dels.filter((entry) => !blocks.has(entry.block));
+    for (const block of blocks) {
+      edited.add(block);
+      const base = changedBlocks.get(block);
+      if (base !== undefined) markWords(block, base, false);
+    }
+    paintAdded();
+  }
+  function editing(event) {
+    if (dels.length === 0 || (event.type === "keydown" && !editsBy(event))) return;
+    takeOut(blocksOf(event));
+  }
+  // The format bar over words of such a block (its buttons keep the selection where it is).
+  function pressed(event) {
+    if (dels.length > 0 && event.target instanceof Element && event.target.closest(".ge-format")) takeOut(blocksOf(null));
+  }
+  // The caret left a block the reader edited: the review read again once what waits is saved, and drawn.
+  function moved() {
+    if (edited.size === 0) return;
+    let leaving = false;
+    for (const block of [...edited]) {
+      if (block.isConnected && holdsSelection(block)) continue;
+      edited.delete(block);
+      leaving = true;
+    }
+    if (leaving) rereadSaved(LEFT_AFTER);
+  }
+  for (const type of EDITS) addEventListener(type, editing, true);
+  addEventListener("pointerdown", pressed, true);
+  document.addEventListener("selectionchange", moved);
+
+  // ---------- what the server says ----------
+  function take(answer) {
+    if (left) return;
+    review = answer?.ok && answer.pending ? answer : null;
+    if (review && !shows()) return void keep({ quiet: true });
+    if (busy) return;
+    if (review) bar.counts(review.counts);
+    else if (Date.now() >= offering) bar.hide();
+    draw();
+  }
+  async function reread() {
+    clearTimeout(rereadTimer);
+    if (left || !started) return;
+    reading = read();
+    take(await reading);
+  }
+  // Read again `after` ms from now, once nothing waits to be saved (the reader paused).
+  function rereadSaved(after) {
+    clearTimeout(rereadTimer);
+    const again = () => {
+      if (autosave()?.state.waiting > 0) rereadTimer = setTimeout(again, REREAD_AFTER);
+      else reread();
+    };
+    rereadTimer = setTimeout(again, after);
+  }
+
+  // 确认: the review ended; `quiet`, as the setting being off does it (nothing said).
+  async function keep({ quiet = false } = {}) {
+    if (!review || busy) return;
+    const stamp = review.stamp;
+    busy = true;
+    review = null;
+    draw();
+    bar.hide();
+    const answer = await postAnswer(ROUTE, token, { slug, action: "accept", stamp });
+    busy = false;
+    if (answer.ok) {
+      keepTries = 0;
+      return;
+    }
+    // Refused (the review grew meanwhile, the file was held): read again, and kept again when quiet, a few times at most.
+    if (quiet) {
+      if (++keepTries > KEEP_TRIES) return;
+    } else if (answer.reason === "changed") say(failure(answer, t("Agent 刚刚又改了文档，再看一眼")), "note");
+    else say(t("没能确认：{0}", failure(answer, t("预览服务器出错"))), "error");
+    reread();
+  }
+
+  // 撤回: what waits is saved first, and nothing may wait for the reader (a conflict); then the server
+  // writes the baseline, and the page is shown again as after a write of its own (autosave showOwn: no
+  // question of what that write put back of the reader's, which the reader asked for).
+  async function revert() {
+    if (!review || busy) return;
+    const stamp = review.stamp;
+    busy = true;
+    await flush();
+    const state = autosave()?.state;
+    if (!state || state.waiting > 0 || state.syncing || state.held > 0 || state.offline) {
+      busy = false;
+      say(t("还有修改没保存或有冲突待处理，处理完再撤回"), "error");
+      return;
+    }
+    let answer = null;
+    const shown = await autosave().showOwn(async () => {
+      answer = await postAnswer(ROUTE, token, { slug, action: "revert", stamp });
+      if (!answer.ok || answer.none) return false;
+      session?.set(undoKey, JSON.stringify({ undo: answer.undo, at: Date.now() }));
+      return true;
+    });
+    if (shown) return; // the page goes: the one shown again offers 撤销
+    busy = false;
+    if (answer?.ok) return void reread(); // nothing was under review any more
+    say(answer?.reason === "changed" ? failure(answer, t("Agent 刚刚又改了文档，再看一眼")) : t("没能撤回：{0}", failure(answer ?? {}, t("预览服务器出错"))), answer?.reason === "changed" ? "note" : "error");
+    reread();
+  }
+
+  // 撤销 of a revert: the server writes back what the revert wrote over, while the file is still the revert's.
+  async function undo(id) {
+    if (busy) return;
+    busy = true;
+    offering = 0;
+    session?.remove(undoKey);
+    bar.hide();
+    await flush();
+    let answer = null;
+    const shown = await autosave().showOwn(async () => {
+      answer = await postAnswer(ROUTE, token, { slug, action: "undo", undo: id });
+      return Boolean(answer.ok);
+    });
+    if (shown) return;
+    busy = false;
+    say(t("没能撤销：{0}", failure(answer ?? {}, t("预览服务器出错"))), "error");
+  }
+
+  // A revert of this tab's, the page shown again since: 撤销 on the bar for what is left of UNDO_SHOWN.
+  function undoShown() {
+    let kept = null;
+    try { kept = JSON.parse(session?.get(undoKey) ?? "null"); } catch {}
+    const remaining = kept && typeof kept.undo === "string" ? UNDO_SHOWN - (Date.now() - kept.at) : 0;
+    if (remaining <= 0) {
+      session?.remove(undoKey);
+      return false;
+    }
+    offering = Date.now() + remaining;
+    bar.reverted(remaining, () => undo(kept.undo));
+    setTimeout(() => session?.remove(undoKey), remaining);
+    return true;
+  }
+
+  // The server's word that the review changed (another tab kept or reverted it, the Agent wrote more).
+  const heard = () => {
+    clearTimeout(rereadTimer);
+    rereadTimer = setTimeout(reread, 100);
+  };
+  addEventListener("doc-changes-changed", heard);
+  // 显示变更 switched (设置, another page of the origin): off, what is under review is kept and nothing drawn; on, read again.
+  onPreferences(() => {
+    if (!started || left) return;
+    if (!shows()) {
+      if (review) keep({ quiet: true });
+      return;
+    }
+    reread();
+  });
+
+  provide("changes", () => ({ pending: Boolean(review), counts: review?.counts ?? null, filled: filled.size, words: dels.length, ghosts: ghosts.count, edited: edited.size }));
+
+  return {
+    /** The page is ready: what was read is drawn (the bar, or 撤销 after a revert of this tab's). */
+    async start() {
+      if (started) return;
+      started = true;
+      undoShown();
+      take(await reading);
+    },
+    /** A commit of the page's was taken in: while the bar shows, the review is read again once the reader pauses. */
+    committed(receipt) {
+      if (!receipt?.wrote || !review || !started) return;
+      rereadSaved(REREAD_AFTER);
+    },
+    /** The page goes. */
+    leave() {
+      left = true;
+      clearTimeout(rereadTimer);
+      removeEventListener("doc-changes-changed", heard);
+      for (const type of EDITS) removeEventListener(type, editing, true);
+      removeEventListener("pointerdown", pressed, true);
+      document.removeEventListener("selectionchange", moved);
+    },
+  };
+}

package/browser/editor/page/changes/words.mjs

@@ -0,0 +1,27 @@
+import { wordDiff } from "../merge.mjs";
+
+// The words an Agent changed in a text block, as the page marks them (docs/editor.md "Agent's
+// changes"): the word diff of the block's text in the baseline against its text on the page
+// (merge.mjs wordDiff), as places in the page's text.
+
+/**
+ * What `now` (the block's text on the page) has that `base` did not and where `base`'s words were
+ * taken out of it: { ins: [[from, to]] (ranges of `now`), cuts: [{ at, text }] (a place in `now`,
+ * what was taken out there; one where several runs meet) }.
+ */
+export function wordMarks(base, now) {
+  const ins = [];
+  const cuts = [];
+  let at = 0;
+  for (const { tag, text } of wordDiff(base, now)) {
+    if (tag === "del") {
+      const last = cuts.at(-1);
+      if (last?.at === at) last.text += text;
+      else cuts.push({ at, text });
+      continue;
+    }
+    if (tag === "ins") ins.push([at, at + text.length]);
+    at += text.length;
+  }
+  return { ins, cuts };
+}

package/browser/editor/page/clipboard/import/colors.mjs

@@ -1,8 +1,8 @@
 // Pasted colors onto the page's nine (feishu-lite model/color-match.ts and css-color.ts, after Feishu
 // 855470 · bn / mG / WW, 99121 · FB, 768176 CIEDE2000; Notion keeps only its own colors). Pure, no
 // DOM. A color is given as the CSS text of a style (named, #hex, rgb[a](), hsl[a]()).
-//   exact     a color equal to one of the page's (the kit's light values, doc-text-* and
-//             doc-highlight-*) is that one: what a page whose styles are not meant (any web page)
+//   exact     a color equal to one of the page's (the kit's light values: doc-text-*, and
+//             doc-highlight-* as a block's fill or a run of words') is that one: what a page whose styles are not meant (any web page)
 //             keeps
 //   nearest   for sources whose styles are meant (Word, Google Docs, Notion): text — too dark (HSV
 //             v ≤ 0.3) none, unsaturated (s < 0.08) gray, a pure CSS color by a fixed table, else the
@@ -14,7 +14,7 @@ import { BODY, COLORS } from "../../../../shared/colors.mjs";
 
 // The page's light values (src/shared/colors.mjs).
 const TEXT = COLORS.map(({ name, text }) => [name, text[0]]);
-const BACKGROUND = COLORS.map(({ name, fill }) => [name, fill[0]]);
+const BACKGROUND = COLORS.flatMap(({ name, fill, mark }) => [[name, fill[0]], [name, mark[0]]]);
 const BODY_TEXT = BODY.text[0];
 const BODY_BACKGROUND = BODY.background[0];
 

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

@@ -32,7 +32,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
@@ -75,7 +75,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 +86,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.
@@ -261,13 +261,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 +301,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.
@@ -632,7 +651,7 @@ 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;
     if (files?.length > 0 && !ownData(data)) {
@@ -681,7 +700,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);

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

@@ -1,7 +1,7 @@
 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";
@@ -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;
@@ -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);
 }