@heycys/gallery 0.1.1 → 0.1.2

package/browser/editor/page/board/settings.mjs

@@ -0,0 +1,209 @@
+import { Z } from "../../../shared/layers.mjs";
+import { language, t } from "../../../shared/i18n/index.mjs";
+import { createMenu } from "../menu.mjs";
+import { placeBox } from "../placement.mjs";
+import { addStyle, button, element, mount } from "../ui.mjs";
+
+// A card's 设置… (docs/render.md "A custom page"): a small form of the fields its block's manifest
+// lists (`settings`: text, number, select, date, switch, document), Notion's popup look (the editor's
+// palette, look.mjs), standing under the card's grip (its right edge at the grip's). What it shows is what the card's settings part holds,
+// each field its manifest's default where it holds none; 保存 (or Enter in a field) hands the values
+// that changed to `save`, 取消, Escape or a press outside it nothing. Its buttons are the editor's flat
+// ones (CLAUDE.md 界面): no line round either, 取消 with no fill until the pointer is on it (grey), 保存 on
+// a pale blue fill of its own. A document is chosen from the
+// workspace's documents by title (the workbench's outline: GET /__gallery/workspace/outline, its web
+// links no documents), the slug what is kept. A choice from a list (select, document) is a field that
+// opens the editor's own menu card under it (menu.mjs: rows, the chosen one checked, ↑/↓ Enter Escape from
+// the field), not a native <select>: the page cannot style that one's popup, which a browser draws in
+// the system's colours (a white list with pale words in a dark page, the user's picture of 2026-11-09).
+// While the form stands, the page is not shown again under it (the board's idle).
+
+const STYLE = `
+  .ge-board-form { position: fixed; left: 0; top: 0; z-index: ${Z.menu}; box-sizing: border-box; width: 300px; max-height: calc(100vh - 24px); overflow-y: auto; padding: 12px 12px 10px;
+    border-radius: 10px; background: var(--ge-bg); color: var(--ge-tx); box-shadow: var(--ge-shadow-pop);
+    font: 14px/1.4 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "PingFang SC", "Microsoft YaHei", Arial, sans-serif; }
+  .ge-board-form-title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 600; }
+  .ge-board-form-title small { min-width: 0; overflow: hidden; color: var(--ge-tx3); font-size: 12px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
+  .ge-board-field { display: block; margin: 0 0 10px; }
+  .ge-board-field > span { display: block; margin: 0 0 4px; color: var(--ge-tx2); font-size: 12px; }
+  .ge-board-field :is(input, .ge-board-pick) { box-sizing: border-box; width: 100%; height: 28px; margin: 0; padding: 0 8px; border: 0; border-radius: 6px; outline: none;
+    background: var(--ge-field); color: var(--ge-tx); font: inherit; box-shadow: inset 0 0 0 1px var(--ge-edge); }
+  .ge-board-field :is(input, .ge-board-pick):focus, .ge-board-pick[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--ge-focus), 0 0 0 2px var(--ge-halo); }
+  .ge-board-pick { display: flex; align-items: center; gap: 6px; text-align: left; cursor: pointer; }
+  .ge-board-pick-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .ge-board-pick svg { flex: none; display: block; width: 16px; height: 16px; fill: none; stroke: var(--ge-tx3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+  .ge-board-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
+  .ge-board-switch > span { color: var(--ge-tx); font-size: 14px; }
+  .ge-board-switch button { position: relative; flex: none; width: 30px; height: 18px; padding: 0; border: 0; border-radius: 9px; background: var(--ge-line-strong); cursor: pointer; transition: background .12s; }
+  .ge-board-switch button::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(15 15 15 / 20%); transition: transform .12s; }
+  .ge-board-switch button[aria-checked="true"] { background: var(--ge-accent); }
+  .ge-board-switch button[aria-checked="true"]::after { transform: translateX(12px); }
+  .ge-board-switch button:focus-visible { outline: 2px solid var(--ge-halo); }
+  .ge-board-form-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
+  .ge-board-form-foot button { height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--ge-tx); font: inherit; cursor: pointer; }
+  .ge-board-form-foot button:hover { background: var(--ge-hover); }
+  .ge-board-form-foot button[data-primary] { background: var(--ge-btn-primary); color: var(--ge-btn-primary-text); }
+  .ge-board-form-foot button[data-primary]:hover { background: var(--ge-btn-primary-hover); }
+  .ge-board-form-foot button:focus-visible { outline: 2px solid var(--ge-halo); }
+  @media (prefers-reduced-motion: reduce) { .ge-board-switch :is(button, button::after) { transition: none; } }
+`;
+
+const CHEVRON = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="m4 6 4 4 4-4"/></svg>';
+const said = (words) => (typeof words === "string" ? words : words?.[language] ?? words?.zh ?? words?.en ?? "");
+let shown = null; // the form standing now: { node, close }
+
+/** Whether the form stands now. */
+export const formOpen = () => shown !== null;
+
+/** The workspace's documents, by title: [{ slug, title }] (none where the outline cannot be read). */
+async function documents() {
+  try {
+    const answer = await (await fetch("/__gallery/workspace/outline")).json();
+    return Object.values(answer.reports ?? {}).filter((report) => !report.instructions && report.kind !== "link").map(({ slug, title }) => ({ slug, title: title || slug }))
+      .sort((a, b) => a.title.localeCompare(b.title, "zh-CN"));
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * The form for a card: `fields`, its manifest's settings; `values`, what its settings part holds;
+ * `name`, its block's name; `anchor`, the rect it stands by; `save(changed)`, the values that changed
+ * by key. Closes another that stands.
+ */
+export async function openSettings({ fields, values, name, anchor, save }) {
+  addStyle(STYLE);
+  shown?.close();
+  const kinds = new Map();
+  const pick = createMenu(); // the list of the field being chosen from (one at a time)
+  let picking = null; // the field it stands under
+  const node = element("form", { class: "ge-board-form", role: "dialog", "aria-label": t("卡片设置"), novalidate: "" });
+  node.append(element("div", { class: "ge-board-form-title" }, element("span", { text: t("设置") }), element("small", { text: said(name) })));
+  const listed = fields.some((field) => field.type === "document") ? await documents() : [];
+  const now = (field) => (Object.hasOwn(values ?? {}, field.key) ? values[field.key] : field.default);
+  for (const field of fields) {
+    const label = said(field.label) || field.key;
+    const value = now(field);
+    if (field.type === "switch") {
+      const toggle = element("button", { type: "button", role: "switch", "aria-checked": String(value === true), "aria-label": label, "data-key": field.key });
+      toggle.addEventListener("click", () => toggle.setAttribute("aria-checked", String(toggle.getAttribute("aria-checked") !== "true")));
+      node.append(element("div", { class: "ge-board-switch" }, element("span", { text: label }), toggle));
+      kinds.set(field.key, { field, read: () => toggle.getAttribute("aria-checked") === "true" });
+      continue;
+    }
+    let control;
+    const choice = field.type === "select" || field.type === "document"; // chosen from a list
+    if (choice) {
+      const options = field.type === "select" ? field.options.map((option) => [String(option), String(option)]) : [["", t("（未选择）")], ...listed.map(({ slug, title }) => [slug, title])];
+      if (field.type === "document" && value && !listed.some(({ slug }) => slug === value)) options.push([String(value), String(value)]);
+      const text = element("span", { class: "ge-board-pick-text" });
+      control = element("button", { type: "button", class: "ge-board-pick", "data-key": field.key, "aria-haspopup": "menu", "aria-expanded": "false" }, text, element("span", { html: CHEVRON }));
+      // What the field holds is its `value` (the key of an option), shown as the option's words.
+      const show = (key) => {
+        control.value = key;
+        text.textContent = options.find(([option]) => option === key)?.[1] ?? key;
+      };
+      show(value === undefined || value === null ? (field.type === "select" ? String(field.options[0]) : "") : String(value));
+      const open = () => {
+        const wide = control.getBoundingClientRect();
+        picking = control;
+        control.setAttribute("aria-expanded", "true");
+        pick.open(options.map(([key, words]) => ({ label: words, selected: key === control.value, run: () => show(key) })), wide, {
+          label, width: Math.round(wide.width), icons: false, height: 280,
+          onClose: () => { if (picking === control) picking = null; control.setAttribute("aria-expanded", "false"); },
+        });
+        // The chosen row highlighted where there is one (the first otherwise: the menu's own).
+        const chosen = options.findIndex(([key]) => key === control.value);
+        for (let step = 0; step < Math.max(0, chosen); step++) pick.move(1);
+      };
+      control.addEventListener("click", () => { if (picking === control) pick.close(); else open(); });
+      control.addEventListener("keydown", (event) => {
+        if (event.isComposing || event.keyCode === 229) return;
+        if (picking !== control) {
+          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            open();
+          }
+          return;
+        }
+        if (pick.arrow(event)) event.preventDefault();
+        else if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          pick.choose();
+        } else if (event.key === "Escape") {
+          event.preventDefault();
+          event.stopPropagation(); // the list closes; the form stays
+          pick.close();
+        } else if (event.key === "Tab") pick.close();
+      });
+    } else {
+      control = element("input", { type: field.type === "number" ? "number" : field.type === "date" ? "date" : "text", "data-key": field.key, autocomplete: "off" });
+      control.value = value === undefined || value === null ? "" : String(value);
+    }
+    // A field to choose from is no <label> (a click on its words would open its list): its words name it by aria-labelledby.
+    const words = element("span", { text: label });
+    if (choice) {
+      words.id = `ge-board-label-${field.key}`;
+      control.setAttribute("aria-labelledby", words.id);
+    }
+    node.append(element(choice ? "div" : "label", { class: "ge-board-field" }, words, control));
+    kinds.set(field.key, {
+      field,
+      read: () => {
+        if (field.type === "number") return control.value.trim() === "" ? null : Number(control.value);
+        if (field.type === "select") return field.options.find((option) => String(option) === control.value) ?? field.options[0];
+        return control.value;
+      },
+    });
+  }
+  const close = () => {
+    if (shown?.node !== node) return;
+    shown = null;
+    pick.close();
+    node.remove();
+    removeEventListener("pointerdown", outside, true);
+  };
+  // What a field showed as it opened, as it reads it back (a field the part holds nothing of shows its default, or nothing).
+  const shownAt = (field) => now(field) ?? (field.type === "switch" ? false : field.type === "select" ? field.options[0] : field.type === "number" ? null : "");
+  // Only what the reader changed goes: a field left as it showed stays as the part holds it (its default unwritten).
+  const done = () => {
+    const changed = {};
+    for (const [key, { field, read }] of kinds) {
+      const value = read();
+      if (field.type === "number" && value !== null && !Number.isFinite(value)) continue;
+      if (JSON.stringify(value) !== JSON.stringify(shownAt(field))) changed[key] = value;
+    }
+    close();
+    if (Object.keys(changed).length) save(changed);
+  };
+  const outside = (event) => {
+    if (!node.contains(event.target) && !pick.contains(event.target)) close();
+  };
+  node.addEventListener("submit", (event) => {
+    event.preventDefault();
+    done();
+  });
+  node.addEventListener("keydown", (event) => {
+    if (event.isComposing || event.keyCode === 229) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      close();
+    } else if (event.key === "Enter" && event.target.localName === "input") {
+      event.preventDefault();
+      done();
+    }
+  });
+  node.append(element("div", { class: "ge-board-form-foot" }, button(t("取消"), close), element("button", { type: "submit", "data-primary": "", text: t("保存") })));
+  mount(node);
+  const { left, top } = placeBox(anchor, { width: node.offsetWidth, height: node.offsetHeight }, { placement: "bottom", align: "end", gap: 6 });
+  node.style.left = `${Math.round(left)}px`;
+  node.style.top = `${Math.round(top)}px`;
+  shown = { node, close };
+  addEventListener("pointerdown", outside, true);
+  node.querySelector("input, .ge-board-pick, button[role=switch]")?.focus({ preventScroll: true });
+  return node;
+}
+
+/** The form taken away, whatever it holds. */
+export const closeSettings = () => shown?.close();

