@heycys/gallery 0.0.0-stage → 0.1.1

package/browser/editor/page/format-bar/index.mjs

@@ -0,0 +1,404 @@
+import { boxKind, can, isEmpty, isFirstLine, limitText, ownHTML } from "../core.mjs";
+import { editable, select, selectionContext } from "../caret.mjs";
+import { turnTargets, typeOf } from "../convert.mjs";
+import { formulaBoxNode, openFormula } from "../formula/index.mjs";
+import { linkAround, linkBoxNode, openLink } from "../links/index.mjs";
+import { formatRange, markAround, markValue, rangeAt, rangeOffsets } from "../marks.mjs";
+import { pageOfType } from "../page-objects.mjs";
+import { textAnchor } from "../placement.mjs";
+import { ZWSP, spaceAround } from "../../../shared/inline-spacing.mjs";
+import { createFormatBar } from "./bar.mjs";
+import { brushed, currentEffects, describeEffects, effectChanges, noteEffects } from "./brush.mjs";
+import { useColor } from "./colors.mjs";
+import { FROM_SELECTION, isLead, takesFormula } from "../../components/registry.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// Inline formatting (docs/editor.md, "Inline formatting"): the bar over selected text (bar.mjs:
+// the format brush, the colors, bold, underline, clearing the format, inline code, a formula, and
+// under "更多" a link, strikethrough, italic, a detail card and 批注; and the block's type to turn it
+// into another) shows once the mouse is released over a selection inside one block that takes marks,
+// and the keys (FORMAT_KEYS, SHIFT_KEYS). Bold, italic, strikethrough, underline (Ctrl+U: red, 2px)
+// and inline code toggle; a color, or an underline's color or weight, picked in a panel sets a kit
+// class; clearing takes all of them off (links stay). Each change goes through marks.mjs
+// formatRange as one undo step that brings its selection back, and is remembered by the format
+// brush (brush.mjs), which its button (and Ctrl+Shift+H) puts on other text. The link item opens
+// the link box (links/), the formula button the formula box (formula/); the card item makes the
+// selected text the entry of a new detail card (components/dialog/page.mjs); turning the block goes
+// through the editor's conversion (convert.mjs, one undo step).
+// Text selected across blocks (text-select/: body text, headings, list items) has the bar too, once
+// the press ends: a format goes on each block's piece of it (a toggle on unless every piece has it),
+// one undo step, the selection drawn again over it. Its blocks' types are there too when it holds
+// nothing but text (notion-lite's: "多个类型" for a mix), turned together (editor.mjs convertAll, one
+// undo step) and the selection drawn again over their text where it is then. The link, the formula
+// and the card are not for several blocks, their buttons off.
+
+/** Ctrl (⌘) + these keys format the selected text. */
+export const FORMAT_KEYS = { b: "bold", i: "italic", u: "underline", e: "code" };
+/** Ctrl (⌘) + Alt + \ clears the format (Notion's; Ctrl+\ alone is the workbench's sidebar). */
+const CLEAR_KEY = "\\";
+/** Ctrl (⌘) + Shift + these keys. */
+const SHIFT_KEYS = { s: "strike", x: "strike", e: "formula", h: "brush" };
+
+// The formats a caret with nothing selected keeps for the next text typed there (notion-lite's pending
+// annotations): the toggles, by what they are called in the status line. A flowchart node's empty
+// first line keeps bold so by itself (armed: its title is bold by default, <p><strong>…</strong></p>,
+// the <strong> real markup the reader may take off): a new node, one emptied, one a conversion made.
+const CARRIED = { bold: t("加粗"), italic: t("斜体"), underline: t("下划线"), strike: t("删除线"), code: t("行内代码") };
+
+// What "清除格式" takes off: every mark the bar sets but links.
+const CLEAR = [["bold", false], ["italic", false], ["underline", false], ["strike", false], ["code", false], ["text", null], ["highlight", null]];
+// The format a change touches, as the brush remembers it (inline code it does not).
+const FACET = { bold: "bold", italic: "italic", strike: "strike", text: "text", highlight: "highlight", underline: "underline", underlineColor: "underline", underlineWeight: "underline" };
+
+/**
+ * active(): whether the bar may show (editing, no input method composing). say: the status line.
+ * recordStep(host, before, selection): a change of a block's text as its own undo step
+ * (history.mjs).
+ * convert(host, type): turn a text block into another type (editor.mjs convertHost).
+ * struct(parents, touched, mutate): the editor's undoable change of several blocks (history.mjs).
+ * cross: the selection across blocks (text-select/): texts() its pieces ({ host, range }) or null,
+ * wholes() the blocks it takes whole, redraw(texts) once they are formatted, reselect(texts) once
+ * they are turned (false when it let go). turnIntoAll(hosts): what text blocks can be turned into
+ * together ({ types, current, first }, convert.mjs groupTargets), convertAll(hosts, type) turns
+ * them (editor.mjs: its outcome, `hosts` where each one's text is now, or null); selectBlocks(units).
+ * annotates(): whether the selection now can be annotated (annotate/: "更多" shows its 批注);
+ * annotate() does it.
+ */
+export function createFormatting({ active, say, recordStep, struct, convert, cross, turnIntoAll = () => null, convertAll = () => null, selectBlocks = () => {}, annotates = () => false, annotate = () => {} }) {
+  let pointerHeld = false; // the bar waits until the mouse is released
+  let pressKept = false; // the press is a component's: released, it brings no bar back
+  let pending = false;
+  let carry = null; // { host, at, marks: Map(name -> on), armed? }: the formats the next text typed at the caret `at` (visible characters into the block) takes
+  let declined = null; // the empty first line whose armed bold the reader let go (Ctrl+B, the bar): not armed again until the caret leaves it or something is typed
+  let shownFor = null; // the selection the bar shows for ({ host, at }): its panels go when it moves on
+
+  // changes: [[name, value]], applied in order as one undo step. value undefined toggles
+  // bold/italic/underline/strike/code; true or false sets it; a color name or null sets (or
+  // removes) text color or highlight. What it leaves on the text is remembered by the brush, unless
+  // it is the brush being put on (`brushing`). Returns whether it applied.
+  function format(changes, brushing = false) {
+    const context = selectionContext();
+    const pieces = context ? null : crossPieces();
+    if (pieces) return formatPieces(pieces, changes);
+    if (!context) return void carryFormat(changes);
+    const { host } = context;
+    let { range } = context;
+    if (can(host, "plain")) return void say(limitText(host, "format"));
+    if (changes.some(([name, value]) => name === "code" && value !== false) && range.cloneContents().querySelector("[data-ge-atom]")) return void say(t("公式和带图标的链接不能放进行内代码。"));
+    const before = ownHTML(host);
+    for (const [name, value] of changes) {
+      range = formatRange(host, range, name, value === undefined ? markValue(host, range, name) !== true : value);
+    }
+    // Text made inline code stands a space apart from the words beside it (shared/inline-spacing.mjs spaceAround).
+    if (changes.some(([name]) => name === "code") && markValue(host, range, "code") === true) {
+      [...host.querySelectorAll("code")].filter((code) => range.intersectsNode(code)).forEach(spaceAround);
+    }
+    select(range);
+    const offsets = rangeOffsets(host, range);
+    if (ownHTML(host) !== before) recordStep(host, before, offsets);
+    const at = { start: offsets[0], end: offsets[1] };
+    if (brushing) brushed(host, at);
+    else {
+      const touched = {};
+      for (const facet of new Set(changes.map(([name]) => FACET[name]).filter(Boolean))) touched[facet] = facetOn(host, range, facet);
+      if (Object.keys(touched).length > 0) noteEffects(host, at, touched);
+    }
+    schedule();
+    return true;
+  }
+
+  // The pieces of the selection across blocks that take marks (not a plain block's, not an empty
+  // one at a block's end), or null.
+  function crossPieces() {
+    const pieces = cross.texts()?.filter(({ host, range }) => !range.collapsed && !can(host, "plain"));
+    return pieces?.length > 0 ? pieces : null;
+  }
+
+  // `changes` on each piece of the selection across blocks, one undo step (a toggle on unless every
+  // piece has it), the selection drawn again over them. The brush remembers the first piece's.
+  function formatPieces(pieces, changes) {
+    if (changes.some(([name, value]) => name === "code" && value !== false) && pieces.some(({ range }) => range.cloneContents().querySelector("[data-ge-atom]"))) return void say(t("公式和带图标的链接不能放进行内代码。"));
+    const values = changes.map(([name, value]) => [name, value === undefined ? !pieces.every(({ host, range }) => markValue(host, range, name) === true) : value]);
+    const hosts = pieces.map(({ host }) => host);
+    let done = pieces;
+    const result = struct([], hosts, () => {
+      done = pieces.map(({ host, range }) => {
+        for (const [name, value] of values) range = formatRange(host, range, name, value);
+        if (values.some(([name, value]) => name === "code" && value)) [...host.querySelectorAll("code")].filter((code) => range.intersectsNode(code)).forEach(spaceAround);
+        return { host, range };
+      });
+      return { touched: hosts, focus: null };
+    });
+    if (!result) return false;
+    cross.redraw(done);
+    const [{ host, range }] = done;
+    const [start, end] = rangeOffsets(host, range);
+    const touched = {};
+    for (const facet of new Set(changes.map(([name]) => FACET[name]).filter(Boolean))) touched[facet] = facetOn(host, range, facet);
+    if (Object.keys(touched).length > 0) noteEffects(host, { start, end }, touched);
+    schedule();
+    return true;
+  }
+
+  // The visible characters (no pads) between the block's start and a point.
+  function charsBefore(host, node, offset) {
+    const before = document.createRange();
+    before.setStart(host, 0);
+    before.setEnd(node, offset);
+    return before.toString().replaceAll(ZWSP, "").length;
+  }
+
+  // With nothing selected a toggle (bold, italic, underline, strikethrough, code) is kept for the next
+  // text typed at the caret, as notion-lite's does (432331): pressed again it is let go; the caret
+  // moving elsewhere forgets it (moved); the text typed takes it (typed).
+  function carryFormat(changes) {
+    const selection = getSelection();
+    const host = selection.rangeCount && selection.isCollapsed ? editable(selection.anchorNode) : null;
+    const [[name, value] = []] = changes;
+    if (!host || changes.length !== 1 || value !== undefined || !CARRIED[name]) return void say(t("先选中要设置格式的文字。"));
+    if (can(host, "plain")) return void say(limitText(host, "format"));
+    const at = charsBefore(host, selection.anchorNode, selection.anchorOffset);
+    const armed = Boolean(carry?.armed && carry.host === host);
+    if (carry?.host !== host || carry.at !== at) carry = { host, at, marks: new Map() };
+    const now = carry.marks.get(name) ?? markAround(host, selection.anchorNode, name);
+    if (now === markAround(host, selection.anchorNode, name)) carry.marks.set(name, !now);
+    else carry.marks.delete(name);
+    const asked = [...carry.marks].map(([each, on]) => (on ? CARRIED[each] : t("不{0}", CARRIED[each])));
+    if (asked.length === 0) {
+      carry = null;
+      if (armed) declined = host; // the title's bold let go: it stays so while the caret is here
+    }
+    say(asked.length > 0 ? t("接着打的字：{0} · 再按一次取消", asked.join("、")) : t("接着打的字照旧"));
+  }
+
+  // The text just typed (`data`, the caret right after it): it takes the formats the caret kept, and
+  // the caret goes on after it. Whatever was typed, the caret's memory is spent.
+  function typed(host, data) {
+    const asked = carry;
+    carry = null;
+    declined = null; // bold let go in an empty title holds for what is typed next only: emptied again, it is armed again
+    const selection = getSelection();
+    const node = selection.anchorNode;
+    if (!asked || asked.host !== host || !data || !selection.rangeCount || !selection.isCollapsed || node?.nodeType !== 3 || !host.contains(node)) return;
+    const start = selection.anchorOffset - data.length;
+    if (start < 0 || node.data.slice(start, selection.anchorOffset) !== data || charsBefore(host, node, start) !== asked.at) return;
+    let range = document.createRange();
+    range.setStart(node, start);
+    range.setEnd(node, selection.anchorOffset);
+    for (const [name, on] of asked.marks) range = formatRange(host, range, name, on);
+    if (asked.marks.get("code")) [...host.querySelectorAll("code")].filter((code) => range.intersectsNode(code)).forEach(spaceAround);
+    range.collapse(false);
+    select(range);
+  }
+
+  // The caret moved off the place that kept a format (an input method composing may move it freely);
+  // in a flowchart node's empty first line, bold is armed (arm).
+  function moved() {
+    if (carry) {
+      const selection = getSelection();
+      const node = selection.anchorNode;
+      if (!selection.rangeCount || !selection.isCollapsed || editable(node) !== carry.host || charsBefore(carry.host, node, selection.anchorOffset) !== carry.at) carry = null;
+      else if (carry.armed && !armable(carry.host)) carry = null; // no title of a node any more (moved out, written in)
+    }
+    arm();
+  }
+
+  // A flowchart node's empty first line, which takes marks: what is typed there is bold (core.mjs firstLineOf).
+  const armable = (host) => isFirstLine(host) && isEmpty(host) && !can(host, "plain");
+
+  // Bold armed at a caret in a node's empty first line, as Ctrl+B with nothing selected arms it (the
+  // reader's Ctrl+B there lets it go, `declined`, until the caret leaves the line or something is typed).
+  function arm() {
+    const selection = getSelection();
+    const host = selection.rangeCount && selection.isCollapsed ? editable(selection.anchorNode) : null;
+    if (declined && declined !== host) declined = null;
+    if (carry || !host || host === declined || !armable(host)) return;
+    carry = { host, at: 0, marks: new Map([["bold", true]]), armed: true };
+  }
+
+  // A format as the selected text has it now: true, a color, an underline's { color, weight }, or
+  // false / null when it is not on all of it.
+  function facetOn(host, range, facet) {
+    if (facet === "text" || facet === "highlight") return markValue(host, range, facet);
+    if (facet !== "underline") return markValue(host, range, facet) === true;
+    if (markValue(host, range, "underline") !== true) return false;
+    return { color: markValue(host, range, "underlineColor") ?? "default", weight: markValue(host, range, "underlineWeight") ?? "default" };
+  }
+
+
+  // A button of the bar, or a key.
+  function run(command, value) {
+    const context = selectionContext();
+    const makes = FROM_SELECTION.some(({ type }) => type === command);
+    if (!context && crossPieces() && (makes || ["link", "formula"].includes(command))) return say(t("选中的文字跨了几块：链接、公式和详情卡片只能加在一块里的文字上。"));
+    if (command === "link") return context ? openLink(context.host) : say(t("先选中要加链接的文字。"));
+    if (command === "formula") return context ? openFormula(context.host) : say(t("先选中要变成公式的文字。"));
+    if (makes) return pageOfType(command).fromSelection(); // a block made from the selected text
+    if (command === "annotate") return annotate();
+    if (command === "turn") {
+      if (!context) return turnAcross(value);
+      bar.hide();
+      return convert(context.host, value);
+    }
+    if (command === "clear") return format(CLEAR);
+    if (command === "text" || command === "highlight") {
+      useColor(command, value);
+      return format([[command, value]]);
+    }
+    // The format brush (and Ctrl+Shift+H): the formats it remembers on the selected text.
+    if (command === "brush") {
+      const effects = currentEffects();
+      if (Object.keys(effects).length === 0) return say(t("还没有可应用的格式：先给一段文字设置格式，再选中别的文字点它。"));
+      if (format(effectChanges(effects), true)) say(t("已应用{0} · Ctrl+Z 撤销", describeEffects(effects)));
+      return;
+    }
+    format([[command, value]]);
+  }
+
+  const bar = createFormatBar(run);
+
+  // The bar follows the selection, once what changed it is done.
+  function schedule() {
+    if (pending) return;
+    pending = true;
+    setTimeout(() => {
+      pending = false;
+      update();
+    }, 0);
+  }
+
+  // The panels go when the selection the bar shows for moves on.
+  function showingFor(host, at) {
+    if (shownFor && (shownFor.host !== host || shownFor.at !== at)) bar.closeSub();
+    shownFor = { host, at };
+  }
+
+  function update() {
+    const free = active() && !pointerHeld && !linkBoxNode() && !formulaBoxNode();
+    const context = free ? selectionContext() : null;
+    const pieces = free && !context ? crossPieces() : null;
+    if (pieces) return showAcross(pieces);
+    if (!context || can(context.host, "plain") || context.host.hasAttribute("data-ge-part")) return bar.hide();
+    const { host, range } = context;
+    showingFor(host, rangeOffsets(host, range).join());
+    const types = turnTargets(host);
+    const mark = (name) => markValue(host, range, name);
+    const code = mark("code") === true;
+    bar.show(textAnchor(range), {
+      bold: mark("bold") === true,
+      italic: mark("italic") === true,
+      underline: mark("underline") === true,
+      strike: mark("strike") === true,
+      code,
+      text: mark("text"),
+      highlight: mark("highlight"),
+      underlineColor: mark("underlineColor"), // "default" (the red), a color, or null (not one throughout)
+      underlineWeight: mark("underlineWeight"),
+      link: Boolean(linkAround(host, range)),
+      links: can(host, "links"),
+      fromSelection: can(host, "links") && Boolean(document.querySelector("main[data-ge-box]")),
+      formula: !code && takesFormula(host), // over a formula: edits it
+      annotates: annotates(),
+      block: types.length > 0 ? { current: typeOf(host), types } : null,
+    });
+  }
+
+  // The text blocks of the selection across blocks, when it holds nothing but text (no block taken
+  // whole: notion-lite turns a selection whose every piece is a block's text; a highlight block's
+  // icon it goes over, its box's lead, is no block of the body), and what they can be turned into
+  // together ({ hosts, types, current, first }), or null. A block it only touches at its start
+  // (nothing of it selected) is not among them; an empty one it goes over is.
+  function crossTurn() {
+    const pieces = cross.texts();
+    const lead = (unit) => isLead(boxKind(unit.parentElement), unit.getAttribute("data-ge-unit-kind"));
+    if (!pieces || (cross.wholes?.() ?? []).some((unit) => !lead(unit))) return null;
+    const hosts = [...new Set(pieces.filter(({ host, range }) => !range.collapsed || isEmpty(host)).map(({ host }) => host))];
+    const turn = hosts.length > 0 ? turnIntoAll(hosts) : null;
+    return turn && { ...turn, hosts };
+  }
+
+  // The blocks of the selection across blocks turned into `type` together (one undo step), the
+  // selection drawn again over their text where it is now (notion-lite's placeCaret(keep)); blocks
+  // that hold no text of the body then (a disclosure, code) are selected instead.
+  function turnAcross(type) {
+    const turn = crossTurn();
+    if (!turn) return;
+    const pieces = cross.texts().map(({ host, range }) => ({ host, offsets: rangeOffsets(host, range) }));
+    const outcome = convertAll(turn.hosts, type);
+    if (!outcome) return;
+    const texts = pieces.map(({ host, offsets }) => {
+      const now = outcome.hosts.get(host) ?? host;
+      return now?.isConnected ? { host: now, range: rangeAt(now, offsets) } : null;
+    }).filter(Boolean);
+    if (!cross.reselect(texts)) selectBlocks(outcome.units);
+    schedule();
+  }
+
+  // The bar for text selected across blocks: what every piece has on (a color the same in all of
+  // them), by the end of its last piece, and the types its blocks can be turned into together; no
+  // link, formula or card.
+  function showAcross(pieces) {
+    showingFor(pieces[0].host, pieces.map(({ host, range }) => rangeOffsets(host, range).join()).join("|"));
+    const all = (name) => pieces.every(({ host, range }) => markValue(host, range, name) === true);
+    const same = (name) => {
+      const values = pieces.map(({ host, range }) => markValue(host, range, name));
+      return values.every((value) => value === values[0]) ? values[0] : null;
+    };
+    const whole = document.createRange();
+    whole.setStart(pieces[0].range.startContainer, pieces[0].range.startOffset);
+    whole.setEnd(pieces.at(-1).range.endContainer, pieces.at(-1).range.endOffset);
+    const underline = all("underline");
+    const turn = crossTurn();
+    bar.show(textAnchor(whole), {
+      bold: all("bold"), italic: all("italic"), underline, strike: all("strike"), code: all("code"),
+      text: same("text"), highlight: same("highlight"),
+      underlineColor: underline ? same("underlineColor") : null, underlineWeight: underline ? same("underlineWeight") : null,
+      link: false, links: false, fromSelection: false, formula: false, annotates: annotates(), block: turn && { current: turn.current, types: turn.types, first: turn.first },
+    });
+  }
+
+  return {
+    format,
+    typed,
+    moved,
+    /** Whether bold is armed at the caret (a flowchart node's empty first line), for the tests. */
+    get armed() { return Boolean(carry?.armed && carry.marks.get("bold")); },
+    schedule,
+    hide: () => bar.hide(),
+    /** Keys in text: Esc closes the bar's panel, else the bar; the format keys. Returns true when handled. */
+    key(event) {
+      const ctrl = event.ctrlKey || event.metaKey;
+      const mod = ctrl && !event.altKey;
+      const key = event.key.toLowerCase();
+      const name = ctrl && event.altKey && !event.shiftKey && key === CLEAR_KEY ? "clear" : !mod ? null : event.shiftKey ? SHIFT_KEYS[key] : FORMAT_KEYS[key];
+      if (event.key === "Escape" && bar.visible) {
+        event.preventDefault();
+        if (!bar.closeSub()) bar.hide();
+      } else if (name) {
+        event.preventDefault();
+        run(name);
+      } else return false;
+      return true;
+    },
+    /**
+     * A press on the page (`main`: the main button): the bar hides until it is released. One a component
+     * keeps (`kept`: on its button, on what it draws) is none the editor answers: released, it brings no
+     * bar back over words selected before it, which the press did not move.
+     */
+    pressed(main, kept = false) {
+      pointerHeld = main;
+      pressKept = kept;
+      bar.hide();
+    },
+    /** The press ended. */
+    released() {
+      pointerHeld = false;
+      if (!pressKept) schedule();
+      pressKept = false;
+    },
+    /** Whether a node is part of the bar. */
+    holds: (node) => bar.holds(node),
+    get visible() { return bar.visible; },
+    get node() { return bar.node; },
+  };
+}

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

