@heycys/gallery 0.0.0-stage → 0.1.0

package/browser/editor/components/math/index.mjs

@@ -0,0 +1,88 @@
+import { escapeText, unescapeText } from "../../../shared/escape.mjs";
+import { svg } from "../icons.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// 公式: a display formula (.doc-math-block, Notion's 公式区块), its TeX between \[ \] (or $$ $$)
+// as its only content. One block, and a text block of kind "tex" of its own: the page shows the
+// kit's KaTeX as one chip whose source is that text (core.mjs newAtom), a click opens the formula
+// editor below it (page.mjs), what is kept is one undo step and goes to the file as the block's new
+// text. One with anything but its TeX in it (markup, a script's) stays as it is. Inline formulas in
+// text are not blocks: they are chips the text model keeps (core.mjs prepareBlock, serializeNode,
+// pastedLines; caret.mjs and marks.mjs step over them).
+// page.mjs: the block on the page (a new one, its chip, editing it); the server writes a new one as it
+// writes any text block, checking its TeX (source/checks.mjs, texSource).
+//
+// Where the engines reach it (src/editor/page/ unless named): convert.mjs (a block turned into one, its
+// text the formula, a new block in its place as the server takes no text block turned into one:
+// page.mjs `create`), editor.mjs (what follows a new one: `onCreated`; Enter on one selected:
+// `activate`; a press on it: `press`; `preload`: a conversion comes after KaTeX; `redraw`: a group
+// turned before it came; a key or a composition with the caret on it selects it, and the browser's Tab
+// passes over it, by its host's `tex`), caret.mjs and typing/ (the arrows pass over it, `places`, and
+// so does the caret of a block deleted beside it, `textNear`, by its host's `tex`), type-grid.mjs
+// (`preload`), clipboard/ (copying it: `clipboard`, and `build` in page.mjs; a paste with the caret on
+// it goes after it, by its host's `tex`), core.mjs (its chip).
+// Its look: the kit's styles/math.css, rendered by math.js (src/render/kit/).
+export const ICON = svg('<path d="M14.5 5.75v-1.5h-9l5 5.75-5 5.75h9v-1.5"/>');
+
+/**
+ * Whether a display formula's text is its TeX alone, between \[ \] or $$ $$ (entities allowed, no
+ * tags); \[\] is an empty one (made on the page and left so: it stays, as Notion's).
+ */
+export function texSource(text) {
+  if (typeof text !== "string" || /[<>]/.test(text)) return false;
+  const match = /^\s*(?:\\\[([\s\S]*)\\\]|\$\$([\s\S]*)\$\$)\s*$/.exec(text);
+  const body = match?.[1] ?? match?.[2];
+  return body !== undefined && !(match[1] !== undefined ? body.includes("\\]") : body.includes("$$"));
+}
+
+/** Whether a text block is a display formula. */
+export const isTex = (host) => host?.getAttribute?.("data-ge-kind") === "tex";
+
+/** A display formula's source in parts: what comes before its TeX ("\[" and spaces), its TeX, what comes after. */
+export function texParts(source) {
+  const match = /^(\s*\\\[\s*)([\s\S]*?)(\s*\\\]\s*)$/.exec(source ?? "") ?? /^(\s*\$\$\s*)([\s\S]*?)(\s*\$\$\s*)$/.exec(source ?? "");
+  return match ? { open: match[1], tex: unescapeText(match[2]), close: match[3] } : null;
+}
+
+/**
+ * TeX as it stands between a display formula's delimiters (`close`, as texParts gives it): one that
+ * holds the closing delimiter, which KaTeX reads in no formula, has its last character as an entity,
+ * so that the text is still one formula (texSource), for what is typed is kept even so.
+ */
+export const texText = (tex, close = "\\]") => escapeText(tex).replaceAll(close.trim(), (end) => `${end.slice(0, -1)}&#${end.charCodeAt(1)};`);
+
+export default {
+  name: "math",
+  listed: () => t("公式块"),
+  glance: { row: 8, name: "a formula in a line", write: "`\\(…\\)`", rule: "Text and lists" },
+  readOnly: [{ rank: 50, at: ".doc-math-block, .katex-display", says: t("行间公式暂不能在页面上修改。") }],
+  units: {
+    math: { name: t("公式"), icon: ICON, match: [{ rank: 120, class: "doc-math-block" }], boxed: true },
+  },
+  components: ["doc-math-block"],
+  hosts: {
+    tex: { name: t("公式"), caps: () => ["plain"], tex: true }, // its TeX, changed only through the formula editor
+  },
+  types: {
+    math: {
+      turn: 15, menu: ["advanced", 22], fresh: 7,
+      tag: "div", className: "doc-math-block", kind: "math", tex: true,
+      preload: true, // KaTeX (page.mjs): a block turned into one draws its text as the formula at once, what undo and redo put back
+      // Its TeX as the block keeps it (none: an empty one); its page.mjs makes it again.
+      clipboard: {
+        kind: "equation",
+        read: (unit, { serializeInner }) => ({ tex: texParts(serializeInner(unit))?.tex.trim() ?? "" }),
+        describe(node, { serializeInner }) {
+          if (!isTex(node)) return undefined;
+          const parts = texParts(serializeInner(node));
+          return parts ? { type: "math", tex: parts.tex.trim() } : null;
+        },
+        check: (block, { string }) => string(block.tex, 20000), // empty: an empty formula block
+        text: (block) => [`<span class="doc-math-inline">\\(${escapeText(block.tex)}\\)</span>`],
+      },
+      label: t("公式块"), icon: ICON,
+      words: "公式块 公式 数学 方程 行间公式 gongshikuai gongshi gsk hjgs shuxue fangcheng latex tex equation math formula block",
+      glance: { row: 8, name: "公式块", write: "`<p>\\[…\\]</p>`", rule: "Text and lists" },
+    },
+  },
+};

