@heycys/gallery 0.1.0 → 0.1.2

package/browser/editor/page/table/cells.mjs

@@ -1,13 +1,13 @@
 import { escapeText } from "../../../shared/escape.mjs";
 import { BLOCK_COLORS, cellColorOf, colorLook } from "../../components/colors.mjs";
-import { CELLS_MIME as MIME, CELL_BOLD, OLD_CELLS_MIME, cellsData } from "../../components/table/index.mjs";
+import { CELLS_MIME as MIME, CELL_BOLD, OLD_CELLS_MIME, pictureFile } from "../../components/table/index.mjs";
 import { alignItems, alignLook } from "./aligns.mjs";
 import { insertColumn, insertRow, tableParts, tableSlots, tableState } from "../../components/table/page.mjs";
 import { atEdge, editable } from "../caret.mjs";
 import { pastedLines, serializeInner } from "../core.mjs";
 import { formulaMaker, loadKatex } from "../formula/index.mjs";
 import { FORMAT_KEYS } from "../format-bar/index.mjs";
-import { formatRange, markValue } from "../marks.mjs";
+import { formatRange, markValue, rangeAt, rangeOffsets } from "../marks.mjs";
 import { gestureLock } from "../gesture.mjs";
 import { addStyle } from "../ui.mjs";
 import { createCellBar } from "./cell-bar.mjs";
@@ -15,7 +15,7 @@ import { createCellLists } from "./lists.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
 // Selected cells of a table and the keys in a table (notion-lite's, src/blocks/table/edit/; the
-// rules in table-math-plan-2026-10-18.md), with the cells' bar (cell-bar.mjs) over them.
+// rules in notes/plans/table-math-plan-2026-10-18.md), with the cells' bar (cell-bar.mjs) over them.
 //
 // - Selecting: a press in a cell dragged into another selects the cells between (the text selection
 //   goes; back in the first, that one cell, no caret); Shift+click from the selection's anchor (or
@@ -31,9 +31,12 @@ import { t } from "../../../shared/i18n/index.mjs";
 //   a typed character goes at the end of the last cell, editing it; Ctrl+D fills down (copies rows or
 //   columns), Ctrl+R right; Ctrl+B / I / U / E and Ctrl+Shift+S format whole cells.
 // - Copied, cells are the page's own (their inline HTML), an HTML table and lines of tab-separated
-//   text; pasted onto selected cells, the page's own, another program's table (its words) or lines
-//   of tab-separated text fill them from the top left (repeated over a selection a whole number of
-//   times larger), rows and columns put in where they overflow; one undo step.
+//   text (a cell in quotes holding its lines, as Excel writes one); pasted onto selected cells or with
+//   the caret in one, what the clipboard holds as cells (clipboard/ cellsOf: the page's own, another
+//   program's table with its marks and pictures, a Markdown table, tab-separated lines) fills them
+//   from the top left or the caret's cell (repeated over a selection a whole number of times larger),
+//   rows and columns put in where they overflow; one undo step. With the caret in a cell a single
+//   value is the editor's paste at the caret (but one holding a picture: pictures.mjs).
 // A cell's color (one, as a block's: components/colors.mjs) and alignment are its classes (its look:
 // components/table/index.mjs); its text changes are the editor's (struct, history.mjs). Where cells
 // are merged (shared/table-slots.mjs), Tab goes from cell to cell, the arrows and Enter step
