@heycys/gallery 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,187 @@
+import { ZWSP } from "../../../shared/inline-spacing.mjs";
+// Lists in a table's cells (单元格里的列表; the plan's T6 as the reader settled it): a cell stays one
+// text block, a list is part of its text (<td>…<ul><li>…</li></ul>…</td>: core.mjs serializeInner,
+// source/blocks.mjs inlineProblem), the cell's lines its own lines (<br> between them) and its
+// lists'. "- " (or "* ") typed at the start of a line makes it a bulleted list's item, "1. " a
+// numbered one's (into the list right above or below it of that kind); in an item, Enter makes the
+// next one with what follows the caret, Enter in an empty one leaves the list (an empty line where it
+// was, the items after it a list of their own), Backspace at an item's start makes it a line again.
+// Each is one undo step of the cell's text.
+
+const isList = (node) => node?.nodeType === 1 && (node.tagName === "UL" || node.tagName === "OL");
+const isBreak = (node) => node?.nodeType === 1 && node.tagName === "BR";
+// What stands on a line of the cell with others: neither a line break nor a list.
+const inline = (node) => Boolean(node) && !isBreak(node) && !isList(node);
+const empty = (node) => !node.textContent.replaceAll(ZWSP, "").trim() && !node.querySelector("[data-ge-atom], img");
+// A line break holding the caret on an empty line or in an empty item (left out when written).
+const holder = () => document.createElement("br");
+
+/** t: the table tools (index.mjs): struct, say. */
+export function createCellLists(t) {
+  // The cell's child holding a node (the node itself at the cell's level).
+  const topOf = (cell, node) => {
+    while (node && node.parentNode !== cell) node = node.parentNode;
+    return node;
+  };
+
+  // The caret, put after a change of the cell's text.
+  function caret(node, offset) {
+    const range = document.createRange();
+    range.setStart(node, offset);
+    range.collapse(true);
+    getSelection().removeAllRanges();
+    getSelection().addRange(range);
+  }
+
+  // One undo step of the cell's text.
+  const change = (cell, mutate, said) => {
+    let after = null;
+    t.struct([], [cell], () => {
+      after = mutate();
+      return { touched: [cell], focus: null };
+    });
+    after?.();
+    if (said) t.say(said);
+  };
+
+  /** A space typed into a cell: "- ", "* " or "1. " at the start of a line makes it a list's item. Returns whether it did. */
+  function typed(cell, data) {
+    if (data !== " ") return false;
+    const selection = getSelection();
+    if (!selection.rangeCount || !selection.isCollapsed) return false;
+    const at = selection.getRangeAt(0);
+    if (!cell.contains(at.startContainer)) return false;
+    const inside = at.startContainer.nodeType === 1 ? at.startContainer : at.startContainer.parentElement;
+    if (inside?.closest("li") && cell.contains(inside.closest("li"))) return false;
+    // The line: the cell's children between the break or list before the caret and the one after it.
+    const top = at.startContainer === cell ? cell.childNodes[at.startOffset - 1] : topOf(cell, at.startContainer);
+    if (!inline(top)) return false;
+    let first = top;
+    while (inline(first.previousSibling)) first = first.previousSibling;
+    let last = top;
+    while (inline(last.nextSibling)) last = last.nextSibling;
+    const head = document.createRange();
+    head.setStartBefore(first);
+    head.setEnd(at.startContainer, at.startOffset);
+    const typedText = head.toString().replace(/ /g, " ");
+    const tag = /^[-*] $/.test(typedText) ? "UL" : /^1\. $/.test(typedText) ? "OL" : null;
+    if (!tag || head.cloneContents().querySelector("[data-ge-atom]")) return false;
+    // The whole line (a live range: it follows the marker's removal).
+    const line = document.createRange();
+    line.setStartBefore(first);
+    line.setEndAfter(last);
+    change(cell, () => {
+      head.deleteContents(); // the marker
+      const item = document.createElement("li");
+      item.append(line.extractContents());
+      if (empty(item)) item.replaceChildren(holder());
+      // Where the line was; a list stands on lines of its own: the breaks around it go.
+      let before = cell.childNodes[line.startOffset - 1] ?? null;
+      let after = cell.childNodes[line.startOffset] ?? null;
+      if (isBreak(after)) {
+        const next = after.nextSibling;
+        after.remove();
+        after = next;
+      }
+      if (isBreak(before)) {
+        const previous = before.previousSibling;
+        before.remove();
+        before = previous;
+      }
+      // Into the list of its kind right above it (and the one right below it joins), else a new one.
+      let list = before?.tagName === tag ? before : null;
+      if (list) list.append(item);
+      else {
+        list = document.createElement(tag.toLowerCase());
+        list.append(item);
+        cell.insertBefore(list, after);
+      }
+      if (after?.tagName === tag) {
+        list.append(...after.children);
+        after.remove();
+      }
+      return () => caret(item, 0);
+    });
+    return true;
+  }
+
+  /** A key in a cell (no modifier): Enter in an item, Backspace at an item's start. Returns whether it was the list's. */
+  function key(event, cell) {
+    if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey || (event.key !== "Enter" && event.key !== "Backspace")) return false;
+    const selection = getSelection();
+    if (!selection.rangeCount) return false;
+    const at = selection.getRangeAt(0);
+    const inside = at.startContainer.nodeType === 1 ? at.startContainer : at.startContainer.parentElement;
+    const item = inside?.closest("li");
+    if (!item || !cell.contains(item) || item.parentElement?.parentElement !== cell) return false;
+    if (event.key === "Enter") {
+      enter(cell, item, at);
+      return true;
+    }
+    const start = document.createRange();
+    start.setStart(item, 0);
+    start.setEnd(at.startContainer, at.startOffset);
+    if (!selection.isCollapsed || start.toString() !== "" || start.cloneContents().querySelector("[data-ge-atom]")) return false;
+    unlist(cell, item);
+    return true;
+  }
+
+  // Enter in an item: the next item with what follows the caret; in an empty one, out of the list.
+  function enter(cell, item, at) {
+    change(cell, () => {
+      if (!at.collapsed) at.deleteContents();
+      const list = item.parentElement;
+      if (empty(item)) {
+        const after = [...list.children].slice([...list.children].indexOf(item) + 1);
+        item.remove();
+        const line = holder();
+        list.after(line);
+        if (after.length > 0) {
+          const rest = document.createElement(list.tagName.toLowerCase());
+          rest.append(...after);
+          line.after(rest);
+        }
+        if (list.children.length === 0) list.remove();
+        return () => caret(cell, [...cell.childNodes].indexOf(line));
+      }
+      const tail = document.createRange();
+      tail.setStart(at.startContainer, at.startOffset);
+      tail.setEnd(item, item.childNodes.length);
+      const next = document.createElement("li");
+      next.append(tail.extractContents());
+      if (empty(next)) next.replaceChildren(holder());
+      if (empty(item)) item.replaceChildren(holder());
+      item.after(next);
+      return () => caret(next, 0);
+    });
+  }
+
+  // Backspace at an item's start: a line where it was (the items before it stay in the list, those
+  // after it a list of their own), on a line of its own.
+  function unlist(cell, item) {
+    change(cell, () => {
+      const list = item.parentElement;
+      const items = [...list.children];
+      const index = items.indexOf(item);
+      const after = items.slice(index + 1);
+      const nodes = empty(item) ? [holder()] : [...item.childNodes].filter((node, i, all) => !(isBreak(node) && i === all.length - 1));
+      item.remove();
+      const reference = index === 0 ? list : list.nextSibling;
+      if (index === 0 ? inline(list.previousSibling) : false) cell.insertBefore(document.createElement("br"), reference);
+      for (const node of nodes) cell.insertBefore(node, reference);
+      if (index > 0 && after.length > 0) {
+        const rest = document.createElement(list.tagName.toLowerCase());
+        rest.append(...after);
+        cell.insertBefore(rest, reference);
+      }
+      if (list.children.length === 0) list.remove();
+      // A line followed by words of the cell's: a break between them.
+      const end = nodes.at(-1);
+      if (inline(end.nextSibling) && !isBreak(end)) end.after(document.createElement("br"));
+      const first = nodes[0];
+      return () => caret(cell, [...cell.childNodes].indexOf(first));
+    });
+  }
+
+  return { typed, key };
+}

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