package/browser/editor/components/math/page.mjs

@@ -0,0 +1,236 @@
+import { atomSource, newAtom, ownHTML, serializeInner, setOwnHTML } from "../../page/core.mjs";
+import { addStyle } from "../../page/ui.mjs";
+import { capsFor } from "../registry.mjs";
+import { isTex, texParts, texText } from "./index.mjs";
+import { formulaSays, openFormulaPanel } from "../../page/formula/panel.mjs";
+import { renderTex, unread } from "../../page/tex.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// 公式 on the page (Notion's 公式区块, notion-lite blocks/equation): a display formula is a text
+// block of kind "tex" holding one chip, the kit's KaTeX, whose source is the block's text (core.mjs
+// newAtom), so that what the commits and undo know of it is its TeX. The page shows it as the kit
+// does; under the pointer it is tinted (radius 10), and a click opens the formula editor below it
+// (formula/panel.mjs: its symbol bar, its field), the formula following what is typed. However the
+// editor is left, what is in it is kept as one undo step (the block's text: its TeX between the
+// delimiters it had, \[ \] for a new one). A new one (the "/" menu's 公式块) is empty, "添加一个 TeX
+// 公式", its editor open; an empty one is written \[\] and stays (Notion's), and so does one emptied:
+// its chip holds no drawing then. TeX that does not read stays as typed, and its block is the gray bar
+// of an empty one saying 无效的公式 (its chip, empty too, marked data-ge-empty="invalid").
+// Nothing can be typed into the block itself, nor pasted. The keys pass over it as over a block with no
+// text (caret.mjs: the arrows by places, the caret of a block deleted beside it and the browser's Tab by
+// textNear). With the caret on it, Enter opens its editor, and any other key that types or edits, and
+// an input method's composition on an empty one, select it and do nothing more (editor.mjs onKeydown:
+// the next key is the selected block's, Backspace and Delete deleting it); a paste goes after it
+// (clipboard/).
+
+// An empty one's look (every empty block's gray bar, the block itself: served empty, then its chip
+// empty) is served with the page: ../placeholder.mjs.
+const STYLE = `
+  /* The editor's tints are inset shadows over the block (as editor.mjs's over text in a component), never its background: what a block paints of its own
+     says whether its fill is a box's (overlay-layer.mjs boxRadius), so a selected formula is filled as text whatever the pointer does (notion-lite's halo), an empty one as its bar. */
+  [data-ge-editing] .doc-math-block[data-ge-kind="tex"] { border-radius: 10px; cursor: pointer; caret-color: transparent; outline: none; box-shadow: inset 0 0 0 100vmax transparent; transition: box-shadow 20ms ease-in; }
+  /* Not an empty one, whose bar has a hover of its own (placeholder.mjs), nor one whose box is open. */
+  [data-ge-editing] .doc-math-block[data-ge-kind="tex"]:not([data-ge-math-edit], :has(> .ge-math-chip:empty)):hover { box-shadow: inset 0 0 0 100vmax var(--ge-hover); }
+  /* The box open on a formula tints its block, over the bar of an empty one. */
+  [data-ge-editing] .doc-math-block[data-ge-math-edit] { box-shadow: inset 0 0 0 100vmax var(--ge-fill); }
+  [data-ge-editing] .doc-math-block[data-ge-math-edit="invalid"] { box-shadow: inset 0 0 0 100vmax light-dark(rgb(235 87 87 / 10%), rgb(235 87 87 / 16%)); }
+  [data-ge-editing] .doc-math-block .ge-math-chip:empty { display: none; }
+  [data-ge-editing] .doc-math-block .ge-math-chip { display: block; }
+  [data-ge-editing] .doc-math-block .ge-math-message { color: var(--ge-tx2); font-size: 14px; }
+  [data-ge-editing] .doc-math-block[data-ge-math-edit="invalid"] .ge-math-message { color: rgb(235 87 87); }
+  /* A formula in the text is one piece of it: plain as the page shows it, a light fill under the
+     pointer, around all of it (chip-fills.mjs), the page's box open or not (not a formula block's chip,
+     whose block takes the fill, nor an empty chip, gray already, nor a formula the report drew itself:
+     data-ge-own). As heavy as a selected chip's fill there, which comes after it and goes over it. */
+  [data-ge-editing] [data-ge-atom] .katex { border-radius: 4px; box-decoration-break: clone; }
+  [data-ge-editing] [data-ge-atom]:not(.ge-math-chip, [data-ge-empty], [data-ge-own], [data-ge-formula-edit]):hover .katex { background: color-mix(in srgb, var(--doc-text, #000) 6%, transparent); }
+`;
+const style = () => addStyle(STYLE);
+
+
+// The chip of a display formula: `nodes` shown, `source` written back.
+const chipOf = (doc, source, nodes = []) => {
+  const chip = newAtom(doc, source, nodes);
+  chip.className = "ge-math-chip";
+  return chip;
+};
+
+// What a chip shows for `tex`: KaTeX's display of it; nothing for none, or for TeX it does not read,
+// which the chip says; KaTeX's message when KaTeX is not on the page yet (redraw).
+function draw(chip, tex) {
+  const { html, error } = tex ? renderTex(tex, true) : { html: "", error: null };
+  chip.innerHTML = html;
+  chip.toggleAttribute("data-ge-empty", false);
+  if (!error) return;
+  if (globalThis.katex) return chip.setAttribute("data-ge-empty", "invalid");
+  const message = chip.ownerDocument.createElement("span");
+  message.className = "ge-math-message";
+  message.textContent = error;
+  chip.append(message);
+}
+
+/**
+ * A display formula of the file made ready for editing (editor.mjs enter): what the kit drew (or its
+ * text, KaTeX missing) in one chip whose source is the block's text. Returns its baseline.
+ */
+export function prepareTex(node, block) {
+  style();
+  node.setAttribute("data-ge-kind", "tex");
+  node.setAttribute("data-ge-caps", (block.caps ?? ["plain"]).join(" "));
+  if (node.getAttribute("contenteditable") !== "true") node.setAttribute("contenteditable", "true"); // set ahead as the page opens (core.mjs editableAhead)
+  node.setAttribute("spellcheck", "false");
+  // An empty one (\[\]) shows "添加一个 TeX 公式", not what the kit drew of nothing.
+  const tex = texParts(block.inner)?.tex.trim();
+  const chip = chipOf(node.ownerDocument, block.inner, tex ? [...node.childNodes] : []);
+  node.replaceChildren(chip);
+  if (tex && unread(chip, tex, true)) draw(chip, tex);
+  return serializeInner(node);
+}
+
+/** A new display formula of `tex` (empty: "添加一个 TeX 公式", written \[\]). */
+export function newMath(doc, tex = "") {
+  style();
+  const block = doc.createElement("div");
+  block.className = "doc-math-block";
+  for (const [name, value] of [["contenteditable", "true"], ["data-ge-new", ""], ["data-ge-type", "math"], ["data-ge-unit-kind", "math"], ["data-ge-kind", "tex"], ["data-ge-caps", capsFor("tex")], ["spellcheck", "false"]]) block.setAttribute(name, value);
+  const chip = chipOf(doc, `\\[${texText(tex.trim())}\\]`);
+  draw(chip, tex.trim());
+  block.append(chip);
+  return block;
+}
+
+/** A formula block made again from the clipboard's description (its type's `build`, builders.mjs). */
+export function build({ doc, block }) {
+  return newMath(doc, block.tex.trim());
+}
+
+/**
+ * A formula block standing for a block (its type's `create`), that block's text the formula
+ * (notion-lite's turnInto: 转成公式区块时文字就是公式); made of an empty block, empty: its formula is typed next.
+ */
+export const make = ({ doc, text, put }) => put(newMath(doc, text.trim()));
+
+/**
+ * Editing display formulas, with what the editor gives it: recordText(host) (one undo step),
+ * active() (the page edits), loadKatex(), say (the status line), closeTools() (what a press closes
+ * that opens over the page: the format bar, the "/" menu, the formula box).
+ */
+export function create({ recordText, active, loadKatex, say, closeTools }) {
+  style();
+  let open = null; // { host, panel, before, parts }
+
+  const texHost = (target) => {
+    const host = target?.closest?.('.doc-math-block[data-ge-kind="tex"]');
+    return host && active() && host.closest("main") && !host.closest("[data-ge-lock]") ? host : null;
+  };
+  // A press on one edits it (`press`); a press puts no caret in it, and nothing is typed into it.
+  document.addEventListener("mousedown", (event) => {
+    if (event.button === 0 && texHost(event.target)) event.preventDefault();
+  }, true);
+  document.addEventListener("beforeinput", (event) => {
+    if (isTex(event.target?.closest?.("[contenteditable]"))) event.preventDefault();
+  }, true);
+
+  // The formula in the block follows the field.
+  function preview(host, tex, error) {
+    const chip = host.querySelector(":scope > .ge-math-chip");
+    const shown = chip ?? host.appendChild(chipOf(host.ownerDocument, ""));
+    draw(shown, error ? "" : tex.trim());
+    if (error) shown.append(Object.assign(host.ownerDocument.createElement("span"), { className: "ge-math-message", textContent: t("无效的公式") }));
+    host.setAttribute("data-ge-math-edit", error ? "invalid" : "");
+  }
+
+  function finish(value) {
+    if (!open) return;
+    const { host, before, parts } = open;
+    open = null;
+    host.removeAttribute("data-ge-math-edit");
+    if (!host.isConnected) return;
+    const tex = value.trim();
+    if (tex === parts.tex.trim()) {
+      setOwnHTML(host, before);
+      return;
+    }
+    // Emptied, it stays an empty one (its delimiters, nothing drawn).
+    const chip = chipOf(host.ownerDocument, `${parts.open}${texText(tex, parts.close)}${parts.close}`);
+    draw(chip, tex);
+    host.replaceChildren(chip);
+    recordText(host, true);
+    say(formulaSays.kept(tex, Boolean(parts.tex)));
+  }
+
+  /** Open the formula editor below a display formula. */
+  async function edit(host) {
+    if (open?.host === host) return open.panel.focus();
+    dismiss();
+    if (!(await loadKatex())) return say(formulaSays.unloaded(t("修改")), "error");
+    if (!host.isConnected) return;
+    const chip = host.querySelector(":scope > .ge-math-chip");
+    const parts = chip ? texParts(atomSource(chip)) : { open: "\\[", tex: "", close: "\\]" };
+    if (!parts) return say(formulaSays.peculiar);
+    open = { host, before: ownHTML(host), parts };
+    host.setAttribute("data-ge-math-edit", "");
+    open.panel = openFormulaPanel({
+      value: parts.tex, display: true, center: true, anchor: () => host.getBoundingClientRect(),
+      onInput: (tex, error) => open?.host === host && preview(host, tex, error),
+      onSubmit: finish,
+    });
+  }
+
+  /**
+   * Display formulas made while KaTeX was not on the page (a group of text blocks turned into them,
+   * each one's text its formula), drawn once it is: what they show, not what the file holds.
+   */
+  async function redraw(hosts) {
+    const missing = hosts.filter((host) => isTex(host) && host.querySelector(":scope > .ge-math-chip .ge-math-message"));
+    if (missing.length === 0 || !(await loadKatex())) return;
+    for (const host of missing) {
+      const chip = host.isConnected ? host.querySelector(":scope > .ge-math-chip") : null;
+      const tex = chip ? texParts(atomSource(chip))?.tex.trim() : "";
+      if (tex) draw(chip, tex);
+    }
+  }
+
+  /** What follows a new formula block: its editor opens, as notion-lite's handleCreated. */
+  function onCreated(host) {
+    edit(host);
+    return true;
+  }
+
+  /** Enter on one selected: its editor opens, as notion-lite's activate. */
+  function activate(host) {
+    if (isTex(host)) edit(host);
+    return isTex(host);
+  }
+
+  /** The editor left from outside it (a press elsewhere, the page saved or left): what is in it is kept. */
+  function dismiss() {
+    if (!open) return;
+    const { panel } = open;
+    panel.close();
+    finish(panel.value);
+  }
+
+  /**
+   * A press on a display formula (`press`): it goes into the formula editor (a Shift press does not).
+   * True when the press was its.
+   */
+  function press(event) {
+    const host = event.shiftKey ? null : texHost(event.target);
+    if (!host) return false;
+    event.preventDefault();
+    closeTools();
+    edit(host);
+    return true;
+  }
+
+  return {
+    create: make, onCreated, activate, redraw, dismiss, press,
+    prepare: (block, node) => prepareTex(node, block),
+    /** What a formula block needs on the page: KaTeX, the promise of its coming, or null when it is there. */
+    preload: () => (globalThis.katex ? null : loadKatex()),
+    get panel() { return open?.panel.node ?? null; },
+    /** Whether a node is its editor's, or the formula being edited: a press there ends nothing. */
+    holds: (node) => Boolean(open) && (open.panel.node.contains(node) || open.host.contains(node)),
+  };
+}

