@heycys/gallery 0.0.0-stage → 0.1.1

package/browser/editor/page/formula/panel.mjs

@@ -0,0 +1,336 @@
+import { Z } from "../../../shared/layers.mjs";
+import { escapeTyped } from "../../../shared/escape.mjs";
+import { addStyle, element, fadeIn, mount } from "../ui.mjs";
+import { recentList } from "../storage.mjs";
+import { placeBox } from "../placement.mjs";
+import { tooltip } from "../tooltip.mjs";
+import { GROUPS, ROW, fillSnippet, nextPlace } from "./symbols.mjs";
+import { renderTex } from "../tex.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// The formula editor (Notion's EquationInputPopup, both for an inline formula, index.mjs, and a
+// display formula, components/math/page.mjs): a field of TeX, colored as it is typed (commands,
+// numbers, braces), as wide as the editor, and below it KaTeX's reason when the TeX does not read
+// ("无效的公式：").
+// Above the field, the symbol bar (symbols.mjs): a row of its six groups — 常用, 希腊, 运算, 结构,
+// 关系与箭头, 化学 — each opening a card of all its symbols drawn by KaTeX (its drawer: small
+// section titles, nothing scrolled), a click putting one in at the caret (a template's places to
+// fill emptied, the selection in the first, the caret in the first empty one; Tab and Shift+Tab go
+// to the next and previous {}); the drawer is a card on the editor's far side from the formula
+// (below the editor when it stands below the formula), so neither the field nor the formula is
+// covered (Esc closes it first). What was put in lately comes first under 常用 (this browser's, in
+// localStorage).
+//   Its side is chosen as it opens, by what the tallest group needs, and stays until the page
+//   scrolls or the window changes size: no group and no symbol clicked moves the field. What comes
+//   and goes around the field (a group's card, the lines it grows by, KaTeX's reason) goes on the far
+//   side, and where the window has no room for a card it is the card that gives way, scrolling inside
+//   what is left, a card at the least staying in the window: the field's height is capped for it, and the
+//   editor stands over the formula rather than leave it no room. The editor goes with the formula as the
+//   page scrolls, and as what is typed draws it taller.
+//   A symbol clicked moves nothing at all, for the next click to find what it found: with the pointer
+//   on the editor the field keeps its height, the text going on inside it, its caret's line in view, and
+//   KaTeX's reason waits, until a key is pressed or the pointer has left (land). A press on the editor
+//   leaves the keys in the field, and the gap between its card and its bar is the editor's.
+//   Enter is a new line (a formula of several lines: \\, aligned, cases), as are Shift+Enter and
+//   Alt+Enter. What is in the field is kept however the editor is left, also when it does not read,
+//   which may be a stage on the way: Ctrl+Enter, Enter with the whole field selected (as it opens on a
+//   formula, or after Ctrl+A, a formula pasted there kept at once) or with nothing in it, Esc once no
+//   group's symbols are open, a press elsewhere, Ctrl+S, the workbench taking the focus, the page left.
+// The caller shows the formula itself as it is typed (onInput), so there is no preview here.
+
+const GAP = 6; // between the formula, the editor and a group's card
+const MARGIN = 8; // what stays clear of the window's edge
+// A group's card, in px, as the rules below draw it: its padding and a section's title. With its
+// sections' rows (symbols.mjs), its height is known before any of its symbols is drawn.
+const PADDING = 12;
+const TITLE = 20;
+const LEAST = 96; // a card this high at the least, however little room the window leaves
+// What the window keeps beside the field: its margins, a card at the least and the gap to it, the bar, the
+// field's padding and two lines of KaTeX's reason.
+const AROUND = 2 * MARGIN + LEAST + GAP + 39 + 16 + 52;
+
+const STYLE = `
+  .ge-fx {
+    position: fixed; left: 0; top: 0; z-index: ${Z.card}; width: 440px; max-width: calc(100vw - 16px); color: var(--ge-tx);
+    font: 14px/1.2 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+  }
+  /* The gap to a group's card, the editor's: a press there, or the pointer on its way across it, is on the editor. */
+  .ge-fx[data-open]::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: ${GAP}px; }
+  .ge-fx[data-open][data-above]::before { top: auto; bottom: 100%; }
+  .ge-fx-body { display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; background: var(--ge-bg); box-shadow: var(--ge-shadow); }
+  /* The groups, the field below them as wide as the editor. */
+  .ge-fx-bar { display: flex; align-items: center; gap: 1px; padding: 6px; border-bottom: 1px solid var(--ge-line); overflow-x: auto; scrollbar-width: none; }
+  .ge-fx-group { flex: none; height: 26px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ge-tx2); font: inherit; font-size: 13px; cursor: pointer; transition: background 20ms ease-in; }
+  .ge-fx-group:hover, .ge-fx-group[aria-expanded="true"] { background: var(--ge-hover); color: var(--ge-tx); }
+  /* A group's symbols: a card of its own on the editor's far side from the formula (stand), so the
+     field stays where it is and the formula shows; all of them at once, scrolling only where the
+     window has no room for them. */
+  .ge-fx-drawer { position: absolute; top: calc(100% + ${GAP}px); left: 0; width: 440px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 5px 8px 7px; border-radius: 10px; background: var(--ge-bg); box-shadow: var(--ge-shadow); overflow-y: auto; scrollbar-width: thin; }
+  .ge-fx[data-above] .ge-fx-drawer { top: auto; bottom: calc(100% + ${GAP}px); }
+  .ge-fx-drawer[hidden] { display: none; }
+  .ge-fx-title { height: ${TITLE}px; box-sizing: border-box; padding: 3px 4px 1px; color: var(--ge-tx2); font-size: 12px; line-height: 16px; }
+  .ge-fx-grid { display: grid; grid-template-columns: repeat(var(--ge-fx-columns, 12), minmax(0, 1fr)); }
+  .ge-fx-cell { display: grid; place-items: center; min-width: 0; height: var(--ge-fx-row); padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ge-tx); overflow: hidden; cursor: pointer; font-size: 17px; }
+  .ge-fx-grid:is([data-columns="10"], [data-columns="9"]) .ge-fx-cell, .ge-fx-cell[data-small] { font-size: 13px; }
+  .ge-fx-cell:hover { background: var(--ge-hover); }
+  .ge-fx-cell .katex { font-size: 1em; }
+  .ge-fx-row { display: flex; align-items: flex-start; padding: 8px 10px; background: var(--ge-field); }
+  .ge-fx-field { position: relative; flex: 1 1 0; min-width: 0; }
+  .ge-fx-paint, .ge-fx-input { margin: 0; padding: 0; border: 0; font: 14px/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
+  .ge-fx-paint { position: absolute; inset: 0; pointer-events: none; color: var(--ge-tx); overflow: hidden; }
+  .ge-fx-input { position: relative; display: block; width: 100%; max-height: min(50vh, calc(100vh - ${AROUND}px)); outline: none; background: transparent; color: transparent; caret-color: var(--ge-tx); resize: none; overflow: auto; scrollbar-width: none; }
+  .ge-fx-input::placeholder { color: var(--ge-tx3); }
+  .ge-fx-input::selection { background: var(--ge-select); color: transparent; }
+  .ge-fx-paint .c { color: light-dark(#2f6fb6, #6aa7e8); }
+  .ge-fx-paint .n { color: light-dark(#b05a2b, #e0915e); }
+  .ge-fx-paint .b { color: var(--ge-tx3); }
+  .ge-fx-paint .o { color: light-dark(#9a4fb4, #c38bdb); }
+  .ge-fx-error { padding: 8px 10px; color: rgb(235 87 87 / 80%); font-size: 12px; line-height: 1.5; box-shadow: 0 -1px var(--ge-line); overflow-wrap: anywhere; }
+  .ge-fx[data-above] .ge-fx-error { order: -1; box-shadow: 0 1px var(--ge-line); }
+  .ge-fx-error b { font-weight: 600; }
+  .ge-fx-error[hidden] { display: none; }
+`;
+const RECENT = "gallery-edit:formula-recent";
+const PLACEHOLDER = { block: "|x| = \\begin{cases} x, & x \\ge 0 \\\\ -x, & x < 0 \\end{cases}", inline: "E = mc^2" };
+
+/**
+ * What the status line says of a formula, in the text and as a block alike: `kept(tex, was)` once
+ * the box is closed on it (`was`: it had TeX before), `peculiar` for one written so the page
+ * cannot edit it, `unloaded(inserting)` when KaTeX cannot be loaded (to insert a formula, or to change one).
+ */
+export const formulaSays = {
+  kept: (tex, was) => (!tex ? t("公式已清空 · Ctrl+Z 撤销") : was ? t("已修改公式 · Ctrl+Z 撤销") : t("已插入公式 · Ctrl+Z 撤销")),
+  peculiar: t("这个公式的写法特殊，暂不能在页面上修改，请让 AI 修改。"),
+  unloaded: (inserting) => (inserting ? t("公式功能没能加载，不能插入公式。") : t("公式功能没能加载，不能修改公式。")),
+};
+
+// TeX colored: commands, numbers, braces and brackets, the operators ^ _ & and \\.
+export const paintTex = (text) => text.replace(/(\\[a-zA-Z]+|\\\\|\\.)|(\d+(?:\.\d+)?)|([{}[\]])|([\^_&])|([^\\\d{}[\]^_&]+)/g,
+  (match, command, number, brace, operator) => command ? `<span class="${command === "\\\\" ? "o" : "c"}">${escapeTyped(command)}</span>`
+    : number ? `<span class="n">${number}</span>` : brace ? `<span class="b">${brace}</span>` : operator ? `<span class="o">${escapeTyped(operator)}</span>` : escapeTyped(match));
+
+// What was put in lately (at most twelve: a line's worth of symbols), this browser's.
+const recentFormulas = recentList(RECENT, { max: 12, valid: (entry) => Array.isArray(entry) && typeof entry[0] === "string", same: (a, b) => a[0] === b[0] });
+
+// What was put in lately as a line of twelve columns, from the newest as far as it goes: each as wide
+// and as high as it is drawn in its own section, a template taking the columns that asks, the line as
+// high as the tallest. (An entry's last item says it is drawn small, as that section's are.)
+function recentSection() {
+  const entries = [];
+  let height = ROW;
+  let used = 0;
+  for (const [snippet, shown, name] of recentFormulas.read()) {
+    const own = (section) => section.entries.find((entry) => entry[0] === snippet);
+    const section = GROUPS.flatMap(({ sections }) => sections).find(own) ?? { columns: 12, entries: [[snippet]] };
+    const span = Math.ceil((own(section)[3] ?? 1) * 12 / section.columns);
+    if (used + span > 12) break;
+    used += span;
+    height = Math.max(height, section.height ?? ROW);
+    entries.push([snippet, shown, name, span, section.columns < 12]);
+  }
+  return { title: t("最近使用"), columns: 12, height, entries };
+}
+
+// What a group's card shows: 常用 has what was put in lately first, a line of its own.
+function sectionsOf(group) {
+  const recent = group.recent ? recentSection() : null;
+  return recent?.entries.length > 0
+    ? [recent, ...group.sections.map((section, index) => (index === 0 && !section.title ? { ...section, title: group.name } : section))]
+    : group.sections;
+}
+
+// How high a group's card stands.
+const cardHeight = (group) => PADDING + sectionsOf(group).reduce((sum, { title, columns, height = ROW, entries }) => {
+  const slots = entries.reduce((count, [, , , span = 1]) => count + span, 0);
+  return sum + (title ? TITLE : 0) + Math.ceil(slots / columns) * height;
+}, 0);
+
+/**
+ * Open the editor. value: the TeX; display: a display formula (its placeholder, KaTeX's display
+ * mode); anchor(): the rectangle it goes below (above where there is no room), `center` centered
+ * under it, else its left edge with it; onInput(tex, error) as it changes, onSubmit(tex) when it is
+ * left. Returns { node, close, get value, focus }.
+ */
+export function openFormulaPanel({ value = "", display = false, anchor, center = false, onInput = () => {}, onSubmit = () => {} }) {
+  addStyle(STYLE);
+  const paint = element("pre", { class: "ge-fx-paint", "aria-hidden": "true" });
+  const input = element("textarea", { class: "ge-fx-input", rows: "1", spellcheck: "false", autocomplete: "off", placeholder: display ? PLACEHOLDER.block : PLACEHOLDER.inline, "aria-label": t("公式（LaTeX）") });
+  input.value = value;
+  const error = element("div", { class: "ge-fx-error", role: "alert", hidden: "" });
+  const drawer = element("div", { class: "ge-fx-drawer", hidden: "" });
+  const bar = element("div", { class: "ge-fx-bar", role: "toolbar", "aria-label": t("插入符号") });
+  const node = element("div", { class: "ge-fx", role: "dialog", "aria-label": display ? t("编辑公式块") : t("编辑公式") },
+    drawer, element("div", { class: "ge-fx-body" }, bar, element("div", { class: "ge-fx-row" }, element("div", { class: "ge-fx-field" }, paint, input)), error));
+  let closed = false;
+  let open = null; // the group whose drawer shows
+  let fails = null;
+  let held = false; // a symbol was clicked: what it makes of the editor's height waits (land)
+
+  // ---------- the symbol bar ----------
+  const buttons = GROUPS.map((group) => {
+    const button = element("button", { type: "button", class: "ge-fx-group", text: group.name, "aria-expanded": "false" });
+    button.addEventListener("click", () => showGroup(open === group ? null : group));
+    bar.append(button);
+    return button;
+  });
+  const cell = (entry) => {
+    const [snippet, shown, name, span = 1, small = false] = entry;
+    const { html } = renderTex(shown ?? snippet.replaceAll("#", "{\\square}"));
+    const button = element("button", { type: "button", class: "ge-fx-cell", "aria-label": name ?? snippet.replaceAll("#", "□"), html: html || escapeTyped(snippet) });
+    if (span > 1) button.style.gridColumn = `span ${span}`;
+    button.toggleAttribute("data-small", small);
+    tooltip(button, name ?? snippet.replaceAll("#", "□"), name ? snippet.replaceAll("#", "□") : null);
+    button.addEventListener("click", () => put(entry));
+    return button;
+  };
+  function showGroup(group) {
+    open = group;
+    GROUPS.forEach((each, index) => buttons[index].setAttribute("aria-expanded", String(each === group)));
+    drawer.hidden = !group;
+    node.toggleAttribute("data-open", Boolean(group));
+    if (!group) return;
+    drawer.setAttribute("aria-label", group.name);
+    drawer.replaceChildren(...sectionsOf(group).flatMap(({ title, columns, height = ROW, entries }) => [
+      ...(title ? [element("div", { class: "ge-fx-title", text: title })] : []),
+      element("div", { class: "ge-fx-grid", "data-columns": String(columns), style: `--ge-fx-columns: ${columns}; --ge-fx-row: ${height}px` }, ...entries.map(cell)),
+    ]));
+    drawer.scrollTop = 0;
+  }
+  function put(entry) {
+    const { text, caret } = fillSnippet(input.value, input.selectionStart, input.selectionEnd, entry[0]);
+    input.value = text;
+    input.focus();
+    input.setSelectionRange(caret, caret);
+    recentFormulas.use(entry.slice(0, 3));
+    held = node.matches(":hover");
+    draw();
+    fit();
+  }
+
+  // ---------- the field ----------
+  function draw() {
+    const tex = input.value;
+    paint.innerHTML = `${paintTex(tex)}\n`;
+    fails = tex.trim() ? renderTex(tex, display).error : null;
+    if (held) caretShown();
+    else size();
+    paint.scrollTop = input.scrollTop;
+    onInput(tex, fails);
+  }
+  // What the editor is as high as: the field's lines and KaTeX's reason.
+  function size() {
+    input.style.height = "auto";
+    input.style.height = `${input.scrollHeight}px`;
+    error.hidden = !fails;
+    error.replaceChildren(...(fails ? [element("b", { text: t("无效的公式：") }), fails] : []));
+  }
+  // The caret's line in view in a field keeping its height: what stands before the caret ends as low as that line.
+  function caretShown() {
+    const { value, selectionEnd: caret } = input;
+    input.value = value.slice(0, caret);
+    const end = input.scrollHeight;
+    input.value = value;
+    input.setSelectionRange(caret, caret);
+    input.scrollTop = end - input.clientHeight;
+  }
+  // What a symbol clicked left waiting, a key pressed or the pointer gone.
+  function land() {
+    if (!held) return;
+    held = false;
+    size();
+    paint.scrollTop = input.scrollTop;
+    place();
+  }
+  node.addEventListener("pointerleave", land);
+  // A press anywhere else on the editor leaves the keys in the field.
+  node.addEventListener("mousedown", (event) => { if (event.target !== input) event.preventDefault(); });
+  input.addEventListener("input", () => {
+    held = false;
+    draw();
+    place();
+  });
+  input.addEventListener("scroll", () => { paint.scrollTop = input.scrollTop; });
+  input.addEventListener("keydown", (event) => {
+    land();
+    event.stopPropagation(); // the page's shortcuts are not the field's
+    if (event.isComposing || event.keyCode === 229) return;
+    if (event.key === "Enter" && !event.shiftKey && !event.altKey && (event.ctrlKey || event.metaKey || whole())) {
+      event.preventDefault();
+      submit();
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      if (open) showGroup(null); // a group's symbols first
+      else submit();
+    } else if (event.key === "Tab") {
+      event.preventDefault();
+      const at = nextPlace(input.value, event.shiftKey ? input.selectionStart : input.selectionEnd, event.shiftKey);
+      if (at !== null) input.setSelectionRange(at, at);
+    }
+  });
+  // The whole field selected (or nothing in it): Enter keeps the formula, else it is a new line.
+  const whole = () => input.selectionStart === 0 && input.selectionEnd === input.value.length;
+
+  function submit() {
+    if (closed) return;
+    close();
+    onSubmit(input.value);
+  }
+  function close() {
+    closed = true;
+    node.remove();
+    removeEventListener("scroll", follow, true);
+    removeEventListener("resize", stand);
+  }
+
+  // The side the editor stands on, below the anchor or above it, centered on it or at its left edge:
+  // the first with room for the editor and the tallest group's card, else the one with more room.
+  // Chosen as it opens and as the page (or a box it is in) scrolls or the window changes size; once
+  // the anchor has scrolled out of the window the side stays and the editor goes with it.
+  let below = true;
+  function stand() {
+    if (closed || !node.isConnected) return;
+    const rect = anchor();
+    const view = document.documentElement.clientHeight;
+    if (rect.bottom > 0 && rect.top < view) {
+      const need = node.offsetHeight + GAP + Math.max(...GROUPS.map(cardHeight));
+      const under = view - MARGIN - rect.bottom - GAP;
+      const over = rect.top - GAP - MARGIN;
+      below = need <= under || (need > over && under >= over);
+    }
+    node.toggleAttribute("data-above", !below);
+    node.style.left = `${Math.round(placeBox(rect, { width: node.offsetWidth, height: 0 }, { align: center ? "center" : "start" }).left)}px`;
+    place();
+  }
+  // By the edge nearest the anchor, so that what grows goes on the far side: its top below the anchor,
+  // its bottom above it (inside the window while the anchor shows in it, with room for a card at the least).
+  function place() {
+    if (closed || !node.isConnected) return;
+    const rect = anchor();
+    const view = document.documentElement.clientHeight;
+    const height = node.offsetHeight;
+    const shows = rect.bottom > 0 && rect.top < view;
+    const top = below ? rect.bottom + GAP : rect.top - GAP - height;
+    const card = GAP + LEAST;
+    const inside = shows ? Math.max(MARGIN + (below ? 0 : card), Math.min(top, view - MARGIN - height - (below ? card : 0))) : top;
+    node.style.top = below ? `${Math.round(inside)}px` : "auto";
+    node.style.bottom = below ? "auto" : `${Math.round(view - inside - height)}px`;
+    fit();
+  }
+  // A group's card given what the window leaves it.
+  function fit() {
+    const body = node.getBoundingClientRect();
+    const room = below ? document.documentElement.clientHeight - MARGIN - body.bottom - GAP : body.top - GAP - MARGIN;
+    drawer.style.maxHeight = `${Math.max(LEAST, Math.floor(room))}px`;
+  }
+  const follow = (event) => { if (!node.contains(event.target)) stand(); };
+  addEventListener("scroll", follow, { capture: true, passive: true });
+  addEventListener("resize", stand);
+
+  mount(node);
+  fadeIn(node, 120);
+  draw();
+  stand();
+  input.focus();
+  input.select();
+  return { node, close, focus: () => input.focus(), get value() { return input.value; }, get closed() { return closed; } };
+}