package/browser/editor/page/caret.mjs

@@ -105,7 +105,7 @@ export function caretAtOffset(host, offset) {
     rest -= node.length;
     last = node;
   }
-  if (last) caretAt(host, "end");
+  caretAt(host, last ? "end" : "start"); // past its text, or in a block with none (emptied)
 }
 
 /** The selection when it is non-empty and inside a single block: { host, range }, or null. */

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

@@ -1,13 +1,14 @@
 import { t } from "../../../shared/i18n/index.mjs";
 import { Z } from "../../../shared/layers.mjs";
 import { PANEL_STYLE, onPanels, panelGone, panelShown } from "../panel.mjs";
-import { addStyle, button, element, fadeIn, fadeOut, mount } from "../ui.mjs";
+import { addStyle, element, fadeIn, fadeOut, mount, textButton } from "../ui.mjs";
 
 // The bar of the Agent's changes (docs/editor.md "Agent's changes"), Cursor's review bar: the third of
 // the editor's bottom panels (panel.mjs), in the middle of the window's bottom, so that a notice
 // stands above it as above the others. It says how many blocks the Agent added and changed (+) and
 // changed and deleted (−), the numbers in the conflict card's green and red, and offers 撤回 and 确认
-// (the primary one), buttons with no border, as the format bar's. Reverted, it says so and offers
+// (the primary one: the pale blue), in the editor's one button look (look.mjs BUTTONS: no line, no fill
+// until the pointer is on it). Reverted, it says so and offers
 // 撤销 for UNDO_SHOWN. A conflict card at the left or the lost texts at the right reaching under it
 // lift it 8px above them.
 