package/browser/editor/components/math/tex-logo.mjs

@@ -0,0 +1,6 @@
+// The TeX logo as TeX sets it — T, the E lowered half an ex and drawn 1/6 em back, the X 1/8 em back
+// — in KaTeX_Main's own outlines (Computer Modern, the font KaTeX ships under the SIL OFL), as one
+// filled path: the empty formula block's mark (../placeholder.mjs), drawn the same wherever fonts are missing.
+// Made from node_modules/katex/dist/fonts/KaTeX_Main-Regular.ttf (its glyf outlines, 1000 units to
+// the em, scaled into a box 18 units tall; its view just the ink, so that it fills the width it is given).
+export const TEX_LOGO = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0.68 0.5 34.1 17'><path d='M0.68 5.04Q0.7 5 0.87 2.88Q1.04 0.76 1.04 0.73L1.04 0.61L12.6 0.61L12.6 0.73Q12.62 0.76 12.79 2.88Q12.96 5 12.96 5.04L12.96 5.16L12.21 5.16L12.21 5.04Q12.19 4.97 12.15 4.59Q12.02 2.75 11.54 2.2Q11.22 1.81 10.5 1.6Q10.11 1.5 9.05 1.5L8.54 1.5Q8.1 1.5 8 1.53Q7.89 1.56 7.83 1.73Q7.82 1.77 7.82 7.01L7.82 12.23Q7.97 12.44 8.29 12.5Q8.97 12.56 9.99 12.56L10.56 12.56L10.56 13.43L10.31 13.43Q9.92 13.37 6.83 13.37Q3.75 13.37 3.35 13.43L3.1 13.43L3.1 12.56L3.67 12.56Q4.69 12.56 5.37 12.5Q5.7 12.44 5.85 12.23L5.85 7.01Q5.85 1.77 5.83 1.73Q5.77 1.56 5.67 1.53Q5.56 1.5 5.13 1.5L4.62 1.5Q3.73 1.5 3.54 1.52Q2.73 1.65 2.25 2.05Q1.65 2.56 1.5 4.59Q1.46 4.97 1.44 5.04L1.44 5.16L0.68 5.16L0.68 5.04ZM12.93 5.79Q12.74 5.6 12.56 5.56Q12.38 5.52 11.61 5.5L10.98 5.5L10.98 4.63L21.81 4.63L21.81 4.71L22.07 6.9L22.34 9.1L22.34 9.17L21.58 9.17L21.58 9.1Q21.56 9.04 21.52 8.7Q21.3 6.92 20.66 6.27Q20.03 5.62 18.48 5.52Q18.29 5.5 17.19 5.5Q15.3 5.5 15.15 5.54Q14.98 5.56 14.92 5.75Q14.9 5.79 14.9 8.09L14.9 10.38L15.92 10.38Q17.15 10.37 17.44 10.27Q17.97 10.12 18.16 9.73Q18.34 9.34 18.38 8.55L18.38 8.17L19.14 8.17L19.14 13.47L18.38 13.47L18.38 13.09Q18.34 12.3 18.16 11.91Q17.97 11.52 17.44 11.37Q17.15 11.27 15.92 11.25L14.9 11.25L14.9 13.79Q14.9 16.35 14.92 16.38Q14.94 16.46 15 16.52Q15.11 16.61 15.98 16.61L16.94 16.61Q18.65 16.61 18.91 16.59Q20.01 16.46 20.63 16.03Q21.24 15.61 21.56 14.74Q21.83 14.04 22 12.9Q22.07 12.43 22.09 12.39L22.09 12.33L22.85 12.33L22.85 12.39Q22.83 12.45 22.46 14.92Q22.09 17.39 22.05 17.44L22.05 17.5L10.98 17.5L10.98 16.63L11.61 16.63Q12.38 16.61 12.56 16.57Q12.74 16.53 12.93 16.35L12.93 5.79ZM26.14 13.43Q25.9 13.37 23.7 13.37Q21.85 13.37 21.62 13.43L21.47 13.43L21.47 12.56L21.79 12.56Q23.47 12.5 24.08 11.76Q24.15 11.65 25.66 9.34Q27.16 7.03 27.16 7.01Q27.16 6.97 25.48 4.34Q23.8 1.71 23.74 1.65Q23.4 1.37 22.38 1.37L22.11 1.37L21.73 1.37L21.73 0.5L21.9 0.5Q22.19 0.56 24.29 0.56Q26.63 0.56 27.05 0.5L27.26 0.5L27.26 1.37L27.16 1.37Q26.84 1.37 26.44 1.47Q26.05 1.58 26.01 1.67Q26.01 1.73 27.14 3.5Q28.26 5.27 28.3 5.27Q28.32 5.27 29.3 3.75Q30.29 2.22 30.29 2.2Q30.4 2 30.15 1.75Q29.87 1.43 29.28 1.37L29.13 1.37L29.13 0.5L29.3 0.5Q29.55 0.56 31.74 0.56Q33.6 0.56 33.83 0.5L33.98 0.5L33.98 1.37L33.66 1.37Q32.1 1.43 31.46 2.09Q31.4 2.15 30.08 4.13Q28.83 6.08 28.83 6.1Q28.83 6.14 30.77 9.17Q32.71 12.2 32.77 12.25Q32.92 12.42 33.18 12.48Q33.45 12.54 34.19 12.56L34.77 12.56L34.77 13.43L34.6 13.43Q34.32 13.37 32.22 13.37Q29.89 13.37 29.45 13.43L29.25 13.43L29.25 12.56L29.36 12.56Q29.68 12.56 30.08 12.45Q30.48 12.35 30.48 12.21Q30.48 12.16 29.79 11.08Q29.11 10 28.41 8.92L27.71 7.84L27.66 7.9Q27.62 7.94 27.52 8.07Q27.43 8.2 27.29 8.42Q27.14 8.64 26.94 8.97Q26.73 9.3 26.44 9.74Q25.2 11.63 25.18 11.68Q25.16 11.7 25.16 11.84Q25.16 12.1 25.46 12.31Q25.76 12.52 26.18 12.56L26.33 12.56L26.33 13.43L26.14 13.43Z'/></svg>";

