@heycys/gallery 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,527 @@
+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 { 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 { gestureLock } from "../gesture.mjs";
+import { addStyle } from "../ui.mjs";
+import { createCellBar } from "./cell-bar.mjs";
+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 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
+//   the caret's cell), and on with a drag. The caret in a cell makes that cell the selection (index.mjs
+//   draws its frame). Until a press in a cell is let go, the table's tools take no pointer (STYLE).
+// - The caret in a cell: Tab / Shift+Tab to the next / previous cell, Enter to the one below, Esc
+//   selects the cell; Backspace at its start and Delete at its end do nothing. In a list of the
+//   cell's (lists.mjs), Enter and Backspace at an item's start are the list's.
+// - Cells selected: the arrows move a one-cell selection (a row's up and down, a column's left and
+//   right), with Shift its far edge; Tab as →, Shift+Tab as Shift+←; Enter edits the focus cell
+//   (Shift+Enter in the last row puts a row below); Esc selects the cell's row, else the table;
+//   Backspace / Delete take out selected rows or columns, else empty the cells and take their color;
+//   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.
+// 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
+// past a merged cell, and copies and pastes go by its top left slot.
+
+const STYLE = `
+  ${gestureLock("data-ge-tcells", { select: true })}
+  /* The button held after a press in a cell (cells or text being selected): the tools standing by the table (the lines' strips, widths.mjs; the grips, + points and corner, index.mjs) take no pointer, so none lights, shows its cursor or draws its line as the pointer goes over them. */
+  html[data-ge-tpress] :is(.ge-tcol, .ge-trows, .ge-tgrip, .ge-tplus, .ge-tgrow) { pointer-events: none; }
+  /* A cell has square corners and no fill under the pointer, hovered or edited (selected cells have the table tools' frame). */
+  [data-ge-editing] [data-ge-kind="cell"][contenteditable="true"] { --ge-text-radius: 0px; --ge-text-tint: none; }
+`;
+const MAX_PASTE = 5000; // cells a paste may fill (a table's limit: components/table/file.mjs)
+const same = (a, b) => a?.[0] === b?.[0] && a?.[1] === b?.[1];
+const clamp = (value, low, high) => Math.max(low, Math.min(high, value));
+const isCell = (node) => /^(TD|TH)$/.test(node?.tagName ?? "");
+const writable = (cell) => cell.getAttribute("contenteditable") === "true";
+const contents = (cell) => {
+  const range = document.createRange();
+  range.selectNodeContents(cell);
+  return range;
+};
+
+/** Cells emptied, their color and their bold taken too (notion-lite's 清除内容), one undo step. */
+export function clearCells(tools, list) {
+  const targets = list.filter((cell) => writable(cell) && (cell.hasChildNodes() || cellColorOf(cell) || cell.classList.contains(CELL_BOLD)));
+  if (targets.length === 0) return;
+  tools.struct([...new Set(targets.map((cell) => cell.parentElement))], targets, () => {
+    for (const cell of targets) {
+      cell.replaceChildren();
+      cell.classList.remove(...BLOCK_COLORS, CELL_BOLD);
+    }
+    return { touched: targets, focus: null };
+  });
+  tools.say(t("已清除内容 · Ctrl+Z 撤销"));
+}
+
+/** t: the table tools' selection and changes (index.mjs). */
+export function createCells(tools) {
+  addStyle(STYLE);
+  const bar = createCellBar(run);
+  const lists = createCellLists(tools);
+  let press = null; // the main button down in a cell: { unit, start: [row, column], crossed }
+  let swallow = false; // a Shift+click selected: the mousedown after it does nothing
+
+  // ---------- the pointer ----------
+
+  document.addEventListener("pointerdown", (event) => {
+    // (A header's sort arrow is the kit's control: index.mjs sorts by it.)
+    if (!tools.active() || event.button !== 0 || event.target?.closest?.("[data-doc-dev], .ge-pop, .doc-table-sort-button")) return;
+    const cell = event.target?.closest?.("td, th");
+    const unit = tools.tableAt(cell);
+    const sel = tools.sel;
+    if (!unit) {
+      // A press outside the table lets its selection go.
+      if (sel && !sel.unit.contains(event.target)) tools.clear();
+      return;
+    }
+    const at = tools.placeOf(tableSlots(unit), cell);
+    // Until it is let go, the tools by the table wait (notion-lite's hover waits for its drag): STYLE.
+    document.documentElement.setAttribute("data-ge-tpress", "");
+    if (event.shiftKey) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      swallow = true;
+      const anchor = sel?.unit === unit ? sel.anchor : at;
+      tools.selectCells(unit, anchor, at);
+      press = { unit, start: anchor, crossed: true };
+      document.documentElement.setAttribute("data-ge-tcells", "");
+      return;
+    }
+    if (sel && !sel.editing) tools.clear(); // the caret goes in where it was pressed
+    press = { unit, start: at, crossed: false };
+  }, true);
+  document.addEventListener("mousedown", (event) => {
+    if (!swallow) return;
+    swallow = false;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }, true);
+
+  document.addEventListener("pointermove", (event) => {
+    if (!press || !(event.buttons & 1)) return;
+    const at = tools.cellAt(press.unit, event.clientX, event.clientY);
+    if (!at || (!press.crossed && same(at, press.start))) return; // in the cell it began in: the browser's selection
+    press.crossed = true;
+    document.documentElement.setAttribute("data-ge-tcells", "");
+    const sel = tools.sel;
+    if (sel && !sel.editing && sel.type === "cell" && same(sel.anchor, press.start) && same(sel.focus, at)) return;
+    tools.selectCells(press.unit, press.start, at);
+  }, true);
+  const release = () => {
+    press = null;
+    document.documentElement.removeAttribute("data-ge-tcells");
+    document.documentElement.removeAttribute("data-ge-tpress");
+  };
+  document.addEventListener("pointerup", release, true);
+  document.addEventListener("pointercancel", release, true);
+  addEventListener("blur", release);
+
+  // The caret in a cell is that cell's selection; in text outside the table, the selection goes.
+  document.addEventListener("selectionchange", () => {
+    if (!tools.active()) return;
+    const selection = getSelection();
+    if (press?.crossed) {
+      if (selection.rangeCount) selection.removeAllRanges();
+      return;
+    }
+    if (!selection.rangeCount) return;
+    const host = editable(selection.anchorNode);
+    const unit = isCell(host) ? tools.tableAt(host) : null;
+    const sel = tools.sel;
+    if (unit) {
+      const at = tools.placeOf(tableSlots(unit), host);
+      if (!(sel?.editing && sel.unit === unit && same(sel.anchor, at))) tools.editing(unit, at);
+    } else if (sel && host) tools.clear();
+  });
+
+  // ---------- the keys ----------
+
+  document.addEventListener("keydown", (event) => {
+    const sel = tools.sel;
+    if (!sel || !tools.active() || event.defaultPrevented || event.isComposing || event.keyCode === 229) return;
+    if (tools.typedKey(event)) return void event.stopImmediatePropagation();
+    if (!sel.unit.isConnected || tools.menuOpen() || tools.dragging() || event.target?.closest?.("input, textarea, .ge-pop, .notion-popup-layer")) return;
+    if (sel.editing ? caretKey(event, sel) : cellKey(event, sel)) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }, true);
+
+  // The caret in a cell: whether the key was the table's.
+  function caretKey(event, sel) {
+    const host = editable(event.target);
+    if (!isCell(host) || tools.tableAt(host) !== sel.unit || event.ctrlKey || event.metaKey || event.altKey) return false;
+    const { unit } = sel;
+    const { rows, slots } = tableState(unit);
+    const at = tools.placeOf(slots, host);
+    if (!at || !slots) return false;
+    if (lists.key(event, host)) return true;
+    const selection = getSelection();
+    switch (event.key) {
+      case "Tab": {
+        // The next (previous) cell in reading order, a merged one once.
+        const places = [...slots.places.values()];
+        const index = places.findIndex((place) => place.r === at[0] && place.c === at[1]) + (event.shiftKey ? -1 : 1);
+        if (index >= 0 && index < places.length) tools.editCell(unit, [places[index].r, places[index].c]);
+        return true;
+      }
+      case "Enter": {
+        if (event.shiftKey) return false; // a line break in the cell
+        const below = at[0] + slots.places.get(host).rows;
+        if (below < rows.length) tools.editCell(unit, [below, at[1]]);
+        return true;
+      }
+      case "Backspace":
+        return !event.shiftKey && selection.isCollapsed && atEdge(host, false);
+      case "Delete":
+        return !event.shiftKey && selection.isCollapsed && atEdge(host, true);
+      case "Escape":
+        tools.selectCells(unit, at);
+        return true;
+      default:
+        return false;
+    }
+  }
+
+  const ARROWS = { ArrowUp: [-1, 0], ArrowDown: [1, 0], ArrowLeft: [0, -1], ArrowRight: [0, 1] };
+
+  // Cells (rows, columns) selected: whether the key was the table's.
+  function cellKey(event, sel) {
+    const { unit } = sel;
+    const mod = event.ctrlKey || event.metaKey;
+    const key = event.key;
+    const { rows, columns, body } = tableState(unit);
+    const b = tools.bounds(sel);
+    const single = b.r0 === b.r1 && b.c0 === b.c1;
+    if (mod && !event.altKey) {
+      const letter = key.toLowerCase();
+      if (letter === "d" && !event.shiftKey) {
+        if (sel.type === "row" || sel.type === "column") tools.duplicate(unit, sel.type, sel.type === "row" ? b.r0 : b.c0, sel.type === "row" ? b.r1 : b.c1);
+        else if (b.r1 > b.r0) fill(sel, "down");
+        return true;
+      }
+      if (letter === "r" && !event.shiftKey) {
+        if (b.c1 > b.c0) fill(sel, "right");
+        return true; // never the browser's reload
+      }
+      if (!event.shiftKey && FORMAT_KEYS[letter] === "bold") return bold(tools.selectedCells(sel)), true;
+      if (!event.shiftKey && FORMAT_KEYS[letter]) return format(tools.selectedCells(sel), [[FORMAT_KEYS[letter]]]), true;
+      if (event.shiftKey && (letter === "s" || letter === "x")) return format(tools.selectedCells(sel), [["strike"]]), true;
+      return false; // copy, cut and paste come as their events
+    }
+    if (mod && event.altKey && key === "\\") {
+      format(tools.selectedCells(sel), [["bold", false], ["italic", false], ["underline", false], ["strike", false], ["code", false], ["text", null], ["highlight", null]], { [CELL_BOLD]: false });
+      return true;
+    }
+    if (event.altKey) return false;
+    const arrow = key in ARROWS ? key : key === "Tab" ? (event.shiftKey ? "ArrowLeft" : "ArrowRight") : null;
+    if (arrow) {
+      tools.keys(true);
+      const [dr, dc] = ARROWS[arrow];
+      if (event.shiftKey) {
+        // The edge furthest from the anchor moves.
+        const anchor = [sel.type === "column" ? b.r0 : sel.anchor[0], sel.type === "row" ? b.c0 : sel.anchor[1]];
+        const far = [anchor[0] === b.r0 ? b.r1 : b.r0, anchor[1] === b.c0 ? b.c1 : b.c0];
+        tools.selectCells(unit, anchor, [clamp(far[0] + dr, 0, rows.length - 1), clamp(far[1] + dc, 0, columns - 1)]);
+        return true;
+      }
+      if (sel.type === "row" && dc === 0) return tools.selectRows(unit, clamp(b.r0 + dr, 0, rows.length - 1)), true;
+      if (sel.type === "column" && dr === 0) return tools.selectColumns(unit, clamp(b.c0 + dc, 0, columns - 1)), true;
+      // From the focus's row and the first column (←/→), the first row and the focus's column (↑/↓);
+      // ←/→ go on to the row before or after. One merged cell selected: from its edges, past it.
+      const merged = tools.selectedCells(sel).length === 1 && (b.r1 > b.r0 || b.c1 > b.c0);
+      let [r, c] = dc !== 0 ? [sel.focus[0], b.c0] : [b.r0, sel.focus[1]];
+      if (merged && dc > 0) c = b.c1;
+      if (merged && dr > 0) r = b.r1;
+      if (dc !== 0) {
+        c += dc;
+        if (c < 0) [r, c] = r > 0 ? [r - 1, columns - 1] : [r, 0];
+        else if (c >= columns) [r, c] = r < rows.length - 1 ? [r + 1, 0] : [r, columns - 1];
+      } else r = clamp(r + dr, 0, rows.length - 1);
+      tools.selectCells(unit, [r, c]);
+      return true;
+    }
+    switch (key) {
+      case "Enter":
+        if (sel.type !== "cell") return false;
+        if (!event.shiftKey) return tools.editCell(unit, sel.focus), true;
+        // Shift+Enter on one cell of the last row: a row below, that cell's column edited.
+        if (single && b.r0 === rows.length - 1 && tools.change(unit, () => insertRow(unit, rows.length), t("已插入一行"))) tools.editCell(unit, [b.r0 + 1, b.c0]);
+        return true;
+      case "Escape":
+        if (sel.type === "cell" && single) tools.selectRows(unit, b.r0);
+        else tools.selectBlock(unit);
+        return true;
+      case "Backspace":
+      case "Delete": {
+        // Rows or columns, not all of them, go (the one after them selected); else the cells empty.
+        const heads = rows.length - body.rows.length;
+        const allRows = b.r0 <= heads && b.r1 >= rows.length - 1;
+        const allColumns = b.c0 === 0 && b.c1 >= columns - 1;
+        if ((sel.type === "row" && !allRows) || (sel.type === "column" && !allColumns)) {
+          const axis = sel.type;
+          if (tools.removeRange(unit, axis, axis === "row" ? b.r0 : b.c0, axis === "row" ? b.r1 : b.c1)) {
+            const now = tableState(unit);
+            if (axis === "row") tools.selectRows(unit, Math.min(b.r0, now.rows.length - 1));
+            else tools.selectColumns(unit, Math.min(b.c0, now.columns - 1));
+          }
+          return true;
+        }
+        clearCells(tools, tools.selectedCells(sel));
+        return true;
+      }
+      default:
+        // A character: at the end of the last cell, which is edited (the key goes on to it).
+        if (key.length === 1 && !mod) tools.editCell(unit, [b.r1, b.c1]);
+        return false;
+    }
+  }
+
+  // Formats on whole cells (the format bar's, marks.mjs) and `classes` of their looks ({ name: on }),
+  // one undo step. changes: [[name, value]], value undefined toggles (off when every cell with text
+  // has it all over, else on).
+  function format(list, changes, classes = null) {
+    const cells = list.filter(writable);
+    const written = cells.filter((cell) => cell.textContent.trim() !== "");
+    const looked = classes ? cells.filter((cell) => Object.entries(classes).some(([name, on]) => cell.classList.contains(name) !== on)) : [];
+    if (written.length === 0 && looked.length === 0) return false;
+    const resolved = changes.map(([name, value]) => [name, value === undefined ? !written.every((cell) => markValue(cell, contents(cell), name) === true) : value]);
+    const touched = [...new Set([...written, ...looked])]; // their text and classes recorded
+    tools.struct([], touched, () => {
+      for (const cell of written) for (const [name, value] of resolved) formatRange(cell, contents(cell), name, value);
+      for (const cell of looked) for (const [name, on] of Object.entries(classes)) cell.classList.toggle(name, on);
+      return { touched, focus: null };
+    });
+    update();
+    return true;
+  }
+
+  // Bold on whole cells is theirs (CELL_BOLD, a look: the words typed in them later bold too, as a
+  // header's are); off, the look and their words' bold both.
+  const isBold = (cell) => cell.classList.contains(CELL_BOLD) || (cell.textContent.trim() !== "" && markValue(cell, contents(cell), "bold") === true);
+  function bold(list) {
+    const cells = list.filter(writable);
+    const on = !cells.every(isBold);
+    return format(cells, on ? [] : [["bold", false]], { [CELL_BOLD]: on });
+  }
+
+  // Ctrl+D / Ctrl+R: the first row (column) of the cells copied into the others (their text).
+  function fill(sel, direction) {
+    const { r0, r1, c0, c1 } = tools.bounds(sel);
+    const slots = tableSlots(sel.unit);
+    const pairs = [];
+    for (let r = r0; r <= r1; r++) {
+      for (let c = c0; c <= c1; c++) {
+        if (direction === "down" ? r === r0 : c === c0) continue;
+        const from = tools.cellOf(slots, direction === "down" ? [r0, c] : [r, c0]);
+        const to = tools.cellOf(slots, [r, c]);
+        // A cell once, never from itself (a merged cell across the first row or column).
+        if (from && to && to !== from && writable(to) && !pairs.some(([, other]) => other === to)) pairs.push([from, to]);
+      }
+    }
+    const targets = pairs.map(([, to]) => to);
+    if (targets.length === 0) return;
+    tools.struct([...new Set(targets.map((cell) => cell.parentElement))], targets, () => {
+      for (const [from, to] of pairs) {
+        if (writable(from)) to.innerHTML = from.innerHTML;
+        else to.textContent = from.textContent;
+      }
+      return { touched: targets, focus: null };
+    });
+    tools.say(direction === "down" ? t("已向下填充 · Ctrl+Z 撤销") : t("已向右填充 · Ctrl+Z 撤销"));
+  }
+
+  // ---------- the bar ----------
+
+  function run(command, value) {
+    const sel = tools.sel;
+    if (!sel) return;
+    const list = tools.selectedCells(sel);
+    const b = tools.bounds(sel);
+    if (command === "color") {
+      if (tools.look(list, colorLook(value ?? { kind: "text", color: null }, { only: true }))) tools.say(t("已设置颜色 · Ctrl+Z 撤销"));
+    } else if (command === "align") {
+      tools.look(list, alignLook(value));
+    } else if (command === "bold") {
+      bold(list);
+    } else if (command === "clear") {
+      clearCells(tools, list);
+    } else if (command === "insert") {
+      const [axis, at] = { above: ["row", b.r0], below: ["row", b.r1 + 1], left: ["column", b.c0], right: ["column", b.c1 + 1] }[value];
+      tools.insert(sel.unit, axis, at);
+      return;
+    } else if (command === "remove") {
+      const axis = value === "rows" ? "row" : "column";
+      if (tools.removeRange(sel.unit, axis, axis === "row" ? b.r0 : b.c0, axis === "row" ? b.r1 : b.c1)) tools.clear();
+      return;
+    } else if (command === "merge") {
+      tools.merge();
+    } else if (command === "split") {
+      tools.split();
+    }
+    update();
+  }
+
+  // The bar over selected cells (not rows or columns, which have their menus; not the caret's cell).
+  function update() {
+    const sel = tools.sel;
+    if (!sel || sel.editing || sel.type !== "cell" || !tools.active() || !sel.unit.isConnected) return bar.hide();
+    const list = tools.selectedCells(sel);
+    if (list.length === 0) return bar.hide();
+    const rects = list.map((cell) => cell.getBoundingClientRect());
+    const rect = { left: Math.min(...rects.map((r) => r.left)), top: Math.min(...rects.map((r) => r.top)), right: Math.max(...rects.map((r) => r.right)), bottom: Math.max(...rects.map((r) => r.bottom)) };
+    bar.show({ ...rect, width: rect.right - rect.left, height: rect.bottom - rect.top }, stateOf(list));
+  }
+
+  // What the cells share: a color, bold, their alignments (aligns.mjs; none current when they differ).
+  function stateOf(list) {
+    const colorOf = (cell) => cellColorOf(cell);
+    const first = colorOf(list[0]);
+    const color = list.every((cell) => JSON.stringify(colorOf(cell)) === JSON.stringify(first)) ? first : undefined;
+    const own = list.filter(writable);
+    const bolded = own.length > 0 && own.every(isBold);
+    // Several cells may be made one; one merged cell, separate cells again.
+    const merge = list.length > 1 ? "merge" : list[0] && (list[0].rowSpan > 1 || list[0].colSpan > 1) ? "split" : null;
+    return { color, bold: bolded, aligns: alignItems(list), merge };
+  }
+
+  // ---------- the clipboard ----------
+
+  // 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));
+
+  function copy(event) {
+    const sel = tools.sel;
+    if (!sel || sel.editing || !tools.active() || !sel.unit.isConnected) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    const { r0, r1, c0, c1 } = tools.bounds(sel);
+    const { slots } = tableState(sel.unit);
+    // By slots: a merged cell in its top left one, the others it covers empty.
+    const grid = [];
+    for (let r = r0; r <= r1; r++) {
+      grid.push([]);
+      for (let c = c0; c <= c1; c++) {
+        const cell = slots.matrix[r][c];
+        const place = slots.places.get(cell);
+        grid.at(-1).push(place.r === r && place.c === c ? cell : null);
+      }
+    }
+    const html = grid.map((row) => row.map((cell) => (cell ? htmlOf(cell) : "")));
+    const payload = JSON.stringify({ v: 1, cells: html });
+    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"));
+    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;
+  }
+
+  function paste(event) {
+    const sel = tools.sel;
+    if (!sel || sel.editing || !tools.active() || !sel.unit.isConnected) return;
+    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);
+  }
+
+  function pasteGrid(sel, pasted, formula) {
+    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);
+    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));
+    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))];
+    const size = [grid.length * times[0], grid[0].length * times[1]];
+    if (size[0] * size[1] > MAX_PASTE) return void tools.say(t("一次粘贴的格子太多了。"));
+    const { rows, columns, slots } = tableState(unit);
+    // The cells there now, whose text the paste changes (undo puts it back).
+    const existing = new Set();
+    for (let r = r0; r < Math.min(rows.length, r0 + size[0]); r++) for (let c = c0; c < Math.min(columns, c0 + size[1]); c++) existing.add(tools.cellOf(slots, [r, c]));
+    const made = tools.change(unit, () => {
+      for (let now = tableState(unit); now.columns < c0 + size[1]; now = tableState(unit)) insertColumn(unit, now.columns);
+      for (let now = tableParts(unit); now.rows.length < r0 + size[0]; now = tableParts(unit)) insertRow(unit, now.rows.length);
+      // The slots after the rows and columns put in, read once for every cell below.
+      const slotsNow = tableSlots(unit);
+      for (let r = 0; r < size[0]; r++) {
+        for (let c = 0; c < size[1]; c++) {
+          const cell = tools.cellOf(slotsNow, [r0 + r, c0 + c]);
+          // 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;
+        }
+      }
+      return true;
+    }, null, [...existing].filter(writable));
+    if (made === null) return;
+    tools.selectCells(unit, [r0, c0], [r0 + size[0] - 1, c0 + size[1] - 1]);
+    tools.say(t("已粘贴 · Ctrl+Z 撤销"));
+  }
+  document.addEventListener("paste", paste, true);
+
+  return {
+    /** The bar shown or hidden as the selection is now (index.mjs draw). */
+    update,
+    /** A space typed into a cell: its line a list's item when it starts with "- " or "1. " (lists.mjs). */
+    typed: lists.typed,
+    get nodes() { return [bar.node]; },
+  };
+}

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

