@heycys/gallery 0.1.0 → 0.1.2

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 answer.version || true; // the version it wrote: the page shown again on another asks what that put back
+    });
+    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 answer.ok ? answer.version || true : false;
+    });
+    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/import/html.mjs

@@ -332,7 +332,11 @@ function equationOf(el) {
   return el.getAttribute(ATTR.equation) || el.getAttribute(ATTR.inlineEquation) || annotation || /^\$\$([\s\S]+?)\$\$\s*$/.exec(text)?.[1].trim() || /^\$([\s\S]+?)\$$/.exec(text)?.[1].trim();
 }
 
-function richTextOf(node, { stripText = false, stripSurroundingWhitespace = false, ignoreCodeBlock = false, preserveLineBreaks = false } = {}) {
+// Besides Notion's: a picture in a table's cell (`pictures`) is a token of its own, PICTURE annotated
+// ["img", its address, its alt, "", its width] (inline.mjs's pieces, the width of an <img width>), which
+// a cell of the page shows (to-blocks.mjs richHtml).
+const PICTURE = String.fromCodePoint(0xfffc);
+function richTextOf(node, { stripText = false, stripSurroundingWhitespace = false, ignoreCodeBlock = false, preserveLineBreaks = false, pictures = false } = {}) {
   const doc = node.ownerDocument;
   if (!stripText) {
     // Paragraphs, headings and items as lines with their bullets (the structure kept in one text).
@@ -354,17 +358,18 @@ function richTextOf(node, { stripText = false, stripSurroundingWhitespace = fals
     all.push(n);
     for (const child of n.childNodes) walk(child);
   })(node);
-  const nodes = all.filter((n) => (n.nodeType !== 3 ? preserveLineBreaks && tagOf(n) === "br" : !(stripText && BLANK_LINES.test(n.data))));
+  const picture = (n) => pictures && tagOf(n) === "img" && Boolean(n.getAttribute("src"));
+  const nodes = all.filter((n) => (n.nodeType !== 3 ? (preserveLineBreaks && tagOf(n) === "br") || picture(n) : !(stripText && BLANK_LINES.test(n.data))));
   const tokens = [];
   const seenEquations = new Set();
   nodes.forEach((n, i) => {
-    let text = n.nodeType === 3 ? n.data : "\n";
+    let text = n.nodeType === 3 ? n.data : picture(n) ? PICTURE : "\n";
     if (stripText) text = text.replace(/\[ \] /g, "").replace(/\[x\] /g, "").replace(/^[-*•]\s?/g, "").replace(/(\s)+/g, "$1");
     if (i === 0 && stripSurroundingWhitespace && !node.hasAttribute?.("confluenceTabSpaces")) text = text.trimStart();
     text = clean(text);
     if (i === nodes.length - 1 && stripSurroundingWhitespace) text = text.trimEnd();
     const up = ancestors(n).filter((a) => a.nodeType === 1);
-    const annotations = [];
+    const annotations = picture(n) ? [["img", n.getAttribute("src"), n.getAttribute("alt") ?? "", "", n.getAttribute("width") ?? ""]] : [];
     if (!stripText && up.some((a) => HEADINGS.includes(tagOf(a)))) annotations.push(["b"]);
     if (up.some((a) => tagOf(a) === "strong")) annotations.push(["b"]);
     if (up.some((a) => tagOf(a) === "em")) annotations.push(["i"]);
@@ -526,7 +531,8 @@ const int = (value, fallback) => {
 };
 
 // 760354 table: row and column spans spread into empty cells; a first row all th a header row, every
-// row starting with a th a header column (both: the side with more th's).
+// row starting with a th a header column (both: the side with more th's). Its cells' pictures kept
+// (richTextOf `pictures`, besides Notion's).
 function tableBlock(node) {
   const rows = [...node.querySelectorAll("tr")].filter((row) => row.closest("table") === node);
   let headerRow = false;
@@ -550,7 +556,7 @@ function tableBlock(node) {
       while (taken[r][c]) c++;
       const rowSpan = int(cell.getAttribute("rowspan"), 1);
       const colSpan = int(cell.getAttribute("colspan"), 1);
-      grid[r][c] = richTextOf(cell, { stripSurroundingWhitespace: true, preserveLineBreaks: true });
+      grid[r][c] = richTextOf(cell, { stripSurroundingWhitespace: true, preserveLineBreaks: true, pictures: true });
       taken[r][c] = true;
       for (let dr = 0; dr < rowSpan && r + dr < rows.length; dr++) {
         for (let dc = 0; dc < colSpan; dc++) {
@@ -716,6 +722,23 @@ function blockOf(node) {
 
 const blocksOf = (nodes) => nodes.flatMap(blockOf);
 
+/**
+ * Besides Notion's (another program's cells pasted into a table's: page/clipboard/ cellsOf): the
+ * HTML's table, when it holds one and no words outside it, as rows of rich text, its cells' as
+ * tableBlock reads them (spans spread into empty cells, pictures kept); a table of one column stays
+ * one (normalizing makes Notion's paragraphs of it). Null for anything else.
+ */
+export function tableRows(root, options = {}) {
+  const tables = [...root.querySelectorAll("table")].filter((table) => !table.parentElement?.closest("table"));
+  const outside = (n) => (n.nodeType === 3 ? n.data.trim() !== "" : n.nodeType === 1 && tagOf(n) !== "table" && !REMOVED.has(tagOf(n)) && [...n.childNodes].some(outside));
+  if (tables.length !== 1 || [...root.childNodes].some(outside)) return null;
+  tables[0].classList.add("simple-table"); // kept a table (firstPass)
+  normalizeHTML(root, { ...options, inline: false });
+  const table = root.querySelector("table");
+  const block = table ? tableBlock(table) : null;
+  return block ? block.children.map((row) => block.props.table_block_column_order.map((column) => row.props.cells[column] ?? [])) : null;
+}
+
 // ---------- entry points ----------
 
 /** 760354 U: the HTML's blocks. */

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

@@ -27,8 +27,14 @@
 //   and a bare a@b.c (GFM's); $$…$$ amid words a display formula (annotated display too, which
 //   markdown.mjs makes a block of its own in a paragraph).
 // Besides Notion's annotations, these three: sup (superscript), sub (subscript) and display.
+//
+// Yuque's Markdown (its toolbar's 复制为 Markdown, read as a whole document with `yuque`: yuque.mjs)
+// reads two more: a formula as Yuque writes one, $ … $ with a space inside each $ (Pandoc's rule
+// refuses those), and the colors of a <font style="color: …; background-color: …"> (or a <span> so
+// styled) as the page's nearest (colors.mjs: Yuque's colors are meant, as Word's are).
 
 import { addressOf } from "../../links/address.mjs";
+import { backgroundColor, textColor } from "./colors.mjs";
 
 const WORD = /[\p{L}\p{N}]/u;
 const TRAILING = /[.,:;!?'")\]}>，。：；！？、）】」』]+$/u;
@@ -100,6 +106,20 @@ const attribute = (tag, name) => {
 };
 const decodeEntities = (text) => text.replace(/&(#\d{1,7}|#[xX][0-9a-fA-F]{1,6}|[A-Za-z][A-Za-z0-9]{1,31});/g, (all, name) => entity(name) ?? all);
 
+// Yuque's Markdown: $ … $ with a space inside each $ a formula (its words trimmed), and a <font> or
+// <span> whose style colors its words those colors, the nearest of the page's (none: its words alone).
+const styleValue = (style, name) => new RegExp(`(?:^|;)\\s*${name}\\s*:\\s*([^;]+)`, "i").exec(style ?? "")?.[1].trim() ?? "";
+const YUQUE_RULES = [
+  [/^\$ +([^$\n]*?[^\s$]) +\$(?!\d)/, (m) => ["⁍", ["e", m[1]], false]],
+  [/^<(font|span)\s([^<>]*)>([\s\S]*?)<\/\1\s*>/i, (m) => {
+    const style = attribute(`<${m[1]} ${m[2]}>`, "style");
+    const text = textColor(styleValue(style, "color"), { nearest: true });
+    const background = backgroundColor(styleValue(style, "background(?:-color)?"), { nearest: true });
+    const colors = [text, background].filter(Boolean).map((name) => ["h", name]);
+    return [m[3], colors.length ? colors : null, true];
+  }],
+];
+
 /** A picture's piece: U+FFFC annotated ["img", its address, its alt, its title]. */
 const picture = (src, alt, title) => ["\u{FFFC}", ["img", src.replace(/^<|>$/g, ""), alt ?? "", title ?? ""], false];
 const unquoted = (text) => (text ? text.slice(1, -1) : "");
@@ -123,6 +143,7 @@ function documentRules(doc) {
     }
   };
   const rules = [
+    ...(doc.yuque ? YUQUE_RULES : []),
     RULES[0], RULES[1],
     // $$ … $$ amid words: a display formula (markdown.mjs makes it a block of its own in a paragraph).
     [/^\$\$(.+?)\$\$/, (m) => ["⁍", [["e", m[1].trim()], ["display"]], false]],
@@ -185,6 +206,17 @@ export const parseInlineMath = (text) => parseInline(text, MATH_RULES);
  */
 export const parseInlineMarkdown = (text, doc = null) => parseInline(text, doc ? (doc.rules ??= documentRules(doc)) : RULES); // a document's made once
 
+// A table cell's pictures, a linked one's too (its link left: the cell's picture is what it shows),
+// ahead of Notion's rules (a paste's Markdown table: 单元格里的图片, which a cell holds).
+const CELL_RULES = [
+  [new RegExp(String.raw`^\[!\[([^\]]*)\]${LINK_TARGET}\]${LINK_TARGET}`), (m) => picture(m[2], m[1], unquoted(m[3]))],
+  [new RegExp(String.raw`^!\[([^\]]*)\]${LINK_TARGET}`), (m) => picture(m[2], m[1], unquoted(m[3]))],
+  ...RULES,
+];
+
+/** A pasted Markdown table's cell as rich text: Notion's rules, and its pictures ![alt](src) (inline.mjs's picture pieces). */
+export const parseCellMarkdown = (text) => parseInline(text, CELL_RULES);
+
 /** HTML entities in text as their characters (&amp; &#8212;), one it does not know as written. */
 export { decodeEntities };