@heycys/gallery 0.1.1 → 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";
@@ -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

@@ -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,7 +19,9 @@ 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";
 
@@ -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);
 
@@ -918,10 +927,15 @@ export function createTableEditing({ active, struct, look, selectBlock, resizeTa
 
   addEventListener("scroll", () => { if (!drag) draw(); }, { passive: true, capture: true });
 
+  // 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).
+  // 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("已设为标题列")) },
@@ -933,6 +947,7 @@ export function createTableEditing({ active, struct, look, selectBlock, resizeTa
         ],
       },
       { label: t("均分列宽"), icon: ICONS.even, run: () => widths.even(unit) },
+      ...(view ? [view] : []),
     ];
   }
 
@@ -958,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/). */
@@ -973,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): 一键优化 › (自动调整列宽, 识别数字列 in its submenu),
-     * 均分列宽; any table in its frame has its size's rows after them (layoutRows). [] for any other block.
+     * 均分列宽, 视图 › (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 [];

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

@@ -0,0 +1,299 @@
+import { UPLOAD_LIMITS, mediaUrl, sizeLimit } from "../../../shared/media.mjs";
+import { cellPicture, pictureFile } from "../../components/table/index.mjs";
+import { ownHTML } from "../core.mjs";
+import { gestureLock } from "../gesture.mjs";
+import { drawAt, drawBox, layerOf } from "../overlay-layer.mjs";
+import { onSettle, own } from "../overlays.mjs";
+import { blobBase64 } from "../post.mjs";
+import { addStyle, element } from "../ui.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// 单元格里的图片 (the user's, 2026-11-09: no image block, a light one; Markdown tables hold pictures):
+// an <img> amid a table cell's words, a picture of the document's folder (components/table/ cellPicture; the
+// file takes it as source/blocks.mjs cellPictureProblem says, the kit lays it out: table.css). notion-
+// lite has none; this is the plainest that works, flat:
+// - A press on one selects it (the selection around it, a 2px blue frame over it, no caret): Delete
+//   or Backspace then takes it out, a typed character takes its place, Esc puts the caret after it;
+//   the arrows go past it as past a character (the browser's: an <img> in an editable text is one).
+// - A gray bar at its right edge (the image block's handle) under the pointer or while it is
+//   selected: dragged, the picture's width in pixels (its height by its ratio), at least MIN_WIDTH,
+//   at most its table's frame, written as its width attribute; one undo step on letting go, Esc
+//   putting it back.
+// - Where pictures come from (clipboard/, table/cells.mjs): a picture file pasted into a cell (a
+//   screenshot, a copied picture) sent to the document's folder as an image block's (fromFiles); the
+//   pictures of cells pasted (another program's table, a Markdown table, the page's own cells of
+//   another document) each made a file of the folder first (resolve: one of the folder as it is,
+//   another document's, a data: one and a web one copied in, the server downloading a web one as it
+//   does an image block's link), then put in by what pastedLines makes of each (maker): a picture of
+//   no file a link to it (a web one) or its alt words.
+
+const MIN_WIDTH = 16;
+const MAX_PICTURES = 50; // the pictures a paste copies in at most (each a download)
+const WIDTH = /^[1-9]\d{0,3}$/;
+const WEB = /^https?:\/\/[^\s"<>]+$/i;
+const DATA = /^data:image\/[a-z0-9.+-]+;base64,/i;
+// A file of a document's folder as the preview serves it (a copy of the page's HTML), or as a cell's text writes it.
+const SERVED = /^(?:https?:\/\/[^/]+)?\/__gallery\/edit\/asset\/([^/?#]+)\/(assets\/[^/?#]+)$/;
+const FOLDER_FILE = /^assets\/[A-Za-z0-9][A-Za-z0-9._-]{0,80}$/;
+const CELL = '[data-ge-kind="cell"]';
+// The name of a picture's file in its address (its last part, its escapes read).
+const nameOf = (src) => {
+  const name = src.split(/[?#]/)[0].split("/").pop() || src;
+  try {
+    return decodeURIComponent(name);
+  } catch {
+    return name;
+  }
+};
+
+const STYLE = `
+  [data-ge-editing] ${CELL}[contenteditable="true"] img { cursor: default; }
+  .ge-layer > .ge-cellpic-handle { pointer-events: auto; }
+  .ge-cellpic-frame { box-sizing: border-box; border: 2px solid var(--ge-accent); border-radius: 2px; pointer-events: none; }
+  /* The image block's handle (image/page.mjs): a plain gray bar, no border. */
+  .ge-cellpic-handle { display: flex; align-items: center; justify-content: center; width: 12px; cursor: col-resize; }
+  .ge-cellpic-handle::after { content: ""; width: 4px; height: 32px; max-height: 70%; border-radius: 4px; background: light-dark(rgb(55 53 47 / 35%), rgb(255 255 255 / 38%)); transition: background 120ms ease; }
+  .ge-cellpic-handle:hover::after, html[data-ge-cellpic-resize] .ge-cellpic-handle::after { background: light-dark(rgb(55 53 47 / 60%), rgb(255 255 255 / 62%)); }
+  ${gestureLock("data-ge-cellpic-resize", { cursor: "col-resize" })}
+`;
+
+// The report this page shows (its main's data-doc-id: its folder's name).
+const thisReport = () => document.querySelector(".doc-page")?.dataset.docId ?? null;
+
+/**
+ * active(): whether the tools may act. recordStep(host, before): a text step of a text block
+ * (history.mjs). say: the status line. upload(kind, body): POST /__gallery/edit/upload, the server's
+ * answer (an Error when it fails).
+ */
+export function createCellPictures({ active, recordStep, say, upload }) {
+  addStyle(STYLE);
+  let hovered = null; // the picture under the pointer
+  let picked = null; // the picture selected
+  let drag = null; // its edge dragged: { img, host, x, start, before, had }
+  const frame = element("div", { class: "ge-cellpic-frame", "data-doc-dev": "" });
+  const handle = element("div", { class: "ge-cellpic-handle", "data-doc-dev": "" });
+  // The picture they are drawn for: the frame the selected one's (or the dragged one's), the bar any of them.
+  const framed = () => drag?.img ?? picked;
+  const barred = () => drag?.img ?? picked ?? hovered;
+  own(frame, "cell picture", { alive: () => Boolean(framed()?.isConnected) });
+  own(handle, "cell picture", { alive: () => Boolean(barred()?.isConnected) });
+  // The cell of the picture drawn for, watched: a picture taken out (Delete, undo, someone else's
+  // words merged) takes them away at once, before the page draws again.
+  const watch = new MutationObserver(() => {
+    if (!barred()?.isConnected) draw();
+  });
+
+  // A picture of a cell the reader writes in, and that cell; or null.
+  const pictureAt = (node) => {
+    const img = node?.closest?.("img");
+    const host = img?.closest(CELL);
+    return img && host?.getAttribute("contenteditable") === "true" && host.closest("main") && !host.closest("[data-ge-lock], [inert]") && pictureFile(img) ? { img, host } : null;
+  };
+
+  function draw() {
+    if (picked && !picked.isConnected) picked = null;
+    if (hovered && !hovered.isConnected) hovered = null;
+    const img = barred();
+    watch.disconnect();
+    if (!img?.isConnected || !active()) {
+      frame.remove();
+      handle.remove();
+      return;
+    }
+    watch.observe(img.closest(CELL) ?? img.parentNode, { childList: true, subtree: true });
+    const layer = layerOf(img);
+    const rect = img.getBoundingClientRect();
+    if (img === framed()) drawBox(frame, layer, rect);
+    else frame.remove();
+    const origin = layer.getBoundingClientRect();
+    handle.style.height = `${Math.max(20, Math.round(rect.height))}px`;
+    drawAt(handle, layer, rect.right - origin.left - 2, rect.top - origin.top + Math.min(0, (rect.height - 20) / 2));
+  }
+
+  // Whether the selection is the picture alone (a press on it, or the browser's own).
+  const around = (img) => {
+    const selection = getSelection();
+    if (!selection.rangeCount || !img.parentNode) return false;
+    const range = selection.getRangeAt(0);
+    const at = [...img.parentNode.childNodes].indexOf(img);
+    return range.startContainer === img.parentNode && range.endContainer === img.parentNode && range.startOffset === at && range.endOffset === at + 1;
+  };
+  function pick({ img, host }) {
+    if (document.activeElement !== host) host.focus({ preventScroll: true });
+    const range = document.createRange();
+    range.selectNode(img);
+    getSelection().removeAllRanges();
+    getSelection().addRange(range);
+    picked = img;
+    draw();
+  }
+
+  // ---------- the pointer ----------
+
+  document.addEventListener("pointermove", (event) => {
+    if (drag) return;
+    const at = pictureAt(event.target);
+    const next = at ? at.img : event.target === handle ? hovered : null;
+    if (next !== hovered) {
+      hovered = next;
+      draw();
+    }
+  }, { passive: true });
+  // A press on a picture selects it, before the cells' tools (a drag between cells) and the caret hear it.
+  window.addEventListener("pointerdown", (event) => {
+    const at = event.button === 0 && active() ? pictureAt(event.target) : null;
+    if (!at) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    pick(at);
+  }, true);
+  window.addEventListener("mousedown", (event) => {
+    if (event.button === 0 && active() && (pictureAt(event.target) || event.target === handle)) event.preventDefault(); // no caret, no drag of the picture
+  }, true);
+  document.addEventListener("selectionchange", () => {
+    if (picked && !(picked.isConnected && around(picked))) {
+      picked = null;
+      draw();
+    }
+  });
+  document.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape" || event.isComposing) return;
+    if (drag) return void (event.preventDefault(), event.stopImmediatePropagation(), end(false));
+    if (!picked || !around(picked)) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    const range = document.createRange();
+    range.setStartAfter(picked);
+    range.collapse(true);
+    getSelection().removeAllRanges();
+    getSelection().addRange(range);
+  }, true);
+  for (const type of ["scroll", "resize"]) window.addEventListener(type, () => { if (drag || picked || hovered) draw(); }, { capture: true, passive: true });
+  onSettle(draw);
+
+  // ---------- its width ----------
+
+  handle.addEventListener("pointerdown", (event) => {
+    const img = picked ?? hovered;
+    const host = img?.closest(CELL);
+    if (event.button !== 0 || !host || !active()) return;
+    event.preventDefault();
+    event.stopPropagation();
+    handle.setPointerCapture(event.pointerId);
+    drag = { img, host, x: event.clientX, start: img.getBoundingClientRect().width, before: ownHTML(host), had: img.getAttribute("width") };
+    document.documentElement.setAttribute("data-ge-cellpic-resize", "");
+  });
+  handle.addEventListener("pointermove", (event) => {
+    if (!drag) return;
+    const room = drag.host.closest(".doc-table-wrap")?.clientWidth || 2000; // never wider than its table's frame
+    drag.img.setAttribute("width", String(Math.round(Math.max(MIN_WIDTH, Math.min(room, drag.start + event.clientX - drag.x)))));
+    draw();
+  });
+  function end(keep) {
+    if (!drag) return;
+    const { img, host, before, had } = drag;
+    drag = null;
+    document.documentElement.removeAttribute("data-ge-cellpic-resize");
+    if (!keep) {
+      if (had === null) img.removeAttribute("width");
+      else img.setAttribute("width", had);
+    } else if (img.getAttribute("width") !== had) recordStep(host, before);
+    draw();
+  }
+  handle.addEventListener("pointerup", () => end(true));
+  handle.addEventListener("pointercancel", () => end(false));
+
+  // ---------- pictures pasted ----------
+
+  const sent = async (blob, name) => (await upload("image", { name, type: blob.type, data: await blobBase64(blob) })).path;
+
+  /**
+   * Picture files pasted into a cell (a screenshot, a copied picture), each sent to the document's
+   * folder as an image block's (10 MB at most): the cell's pictures, in order, those that could not
+   * go said.
+   */
+  async function fromFiles(files) {
+    const pictures = [...files].filter((file) => /^image\//.test(file.type));
+    if (pictures.some((file) => file.size > UPLOAD_LIMITS.image)) say(t("图片太大（最多 {0}）。", sizeLimit("image")), "error");
+    const made = await Promise.all(pictures.filter((file) => file.size <= UPLOAD_LIMITS.image).map(async (file) => {
+      try {
+        return cellPicture(document, await sent(file, file.name || `image.${file.type.split("/")[1] ?? "png"}`), { alt: "" });
+      } catch (error) {
+        say(t("{0}：{1}", t("无法上传这张图片"), error.message), "error");
+        return null;
+      }
+    }));
+    return made.filter(Boolean);
+  }
+
+  // A pasted picture's address as a file of this document's folder ({ path }), or null.
+  async function fileOf(src, from, here) {
+    const served = SERVED.exec(src);
+    const [report, file] = served ? [decodeURIComponent(served[1]), served[2]] : FOLDER_FILE.test(src) ? [from ?? here, src] : [null, null];
+    if (file && report === here) return { path: file };
+    const copied = async (address, name) => {
+      const response = await fetch(address);
+      const blob = response.ok ? await response.blob() : null;
+      return blob && /^image\//.test(blob.type) && blob.size <= UPLOAD_LIMITS.image ? { path: await sent(blob, name) } : null;
+    };
+    if (file && report) return copied(mediaUrl("asset", encodeURIComponent(report), file), file.slice("assets/".length));
+    if (DATA.test(src)) return copied(src, "image");
+    if (WEB.test(src)) return { path: (await upload("image", { url: src })).path };
+    return null;
+  }
+
+  /**
+   * The pictures of pasted cells (`htmls`: their inline HTML) as files of this document's folder: a
+   * Map of each address to { path } (assets/<file>), or null where none could be had. `from`: the
+   * report the page's own cells came from (their assets/ that report's).
+   */
+  async function resolve(htmls, from = null) {
+    const addresses = new Set();
+    const template = document.createElement("template");
+    for (const html of htmls) {
+      if (!html.includes("<img")) continue;
+      template.innerHTML = html;
+      for (const img of template.content.querySelectorAll("img[src]")) addresses.add(img.getAttribute("src"));
+    }
+    const found = new Map();
+    if (addresses.size === 0) return found;
+    const here = thisReport();
+    const list = [...addresses];
+    if (list.some((src) => !(SERVED.exec(src)?.[1] === here || (FOLDER_FILE.test(src) && (from ?? here) === here)))) say(t("正在下载…"));
+    await Promise.all(list.slice(0, MAX_PICTURES).map(async (src) => found.set(src, await fileOf(src, from, here).catch(() => null))));
+    return found;
+  }
+
+  /**
+   * What pastedLines makes of a pasted picture (`found`: resolve's answer): the cell's picture, its
+   * alt and width kept; else a web one a link to it (`links`), any other its alt words (undefined:
+   * an element that is no picture).
+   */
+  const maker = (found, links = true) => (img) => {
+    if (img.localName !== "img") return undefined;
+    const src = img.getAttribute("src") ?? "";
+    const alt = img.getAttribute("alt") ?? "";
+    const width = img.getAttribute("width") ?? "";
+    const file = found.get(src);
+    if (file) return cellPicture(document, file.path, { alt, width: WIDTH.test(width) ? Number(width) : null });
+    if (links && WEB.test(src)) {
+      const link = document.createElement("a");
+      link.setAttribute("href", src);
+      link.textContent = alt || nameOf(src);
+      return link;
+    }
+    return alt ? document.createTextNode(alt) : null;
+  };
+
+  return {
+    fromFiles, resolve, maker,
+    /** The tools' nodes (kept in the top layer with a modal dialog). */
+    get nodes() { return [frame, handle].filter((node) => node.isConnected); },
+    /** Take them away (the page stops editing). */
+    hide() {
+      hovered = picked = null;
+      if (drag) end(false);
+      draw();
+    },
+  };
+}