@@ -0,0 +1,313 @@
+import { SPAN } from "../../../shared/media.mjs";
+import { COLUMN_WIDTH, MIN_COLUMN_WIDTH, widthOf } from "../../components/table/index.mjs";
+import { relayout, tableParts, tableState } from "../../components/table/page.mjs";
+import { widthHolder } from "../../../shared/table-slots.mjs";
+import { GONE_WORDS } from "../core.mjs";
+import { gestureLock } from "../gesture.mjs";
+import { drawBox } from "../overlay-layer.mjs";
+import { hideTooltip, tooltip } from "../tooltip.mjs";
+import { addStyle, element } from "../ui.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// A table's column widths (notion-lite's: a 3px strip on each column's right edge; the plan's D4:
+// the kit's own widths until the reader sizes a column). Dragging a strip sizes its column (35px at
+// least, nothing snapped), shown as it goes (Esc puts it back), written when let go as one undo
+// step: every column's width on the topmost cell of that column alone (--doc-column-width,
+// index.mjs COLUMN_WIDTH; shared/table-slots.mjs widthHolder: a merged cell holds none), the kit laying the table
+// out at them (tables/layout.js manualLayout); the first
+// drag of a table the kit lays out gives every column the width it has then. A double click fits
+// the column to its widest cell, unwrapped. The menus' 自动调整列宽 takes the widths off (the kit's
+// again) or gives each column its width as it is; 均分列宽 shares the columns' room out equally.
+// Sizing columns takes the table's own width off (--doc-span: the table is as wide as its
+// columns again).
+//
+// The table's edges: the last column's strip covers its right edge too, a strip along its bottom
+// edge is its bottom one. A click on either arms it (a thicker line, ↔ or ↕ on it), and a drag then
+// sizes the whole table, the resize tool's drag (resize/, its snapping and its label): its width
+// (原宽度, 铺满正文; --doc-span, the kit filling the frame with every column in proportion:
+// tables/layout.js) or its scroll height (原高度, 显示全部行; TABLE_HEIGHT, the rows past it
+// scrolling under the header). Once dragged, with the pointer off it, on a press elsewhere or Esc,
+// it is plain again.
+
+const STYLE = `
+  .ge-tcol { pointer-events: auto; cursor: col-resize; }
+  .ge-tcol > i { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; border-radius: 1.5px; transition: background 150ms, width 120ms, left 120ms; }
+  .ge-tcol:hover > i, .ge-tcol[data-on] > i { background: var(--ge-accent); }
+  .ge-tcol[data-mode="table"] { cursor: ew-resize; }
+  .ge-tcol[data-mode="table"] > i { left: -0.5px; width: 4px; background: var(--ge-accent); }
+  .ge-tcol > b { display: none; }
+  .ge-tcol[data-mode="table"] > b { position: absolute; top: 50%; left: -6px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 16px; height: 28px; margin-top: -14px; border: 1.5px solid var(--ge-accent); border-radius: 8px; background: var(--ge-bg); color: var(--ge-accent); }
+  .ge-tcol[data-in] > b, .ge-trows[data-in] > b { animation: ge-tcol-in 120ms ease-out; }
+  .ge-tcol > b > svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
+  @keyframes ge-tcol-in { from { opacity: 0; transform: scale(.7); } }
+  .ge-trows { pointer-events: auto; cursor: pointer; }
+  .ge-trows > i { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 1.5px; transition: background 150ms, height 120ms, top 120ms; }
+  .ge-trows:hover > i { background: var(--ge-accent); }
+  .ge-trows[data-mode="table"] { cursor: ns-resize; }
+  .ge-trows[data-mode="table"] > i { top: -0.5px; height: 4px; background: var(--ge-accent); }
+  .ge-trows > b { display: none; }
+  .ge-trows[data-mode="table"] > b { position: absolute; left: 50%; top: -6px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 28px; height: 16px; margin-left: -14px; border: 1.5px solid var(--ge-accent); border-radius: 8px; background: var(--ge-bg); color: var(--ge-accent); }
+  .ge-trows > b > svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); }
+  ${gestureLock("data-ge-tresize", { cursor: "col-resize", select: true })}
+`;
+const DOUBLE = 500; // two presses on a strip within this many ms are a double click (a press on the armed edge after its click too)
+const EDGE = 8; // the edges' strips reach this far past the table (the resize tool's grab)
+const ARROWS = '<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M1.5 6h9M3.5 4 1.5 6l2 2M8.5 4l2 2-2 2"/></svg>';
+
+/** t: the table tools (index.mjs); t.resizeTable(event, unit, axis) starts a drag of the table's width ("x") or height ("y") (resize/). */
+export function createColumnWidths(tools) {
+  addStyle(STYLE);
+  let drag = null; // { unit, index, x, last, start: [px], before: Map(cell -> width), widths }
+  let pressed = null; // the last press on a strip: { unit, index, time } (a second one soon after is a double click)
+  let armed = null; // an edge clicked: { unit, axis: "x" (right) | "y" (bottom), at: when, shown }, the next drag of it the table's size
+  let quick = null; // the armed right edge pressed soon after its click: { unit, index, x } (let go there, a double click)
+
+  /** Each column's width as the table shows it now, px. */
+  const shown = (unit) => tools.geometry(unit).columns.map((column) => Math.round((column.right - column.left) * 100) / 100);
+  /** The cells holding the columns' widths: per column, its topmost cell alone, or null. */
+  const holders = (unit) => {
+    const { slots } = tableState(unit);
+    return Array.from({ length: slots.columns }, (_, c) => widthHolder(slots, c));
+  };
+
+  // The table's cells that carry a width or are to: each column's holder (the widths), and any
+  // other with one (a row moved down from the top keeps its widths: taken off); widths given, the
+  // table's own width goes (it is as wide as its columns).
+  function changesFor(unit, widths) {
+    const { slots } = tableState(unit);
+    const cells = [];
+    const changes = [];
+    if (widths && unit.style.getPropertyValue(SPAN).trim()) {
+      cells.push(unit);
+      changes.push({ sizes: { [SPAN]: null } });
+    }
+    const held = new Map(holders(unit).map((cell, c) => [cell, c]).filter(([cell]) => cell));
+    for (const cell of slots.places.keys()) {
+      const width = widths && held.has(cell) ? `${Math.max(MIN_COLUMN_WIDTH, Math.round(widths[held.get(cell)] * 100) / 100)}px` : null;
+      if (widthOf(cell) === width) continue;
+      cells.push(cell);
+      changes.push({ sizes: { [COLUMN_WIDTH]: width } });
+    }
+    return { cells, changes };
+  }
+
+  /** The columns at `widths` (px each; null: the kit's own), one undo step. */
+  function set(unit, widths, said) {
+    const { cells, changes } = changesFor(unit, widths);
+    if (cells.length === 0) return false;
+    const done = tools.look(cells, changes);
+    if (done && said) tools.say(t("{0} · Ctrl+Z 撤销", said));
+    relayout(unit);
+    return done;
+  }
+
+  // Shown as it goes: the holders' widths set straight (taken back before the undo step).
+  function preview(unit, widths) {
+    holders(unit).forEach((cell, c) => cell?.style.setProperty(COLUMN_WIDTH, `${widths[c]}px`));
+    relayout(unit);
+  }
+  function putBack({ unit, before }) {
+    for (const [cell, width] of before) {
+      if (width) cell.style.setProperty(COLUMN_WIDTH, width);
+      else cell.style.removeProperty(COLUMN_WIDTH);
+      if (cell.getAttribute("style") === "") cell.removeAttribute("style");
+    }
+    relayout(unit);
+  }
+
+  // A column fitted to its widest cell of it alone, unwrapped (+1px): by its words, not the words an
+  // Agent took out that the page shows in it (changes/: out of the layout while it is measured).
+  function fit(unit, index) {
+    const { slots } = tableState(unit);
+    const widest = Math.max(0, ...[...slots.places].filter(([, place]) => place.c === index && place.cols === 1).map(([cell]) => {
+      const style = getComputedStyle(cell);
+      const was = cell.style.whiteSpace;
+      const gone = [...cell.querySelectorAll(GONE_WORDS)];
+      for (const mark of gone) mark.hidden = true;
+      cell.style.whiteSpace = "nowrap";
+      const range = document.createRange();
+      range.selectNodeContents(cell);
+      const width = range.getBoundingClientRect().width + parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+      cell.style.whiteSpace = was;
+      if (cell.getAttribute("style") === "") cell.removeAttribute("style");
+      for (const mark of gone) mark.hidden = false;
+      return width;
+    }));
+    const widths = shown(unit);
+    widths[index] = Math.ceil(widest) + 1;
+    set(unit, widths, t("已按内容调整列宽"));
+  }
+
+  // ---------- the strips ----------
+
+  const isArmed = (unit, axis) => armed?.unit === unit && armed.axis === axis;
+  // An armed edge's strip: its pill comes in once, not again each time the strips are drawn anew.
+  function shownArmed(node) {
+    node.setAttribute("data-mode", "table");
+    node.toggleAttribute("data-in", !armed.shown);
+    armed.shown = true;
+  }
+  // Plain again: the pointer off the armed edge (not pressed), or a press elsewhere.
+  const offEdge = (event) => !event.target?.closest?.('.ge-tcol[data-mode="table"], .ge-trows[data-mode="table"]');
+  document.addEventListener("pointermove", (event) => {
+    if (!armed || drag || event.buttons || !offEdge(event)) return;
+    armed = null;
+    tools.draw();
+  }, true);
+  document.addEventListener("pointerdown", (event) => {
+    if (!armed || !offEdge(event)) return;
+    armed = null;
+    tools.draw();
+  }, true);
+  function arm(unit, axis) {
+    armed = { unit, axis, at: performance.now() };
+    hideTooltip();
+    tools.draw();
+  }
+  // An armed edge pressed: the resize tool's drag of the table's size; plain again. The right edge
+  // pressed again soon after the click that armed it and let go where it was pressed is a double
+  // click on the last column's strip: that column fitted.
+  function sizeTable(event, unit, axis, index = null) {
+    event.preventDefault();
+    quick = axis === "x" && performance.now() - armed.at < DOUBLE ? { unit, index, x: event.clientX } : null;
+    armed = null;
+    tools.resizeTable(event, unit, axis);
+    tools.draw();
+  }
+  document.addEventListener("pointerup", (event) => {
+    const done = quick;
+    quick = null;
+    if (done && Math.abs(event.clientX - done.x) < 2) fit(done.unit, done.index);
+  }, true);
+
+  // The stretches of rows along which column `index`'s right edge is a cell's edge (not inside a
+  // merged cell), [top, bottom] each; the last column's, the whole table's.
+  function edgeRuns(slots, g, index, last) {
+    if (last || !slots) return [[g.box.top, g.box.bottom]];
+    const runs = [];
+    slots.matrix.forEach((row, r) => {
+      if (row[index] === row[index + 1]) return;
+      if (runs.at(-1)?.end === r - 1) runs.at(-1).end = r;
+      else runs.push({ start: r, end: r });
+    });
+    return runs.map(({ start, end }) => [g.rows[start].top, g.rows[end].bottom]);
+  }
+
+  /** The strips of the table's columns whose right edge is in sight and of its bottom edge, in the tools' layer (index.mjs draw). */
+  function draw(layer, unit, g, drawn) {
+    const { slots } = tableState(unit);
+    g.columns.forEach((column, index) => {
+      if (column.right < g.view.left || column.right > g.view.right + 1) return;
+      const last = index === g.columns.length - 1;
+      // Along the rows where its right edge is a cell's (not inside a merged cell).
+      for (const [top, bottom] of edgeRuns(slots, g, index, last)) {
+        if (bottom <= g.view.top || top >= g.view.bottom) continue;
+        const node = drawn(element("div", { class: "ge-tcol", "data-doc-dev": "", role: "separator", "aria-label": last ? t("拖动调整列宽；点击后拖动调整整个表格的宽度") : t("拖动调整列宽，双击按内容调整"), html: `<i></i>${last ? `<b>${ARROWS}</b>` : ""}` }));
+        if (drag?.unit === unit && drag.index === index) node.setAttribute("data-on", "");
+        // The last one reaches past the table: its right edge is there too.
+        drawBox(node, layer, { left: column.right - 1.5, top: Math.max(top, g.view.top), right: column.right + (last ? EDGE : 1.5), bottom: Math.min(bottom, g.view.bottom) });
+        if (last && isArmed(unit, "x")) shownArmed(node);
+        tooltip(node, () => (node.getAttribute("data-mode") === "table" ? t("拖动调整整个表格的宽度") : last ? t("拖动调整列宽 · 点击后可拖动调整整个表格的宽度") : t("拖动调整列宽，双击按内容调整")));
+        node.addEventListener("pointerdown", (event) => {
+          if (event.button !== 0) return;
+          event.stopImmediatePropagation();
+          if (last && isArmed(unit, "x")) return sizeTable(event, unit, "x", index);
+          // A second press on the strip soon after the first: a double click (the strips are drawn anew between them).
+          const again = pressed?.unit === unit && pressed.index === index && event.timeStamp - pressed.time < DOUBLE;
+          pressed = again ? null : { unit, index, time: event.timeStamp };
+          if (again) {
+            event.preventDefault(); // nor its mousedown: no selection, no focus moved
+            armed = null;
+            return fit(unit, index);
+          }
+          const { rows } = tableParts(unit);
+          drag = { unit, index, x: event.clientX, last, fresh: true, start: shown(unit), before: new Map(rows.flatMap((row) => [...row.cells]).map((cell) => [cell, widthOf(cell)])) };
+          document.documentElement.setAttribute("data-ge-tresize", "");
+          document.documentElement.setPointerCapture?.(event.pointerId);
+        });
+      }
+    });
+    // The bottom edge, in sight: a click arms it, a drag then sizes the table's scroll height.
+    const node = drawn(element("div", { class: "ge-trows", "data-doc-dev": "", role: "separator", "aria-label": t("点击后拖动调整表格的高度"), html: `<i></i><b>${ARROWS}</b>` }));
+    if (isArmed(unit, "y")) shownArmed(node);
+    drawBox(node, layer, { left: g.view.left, top: g.view.bottom - 1.5, right: g.view.right, bottom: g.view.bottom + EDGE });
+    tooltip(node, () => (isArmed(unit, "y") ? t("拖动调整表格的高度，超出的行上下滚动") : t("点击后可拖动调整表格的高度")));
+    node.addEventListener("pointerdown", (event) => {
+      if (event.button !== 0) return;
+      event.stopImmediatePropagation();
+      if (isArmed(unit, "y")) return sizeTable(event, unit, "y");
+      event.preventDefault();
+      arm(unit, "y");
+    });
+  }
+
+  // The press's mousedown (the pointerdown is not cancelled, so that it comes): no selection, no
+  // focus moved; one that counts two clicks (a double click sent as one press) is a fit, not a drag.
+  document.addEventListener("mousedown", (event) => {
+    if (!drag || drag.fresh !== true) return;
+    drag.fresh = false;
+    event.preventDefault();
+    if (event.detail < 2) return;
+    const { unit, index } = drag;
+    drag = null;
+    pressed = null;
+    document.documentElement.removeAttribute("data-ge-tresize");
+    fit(unit, index);
+  }, true);
+
+  document.addEventListener("pointermove", (event) => {
+    if (!drag) return;
+    // A press is a click until it moves (the last strip clicked arms the right edge).
+    if (!drag.moved && Math.abs(event.clientX - drag.x) < 2) return;
+    drag.moved = true;
+    const widths = [...drag.start];
+    widths[drag.index] = Math.max(MIN_COLUMN_WIDTH, Math.round(drag.start[drag.index] + event.clientX - drag.x));
+    drag.widths = widths;
+    preview(drag.unit, widths);
+    tools.draw();
+  }, true);
+
+  function end(cancel) {
+    const done = drag;
+    drag = null;
+    document.documentElement.removeAttribute("data-ge-tresize");
+    if (!done) return;
+    putBack(done);
+    if (!cancel && done.widths) set(done.unit, done.widths);
+    // The last strip clicked (pressed, not moved): the table's right edge armed.
+    else if (!cancel && done.last) return arm(done.unit, "x");
+    tools.draw();
+  }
+  document.addEventListener("pointerup", () => end(false), true);
+  document.addEventListener("pointercancel", () => end(true), true);
+  document.addEventListener("keydown", (event) => {
+    if ((!drag && !armed) || event.key !== "Escape") return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    if (drag) end(true);
+    else {
+      armed = null;
+      tools.draw();
+    }
+  }, true);
+
+  return {
+    draw,
+    /** The edges plain again (the tools no longer stand by the table). */
+    disarm() { armed = null; },
+    get dragging() { return drag !== null; },
+    /** 自动调整列宽: the kit's widths, from the columns' words (the reader's taken off; sizing a column fixes them again). */
+    fit(unit) {
+      if (set(unit, null, t("已自动调整列宽"))) return true;
+      tools.say(t("列宽已按内容调整，无需再调。"));
+      return false;
+    },
+    /** 均分列宽: columns `from` … `to` (every column without them) share their room equally. */
+    even(unit, from = 0, to = tableState(unit).columns - 1) {
+      const widths = shown(unit);
+      const share = widths.slice(from, to + 1).reduce((sum, width) => sum + width, 0) / (to - from + 1);
+      for (let c = from; c <= to; c++) widths[c] = share;
+      return set(unit, widths, t("已均分列宽"));
+    },
+  };
+}