package/browser/editor/page/formula/symbols.mjs

@@ -0,0 +1,156 @@
+import { t } from "../../../shared/i18n/index.mjs";
+// The formula editor's symbol bar (panel.mjs): six groups — 常用, 希腊, 运算, 结构, 关系与箭头, 化学 —
+// each opening a card of all its symbols drawn by KaTeX, in sections with small titles (no
+// scrolling); a click puts one in at the caret; what was put in lately comes first under 常用
+// (its `recent`). A group is { name, recent?, sections: [{ title?, columns, height?, entries }] }; an entry is [what goes in, what
+// the card draws (else what goes in), its name, the columns it takes (1 when not given)]; a "#" in what
+// goes in is a place to fill (a template's): the selected text goes in the first, the caret into
+// the first empty one, Tab to the next (panel.mjs). Symbols are twelve to a line, templates ten (a
+// matrix two of them), chemistry's nine. A section's rows are `height` px, ROW when not given: as high
+// as what they hold asks, simple symbols close together, large operators and templates with more room.
+
+export const SLOT = "#";
+
+/** How high a row of a section is, in px, where it does not say. */
+export const ROW = 26;
+
+const each = (names) => names.map((name) => [name]);
+const greek = (names) => names.map((name) => [`\\${name}`]);
+
+export const GROUPS = [
+  {
+    name: t("常用"), recent: true, sections: [{
+      columns: 12, entries: [
+          ["\\frac{#}{#}", "\\frac{a}{b}", t("分数")], ["\\sqrt{#}", "\\sqrt{x}", t("根号")], ["#^{#}", "x^{n}", t("上标")], ["#_{#}", "x_{i}", t("下标")],
+          ["\\sum_{#}^{#}", "\\sum", t("求和")], ["\\int_{#}^{#}", "\\int", t("积分")], ["\\lim_{# \\to #}", "\\lim", t("极限")], ["\\infty"], ["\\partial"], ["\\nabla"], ["\\pm"], ["\\times"],
+          ["\\cdot"], ["\\div"], ["\\le"], ["\\ge"], ["\\neq"], ["\\approx"], ["\\to"], ["\\Rightarrow"], ["\\in"], ["\\forall"], ["\\exists"], ["\\degree", "x^{\\circ}", t("度")],
+      ],
+    }],
+  },
+  {
+    name: t("希腊"), sections: [
+      {
+        title: t("小写"), columns: 12, entries: greek([
+          "alpha", "beta", "gamma", "delta", "epsilon", "varepsilon", "zeta", "eta", "theta", "vartheta", "iota", "kappa",
+          "lambda", "mu", "nu", "xi", "pi", "varpi", "rho", "varrho", "sigma", "varsigma", "tau", "upsilon",
+          "phi", "varphi", "chi", "psi", "omega",
+        ]),
+      },
+      { title: t("大写"), columns: 12, entries: greek(["Gamma", "Delta", "Theta", "Lambda", "Xi", "Pi", "Sigma", "Upsilon", "Phi", "Psi", "Omega"]) },
+    ],
+  },
+  {
+    name: t("运算"), sections: [
+      {
+        title: t("二元运算"), columns: 12, entries: each([
+          "+", "-", "\\pm", "\\mp", "\\times", "\\div", "\\cdot", "\\ast", "\\star", "\\circ", "\\bullet", "\\diamond",
+          "\\oplus", "\\ominus", "\\otimes", "\\oslash", "\\odot", "\\cup", "\\cap", "\\sqcup", "\\sqcap", "\\setminus", "\\wedge", "\\vee",
+        ]),
+      },
+      { title: t("大型运算"), columns: 12, height: 30, entries: each(["\\sum", "\\prod", "\\coprod", "\\bigcup", "\\bigcap", "\\bigsqcup", "\\bigvee", "\\bigwedge", "\\int", "\\iint", "\\oint", "\\bigoplus"]) },
+      { title: t("其他"), columns: 12, height: 30, entries: each(["\\infty", "\\partial", "\\nabla", "\\emptyset", "\\prime", "\\hbar", "\\ell", "\\angle", "\\ldots", "\\cdots", "\\vdots", "\\ddots"]) },
+    ],
+  },
+  {
+    name: t("结构"), sections: [
+      {
+        columns: 10, height: 30, entries: [
+          ["#^{#}", "x^{a}", t("上标")], ["#_{#}", "x_{a}", t("下标")], ["#_{#}^{#}", "x_{a}^{b}", t("上下标")], ["\\frac{#}{#}", "\\frac{a}{b}", t("分数")], ["\\dfrac{#}{#}", "\\dfrac{a}{b}", t("大分数")],
+          ["\\sqrt{#}", "\\sqrt{x}", t("平方根")], ["\\sqrt[#]{#}", "\\sqrt[n]{x}", t("n 次根")], ["\\binom{#}{#}", "\\binom{n}{k}", t("组合数")], ["\\log_{#} #", "\\log_{a}x", t("对数")], ["\\lim_{# \\to #} #", "\\lim_{x\\to 0}", t("极限")],
+        ],
+      },
+      {
+        columns: 10, height: 28, entries: [
+          ["\\sum_{#}^{#} #", "\\sum_{i=1}^{n}", t("求和")], ["\\prod_{#}^{#} #", "\\prod_{i=1}^{n}", t("连乘")], ["\\int_{#}^{#} # \\,\\mathrm{d}#", "\\int_{a}^{b}", t("定积分")], ["\\iint_{#} #", "\\iint", t("二重积分")], ["\\oint_{#} #", "\\oint", t("环路积分")],
+          ["\\left( # \\right)", "(x)", t("圆括号")], ["\\left[ # \\right]", "[x]", t("方括号")], ["\\left\\{ # \\right\\}", "\\{x\\}", t("花括号")], ["\\left| # \\right|", "|x|", t("绝对值")], ["\\left\\| # \\right\\|", "\\|x\\|", t("范数")],
+        ],
+      },
+      {
+        columns: 10, entries: [
+          ["\\left\\langle # \\right\\rangle", "\\langle x\\rangle", t("尖括号")], ["\\lfloor # \\rfloor", "\\lfloor x\\rfloor", t("向下取整")], ["\\lceil # \\rceil", "\\lceil x\\rceil", t("向上取整")], ["\\hat{#}", "\\hat{x}", t("帽子")], ["\\bar{#}", "\\bar{x}", t("横线")],
+          ["\\tilde{#}", "\\tilde{x}", t("波浪")], ["\\vec{#}", "\\vec{x}", t("向量")], ["\\dot{#}", "\\dot{x}", t("一阶导")], ["\\ddot{#}", "\\ddot{x}", t("二阶导")], ["\\overline{#}", "\\overline{AB}", t("上划线")],
+        ],
+      },
+      {
+        columns: 10, height: 32, entries: [
+          ["\\overrightarrow{#}", "\\overrightarrow{AB}", t("向量箭头")], ["\\underbrace{#}_{#}", "\\underbrace{ab}_{n}", t("下括号")], ["\\cancel{#}", "\\cancel{x}", t("删去")], ["\\boxed{#}", "\\boxed{x}", t("方框")], ["\\text{#}", t("\\text{文}"), t("文字")],
+          ["\\mathbb{#}", "\\mathbb{R}", t("黑板粗体")], ["\\mathcal{#}", "\\mathcal{L}", t("花体")], ["\\mathbf{#}", "\\mathbf{x}", t("粗体")], ["\\boldsymbol{#}", "\\boldsymbol{\\theta}", t("粗斜体")], ["\\mathrm{#}", "\\mathrm{d}", t("正体")],
+        ],
+      },
+      {
+        // Two columns each, on a line of their own.
+        columns: 10, height: 44, entries: [
+          ["\\begin{cases} # & # \\\\ # & # \\end{cases}", "\\begin{cases}a\\\\b\\end{cases}", t("分段函数"), 2], ["\\begin{pmatrix} # & # \\\\ # & # \\end{pmatrix}", "\\begin{pmatrix}a&b\\\\c&d\\end{pmatrix}", t("矩阵（圆括号）"), 2],
+          ["\\begin{bmatrix} # & # \\\\ # & # \\end{bmatrix}", "\\begin{bmatrix}a&b\\\\c&d\\end{bmatrix}", t("矩阵（方括号）"), 2], ["\\begin{vmatrix} # & # \\\\ # & # \\end{vmatrix}", "\\begin{vmatrix}a&b\\\\c&d\\end{vmatrix}", t("行列式"), 2],
+          ["\\begin{aligned} # &= # \\\\ &= # \\end{aligned}", "\\begin{aligned}a&=b\\\\&=c\\end{aligned}", t("多行对齐"), 2],
+        ],
+      },
+    ],
+  },
+  {
+    name: t("关系与箭头"), sections: [
+      {
+        title: t("关系"), columns: 12, entries: each([
+          "=", "\\neq", "\\approx", "\\equiv", "\\sim", "\\simeq", "\\cong", "\\propto", "<", ">", "\\le", "\\ge",
+          "\\ll", "\\gg", "\\leqslant", "\\geqslant", "\\prec", "\\succ", "\\preceq", "\\succeq", "\\mid", "\\parallel", "\\perp", "\\doteq",
+        ]),
+      },
+      { title: t("集合与逻辑"), columns: 12, entries: each(["\\in", "\\notin", "\\ni", "\\subset", "\\subseteq", "\\supseteq", "\\forall", "\\exists", "\\nexists", "\\neg", "\\therefore", "\\because"]) },
+      {
+        title: t("箭头"), columns: 12, height: 28, entries: [
+          ...each([
+            "\\to", "\\leftarrow", "\\leftrightarrow", "\\Rightarrow", "\\Leftarrow", "\\Leftrightarrow", "\\longrightarrow", "\\longleftarrow", "\\longleftrightarrow", "\\Longrightarrow", "\\Longleftarrow", "\\Longleftrightarrow",
+            "\\uparrow", "\\downarrow", "\\updownarrow", "\\Uparrow", "\\Downarrow", "\\mapsto", "\\nearrow", "\\searrow", "\\hookrightarrow", "\\rightleftharpoons",
+          ]),
+          ["\\xrightarrow{#}", "\\xrightarrow{f}", t("带字箭头")], ["\\xleftarrow{#}", "\\xleftarrow{f}", t("带字左箭头")],
+        ],
+      },
+    ],
+  },
+  {
+    name: t("化学"), sections: [
+      {
+        columns: 9, entries: [
+          ["\\ce{#}", "\\ce{H2O}", t("化学式")], ["\\ce{#^{#+}}", "\\ce{X^{n+}}", t("阳离子")], ["\\ce{#^{#-}}", "\\ce{Y^{n-}}", t("阴离子")], ["\\ce{^{#}_{#}#}", "\\ce{^{A}_{Z}X}", t("核素")], ["\\ce{#-#}", "\\ce{A-B}", t("单键")],
+          ["\\ce{#=#}", "\\ce{A=B}", t("双键")], ["\\ce{#\\bond{3}#}", "\\ce{A\\bond{3}B}", t("三键")], ["\\ce{#.#}", "\\ce{A.B}", t("结合（·）")], ["\\pu{#}", "\\pu{1 mol}", t("物理量单位")],
+        ],
+      },
+      {
+        columns: 9, height: 30, entries: [
+          ["\\ce{# -> #}", "\\ce{->}", t("反应")], ["\\ce{# <- #}", "\\ce{<-}", t("逆向反应")], ["\\ce{# <-> #}", "\\ce{<->}", t("共振")], ["\\ce{# <=> #}", "\\ce{<=>}", t("可逆反应")], ["\\ce{# <=>> #}", "\\ce{<=>>}", t("正向为主")],
+          ["\\ce{# <<=> #}", "\\ce{<<=>}", t("逆向为主")], ["\\ce{# ^}", "\\ce{X ^}", t("气体")], ["\\ce{# v}", "\\ce{X v}", t("沉淀")], ["\\ce{# ->[#][#] #}", t("\\ce{->[\\text{上}][\\text{下}]}"), t("条件")],
+        ],
+      },
+    ],
+  },
+];
+
+/**
+ * A snippet put in place of `text`'s range [start, end): its places to fill emptied (the selected
+ * text in the first), the caret in the first empty one (or after it). Returns { text, caret }.
+ */
+export function fillSnippet(text, start, end, snippet) {
+  const selected = text.slice(start, end);
+  let out = "";
+  const places = [];
+  let first = true;
+  for (const char of snippet) {
+    if (char !== SLOT) {
+      out += char;
+      continue;
+    }
+    if (first && selected) out += selected;
+    else places.push(start + out.length);
+    first = false;
+  }
+  // A command followed by a letter would join it (\alpha x): a space after a bare command.
+  const after = text.slice(end);
+  if (/\\[a-zA-Z]+$/.test(out) && /^[a-zA-Z]/.test(after)) out += " ";
+  return { text: text.slice(0, start) + out + after, caret: places[0] ?? start + out.length };
+}
+
+/** Where Tab goes from `at`: the next empty place to fill ({} or the inside of an empty pair), or null. */
+export function nextPlace(text, at, back = false) {
+  const found = [...text.matchAll(/\{\}/g)].map((match) => match.index + 1);
+  return (back ? found.filter((place) => place < at).at(-1) : found.find((place) => place > at)) ?? null;
+}