package/browser/editor/components/media/icons.mjs

@@ -0,0 +1,19 @@
+import { svg } from "../icons.mjs";
+
+// The media blocks' toolbar icons (an image's, an embed's, the block menus' rows): the editor's own line
+// drawings (components/icons.mjs svg) on the same 20 units as the menus' others, the picture in the
+// middle 16 of them. They carry no size or color: the toolbar's buttons and the menus set them.
+
+export const TOOL_ICONS = {
+  // The three sides: a picture beside the line it stands against, between a rule above and below.
+  alignLeft: svg('<path d="M4 4.5h12M4 15.5h12"/><rect x="4" y="7.25" width="6.5" height="5.5" rx="1.25"/>'),
+  alignCenter: svg('<path d="M4 4.5h12M4 15.5h12"/><rect x="6.75" y="7.25" width="6.5" height="5.5" rx="1.25"/>'),
+  alignRight: svg('<path d="M4 4.5h12M4 15.5h12"/><rect x="9.5" y="7.25" width="6.5" height="5.5" rx="1.25"/>'),
+  // A picture with two lines of caption under it.
+  caption: svg('<rect x="4.5" y="4" width="11" height="6.5" rx="1.5"/><path d="M4.5 13.25h11M4.5 16h6"/>'),
+  // A magnifier with a plus.
+  expand: svg('<circle cx="9" cy="9" r="5"/><path d="m12.75 12.75 3.5 3.5M7 9h4M9 7v4"/>'),
+  // An arrow down onto a line.
+  download: svg('<path d="M10 4v9M6.5 9.75l3.5 3.5 3.5-3.5M4.5 16h11"/>'),
+  more: svg('<circle cx="5" cy="10" r="1.3" fill="currentColor" stroke="none"/><circle cx="10" cy="10" r="1.3" fill="currentColor" stroke="none"/><circle cx="15" cy="10" r="1.3" fill="currentColor" stroke="none"/>'),
+};