package/browser/editor/page/tex.mjs

@@ -0,0 +1,32 @@
+import { MATH_MACROS } from "../../shared/components/math.mjs";
+import { t } from "../../shared/i18n/index.mjs";
+
+// What the page asks of KaTeX: a formula of the text (core.mjs, formula/), a formula block
+// (components/math/page.mjs), the import (src/transfer/import.mjs) and the formula editor all read TeX
+// the same way, and none of them is another's, so it stands here. It runs with no page too.
+
+/**
+ * KaTeX's markup of `tex` ({ html }) or why it does not read ({ error }); the kit's macros too (the
+ * page's, else the components' own where the page has no math.js, or in the import's worker).
+ */
+export function renderTex(tex, display = false) {
+  const katex = globalThis.katex;
+  if (!katex) return { html: "", error: t("公式功能没有加载。") };
+  try {
+    return { html: katex.renderToString(tex, { displayMode: display, throwOnError: true, strict: "ignore", trust: false, macros: { ...(globalThis.DocMath?.macros ?? MATH_MACROS) } }), error: null };
+  } catch (error) {
+    return { html: "", error: String(error?.message ?? error).replace(/^KaTeX parse error:\s*/, "") };
+  }
+}
+
+/**
+ * Whether KaTeX does not read `tex`, which the kit left in `node` as it could: drawn with its errors
+ * in red, as it wrote them or as words beside a drawing where it took a part of it for a formula
+ * of its own. A drawing with nothing of this is read as it is, with no second reading of the page's
+ * formulas as it opens; with KaTeX not on the page, nothing can be told.
+ */
+export function unread(node, tex, display = false) {
+  if (!globalThis.katex) return false;
+  const whole = node.querySelector(".katex") && !node.querySelector('.katex-error, .katex-html [style*="204, 0, 0"]') && ![...node.childNodes].some((child) => child.nodeType === 3 && child.data.trim());
+  return !whole && Boolean(renderTex(tex, display).error);
+}