package/browser/editor/page/frame.mjs

@@ -0,0 +1,74 @@
+import { IN_LAYER } from "../../shared/layers.mjs";
+import { innerHost } from "./caret.mjs";
+import { frameOf } from "./core.mjs";
+import { FOLLOW, task } from "./frames.mjs";
+import { drawOver, fillRectOf, reachOf, shapeOf } from "./overlay-layer.mjs";
+import { onSettle, own } from "./overlays.mjs";
+import { addStyle, element } from "./ui.mjs";
+import { onPreferences, preference } from "../../shared/preferences.mjs";
+
+// The dashed frame around what is being edited (docs/editor.md, "Browser side"): the text with the
+// focus when it is a block of its own, or the component whose text it is (core.mjs markFrames,
+// frameOf). It is drawn in the editor's layer (overlay-layer.mjs), as a selected block's fill is (selection/), over
+// where the block shows (geometry.mjs extentOf: a list item with its marker), so the two line up;
+// never as an outline of the report's own elements, which could not take in a list item's marker.
+// It follows scrolling, resizing and reflow while it shows (a task of the editor's frames,
+// frames.mjs), cut where the block is cut, and belongs to the block it frames (overlays.mjs). Only
+// with the reader's 显示编辑框 on (the workbench's 设置: shared/preferences.mjs editFrame, off at first):
+// otherwise it never shows, and switched there it comes or goes at once.
+
+const STYLE = `
+  .ge-frame { position: absolute; left: 0; top: 0; z-index: ${IN_LAYER.frame}; box-sizing: border-box; border: 1px dashed color-mix(in srgb, var(--doc-accent, #2678d8) 45%, transparent); pointer-events: none; }
+`;
+
+
+/** editing(): whether the page is being edited. */
+export function createFrame(editing) {
+  addStyle(STYLE);
+  const node = element("div", { class: "ge-frame" });
+  let current = null; // the block framed
+  let shown = preference("editFrame");
+
+  // The focused text of the report, or the component it belongs to.
+  function framed() {
+    const focused = innerHost(document.activeElement); // a paragraph a list item holds: its own (caret.mjs)
+    if (!shown || !editing() || focused?.getAttribute("contenteditable") !== "true" || focused.closest("[data-doc-dev]")) return null;
+    return frameOf(focused) ?? focused;
+  }
+
+  // The frame follows its block's corners (rounded while editing when it has none, editor.mjs).
+  function run() {
+    const target = framed();
+    const shape = target && shapeOf(target);
+    current = shape ? target : null;
+    if (!shape) {
+      node.remove();
+      return false;
+    }
+    const block = target;
+    own(node, "frame", { owner: block, alive: () => current === block && block.isConnected && framed() === block, expected: () => fillRectOf(block) });
+    drawOver(node, shape, reachOf(shape.radius, shape.reach, shape.room)); // where a selected block's fill is
+    return FOLLOW; // drawn again when the block may have moved (frames.mjs)
+  }
+  const frames = task("frame", {
+    run,
+    fail: () => {
+      current = null;
+      node.remove();
+    },
+  });
+  // The text framed taken off the page: the frame goes at once.
+  onSettle(() => {
+    if (current && !current.isConnected) {
+      current = null;
+      node.remove();
+    }
+  });
+  document.addEventListener("focusin", () => frames.wake());
+  document.addEventListener("focusout", () => frames.wake());
+  document.addEventListener("selectionchange", () => frames.wake());
+  onPreferences(() => {
+    shown = preference("editFrame");
+    frames.wake();
+  });
+}