@@ -0,0 +1,40 @@
+// The table tools' icons, drawn as the editor's (20px, thin lines): the grips' menus (index.mjs)
+// and the cell bar (cell-bar.mjs).
+
+const svg = (body, box = 20) => `<svg viewBox="0 0 ${box} ${box}" aria-hidden="true">${body}</svg>`;
+
+export const TABLE_ICONS = {
+  // A grip's drag dots, two by three, filled in the grip's color (shown at 16px).
+  dots: svg('<circle cx="7.25" cy="4.5" r="1.2"/><circle cx="12.75" cy="4.5" r="1.2"/><circle cx="7.25" cy="10" r="1.2"/><circle cx="12.75" cy="10" r="1.2"/><circle cx="7.25" cy="15.5" r="1.2"/><circle cx="12.75" cy="15.5" r="1.2"/>'),
+  plus: '<svg viewBox="0 0 10 10" aria-hidden="true"><path d="M5 1.5v7M1.5 5h7"/></svg>',
+  grow: '<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M6 2v8M2 6h8"/></svg>',
+  headerRow: svg('<rect x="3.25" y="4.25" width="13.5" height="11.5" rx="2"/><path d="M3.25 8.25h13.5"/><path d="M4 5h12v3H4z" fill="currentColor" stroke="none" opacity=".22"/>'),
+  headerColumn: svg('<rect x="3.25" y="4.25" width="13.5" height="11.5" rx="2"/><path d="M7.75 4.25v11.5"/><path d="M4 5h3.5v10H4z" fill="currentColor" stroke="none" opacity=".22"/>'),
+  above: svg('<path d="M10 15.75V5.5M5.75 9.25 10 5l4.25 4.25"/><path d="M4 3.25h12"/>'),
+  below: svg('<path d="M10 4.25V14.5M5.75 10.75 10 15l4.25-4.25"/><path d="M4 16.75h12"/>'),
+  left: svg('<path d="M15.75 10H5.5M9.25 5.75 5 10l4.25 4.25"/><path d="M3.25 4v12"/>'),
+  right: svg('<path d="M4.25 10H14.5M10.75 5.75 15 10l-4.25 4.25"/><path d="M16.75 4v12"/>'),
+  duplicate: svg('<rect x="7.25" y="7.25" width="9.5" height="9.5" rx="2"/><path d="M12.75 7.25V5.5a2 2 0 0 0-2-2h-5.5a2 2 0 0 0-2 2V11a2 2 0 0 0 2 2h2"/>'),
+  clear: svg('<path d="M3.5 4.5h9M8 4.5v11M6.75 15.5h2.5"/><path d="m12.5 10.25 4.75 4.75M17.25 10.25 12.5 15"/>'),
+  trash: svg('<path d="M3.75 5.75h12.5M8 5.75V4.5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1.25M5.25 5.75l.7 9.6a1.5 1.5 0 0 0 1.5 1.4h5.1a1.5 1.5 0 0 0 1.5-1.4l.7-9.6"/>'),
+  // 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.
+  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.
+  merge: svg('<rect x="3.25" y="4.25" width="13.5" height="11.5" rx="2"/><path d="M5.75 10h3M7.25 8.5 8.75 10l-1.5 1.5M14.25 10h-3M12.75 8.5 11.25 10l1.5 1.5"/>'),
+  split: svg('<rect x="3.25" y="4.25" width="13.5" height="11.5" rx="2"/><path d="M10 4.25v11.5"/><path d="M8.25 10h-2.5M7.25 8.5 5.75 10l1.5 1.5M11.75 10h2.5M12.75 8.5l1.5 1.5-1.5 1.5"/>'),
+  // The alignments: the lines of a paragraph at the left, the middle, the right.
+  "doc-align-left": svg('<path d="M3.75 5h12.5M3.75 8.75h8M3.75 12.5h12.5M3.75 16.25h8"/>'),
+  "doc-align-center": svg('<path d="M3.75 5h12.5M6 8.75h8M3.75 12.5h12.5M6 16.25h8"/>'),
+  "doc-align-right": svg('<path d="M3.75 5h12.5M8.25 8.75h8M3.75 12.5h12.5M8.25 16.25h8"/>'),
+  // The vertical alignments: a cell with its two lines at its top, its middle, its bottom.
+  "doc-valign-top": svg('<rect x="3.25" y="3.25" width="13.5" height="13.5" rx="2"/><path d="M6.5 7h7M6.5 9.75h7"/>'),
+  "doc-valign-middle": svg('<rect x="3.25" y="3.25" width="13.5" height="13.5" rx="2"/><path d="M6.5 8.6h7M6.5 11.4h7"/>'),
+  "doc-valign-bottom": svg('<rect x="3.25" y="3.25" width="13.5" height="13.5" rx="2"/><path d="M6.5 10.25h7M6.5 13h7"/>'),
+  // 一键优化: 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"/>'),
+};