@@ -21,15 +22,6 @@ const STYLE = `
   .ge-changes-count { display: inline-flex; gap: 6px; margin-right: 4px; font-variant-numeric: tabular-nums; font-weight: 500; }
   .ge-changes-plus { color: var(--ge-diff-add-text); }
   .ge-changes-minus { color: var(--ge-diff-del-text); }
-  /* Its buttons as the editor's floating bars' (the format bar's 转换为): no border, 6px corners, a gray under the
-     pointer, darker pressed; 确认 the primary blue (the workbench dialog's, the media menu's 嵌入链接). */
-  .ge-changes button { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background 20ms ease-in; }
-  .ge-changes button:hover:not(:disabled) { background: var(--ge-hover); }
-  .ge-changes button:active:not(:disabled) { background: var(--ge-press); }
-  .ge-changes button[data-primary] { background: var(--ge-accent); color: #fff; }
-  .ge-changes button[data-primary]:hover:not(:disabled) { background: var(--ge-accent-hover); }
-  .ge-changes button[data-primary]:active:not(:disabled) { background: var(--ge-accent-press); }
-  .ge-changes button:disabled { opacity: .45; cursor: default; }
   @media print { .ge-changes { display: none; } }
 `;
 
@@ -80,15 +72,15 @@ export function createBar({ revert, accept }) {
         element("span", { class: "ge-changes-count", title: t("Agent 新增 {0} 块、改动 {1} 块、删除 {2} 块", added, changed, removed) },
           ...(plus ? [element("span", { class: "ge-changes-plus", text: `+${plus}` })] : []),
           ...(minus ? [element("span", { class: "ge-changes-minus", text: `−${minus}` })] : [])),
-        button(t("撤回"), revert, { title: t("撤回 Agent 的这些修改，你自己的修改会保留"), "data-action": "revert" }),
-        button(t("确认"), accept, { primary: true, title: t("保留这些修改，不再标出"), "data-action": "accept" }),
+        textButton(t("撤回"), revert, { title: t("撤回 Agent 的这些修改，你自己的修改会保留"), "data-action": "revert" }),
+        textButton(t("确认"), accept, { primary: true, title: t("保留这些修改，不再标出"), "data-action": "accept" }),
       );
     },
     // Reverted `left` ms ago at most: 撤销 offered until UNDO_SHOWN is over.
     reverted(left, undo) {
       show(
         element("span", { class: "ge-changes-what", text: t("已撤回 Agent 的修改") }),
-        button(t("撤销"), undo, { "data-action": "undo" }),
+        textButton(t("撤销"), undo, { "data-action": "undo" }),
       );
       timer = setTimeout(() => this.hide(), Math.max(0, left));
     },

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

