@heycys/gallery 0.1.1 → 0.1.2

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

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

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

@@ -4,7 +4,7 @@ import { pageBuild } from "../../../components/builders.mjs";
 import { BLOCK_TYPES, COPIED_AS_ITSELF, HOLDS_ONE, TEXT_TYPES, TOGGLES, UNSAID, accepts, clipboardHooks, clipboardOf, isLead, sizeValue } from "../../../components/registry.mjs";
 import { BLOCK_COLORS } from "../../../components/colors.mjs";
 import { MAX_CELL_HTML } from "../../../components/table/index.mjs";
-import { copied, copyOf, reportOf } from "./describe.mjs";
+import { copied, copyOf } from "./describe.mjs";
 import { imageSource, kindOfBlock, webPage } from "./rules.mjs";
 
 // Described blocks (describe.mjs and selection.mjs, and import/to-blocks.mjs for other programs' content) made (build),
@@ -113,10 +113,10 @@ export function parseText(data) {
 /**
  * Inline HTML as nodes of the format bar's marks only, its lines with <br> between them; formulas
  * of other pages made the page's own by `formula(tex)` where given, links shown with their icon by
- * `mention(parts)` (pastedLines).
+ * `mention(parts)`, pictures by `picture(img)` (a table cell's: pastedLines).
  */
-function inline(doc, html, { formula = null, mention = null } = {}) {
-  return pastedLines(doc, html, { formula, mention }).flatMap((line, index) => (index > 0 ? [doc.createElement("br"), ...line] : line));
+function inline(doc, html, { formula = null, mention = null, picture = null } = {}) {
+  return pastedLines(doc, html, { formula, mention, picture }).flatMap((line, index) => (index > 0 ? [doc.createElement("br"), ...line] : line));
 }
 
 
@@ -129,7 +129,8 @@ function colored(element, block) {
 /**
  * A new block of the page from a described one (checked). `formula(tex)`: an inline formula chip of
  * the page (none: their TeX as text); `mention(parts)`: a link shown with its icon (none: a link of
- * its title). What each type adds is its definition's: `clipboard.build`, or the `build` of its
+ * its title); `picture(img)`: a table cell's picture (none: nothing; `what.inline(html, { pictures:
+ * true })` asks for it, a cell's text alone holding pictures). What each type adds is its definition's: `clipboard.build`, or the `build` of its
  * page.mjs (builders.mjs); a container is filled with its blocks, a text type with its inline HTML.
  */
 export function build(doc, block, options = {}) {
@@ -144,18 +145,17 @@ export function build(doc, block, options = {}) {
       copy.setAttribute("data-ge-unit-kind", block.kind);
       return copy;
     }
-    // Elsewhere: a new one of its data (pasteBlocks checked it has some), the key a chart reads a
-    // table by kept within the report it was copied from (chart-keys.mjs), no other report's.
-    const data = { ...block.data };
-    if (block.report !== reportOf(doc)) delete data.chart;
-    return build(doc, data, options);
+    // Elsewhere: a new one of its data (pasteBlocks checked it has some), with the key a chart or a
+    // view reads a table by, which the paste then keeps, gives anew or takes off, in another document
+    // too (chart-keys.mjs relinkCopies: a table pasted there alone loses it, one with its reader is a pair).
+    return build(doc, block.data, options);
   }
   const what = {
     doc,
     block,
     host: (type = block.type) => newHost(doc, type),
     box: (type = block.type) => newContainer(doc, type),
-    inline: (html) => inline(doc, html, options),
+    inline: (html, { pictures = false } = {}) => inline(doc, html, pictures ? options : { ...options, picture: null }),
     inner: (blocks) => blocks.map((each) => build(doc, each, options)),
     one: (each) => build(doc, each, options),
     colored: (element) => colored(element, block),

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

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

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

@@ -124,7 +124,7 @@ export function describeAcross(range, { texts, wholes }) {
     const html = selectedHtml(host, pieces.get(host));
     const part = askClipboard("piece", host, html, what);
     if (part) return part;
-    const type = host.parentElement?.hasAttribute("data-ge-box") ? copiedType(host) : null;
+    const type = host.parentElement?.hasAttribute("data-ge-box") && (host.getAttribute("data-ge-kind") ?? "flow") === "flow" ? copiedType(host) : null;
     const color = colorOf(host);
     return { type: type ?? "paragraph", html, ...(color ? { color } : {}) };
   };

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

@@ -13,17 +13,20 @@ import { t } from "../../../shared/i18n/index.mjs";
 // and blocks/grid.css), and between the nodes of a flowchart's row (步骤流程图: the same tool, the
 // user's of 2026-10-25). With the pointer in the gap between two of them, a thin line stands down
 // it, and the cursor says it resizes: dragging it moves only the two beside it (ratiosAfterResize:
-// snapping to their equal split and to tenths of the row, each keeping its least share), each one's
-// share shown at its top right while it lasts; letting go writes the shares as one undo step, Esc
-// cancels, and a double click makes the row's parts equal again. A kind of row (KINDS) says how its
-// parts are found, measured, shown while dragged and written:
-//   - a row of columns: the line blue in the row (grey above it, up to its pin); above each gap, and
-//     right of the last column, a dot turns into a pin that adds a column there (新增分栏). While the
+// snapping to their equal split and to tenths of the row within SNAP px, each keeping its least
+// share), the bottom notice saying the row's shares while it lasts (no badge on the parts: the user,
+// 2026-11-07, who also found the old snap of 1% of the row too strong); letting go writes the shares
+// as one undo step, Esc cancels, and a double click makes the row's parts equal again. The line is
+// a gray, never a bright blue (the guide tokens, look.mjs): faint where a drag may start, darker
+// while it is dragged, darkest where it snaps. A kind of row (KINDS) says how its parts are found,
+// measured, shown while dragged and written:
+//   - a row of columns: the line darker in the row (fainter above it, up to its pin); above each gap,
+//     and right of the last column, a dot turns into a round + that adds a column there (新增分栏). While the
 //     pointer is over a row, or the caret in it, its columns are tinted, so the reader sees where they
 //     are. A row stacked on a narrow screen has no gaps. Its shares (--doc-column-ratio) are shown
 //     as the columns' flex-grow while dragged, written as one structural step.
 //   - a flowchart's row, as the kit laid it out (its nodes whose cards stand at one height:
-//     components/flowchart/page.mjs rowsOfFlow): the line grey, blue once pressed (the mock's), the
+//     components/flowchart/page.mjs rowsOfFlow): the line faint, darker once pressed, the
 //     arrow under it dimmed while it shows; no pin (a node is added by the "+" at a node's right,
 //     add.mjs). A node keeps the least width the kit gives a card beside others (leastWidth: 116px and
 //     its longest word), so the row never wraps under the pointer. Its shares are each node's weight
@@ -42,26 +45,30 @@ const STYLE = `
   }
   ${gestureLock("data-ge-gap", { cursor: "col-resize" })}
   html[data-ge-gap-drag] { -webkit-user-select: none; user-select: none; }
-  .ge-gap-line { width: 2px; border-radius: 2px; background: light-dark(#dee0e3, #4b4e53); pointer-events: none; }
-  .ge-gap-line[data-hot] { background: #336df4; }
-  .ge-gap-pin { width: 16px; height: 16px; cursor: pointer; pointer-events: auto; }
-  .ge-gap-pin > svg { position: absolute; display: block; }
-  .ge-gap-pin > .ge-gap-dot { left: 6px; top: 6.5px; }
-  .ge-gap-pin > .ge-gap-add { left: -3px; top: -8px; opacity: 0; transform: scale(0); transform-origin: 50% 90%; transition: opacity .15s, transform .15s; }
+  .ge-gap-line { width: 2px; border-radius: 1px; background: var(--ge-guide); pointer-events: none; }
+  .ge-gap-line[data-hot] { background: var(--ge-guide-hot); }
+  .ge-gap-line[data-hot][data-snap] { background: var(--ge-guide-snap); }
+  .ge-gap-pin { width: 16px; height: 16px; color: var(--ge-ico3); cursor: pointer; pointer-events: auto; }
+  .ge-gap-pin > .ge-gap-dot { position: absolute; left: 6px; top: 6.5px; display: block; }
+  .ge-gap-pin > .ge-gap-add { position: absolute; left: -2px; top: -2px; display: grid; place-items: center; box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%;
+    background: var(--ge-bg); color: var(--ge-ico); box-shadow: 0 1px 3px light-dark(rgb(25 25 25 / 18%), rgb(0 0 0 / 45%)); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
+  .ge-gap-pin > .ge-gap-add > svg { display: block; }
   .ge-gap-pin:hover > .ge-gap-dot { opacity: 0; }
   .ge-gap-pin:hover > .ge-gap-add { opacity: 1; transform: scale(1); }
-  .ge-gap-badge { padding: 0 4px; border-radius: 4px; color: #fff; background: rgb(0 0 0 / 30%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 12px/18px var(--doc-sans-font, var(--doc-font, system-ui, sans-serif)); pointer-events: none; white-space: nowrap; }
   /* The arrow under a flowchart's gap line (the node's ::after, the kit's) dimmed while the line shows. */
   ol.doc-flow > li::after { transition: opacity .12s; }
   ol.doc-flow > li[data-ge-gap-dim]::after { opacity: .15; }
   @media (prefers-reduced-motion: reduce) { ol.doc-flow > li::after { transition: none; } }
 `;
-// Feishu's dot and pin.
-const DOT = '<svg class="ge-gap-dot" width="4" height="3" viewBox="0 0 4 3" aria-hidden="true"><path d="M3.5 1.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" fill="#BBBFC4"/></svg>';
-const PIN = '<svg class="ge-gap-add" width="22" height="24" viewBox="0 0 22 24" aria-hidden="true"><path fill-rule="evenodd" d="M16.153 20.721A10.999 10.999 0 0022 11c0-6.075-4.925-11-11-11S0 4.925 0 11c0 4.213 2.369 7.873 5.847 9.721L11 24l5.153-3.279z" fill="#3370FF"/><path fill-rule="evenodd" d="M10.45 6a.2.2 0 00-.2.2v4.05H6.2a.2.2 0 00-.2.2v1.1c0 .11.09.2.2.2h4.05v4.05c0 .11.09.2.2.2h1.1a.2.2 0 00.2-.2v-4.05h4.05a.2.2 0 00.2-.2v-1.1a.2.2 0 00-.2-.2h-4.05V6.2a.2.2 0 00-.2-.2h-1.1z" fill="#fff"/></svg>';
+// Feishu's dot, in the handle's quietest gray; under the pointer it turns into a round + in the
+// look of the editor's small floating buttons (a white disc, a hairline, a gray +), not Feishu's blue pin.
+const DOT = '<svg class="ge-gap-dot" width="4" height="3" viewBox="0 0 4 3" aria-hidden="true"><path d="M3.5 1.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" fill="currentColor"/></svg>';
+const PIN = '<span class="ge-gap-add"><svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path d="M6 1.75v8.5M1.75 6h8.5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg></span>';
 const TAIL = 20; // right of the last column, the pin's gap (Feishu's last gap)
 const ABOVE = 30; // the pin stands this far above the row: the gap reaches up to it
 const DOUBLE = { time: 500, distance: 4 }; // two presses on a gap this soon and this near: a double click (ms, px)
+const SNAP = 5; // px: how near the equal split or a tenth of the row a dragged gap snaps to it
+const LIVE = 60000; // ms: the notice saying the shares stays while the drag lasts (it is taken off when it ends)
 
 const percent = (ratios) => ratios.map((ratio) => `${Math.round(100 * ratio)}%`).join(" / ");
 const same = (a, b) => a.every((ratio, index) => Math.abs(ratio - b[index]) < 0.0005);
@@ -69,16 +76,17 @@ const same = (a, b) => a.every((ratio, index) => Math.abs(ratio - b[index]) < 0.
 /**
  * active(): whether the tools may show. struct(parents, touched, mutate): the editor's undoable
  * structural change (it records the columns' widths). look(elements, changes): the editor's undoable
- * change of blocks' looks (a flowchart's nodes' weights, history.mjs lookStep). say: the status line.
+ * change of blocks' looks (a flowchart's nodes' weights, history.mjs lookStep). say(text, kind, hold):
+ * the bottom notice; settle(): the notice taken off.
  * What is resized is known by the page objects that say so: `columnOps` (a row's ratios, add(row,
  * index): a new column there) and `rowOps` (a row of nodes, its shares and weights).
  */
-export function createColumnGaps({ active, struct, look, say }) {
+export function createColumnGaps({ active, struct, look, say, settle = () => {} }) {
   addStyle(STYLE);
   const { add, columnsOf, ratiosAfterResize, ratiosOf, setRatios, sized } = columnOps() ?? {};
   const { leastWidth, rowShares, rowsOfFlow, weightValue } = rowOps() ?? {};
   let hover = null; // { row, index, last, line, pin }: the gap after part `index` of `row` (last: right of the last column)
-  let drag = null; // { row, index, start, before, least, ratios, span, x, line, badges }
+  let drag = null; // { row, index, start, before, least, ratios, snapped, span, x, line, told }
 
   // ---------- the kinds of row ----------
   // A row: { kind, el: the element holding it (a row of columns, a flowchart), parts: its parts in
@@ -86,6 +94,7 @@ export function createColumnGaps({ active, struct, look, say }) {
   const KINDS = {
     columns: {
       label: "column", // what its overlays are listed as (overlays.mjs)
+      live: (ratios) => t("栏宽：{0}", percent(ratios)), // the notice while a gap is dragged
       containers: kept(() => [...document.querySelectorAll(".doc-columns[data-ge-box]")]),
       // Its one row, side by side (a stacked one has no gaps).
       rows: (el) => (getComputedStyle(el).flexDirection.startsWith("column") ? [] : [columnsOf(el)]),
@@ -118,6 +127,7 @@ export function createColumnGaps({ active, struct, look, say }) {
     },
     flowchart: {
       label: "flowchart",
+      live: (ratios) => t("节点宽度：{0}", percent(ratios)),
       containers: kept(() => [...document.querySelectorAll("ol.doc-flow[data-ge-box]:not([data-ge-keep])")]),
       // Its rows of two nodes or more, laid out in rows by the kit (one node a row has no gaps).
       rows: (el) => (getComputedStyle(el).flexDirection.startsWith("column") ? [] : rowsOfFlow(el).filter((steps) => steps.length > 1 && steps.every((step) => step.hasAttribute("data-ge-box")))),
@@ -256,7 +266,8 @@ export function createColumnGaps({ active, struct, look, say }) {
       before: kind.before(row),
       least: kind.least(row, span),
       line: hover?.line ?? null,
-      badges: row.parts.map((part) => own(element("div", { class: "ge-gap-badge", "data-doc-dev": "" }), `${kind.label} share`, { owner: part, alive: () => drag?.row === row && row.el.isConnected })),
+      snapped: false,
+      told: null, // what the notice says now
     };
     hover?.pin?.remove();
     hover?.line.setAttribute("data-hot", "");
@@ -268,43 +279,34 @@ export function createColumnGaps({ active, struct, look, say }) {
   }
 
   // The two parts beside the gap as the pointer has moved (none until it has: a press alone changes
-  // nothing), shown, each share on its part.
+  // nothing), shown; the row's shares in the bottom notice (said again only when they change), the
+  // line darkest where they snapped.
   function update(x) {
     const { row, index, start, span, least } = drag;
     const kind = kindOf(row);
-    drag.ratios = Math.abs(x - drag.x) < 1 ? start : ratiosAfterResize(start, index, (x - drag.x) / span, least);
+    const moved = (x - drag.x) / span;
+    drag.ratios = Math.abs(x - drag.x) < 1 ? start : ratiosAfterResize(start, index, moved, least, SNAP / span);
+    drag.snapped = Math.abs(x - drag.x) >= 1 && !same(drag.ratios, ratiosAfterResize(start, index, moved, least, 0));
     if (same(drag.ratios, start)) kind.reset(row, drag.before);
     else kind.show(row, drag.ratios);
+    drag.line?.toggleAttribute("data-snap", drag.snapped);
+    const told = drag.told || Math.abs(x - drag.x) >= 1 ? kind.live(drag.ratios) : null; // a press alone says nothing
+    if (told && told !== drag.told) say(told, "note", LIVE);
+    drag.told = told ?? drag.told;
     // A row of columns is laid out again at once; a flowchart's by the kit, in a frame of its own
-    // asked for as the weights are written (after this one's): measured the frame after that.
-    if (kind.pins) placeBadges();
-    else requestAnimationFrame(() => requestAnimationFrame(() => { if (drag?.row === row) placeBadges(); }));
-  }
-
-  // Each share at its part's top right (a node's 10px in from its right edge, across its border: the mock's).
-  function placeBadges() {
-    const { row, ratios, badges } = drag;
-    const layer = layerOf(row.el);
-    const flowchart = !kindOf(row).pins;
-    row.parts.forEach((part, at) => {
-      const rect = part.getBoundingClientRect();
-      badges[at].textContent = `${Math.round(100 * ratios[at])}%`;
-      if (badges[at].parentNode !== layer) layer.append(badges[at]);
-      const size = badges[at].getBoundingClientRect();
-      const right = flowchart ? rect.right - 10 : rect.right + 2;
-      const top = flowchart ? rect.top - size.height / 2 : rect.top - 2;
-      drawBox(badges[at], layer, { left: right - size.width, top, right, bottom: top + size.height });
-    });
-    if (hover) place(hover);
+    // asked for as the weights are written (after this one's): the line placed again the frame after that.
+    if (kind.pins) { if (hover) place(hover); }
+    else requestAnimationFrame(() => requestAnimationFrame(() => { if (drag?.row === row && hover) place(hover); }));
   }
 
   function finish(commit) {
     if (!drag) return;
-    const { row, start, ratios, badges, before } = drag;
+    const { row, start, ratios, before, line, told } = drag;
     const kind = kindOf(row);
     drag = null;
     note(row.kind, commit ? "gap released" : "gap cancelled");
-    badges.forEach((badge) => badge.remove());
+    line?.removeAttribute("data-snap");
+    if (told) settle(); // the shares dragged to: what is said next (or nothing) replaces them
     kind.reset(row, before);
     row.el.removeAttribute("data-ge-gap-drag");
     document.documentElement.removeAttribute("data-ge-gap-drag");
@@ -355,6 +357,6 @@ export function createColumnGaps({ active, struct, look, say }) {
     /** Whether a gap is being dragged (a flowchart's row shows the weights dragged, not yet a step: commits wait). */
     get dragging() { return Boolean(drag); },
     /** The editor's UI nodes to keep in the top layer when a modal dialog opens. */
-    get nodes() { return [...(hover ? [hover.line, ...(hover.pin ? [hover.pin] : [])] : []), ...(drag?.badges ?? [])]; },
+    get nodes() { return hover ? [hover.line, ...(hover.pin ? [hover.pin] : [])] : []; },
   };
 }