package/browser/editor/components/media/page.mjs

@@ -0,0 +1,162 @@
+import { MEDIA_BLOCKS, MEDIA_CLASS, mediaBlockOf } from "../../../shared/components/index.mjs";
+import { caretAt } from "../../page/caret.mjs";
+import { UNIT } from "../../page/core.mjs";
+import { openMediaMenu } from "../../page/media-menu/index.mjs";
+import { keptByComponent } from "../../page/page-objects.mjs";
+import { blobBase64 } from "../../page/post.mjs";
+import { addStyle } from "../../page/ui.mjs";
+import { barClass } from "../placeholder-bar.mjs";
+import { captionOf } from "./parts.mjs";
+import { TOOLBAR_STYLE } from "./toolbar.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// What the four media blocks (图片, 文件, 网页书签, 嵌入) do on the page alike (notion-lite's
+// src/editor/media/index.js, which they share the same way): a click on a placeholder opens the
+// block's menu; what is chosen replaces the placeholder with a NEW element (never the same one, so
+// that undo brings back the placeholder as it was and the file loses the block); a caption shows
+// once it is asked for or focused, goes out of sight when it is left empty, and Enter in it makes a
+// paragraph after the block. What a block makes of what is chosen (its picture, row, card or frame),
+// its menu, rows and tools are its own (image/, file/, bookmark/, embed/ page.mjs).
+
+const STYLE = `${TOOLBAR_STYLE}
+  /* A caption is shown with words, while it has the caret, or once 标题 asks for it (data-ge-caption), with Notion's placeholder. */
+  ${MEDIA_BLOCKS.map((id) => `[data-ge-editing] .${MEDIA_CLASS[id]}[data-ge-caption] > figcaption`).join(", ")} { display: block; }
+  ${MEDIA_BLOCKS.map((id) => `[data-ge-editing] .${MEDIA_CLASS[id]} > figcaption:empty::before`).join(", ")} { content: ${JSON.stringify(t("写一个标题…"))}; color: var(--ge-tx3); }
+`;
+
+// Every media placeholder (a gray bar), by the selector the page finds it by.
+const BARS = MEDIA_BLOCKS.map((id) => `main figure.${MEDIA_CLASS[id]} > .${barClass(MEDIA_CLASS[id])}`).join(", ");
+
+// What a placeholder's words were before something was under way (busy), by the words' element.
+const idleWords = new WeakMap();
+
+/**
+ * The media blocks on the page, with what the editor gives them: struct (an undo step), say,
+ * active() (the block tools may act), blocks() (the block tools), newParagraph(parent, after),
+ * typedKey(event) (a key of the "/" or "@" menu, which comes before a caption's) and upload(kind,
+ * body) (POST /__gallery/edit/upload: the server's answer, or an Error).
+ *
+ * Returns block(id), the parts a block's own editing is made from; each block's page object is `pages[id]`.
+ */
+export function create({ struct, finishStep, look, say, active, blocks, newParagraph, typedKey, upload, pages }) {
+  const select = (unit) => blocks()?.select(unit);
+  const openMenu = (unit, rect) => blocks()?.openMenu(unit, rect);
+  addStyle(STYLE);
+
+  // A click on a placeholder opens its block's menu.
+  document.addEventListener("click", (event) => {
+    const bar = event.target?.closest?.(BARS);
+    if (!bar || !active() || keptByComponent(bar)) return;
+    event.preventDefault();
+    pages[mediaBlockOf(bar.parentElement)]?.pick(bar.parentElement);
+  }, true);
+
+  // A caption that has the caret is shown (data-ge-caption: an editing-only mark, gone once the caret
+  // leaves): one the reader empties goes out of sight only then, not under it, where the caret would
+  // be lost and the change with it.
+  document.addEventListener("focusin", (event) => {
+    const text = event.target;
+    if (text?.localName === "figcaption" && text.getAttribute("data-ge-kind") === "mediaCaption") text.parentElement?.setAttribute("data-ge-caption", "");
+  }, true);
+  // Once the caret leaves, the caption is shown by its words (the kit), not by the mark; an empty one
+  // goes out of sight again (notion-lite's): emptied by the reader too, the line break the browser
+  // leaves in it taken out, or the kit (:empty) would keep showing a blank line under the block.
+  document.addEventListener("focusout", (event) => {
+    const text = event.target;
+    if (text?.localName !== "figcaption" || text.getAttribute("data-ge-kind") !== "mediaCaption") return;
+    if (!text.textContent.trim() && !text.querySelector("[data-ge-atom]")) text.replaceChildren();
+    text.parentElement?.removeAttribute("data-ge-caption");
+  }, true);
+  // Enter in a caption: a menu's first (its row), else a paragraph after the block.
+  document.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter" || event.shiftKey || event.isComposing || event.keyCode === 229) return;
+    const text = event.target?.closest?.('[data-ge-kind="mediaCaption"]');
+    const figure = text?.parentElement?.closest("figure");
+    if (!figure) return;
+    event.stopImmediatePropagation();
+    if (typedKey(event)) return;
+    event.preventDefault();
+    newParagraph(figure.parentElement, figure);
+  }, true);
+
+  /** The parts the editing of media block `id` is made from. */
+  function block(id) {
+    const wordsOf = (figure) => figure.querySelector(`:scope > .${barClass(MEDIA_CLASS[id])} span`);
+    // The placeholder says what is under way ("正在上传…") until idle() puts its own words back.
+    const busy = (figure, text) => {
+      const words = wordsOf(figure);
+      if (!words) return;
+      if (!idleWords.has(words)) idleWords.set(words, words.textContent);
+      words.textContent = text;
+    };
+    const idle = (figure) => {
+      const words = wordsOf(figure);
+      if (words && idleWords.has(words)) words.textContent = idleWords.get(words);
+    };
+    return {
+      struct, look, say, active, select, openMenu,
+      busy, idle,
+      /** Something under way for `figure`: `working` said in its placeholder; `task()` failing, the placeholder is as it was and `failed` (and the reason) said. */
+      async attempt(figure, working, failed, task) {
+        busy(figure, working);
+        try {
+          await task();
+        } catch (error) {
+          idle(figure);
+          say(t("{0}：{1}", failed, error.message), "error");
+        }
+      },
+      /** The menu of this block (openMediaMenu's options), below the element `anchorOf(figure)` gives (the block itself). */
+      pick(figure, menu, anchorOf = (each) => each) {
+        if (figure?.isConnected) openMediaMenu(anchorOf(figure), menu);
+      },
+      /** A file the reader chose (or a picture cut out, `name`d) sent to the report's folder: the server's answer. */
+      uploadFile: async (blob, name = blob.name) => upload(id, { name, type: blob.type, data: await blobBase64(blob) }),
+      /** A link's file downloaded into the report's folder by the server: its answer. */
+      uploadUrl: (url) => upload(id, { url }),
+      /**
+       * `next` (a new element made of what was chosen) in the place of `figure`, one undo step, the
+       * block selected. `replacing`: the block had content: undo selects the block it was. `pasted`:
+       * it fills a block just pasted, one undo step with the paste, the selection as it was. The
+       * placeholder that goes has its own words back (not what was under way: "正在上传…", busy), so
+       * that undo brings it back as it was before.
+       */
+      place(figure, next, { replacing = false, pasted = false } = {}) {
+        const picked = blocks()?.picked.includes(figure);
+        if (!pasted || !finishStep(figure, next)) {
+          struct([figure.parentElement], [], () => {
+            figure.replaceWith(next);
+            return { touched: [], focus: null, select: replacing ? figure : null };
+          });
+        }
+        idle(figure);
+        if (!pasted) select(next);
+        else if (picked) blocks().select(next, { quiet: true });
+      },
+      /** The caption shown (an empty one too), the caret at its end. */
+      caption(figure) {
+        const text = figure && captionOf(figure);
+        if (!text) return;
+        figure.setAttribute("data-ge-caption", "");
+        caretAt(text, "end");
+      },
+      /**
+       * `file` pasted into `host` (a text block): a new block made by `make(doc)` below its block, then
+       * `fill(figure, file)` (its placeholder filled). Returns whether it took the file.
+       */
+      paste(host, file, make, fill) {
+        const unit = host?.closest?.(UNIT);
+        if (!file || !unit?.parentElement) return false;
+        const figure = make(host.ownerDocument);
+        struct([unit.parentElement], [], () => {
+          unit.after(figure);
+          return { touched: [], focus: null };
+        });
+        fill(figure, file);
+        return true;
+      },
+    };
+  }
+
+  return { block };
+}