@@ -361,7 +361,7 @@ export function createChanges({ slug, token, commits, autosave, flush, say, sess
       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;
+      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;
@@ -381,7 +381,7 @@ export function createChanges({ slug, token, commits, autosave, flush, say, sess
     let answer = null;
     const shown = await autosave().showOwn(async () => {
       answer = await postAnswer(ROUTE, token, { slug, action: "undo", undo: id });
-      return Boolean(answer.ok);
+      return answer.ok ? answer.version || true : false;
     });
     if (shown) return;
     busy = false;

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 };
 

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

@@ -1,5 +1,6 @@
+import { CELL_ALIGN_CLASSES } from "../../../../shared/components/table.mjs";
 import { languageFromFence } from "./languages.mjs";
-import { decodeEntities, parseInlineMarkdown, unescapeMarkdown } from "./inline.mjs";
+import { decodeEntities, parseCellMarkdown, parseInlineMarkdown, unescapeMarkdown } from "./inline.mjs";
 import { spec } from "./rich.mjs";
 
 // Markdown and plain text as block specs (notion-lite editor/input/clipboard/parse.js). Notion
@@ -52,8 +53,9 @@ import { spec } from "./rich.mjs";
 //               which holds paragraphs alone, noted; GitHub's alerts (> [!NOTE], [!TIP],
 //               [!IMPORTANT], [!WARNING], [!CAUTION]) callouts
 //   pictures    a paragraph's pictures blocks of their own, the text around them paragraphs; an
-//               item's blocks it holds; elsewhere (a heading, a cell, a disclosure's title) a
-//               picture of the web a link, any other its alt text, noted
+//               item's blocks it holds; a table cell's its own, amid its words (单元格里的图片: the
+//               import makes each a file of the page's, transfer/import.mjs); elsewhere (a heading,
+//               a disclosure's title) a picture of the web a link, any other its alt text, noted
 //   HTML        <details><summary> … </details> a toggle, its blocks read as Markdown; an HTML block
 //               of pictures alone (<p align="center"><img …></p>, a link around them) its picture
 //               blocks, of an <hr> a divider, of line breaks or empty tags nothing; any other HTML
@@ -71,6 +73,18 @@ import { spec } from "./rich.mjs";
 // `firstLine`): `notes` [{ line, kind, text }]; what the import tries or looks for afterwards is
 // returned with its line too: the formulas (`formulas`, KaTeX draws them or not) and the links to
 // addresses that are no web ones (`links`: a file beside the document, a place in it).
+//
+// Yuque's Markdown (`yuque`: its toolbar's 复制为 Markdown, which yuque.mjs reads so; never the
+// import's) is that, and what Yuque writes besides:
+//   :::info … :::  its 提示 (info, tips, success, warning, danger, color1–5; up to a line of ::: alone),
+//               a spec { type: "report_callout", props: { alert } } of the blocks between
+//   HTML        every HTML block a spec { type: "html", props: { html } } (yuque.mjs reads it as the
+//               paste reads HTML: a picture's alt is no caption, Yuque's being a file's name)
+//   tables      a row of more cells than its header's (Yuque writes a | in a cell as it is) its cells
+//               past the header's last one that one's, joined by |; the delimiter row's alignments
+//               each cell's (props.looks: doc-align-left / center / right)
+//   code        a ```mermaid fence code, never a flow
+//   inline      inline.mjs's: $ … $ with spaces inside, <font style> colors
 
 // A callout's first line: an emoji first is its icon, then its text.
 const EMOJI = /^(\p{Extended_Pictographic}(?:[\u{FE0F}\u{200D}\u{1F3FB}-\u{1F3FF}]|\p{Extended_Pictographic})*)\s*/u;
@@ -81,14 +95,23 @@ function callout(head, children, inline = parseInlineMarkdown) {
   return spec("callout", [], match ? { icon: match[1] } : {}, blocks.length ? blocks : [spec("text")]);
 }
 
-/** A table spec of rows of rich text (columns c0, c1, …). */
-export function tableSpec(rows, header) {
+/** A table spec of rows of rich text (columns c0, c1, …); `looks`, each column's look of its cells (a class, or none); `lines`: each row's line in a document (what the import notes of its pictures is at it). */
+export function tableSpec(rows, header, looks = [], lines = null) {
   const width = Math.max(1, ...rows.map((row) => row.length));
   const columns = Array.from({ length: width }, (_, i) => `c${i}`);
+  const looked = Object.fromEntries(columns.map((column, i) => [column, looks[i]]).filter(([, look]) => look));
   return spec("table", [], { table_block_column_order: columns, table_block_column_format: {}, table_block_column_header: header, table_block_row_header: false },
-    rows.map((row) => spec("table_row", [], { cells: Object.fromEntries(row.map((cell, i) => [columns[i], cell])) })));
+    rows.map((row, index) => spec("table_row", [], { cells: Object.fromEntries(row.map((cell, i) => [columns[i], cell])), ...(Object.keys(looked).length ? { looks: looked } : {}), ...(lines ? { line: lines[index] } : {}) })));
 }
 
+// A delimiter row's cell's alignment (:--, :-:, --:) as a cell's look (the table's classes: left,
+// center, right), or null.
+const [LEFT, CENTER, RIGHT] = CELL_ALIGN_CLASSES;
+const alignOf = (cell) => {
+  const text = cell.trim();
+  return text.startsWith(":") && text.endsWith(":") ? CENTER : text.startsWith(":") ? LEFT : text.endsWith(":") ? RIGHT : null;
+};
+
 const indentOf = (raw) => raw.match(/^[ \t]*/)[0].replace(/\t/g, "    ").length;
 const dedent = (lines, n) => lines.map((line) => line.replace(new RegExp(`^[ \\t]{0,${n}}`), ""));
 
@@ -167,6 +190,8 @@ function parseLines(lines, doc = null, base = 0) {
   const lineOf = (i) => (doc ? doc.firstLine + base + i : 0);
   // Inline text: Notion's rules for a paste; a document's rules, its pictures links or words (textOnly), for a document.
   const inline = (text, i) => (doc ? textOnly(docInline(doc, text, lineOf(i)), lineOf(i), doc) : parseInlineMarkdown(text));
+  // A table's cell, which holds pictures (单元格里的图片): a document's rules or a paste's, its pictures kept.
+  const cellInline = (text, i) => (doc ? docInline(doc, text, lineOf(i)) : parseCellMarkdown(text));
   // A list item: Notion's rules for a paste (a page export's line of no words, "&nbsp;", none); a
   // document's, its pictures blocks it holds (before the blocks indented under it).
   const item = (type, text, i, props = {}) => {
@@ -196,6 +221,18 @@ function parseLines(lines, doc = null, base = 0) {
         const language = m[2] ? languageFromFence(m[2]) ?? m[2][0].toUpperCase() + m[2].slice(1) : undefined;
         block = spec("code", code ? [[code]] : [], language ? { language } : {});
       }
+    } else if (doc?.yuque && (m = YUQUE_ALERT.exec(line))) {
+      // Yuque's 提示: its blocks up to a line of ::: alone (one opened in it closing first).
+      const start = i;
+      const body = [];
+      for (let depth = 1, at = i + 1; at < lines.length; at++) {
+        const each = lines[at].trim();
+        depth += YUQUE_ALERT.test(each) ? 1 : each === ":::" ? -1 : 0;
+        i = at;
+        if (depth === 0) break;
+        body.push(lines[at]);
+      }
+      block = spec("report_callout", [], { alert: m[1].toLowerCase() }, parseLines(dedent(body, indent), doc, base + start + 1));
     } else if ((math = displayMathStart(line))) {
       if (math.single) {
         block = spec("equation", mathTitle([math.rest.slice(0, -math.close.length)], math.unescape));
@@ -312,7 +349,8 @@ function parseLines(lines, doc = null, base = 0) {
       }
       const written = dedent(body, indent).join("\n").trim();
       const bare = written.replace(/<!--[\s\S]*?-->/g, "").replace(PICTURE_TAGS, "").trim();
-      if (!bare && /<img\s/i.test(written)) blocks = paragraphBlocks(docInline(doc, written.replace(/\s+/g, " "), lineOf(start)), lineOf(start)); // pictures alone (<p align="center"><img …></p>): picture blocks
+      if (doc.yuque) block = spec("html", [], { html: written, line: lineOf(start) }); // read as the paste reads HTML (yuque.mjs)
+      else if (!bare && /<img\s/i.test(written)) blocks = paragraphBlocks(docInline(doc, written.replace(/\s+/g, " "), lineOf(start)), lineOf(start)); // pictures alone (<p align="center"><img …></p>): picture blocks
       else if (!bare && /<hr\b/i.test(written)) block = spec("divider");
       else if (!bare) continue; // line breaks or empty tags alone: a viewer's spacing
       else block = spec("html", [], { html: written, line: lineOf(start) });
@@ -342,9 +380,13 @@ function parseLines(lines, doc = null, base = 0) {
       // GFM's table: its header row, its delimiter row, then its rows.
       // Each row's cells read at its line (what they leave out noted there).
       const rows = [[tableCells(lines[i], true), i]];
+      const delimiter = tableCells(lines[i + 1], true);
       for (i += 2; i < lines.length && lines[i].trim() && (/^\s*\|/.test(lines[i]) || !startsBlock(lines[i].trim())); i++) rows.push([tableCells(lines[i], true), i]);
       i--;
-      block = tableSpec(rows.map(([row, at]) => row.map((cell) => inline(cell, at))), true);
+      // Yuque's: a | it wrote as it is joins the cells past the header's last one to that one; its alignments its cells'.
+      const width = rows[0][0].length;
+      const fitted = doc.yuque ? rows.map(([row, at]) => [row.length > width ? [...row.slice(0, width - 1), row.slice(width - 1).join("|")] : row, at]) : rows;
+      block = tableSpec(fitted.map(([row, at]) => row.map((cell) => cellInline(cell, at))), true, doc.yuque ? delimiter.map(alignOf) : [], fitted.map(([, at]) => lineOf(at)));
     } else if (/^\|.*\|$/.test(line)) {
       const rows = [];
       let header = false;
@@ -354,7 +396,7 @@ function parseLines(lines, doc = null, base = 0) {
           if (rows.length === 1) header = true;
           continue;
         }
-        rows.push(cells.map((cell) => (doc ? inline(cell, i) : parseInlineMarkdown(cell))));
+        rows.push(cells.map((cell) => cellInline(cell, i)));
       }
       i--;
       block = tableSpec(rows, header);
@@ -409,6 +451,8 @@ const DROPPED_HTML = new Set(["script", "style", "textarea"]);
 // The tags an HTML block of pictures alone is made of (a README's <p align="center"><img …></p>).
 const PICTURE_TAGS = /<\/?(?:p|div|a|center|picture|source|span|br|img|hr)(?=[\s/>])[^>]*>/gi;
 const ALERTS = { note: "ℹ️", tip: "💡", important: "❗", warning: "⚠️", caution: "🚨" };
+// Yuque's 提示 opened (its Markdown's): ::: and its kind, alone on its line.
+const YUQUE_ALERT = /^:::[ \t]*([A-Za-z][\w-]*)[ \t]*$/;
 const LINK_DEFINITION = /^\[([^\]^][^\]]*)\]:\s*(<[^>]*>|\S+)(?:\s+("[^"]*"|'[^']*'|\([^)]*\)))?\s*$/;
 const FOOTNOTE_DEFINITION = /^\[\^([^\]\s]+)\]:\s?(.*)$/;
 // East Asian wide characters (CJK, kana, Hangul, their punctuation and full-width forms): a line
@@ -583,7 +627,7 @@ function documentCode(name, meta, code, line, doc) {
   const braces = /^\{([^}]*)\}/.exec(meta.trim());
   const fence = name || /\.([\w+#-]+)/.exec(braces?.[1] ?? "")?.[1] || "";
   const title = /(?:^|[\s{])title=(?:"([^"]*)"|'([^']*)'|([^\s}]+))/.exec(meta);
-  if (fence.toLowerCase() === "mermaid") {
+  if (fence.toLowerCase() === "mermaid" && !doc.yuque) {
     const steps = flowSteps(code);
     if (steps) return spec("flow", [], { steps, line });
     doc.notes.push({ line, kind: "mermaid", text: "a mermaid diagram that is not one chain of steps is kept as its code" });
@@ -729,11 +773,12 @@ function takeDefinitions(lines, doc) {
  * title }] (in order), notes: [{ line, kind, text }], formulas: [{ tex, line, display }] (each
  * formula read, for the import to try), links: [{ href, line }] (each link to an address that is no
  * web one: a file beside it, a place in it) }. `firstLine`: the number of its first line in its file
- * (after a front matter the import took off).
+ * (after a front matter the import took off). `yuque`: Yuque's Markdown, read with what Yuque
+ * writes besides (this file's header; a paste's, yuque.mjs).
  */
-export function readMarkdownDocument(text, { firstLine = 1 } = {}) {
+export function readMarkdownDocument(text, { firstLine = 1, yuque = false } = {}) {
   const lines = text.replace(/\r\n?/g, "\n").split("\n");
-  const doc = { firstLine, refs: new Map(), definitions: new Map(), order: [], notes: [], formulas: [], links: [], at: firstLine };
+  const doc = { firstLine, yuque, refs: new Map(), definitions: new Map(), order: [], notes: [], formulas: [], links: [], at: firstLine };
   doc.footnote = (label) => {
     const definition = doc.definitions.get(label.toLowerCase());
     if (!definition) {

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

@@ -4,6 +4,7 @@ import { mathifyRichText, mathifySpecs } from "./math.mjs";
 import { fromMarkdown } from "./markdown.mjs";
 import { parseInlineMarkdown } from "./inline.mjs";
 import { vscodeLanguage } from "./languages.mjs";
+import { readYuque } from "./yuque.mjs";
 import { addressOf } from "../../links/address.mjs";
 
 // What a paste from another program is (Notion 860313 clipboardActions' external content, notion-lite
@@ -20,7 +21,8 @@ import { addressOf } from "../../links/address.mjs";
 //     (\[ … \]) → a formula block.
 // Besides Notion's: formulas AI answers copy (math.mjs, markdown.mjs, inline.mjs) and colors
 // (feishu-lite: html.mjs `colors`; nearest for Word, Google Docs and Notion, whose styles are meant,
-// as Feishu's 129153 · P; else only the page's own).
+// as Feishu's 129153 · P; else only the page's own); and first of all Yuque's (yuque.mjs): its
+// document's nodes (text/ne-inode, its HTML's <ne-clipboard>, text/lake) or its toolbar's Markdown.
 
 const OFFICE = /schemas-microsoft-com:office|xmlns:m="http:\/\/schemas\.microsoft\.com\/office\/2004\/12\/omml"/;
 const WORDPRESS = /<!-- wp:/;
@@ -92,6 +94,9 @@ function sameAddress(one, other) {
  * text } (notion-lite readClipboard, after the editor's own formats).
  */
 export function readExternal(data, options = {}) {
+  // Yuque's (yuque.mjs): its document's structure, which its HTML says only in part, or its Markdown.
+  const yuque = readYuque(data, options);
+  if (yuque) return yuque;
   const external = externalContent(data, options);
   const { text, html } = external;
   const convert = { colors: external.colors };