@@ -407,6 +410,17 @@ export function createCells(tools) {
 
   // A cell's inline HTML as copied (a locked cell's words alone: what a script drew is not its text).
   const htmlOf = (cell) => (writable(cell) ? serializeInner(cell) : escapeText(cell.textContent));
+  // A cell's words as text: its lines (its line breaks, its list's items) apart, a picture its alt.
+  const textOf = (cell) => {
+    const copy = cell.cloneNode(true);
+    copy.querySelectorAll("[data-doc-dev]").forEach((node) => node.remove());
+    copy.querySelectorAll("br").forEach((node) => node.replaceWith("\n"));
+    copy.querySelectorAll("li").forEach((node, index) => index > 0 && node.prepend("\n"));
+    copy.querySelectorAll("img").forEach((node) => node.replaceWith(node.getAttribute("alt") ?? ""));
+    return copy.textContent.replace(/[ \t]*\n[ \t]*/g, "\n").trim();
+  };
+  // A cell of tab-separated text as Excel writes one: in quotes when it holds a tab, a line break or a quote, its quotes doubled.
+  const tsvCell = (text) => (/[\t\n"]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text);
 
   function copy(event) {
     const sel = tools.sel;
@@ -426,64 +440,108 @@ export function createCells(tools) {
       }
     }
     const html = grid.map((row) => row.map((cell) => (cell ? htmlOf(cell) : "")));
-    const payload = JSON.stringify({ v: 1, cells: html });
+    // The report it was copied from: a paste in another one copies its pictures' files.
+    const payload = JSON.stringify({ v: 1, cells: html, report: document.querySelector(".doc-page")?.dataset.docId ?? null });
     event.clipboardData.setData(MIME, payload);
     event.clipboardData.setData(OLD_CELLS_MIME, payload); // a page of the old version (before 2026-10-26) reads this one
-    event.clipboardData.setData("text/html", `<table>${html.map((row) => `<tr>${row.map((cell) => `<td>${cell}</td>`).join("")}</tr>`).join("")}</table>`);
-    event.clipboardData.setData("text/plain", grid.map((row) => row.map((cell) => (cell?.textContent ?? "").replace(/[\t\n]+/g, " ")).join("\t")).join("\n"));
+    // For other programs (Excel, Google Sheets, another editor): an HTML table, its pictures where the
+    // server serves them (an address of this computer), and tab-separated text.
+    const shown = (cell) => (cell ? htmlOf(cell).replace(/<img src="(assets\/[^"]+)"/g, (all, file) => `<img src="${escapeText(new URL(cell.querySelector(`img[data-ge-src="${file}"]`)?.getAttribute("src") ?? file, location.href).href)}"`) : "");
+    event.clipboardData.setData("text/html", `<table>${grid.map((row) => `<tr>${row.map((cell) => `<td>${shown(cell)}</td>`).join("")}</tr>`).join("")}</table>`);
+    event.clipboardData.setData("text/plain", grid.map((row) => row.map((cell) => tsvCell(cell ? textOf(cell) : "")).join("\t")).join("\n"));
     if (event.type === "cut") clearCells(tools, grid.flat().filter(Boolean));
     else tools.say(t("已复制 {0} 格", grid.length * grid[0].length));
   }
   document.addEventListener("copy", copy, true);
   document.addEventListener("cut", copy, true);
 
-  // What is pasted, as rows of cells ({ html } the page's own, { text } another program's), or null:
-  // the page's cells, its text, table or blocks with their marks (blocks one cell of their words, no
-  // list's marker or Markdown: tools.ownCells), another program's table, tab-separated lines or text.
-  function gridOf(data) {
-    try {
-      const own = JSON.parse(cellsData(data) || "null");
-      if (Array.isArray(own?.cells) && own.cells.length > 0 && own.cells.every((row) => Array.isArray(row) && row.length > 0 && row.every((html) => typeof html === "string"))) {
-        return own.cells.map((row) => row.map((html) => ({ html })));
-      }
-    } catch {
-      // not the page's own
-    }
-    const rows = tools.ownCells(data);
-    if (rows) return rows.map((row) => row.map((html) => ({ html })));
-    const html = data.getData("text/html");
-    const table = html ? new DOMParser().parseFromString(html, "text/html").querySelector("table") : null;
-    if (table?.rows.length) return [...table.rows].map((row) => [...row.cells].map((cell) => ({ text: cell.textContent.replace(/\s+/g, " ").trim() })));
-    const text = (data.getData("text/plain") || "").replace(/\r\n?/g, "\n").replace(/\n$/, "");
-    const lines = text.split("\n");
-    if (lines.length > 1) {
-      const width = lines[0].split("\t").length;
-      if (width > 1 && lines.every((line) => line.split("\t").length === width)) return lines.map((line) => line.split("\t").map((part) => ({ text: part })));
-    }
-    return text ? [[{ text: text.replace(/\s*\n\s*/g, " ") }]] : null;
+  // The cell the caret (or a selection within it) is in, where a paste goes (`target`: the event's,
+  // the cell or in it), in a table the tools manage, with where it is: { unit, at, cell }, or null.
+  function caretCell(target) {
+    const selection = getSelection();
+    const node = selection.rangeCount ? selection.getRangeAt(0).commonAncestorContainer : null;
+    const cell = (node?.nodeType === 1 ? node : node?.parentElement)?.closest?.("td, th");
+    const unit = cell && writable(cell) && cell.contains(target) ? tools.tableAt(cell) : null;
+    const at = unit ? tools.placeOf(tableSlots(unit), cell) : null;
+    return at ? { unit, at, cell } : null;
   }
+  // Whether a pasted cell holds nothing: no words, no picture.
+  const blank = (html) => !html.includes("<img") && !html.replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ").trim();
 
+  // A paste into the cells (notion-lite's 872952, the user's 2026-11-09: cells pasted with the caret in
+  // a cell are cells, not one cell's text): what the clipboard holds as cells (tools.cellsOf: the
+  // page's own, another program's table, a Markdown table, tab-separated lines, else its text) goes
+  // from the selected cells' top left, or the caret's cell. With the caret in a cell, a single value
+  // is the editor's paste at the caret (its marks, an address a link: clipboard/), but one holding a
+  // picture, which goes in at the caret here (its file copied first); with cells selected, it fills
+  // them (notion-lite's), as do picture files pasted on them (in the first one).
   function paste(event) {
     const sel = tools.sel;
-    if (!sel || sel.editing || !tools.active() || !sel.unit.isConnected) return;
+    if (!tools.active()) return;
+    const caret = !sel || sel.editing ? caretCell(event.target) : null;
+    if (!(caret || (sel && !sel.editing && sel.unit.isConnected))) return;
+    const data = event.clipboardData;
+    const pasted = data ? tools.cellsOf(data) : null;
+    const many = pasted && (pasted.rows.length > 1 || pasted.rows[0].length > 1);
+    const files = [...(data?.files ?? [])].filter((file) => /^image\//.test(file.type));
+    if (caret && !many && !(pasted?.rows[0][0].includes("<img") && !files.length)) return; // the editor's
     event.preventDefault();
     event.stopImmediatePropagation();
-    const grid = gridOf(event.clipboardData);
-    if (!grid) return;
-    // Formulas in what is pasted are drawn at once, KaTeX loaded first where the page has none yet.
-    if (grid.some((row) => row.some((cell) => cell.html?.includes("doc-math-inline")))) loadKatex().then(() => pasteGrid(sel, grid, formulaMaker()));
-    else pasteGrid(sel, grid, null);
+    const target = caret ? { unit: caret.unit, type: "cell", anchor: caret.at, focus: caret.at, editing: false } : sel;
+    if (!pasted && !files.length) return;
+    const offsets = caret && !many ? rangeOffsets(caret.cell, getSelection().getRangeAt(0)) : null;
+    (async () => {
+      let rows = pasted?.rows;
+      let found = new Map();
+      if (!rows) {
+        // Picture files on selected cells: the first one's pictures.
+        const made = await tools.pictures.fromFiles(files);
+        if (!made.length) return;
+        rows = [[made.map((img) => `<img src="${pictureFile(img)}" alt="">`).join("")]];
+        made.forEach((img) => found.set(pictureFile(img), { path: pictureFile(img) }));
+      } else found = await tools.pictures.resolve(rows.flat(), pasted.from);
+      // Formulas in what is pasted are drawn at once, KaTeX loaded first where the page has none yet.
+      const formula = rows.some((row) => row.some((html) => html.includes("doc-math-inline"))) && (await loadKatex()) ? formulaMaker() : null;
+      const lines = (html) => {
+        const made = pastedLines(document, html, { links: true, formula, picture: tools.pictures.maker(found) });
+        return made.flatMap((line, index) => (index > 0 ? [document.createElement("br"), ...line] : line));
+      };
+      if (offsets) atCaret(caret, offsets, lines(rows[0][0]));
+      else pasteGrid(target, rows, lines);
+    })();
+  }
+
+  // A value holding a picture pasted at the caret in a cell (its file copied first): in at the caret,
+  // one undo step, the caret after it.
+  function atCaret({ unit, cell }, offsets, nodes) {
+    if (!cell.isConnected || nodes.length === 0) return;
+    let last = null;
+    const made = tools.change(unit, () => {
+      const range = rangeAt(cell, offsets);
+      range.deleteContents();
+      const fragment = document.createDocumentFragment();
+      fragment.append(...nodes);
+      last = nodes.at(-1);
+      range.insertNode(fragment);
+      return true;
+    }, null, [cell]);
+    if (made === null || !last?.isConnected) return;
+    const range = document.createRange();
+    range.setStartAfter(last);
+    range.collapse(true);
+    getSelection().removeAllRanges();
+    getSelection().addRange(range);
   }
 
-  function pasteGrid(sel, pasted, formula) {
+  // `pasted`: rows of cells' inline HTML; `lines(html)`: a cell's nodes of one of them.
+  function pasteGrid(sel, pasted, lines) {
     if (!sel.unit.isConnected) return;
     let grid = pasted;
     // Its empty last rows and columns go.
-    const empty = (cell) => !(cell.html ?? cell.text).replace(/<[^>]*>/g, "").trim();
-    while (grid.length > 1 && grid.at(-1).every(empty)) grid = grid.slice(0, -1);
+    while (grid.length > 1 && grid.at(-1).every(blank)) grid = grid.slice(0, -1);
     const width = Math.max(...grid.map((row) => row.length));
-    grid = grid.map((row) => [...row, ...Array.from({ length: width - row.length }, () => ({ text: "" }))]);
-    while (grid[0].length > 1 && grid.every((row) => empty(row.at(-1)))) grid = grid.map((row) => row.slice(0, -1));
+    grid = grid.map((row) => [...row, ...Array.from({ length: width - row.length }, () => "")]);
+    while (grid[0].length > 1 && grid.every((row) => blank(row.at(-1)))) grid = grid.map((row) => row.slice(0, -1));
     const { unit } = sel;
     const { r0, r1, c0, c1 } = tools.bounds(sel);
     const times = [Math.max(1, Math.floor((r1 - r0 + 1) / grid.length)), Math.max(1, Math.floor((c1 - c0 + 1) / grid[0].length))];
@@ -504,9 +562,7 @@ export function createCells(tools) {
           // A merged cell takes what goes in its top left slot.
           const place = tools.placeOf(slotsNow, cell);
           if (!cell || !writable(cell) || place[0] !== r0 + r || place[1] !== c0 + c) continue;
-          const from = grid[r % grid.length][c % grid[0].length];
-          if (from.html !== undefined) cell.replaceChildren(...pastedLines(document, from.html, { links: true, formula }).flatMap((line, index) => (index > 0 ? [document.createTextNode(" "), ...line] : line)));
-          else cell.textContent = from.text;
+          cell.replaceChildren(...lines(grid[r % grid.length][c % grid[0].length]));
         }
       }
       return true;

package/browser/editor/page/table/icons.mjs

@@ -20,7 +20,7 @@ export const TABLE_ICONS = {
   // A row and a column taken out: the table with the row (column) crossed.
   removeRow: svg('<rect x="3.25" y="4.25" width="13.5" height="11.5" rx="2"/><path d="M3.25 8.25h13.5M3.25 11.75h13.5"/><path d="m8.25 8.75 3.5 2.5M11.75 8.75l-3.5 2.5"/>'),
   removeColumn: svg('<rect x="3.25" y="4.25" width="13.5" height="11.5" rx="2"/><path d="M8.25 4.25v11.5M11.75 4.25v11.5"/><path d="m8.75 8.25 2.5 3.5M11.25 8.25l-2.5 3.5"/>'),
-  // 均分列宽: a table of three equal columns; 一键调整列宽: two edges and the arrows of a width between them.
+  // 均分列宽: a table of three equal columns; 自动调整列宽: two edges and the arrows of a width between them.
   even: svg('<rect x="3.25" y="4.25" width="13.5" height="11.5" rx="2"/><path d="M7.75 4.25v11.5M12.25 4.25v11.5"/>'),
   autoWidth: svg('<path d="M3.25 4v12M16.75 4v12"/><path d="M6.25 10h7.5M8.25 8l-2 2 2 2M11.75 8l2 2-2 2"/>'),
   // 合并单元格: a cell's two halves pushed together; 拆分单元格: a cell pulled apart at its middle line.
@@ -37,4 +37,6 @@ export const TABLE_ICONS = {
   // 一键优化: a magic wand and its sparks; 识别数字列: a number sign.
   magic: svg('<path d="m3.75 16.25 9-9"/><path d="m11.25 5.75 3 3"/><path d="M15.25 2.5v3M13.75 4h3M5.5 3.25v2M4.5 4.25h2M16 10.75v2M15 11.75h2"/>'),
   numbers: svg('<path d="M8.25 4 6.75 16M13.75 4l-1.5 12M4.5 8h12M3.75 12.25h12"/>'),
+  // 视图: three columns of cards, a board drawn from the table.
+  view: svg('<rect x="3.25" y="3.75" width="3.5" height="7.5" rx="1"/><rect x="8.25" y="3.75" width="3.5" height="12.5" rx="1"/><rect x="13.25" y="3.75" width="3.5" height="5" rx="1"/>'),
 };

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

@@ -19,12 +19,14 @@ import { MENU_WIDTH } from "../type-grid.mjs";
 import { addStyle, element } from "../ui.mjs";
 import { alignItems, alignLook } from "./aligns.mjs";
 import { clearCells, createCells } from "./cells.mjs";
+import { createCellPictures } from "./pictures.mjs";
 import { TABLE_ICONS } from "./icons.mjs";
+import { createViews } from "./views.mjs";
 import { createColumnWidths } from "./widths.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
 // A table's own tools (notion-lite's simple table, src/blocks/table/; the plan's T2, its rules in
-// table-math-plan-2026-10-18.md), for a table written as the kit writes one (the unit the server marked GRID):
+// notes/plans/table-math-plan-2026-10-18.md), for a table written as the kit writes one (the unit the server marked GRID):
 //
 // - The selection: cells (a rectangle between two of them, cells.mjs, grown so that it cuts no
 //   merged cell), rows or columns, of one table; { unit, type: "cell" | "row" | "column", anchor,
@@ -54,7 +56,8 @@ import { t } from "../../../shared/i18n/index.mjs";
 // A table wider or taller than its frame scrolls in it: the tools stand by what the frame shows of
 // it (the geometry's view), the grips and + points of the rows and columns in sight.
 // Each change is one undo step; the page writes it as one operation of the table (grid.mjs). The
-// keys and the cells' bar are cells.mjs's.
+// keys and the cells' bar are cells.mjs's; what a view of the table asks (a custom block reading it:
+// set a cell, move, add or take out a row) and 视图 › of its menu, views.mjs's.
 
 const STYLE = `
   .ge-tgrip { display: flex; align-items: center; justify-content: center; cursor: grab; pointer-events: auto; }
@@ -78,7 +81,7 @@ const STYLE = `
   .ge-tplus:hover > i { width: 18px; height: 18px; background: var(--ge-accent); box-shadow: 0 0 0 2px light-dark(#ffffff, #191919); }
   .ge-tplus:hover > i > svg { display: block; }
   .ge-tline { border-radius: 1px; background: var(--ge-accent); pointer-events: none; }
-  .ge-tgrow { box-sizing: border-box; display: grid; place-items: center; border: 1px solid var(--ge-line-strong); border-radius: 50%; background: var(--ge-bg); color: var(--ge-tx3); box-shadow: 0 1px 2px rgb(0 0 0 / 6%); cursor: nwse-resize; pointer-events: auto; transition: background 80ms, color 80ms; }
+  .ge-tgrow { box-sizing: border-box; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ge-bg); color: var(--ge-tx3); box-shadow: 0 1px 3px light-dark(rgb(25 25 25 / 18%), rgb(0 0 0 / 45%)); cursor: nwse-resize; pointer-events: auto; transition: background 80ms, color 80ms; }
   .ge-tgrow:hover, .ge-tgrow[data-on] { background: light-dark(#f1f1ef, #2f2f2f); color: light-dark(#55534e, #c4c1bb); }
   .ge-tgrow > svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
   .ge-tframe { box-sizing: border-box; border: 2px solid var(--ge-accent); border-radius: 2px; background: color-mix(in srgb, var(--ge-accent) 9%, transparent); pointer-events: none; }
@@ -105,11 +108,15 @@ const REACH = { out: 12, in: 8 }; // the pointer this near the table's top (left
  * active(): whether the tools may show. struct(parents, touched, mutate): the editor's undoable
  * structural change; look(elements, change, select): a change of classes and sizes as one undo step. selectBlock(unit):
  * select the table as a block (Esc). resizeTable(event, unit, axis): a drag of the table's width
- * ("x") or scroll height ("y") from an armed edge (resize/). say: the status line. ownCells(data): the
- * page's own text or blocks on the clipboard as rows of cells' inline HTML, or null (clipboard/).
+ * ("x") or scroll height ("y") from an armed edge (resize/). say: the status line. cellsOf(data): what
+ * the clipboard holds as rows of cells, { rows, from } (clipboard/ cellsOf), or null. upload(kind,
+ * body): a file sent to the report's folder (POST /__gallery/edit/upload), a picture of a cell's
+ * (pictures.mjs).
  * typedKey(event): a key that is the "/" or "@" menu's, standing on a cell's text (slash-menu/, at-menu/), comes before the cell's.
+ * recordStep(host, before): a text step of a text block, what a view's set is (history.mjs). insertBelow(unit, key,
+ * { attributes, done }): a block of a menu's key put in below a block in one undo step (editor.mjs), what 视图 › makes.
  */
-export function createTableEditing({ active, struct, look, selectBlock, resizeTable = () => false, say, ownCells = () => null, typedKey = () => false }) {
+export function createTableEditing({ active, struct, look, selectBlock, resizeTable = () => false, say, cellsOf = () => null, upload = async () => { throw new Error("upload"); }, typedKey = () => false, recordStep = () => {}, insertBelow = () => {} }) {
   addStyle(STYLE);
   const menu = createMenu();
   let hover = null; // { unit, row, column, edges: { row, column } }: the cell under the pointer, and whether it is at the table's left (top) edge (edgesAt)
@@ -266,7 +273,7 @@ export function createTableEditing({ active, struct, look, selectBlock, resizeTa
     menuOpen: () => menu.isOpen,
     typedKey,
     resizeTable,
-    ownCells,
+    cellsOf,
     dragging: () => drag !== null,
     keys: (on) => {
       keyboard = on;
@@ -274,6 +281,8 @@ export function createTableEditing({ active, struct, look, selectBlock, resizeTa
     },
     draw: () => draw(),
   };
+  const pictures = createCellPictures({ active, recordStep, say, upload });
+  tools.pictures = pictures;
   const cells = createCells(tools);
   const widths = createColumnWidths(tools);
 
@@ -535,7 +544,7 @@ export function createTableEditing({ active, struct, look, selectBlock, resizeTa
     if (type === "column") {
       // The columns' widths: shared out equally (several selected); the kit's own, or fixed as they are.
       if (to > from) items.push({ label: t("均分列宽"), icon: ICONS.even, run: () => widths.even(unit, from, to) });
-      items.push({ label: t("一键调整列宽"), icon: ICONS.autoWidth, run: () => widths.fit(unit) });
+      items.push({ label: t("自动调整列宽"), icon: ICONS.autoWidth, run: () => widths.fit(unit) });
     }
     items.push(
       { label: t("创建副本"), icon: ICONS.duplicate, hint: "Ctrl+D", run: () => duplicate(unit, type, from, to) },
@@ -918,16 +927,27 @@ export function createTableEditing({ active, struct, look, selectBlock, resizeTa
 
   addEventListener("scroll", () => { if (!drag) draw(); }, { passive: true, capture: true });
 
-  // The rows of a table the tools manage.
+  // What a view of a table asks, and 视图 › (views.mjs).
+  const views = createViews({ active, change, tableAt, recordStep, insertBelow, drawn: () => draw() });
+
+  // The rows of a table the tools manage. 一键优化 is a split row (menu.mjs): its words run it, its ›
+  // opens two of its parts to run alone, 自动调整列宽 and 识别数字列 (the user's, 2026-11-07); 视图 › last,
+  // where a custom block reads tables (views.mjs).
   function toolRows(unit) {
     const state = tableState(unit);
+    const view = views.menuRow(unit);
     return [
       { label: t("标题行"), icon: ICONS.headerRow, checked: state.headerRow, run: () => headerRow(unit, state) },
       { label: t("标题列"), icon: ICONS.headerColumn, checked: state.headerColumn, run: () => change(unit, () => setHeaderColumn(unit, !state.headerColumn), state.headerColumn ? t("已取消标题列") : t("已设为标题列")) },
-      { label: t("一键优化"), icon: ICONS.magic, run: () => optimize(unit) },
-      { label: t("一键调整列宽"), icon: ICONS.autoWidth, run: () => widths.fit(unit) },
+      {
+        label: t("一键优化"), icon: ICONS.magic, run: () => optimize(unit),
+        submenu: () => [
+          { label: t("自动调整列宽"), icon: ICONS.autoWidth, run: () => widths.fit(unit) },
+          { label: t("识别数字列"), icon: ICONS.numbers, run: () => numbers(unit) },
+        ],
+      },
       { label: t("均分列宽"), icon: ICONS.even, run: () => widths.even(unit) },
-      { label: t("识别数字列"), icon: ICONS.numbers, run: () => numbers(unit) },
+      ...(view ? [view] : []),
     ];
   }
 
@@ -953,7 +973,10 @@ export function createTableEditing({ active, struct, look, selectBlock, resizeTa
       menu.close();
       clear();
       cells.update();
+      pictures.hide();
     },
+    /** The pictures of cells (pictures.mjs): files pasted into a cell, those of pasted cells made the folder's. */
+    pictures,
     /** The table whose cells, rows or columns are selected (no caret in one of them), or null: Ctrl+A's step to the table whole (select-all/). */
     get selectedTable() { return sel && !sel.editing && sel.unit.isConnected ? sel.unit : null; },
     /** The selection let go (blocks selected instead: select-all/). */
@@ -968,14 +991,15 @@ export function createTableEditing({ active, struct, look, selectBlock, resizeTa
       return Boolean(unit) && /^(TD|TH)$/.test(from.tagName) && /^(TD|TH)$/.test(to?.tagName ?? "") && tableAt(to) === unit;
     },
     /** The editor's UI nodes to keep in the top layer when a modal dialog opens. */
-    get nodes() { return [...nodes, ...cells.nodes]; },
+    get nodes() { return [...nodes, ...cells.nodes, ...pictures.nodes]; },
     /** Whether a node is one of the tools' (a grip, an edge's strip, the corner's +, the cells' bar). */
-    holds: (node) => Boolean(node) && [...nodes, ...cells.nodes].some((each) => each.contains(node)),
+    holds: (node) => Boolean(node) && [...nodes, ...cells.nodes, ...pictures.nodes].some((each) => each.contains(node)),
     /**
      * A table's rows of its block menu (notion-lite's 表格 section, under the menu's one title): a
      * table of the kind these tools manage has 标题行 and 标题列, switches (checked when on); then
-     * actions, each applied once (no check): 一键优化, 一键调整列宽, 均分列宽, 识别数字列; any table
-     * in its frame has its size's rows after them (layoutRows). [] for any other block.
+     * actions, each applied once (no check): 一键优化 › (自动调整列宽, 识别数字列 in its submenu),
+     * 均分列宽, 视图 › (where a custom block reads tables: views.mjs); any table in its frame has its
+     * size's rows after them (layoutRows). [] for any other block.
      */
     menuItems(target) {
       if (!target?.matches?.('[data-ge-unit-kind="table"]')) return [];