package/browser/editor/components/media/parts.mjs

@@ -0,0 +1,60 @@
+import { MEDIA_BLOCKS, MEDIA_CLASS } from "../../../shared/components/index.mjs";
+import { barElement } from "../placeholder-bar.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// What the four media blocks (图片, 文件, 网页书签, 嵌入) are made of, once: the figure of a new one,
+// its caption, the file it shows. Pure DOM, so a block's index.mjs (which the server loads too) uses
+// it; what each block adds (its picture, row, card or frame) is its own. notion-lite's
+// view/media/parts.js, which the blocks share the same way.
+
+/**
+ * The text block a media block's caption is (data-ge-kind): plain inline text that may be empty, never
+ * removed. The part of every media block there is, so it is no one block's: registry.mjs PAGE says it.
+ */
+export const MEDIA_HOSTS = { mediaCaption: { name: t("说明@caption"), caps: () => ["empty", "links"], parts: MEDIA_BLOCKS.map((id) => [id, "caption"]) } };
+
+/** A media block's caption (a <figcaption>, written whether it has words or not). */
+/** What a media block's figure says of itself, read-only (a definition's `readOnly`): nothing, it has its own tools. */
+export const mediaReadOnly = (id) => ({ rank: 90, at: `figure.${MEDIA_CLASS[id]}`, says: null });
+
+export const captionOf = (figure) => figure.querySelector(":scope > figcaption");
+
+/** What a page export writes as a figure's caption: a kit figure's own element too (a card's). */
+export const writtenCaption = (figure) => figure.querySelector(":scope > figcaption, :scope > .doc-figure-caption");
+
+/** What a new block is written with of its caption: its words, or nothing when it has none. */
+export const captionWords = (figure) => {
+  const caption = captionOf(figure);
+  return caption && caption.textContent.trim() ? caption.innerHTML : "";
+};
+
+/** A caption made in `doc`: a text block of its own kind (mediaCaption), holding `html`. */
+export function captionNode(doc, html = "") {
+  const text = doc.createElement("figcaption");
+  for (const [name, value] of [["contenteditable", "true"], ["data-ge-new", ""], ["data-ge-kind", "mediaCaption"], ["data-ge-caps", MEDIA_HOSTS.mediaCaption.caps({ bound: false, blockLevel: true }).join(" ")]]) text.setAttribute(name, value);
+  text.innerHTML = html;
+  return text;
+}
+
+/** A new media block `id` (image, file, bookmark, embed) in `doc`, holding `bar` (its placeholder, as markup). */
+export function newMediaFigure(doc, id, bar) {
+  const figure = doc.createElement("figure");
+  figure.className = MEDIA_CLASS[id];
+  for (const [name, value] of [["data-ge-new", ""], ["data-ge-type", id], ["data-ge-unit-kind", id], ["contenteditable", "false"]]) figure.setAttribute(name, value);
+  figure.append(barElement(doc, bar));
+  return figure;
+}
+
+/**
+ * `element` showing what the file names (`path`: a file of the report's folder, assets/<file>; a
+ * bookmark's card, the page's address): `attribute` (src or href) is where it shows now (`url`: where
+ * the preview serves a file), data-ge-<attribute> what the file says, which is what is written
+ * (render/media-ref.mjs makes the same pair when it serves a page).
+ */
+export function showFile(element, attribute, path, url) {
+  element.setAttribute(attribute, url);
+  element.setAttribute(`data-ge-${attribute}`, path);
+}
+
+/** What the file says `element` shows (see showFile), or null. */
+export const fileOf = (element, attribute) => element?.getAttribute(`data-ge-${attribute}`) ?? null;