@@ -0,0 +1,236 @@
+import { can, formulaParts, limitText, newFormula, ownHTML, setOwnHTML } from "../core.mjs";
+import { editable, select } from "../caret.mjs";
+import { chipBox, fillEdited } from "../chip-fills.mjs";
+import { rangeOffsets } from "../marks.mjs";
+import { spaceAround } from "../../../shared/inline-spacing.mjs";
+import { addStyle, element, loadScript } from "../ui.mjs";
+import { chipHtml, markEmpty } from "../../components/placeholder.mjs";
+import { takesFormula } from "../../components/registry.mjs";
+import { renderTex } from "../tex.mjs";
+import { formulaSays, openFormulaPanel } from "./panel.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// Inline formulas (docs/editor.md, "Inline formatting"), as Notion's: the format bar's √x button
+// or Ctrl+Shift+E turns the selected text into a formula at once (its TeX: the text, without the
+// $…$ or \( \) around it), and a click on a formula edits it; either way the formula box opens
+// below the formula, a field holding its TeX, the formula in the text following what is typed
+// (tinted while it is edited; "√x 新公式" when empty, "√x 无效的公式" with KaTeX's reason below the
+// field when it cannot be read; the editor and its symbol bar: panel.mjs). However the box is left
+// (Ctrl+Enter, Enter with all of the field selected, Enter itself being a new line, Esc, a press
+// elsewhere, Ctrl+S, the page left) what is in it is kept as one undo step, the caret after it. TeX
+// that does not read stays a formula of the file, as typed, for it may be a stage on the way: a gray "√x 无效的公式" on the page,
+// which a click opens with its words, a reader having KaTeX's error. A formula left empty stays, as an
+// empty block does: the "/" menu's 公式 given nothing, or a formula emptied, is \(\) in the file, a gray
+// "√x 新公式" on the page (core.mjs data-ge-empty, components/placeholder.mjs), a whole as a character
+// is, shown to no reader; a click on it edits it. The formula is a chip like the report's own (core.mjs
+// newFormula), written as the kit's .doc-math-inline, a formula of the file keeping its own tags. Nothing
+// is committed while the box is open (the editor's autosave waits: formulaBoxNode). The page's KaTeX
+// (the kit's) renders it; a report without formulas is served without KaTeX, so the box loads it the
+// first time. connectFormula() gives the box what it needs from the editor.
+
+const STYLE = `
+  /* The formula being edited, in the text: all of it (chip-fills.mjs). */
+  [data-ge-editing] [data-ge-formula-edit=""] { cursor: pointer; }
+  [data-ge-editing] [data-ge-formula-edit=""] .katex { background: var(--ge-fill); }
+  /* Empty, or not read: a chip, served with the page (components/placeholder.mjs). */
+  [data-ge-editing] .doc-math-inline[data-ge-atom] { cursor: pointer; }
+`;
+
+// A formula of the text (a chip of the page: core.mjs; not a link shown with its icon, links/).
+const FORMULA = ".doc-math-inline[data-ge-atom]";
+
+let use = null; // { say, recordStep, active }
+let box = null; // { panel, host, chip, parts, before, original }
+
+export function connectFormula(editor) {
+  use = editor;
+  addStyle(STYLE);
+  // A click on a formula in the text edits it (a press there puts no caret anywhere).
+  const formulaAt = (target) => {
+    const chip = use.active() ? target?.closest?.(FORMULA) : null;
+    const host = chip && editable(chip.parentElement);
+    return host && !can(host, "plain") && takesFormula(host) && main(chip) ? chip : null;
+  };
+  document.addEventListener("mousedown", (event) => {
+    if (event.button === 0 && !event.shiftKey && formulaAt(event.target)) event.preventDefault();
+  }, true);
+  document.addEventListener("click", (event) => {
+    const chip = event.shiftKey ? null : formulaAt(event.target);
+    if (!chip || chip.hasAttribute("data-ge-formula-edit")) return;
+    event.preventDefault();
+    editFormula(chip);
+  }, true);
+}
+
+const main = (node) => Boolean(node.closest("main"));
+const katex = () => globalThis.katex ?? null;
+// The dev server's KaTeX (src/render/assets.mjs), for a page served without it, and KaTeX's mhchem
+// (\ce, \pu: the symbol bar's 化学), which the kit's math.js bundles, for a page served without that.
+const KATEX = { script: "/vendor/katex/katex.min.js", style: "/vendor/katex/katex.min.css", chemistry: "/__gallery/edit/mhchem.js" };
+
+// Whether the page's KaTeX reads \ce (mhchem's).
+const readsChemistry = () => {
+  try {
+    katex().renderToString("\\ce{H}", { throwOnError: true });
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+// mhchem on the page's KaTeX (once it is there): true once it reads \ce, false when it cannot be had.
+const loadChemistry = () => loadScript(KATEX.chemistry, readsChemistry);
+
+/**
+ * Inline formulas pasted as the page's own: (tex) => a formula chip drawn by KaTeX (null when its TeX
+ * does not render), or null while KaTeX is not on the page (loadKatex). The clipboard's (blocks,
+ * text) and a table's cells' (table/cells.mjs) pastes.
+ */
+export function formulaMaker() {
+  if (!globalThis.katex) return null;
+  return (tex) => {
+    const { html, error } = renderTex(tex);
+    return error ? null : newFormula(document, tex, html);
+  };
+}
+
+// KaTeX on the page, with mhchem: true once it is there, false when it cannot be loaded (formulas pasted too: clipboard/).
+export async function loadKatex() {
+  if (!(await loadMath())) return false;
+  await loadChemistry();
+  return true;
+}
+
+const loadMath = () => loadScript(KATEX.script, katex, {
+  before: () => {
+    if (!document.querySelector('link[data-doc-vendor="katex-styles"]')) document.head.append(element("link", { rel: "stylesheet", href: KATEX.style, "data-doc-dev": "" }));
+  },
+});
+
+// The selected text as TeX: \( \) or up to two layers of $…$ around it are the formula's delimiters.
+function texOf(text) {
+  let tex = text.trim();
+  const wrapped = tex.match(/^\\\(([\s\S]*)\\\)$/);
+  if (wrapped) return wrapped[1].trim();
+  for (let layer = 0; layer < 2 && tex.length > 1 && tex.startsWith("$") && tex.endsWith("$"); layer++) tex = tex.slice(1, -1).trim();
+  return tex;
+}
+
+// Inline elements a replaced selection left empty go (a formula chip and its insides stay).
+function dropEmpty(host) {
+  for (const node of [...host.querySelectorAll("strong, em, u, s, code, a, sup, sub, span")].reverse()) {
+    if (node.closest("[data-ge-atom]") || node.hasAttribute("data-ge-atom")) continue;
+    if (!node.textContent && !node.querySelector("br, [data-ge-atom]")) node.remove();
+  }
+}
+
+// The formula in the text follows the field: rendered, or a chip: √x 新公式 (an empty one's) or
+// √x 无效的公式 (components/placeholder.mjs).
+function refresh(value) {
+  const tex = value.trim();
+  const { html, error } = tex ? renderTex(tex) : {};
+  if (!tex) markEmpty(box.chip, "formula");
+  else {
+    box.chip.removeAttribute("data-ge-empty");
+    box.chip.innerHTML = error ? chipHtml("invalid") : html;
+  }
+  box.chip.setAttribute("data-ge-formula-edit", !tex ? "empty" : error ? "invalid" : "");
+  fillEdited(box.chip);
+}
+
+// The caret right after `node`.
+function caretAfter(host, node) {
+  const after = document.createRange();
+  after.setStartAfter(node);
+  after.collapse(true);
+  host.focus({ preventScroll: true });
+  select(after);
+  return after;
+}
+
+/** The box left from outside it (a press elsewhere, the page saved or left): what is in it is kept. */
+export function dismissFormula() {
+  if (box) submit(box.panel.value);
+}
+
+// Keep the formula as one undo step, the caret after it.
+function submit(value) {
+  const tex = value.trim();
+  const { html, error } = tex ? renderTex(tex) : {};
+  const { panel, host, chip, parts, before, original } = box;
+  panel.close();
+  box = null;
+  fillEdited(null);
+  if (!host.isConnected) return;
+  if (tex === original) { // a formula of the text, unchanged
+    setOwnHTML(host, before);
+    const same = [...host.querySelectorAll("[data-ge-atom]")].find((each) => each.getAttribute("data-ge-atom") === chip.getAttribute("data-ge-atom"));
+    if (same) caretAfter(host, same);
+    return;
+  }
+  // A formula stands a space apart from the words beside it (shared/inline-spacing.mjs spaceAround), the caret going
+  // on after it, past the space put there; one left empty (\(\), its gray chip) stands as it is.
+  const formula = newFormula(document, tex, html, parts);
+  if (error) markEmpty(formula, "invalid");
+  chip.replaceWith(formula);
+  const { after } = tex ? spaceAround(formula) : {};
+  const caret = caretAfter(host, after ?? formula);
+  dropEmpty(host);
+  use.recordStep(host, before, rangeOffsets(host, caret));
+  if (tex || original) use.say(formulaSays.kept(tex, original !== null));
+}
+
+// The editor below `chip` (in `host`, whose HTML was `before`), holding `tex`.
+function openBox(host, chip, { before, tex, parts, original }) {
+  box = { host, chip, parts, before, original };
+  box.panel = openFormulaPanel({
+    value: tex, anchor: () => chipBox(chip),
+    onInput: (value) => box?.chip === chip && refresh(value),
+    onSubmit: (value) => { if (box?.chip === chip) submit(value); },
+  });
+}
+
+/**
+ * Turn the text selected in `host` into a formula (one there already: edit it); `fresh` (the "/"
+ * menu's 公式): a new, empty one at the caret, its field open for what is pasted or typed.
+ */
+export async function openFormula(host, { fresh = false } = {}) {
+  if (can(host, "plain")) return use.say(limitText(host, "format"));
+  if (!takesFormula(host)) return use.say(limitText(host, "formula"));
+  const selection = getSelection();
+  const range = selection.rangeCount ? selection.getRangeAt(0).cloneRange() : null;
+  if (!range || (range.collapsed && !fresh) || !host.contains(range.commonAncestorContainer)) return use.say(t("先选中要变成公式的文字。"));
+  const inside = range.cloneContents().querySelector(FORMULA);
+  if (inside) {
+    const chip = [...host.querySelectorAll(FORMULA)].find((each) => range.intersectsNode(each));
+    return chip ? editFormula(chip) : undefined;
+  }
+  const around = range.commonAncestorContainer.nodeType === 1 ? range.commonAncestorContainer : range.commonAncestorContainer.parentElement;
+  const code = around.closest("code");
+  if (code && host.contains(code)) return use.say(t("行内代码里不能放公式。"));
+  if (!(await loadKatex())) return use.say(formulaSays.unloaded(true), "error");
+  if (!host.isConnected) return;
+  dismissFormula();
+  const before = ownHTML(host);
+  const tex = texOf(range.toString());
+  range.deleteContents();
+  const chip = newFormula(document, tex || "x", "", null); // its source is set when it is kept
+  range.insertNode(chip);
+  dropEmpty(host);
+  openBox(host, chip, { before, tex, parts: null, original: null });
+}
+
+/** Edit a formula of the text (a click on it). */
+export async function editFormula(chip) {
+  const host = editable(chip.parentElement);
+  if (!host) return;
+  const parts = formulaParts(chip);
+  if (!parts) return use.say(formulaSays.peculiar);
+  if (!(await loadKatex())) return use.say(formulaSays.unloaded(false), "error");
+  dismissFormula();
+  if (!chip.isConnected) return;
+  openBox(host, chip, { before: ownHTML(host), tex: parts.tex, parts, original: parts.tex });
+}
+
+/** The open formula box, if any (the editor's UI moves it into an open dialog; commits wait while it is). */
+export const formulaBoxNode = () => box?.panel.node ?? null;