package/browser/editor/components/media/size.mjs

@@ -0,0 +1,20 @@
+// What the media blocks that are sized share (an image's sides, an embed's corners): the width a
+// block takes is a share (SPAN of shared/media.mjs, written as a size: the description's `sizes`)
+// of the width it stands in, a picture's of the reading width (styles/sizes.css: notion-lite's width
+// in pixels, which a move into a column keeps), never past the width it stands in; and a block close
+// to the whole width snaps to it.
+
+/** How near (px) the whole width a dragged block snaps to it. */
+export const SNAP = 14;
+
+/** The width the column a media block stands in offers it (px): its parent's, less its padding. */
+export function columnRoom(figure) {
+  const parent = figure.parentElement;
+  const style = getComputedStyle(parent);
+  return parent.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+}
+
+/** The reading width a picture's share is of (px): the page's (styles/sizes.css, 100cqw of .doc-page), else the column's. */
+export function readingRoom(figure) {
+  return figure.closest(".doc-page")?.clientWidth || columnRoom(figure);
+}

package/browser/editor/components/media/toolbar.mjs

@@ -0,0 +1,37 @@
+import { tooltip } from "../../page/tooltip.mjs";
+import { element } from "../../page/ui.mjs";
+
+// The toolbar a media block with something to show gets with the pointer on it (an image's, an
+// embed's): Notion's, at its top right, in the editor's overlay layer; notion-lite's actionBar and
+// toolButton (view/media/parts.js). What each block puts in it, and where it stands, is its own.
+
+/** The toolbar's look, and its buttons' (a popover's too: an image's 对齐 pops three of them). */
+export const TOOLBAR_STYLE = `
+  .ge-layer > .ge-media-bar { pointer-events: auto; }
+  .ge-media-bar { display: flex; padding: 2px; border-radius: 6px; background: var(--ge-bg);
+    box-shadow: 0 0 0 1px var(--ge-outline), 0 4px 12px -2px light-dark(rgb(25 25 25 / 8%), rgb(0 0 0 / 30%)); }
+  .ge-media-tool { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; color: var(--ge-ico2); cursor: pointer; user-select: none; transition: background 20ms ease-in; }
+  .ge-media-tool svg { display: block; width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
+  .ge-media-tool:hover, .ge-media-tool[data-on] { background: var(--ge-hover); }
+`;
+
+/** An empty toolbar named `label`. */
+export const mediaBar = (label) => element("div", { class: "ge-media-bar", role: "toolbar", "aria-label": label });
+
+/**
+ * A toolbar button: `label` (what it is), `tip` (the tooltip), `icon` (an svg, or a function giving
+ * it, drawn by draw() each time the bar is shown), `run(button)` on a click while `alive()` (the block it stands for is
+ * still on the page).
+ */
+export function toolButton({ label, tip, icon, run, alive }) {
+  const button = element("div", { class: "ge-media-tool", role: "button", "aria-label": label });
+  button.draw = () => { button.innerHTML = typeof icon === "function" ? icon() : icon; };
+  if (typeof icon !== "function") button.draw(); // a function icon depends on the block: drawn when the bar is shown
+  tooltip(button, tip);
+  button.addEventListener("pointerdown", (event) => event.preventDefault());
+  button.addEventListener("click", (event) => {
+    event.preventDefault();
+    if (alive()) run(button);
+  });
+  return button;
+}