@heycys/gallery 0.0.0-stage → 0.1.0

package/browser/editor/page/menu.mjs

@@ -0,0 +1,500 @@
+import { Z } from "../../shared/layers.mjs";
+import { addStyle, element, mount } from "./ui.mjs";
+import { hideTooltip, tooltip } from "./tooltip.mjs";
+import { svg } from "../components/icons.mjs";
+import { t } from "../../shared/i18n/index.mjs";
+
+// The editor's menu card, used by the "/" menu (slash-menu/: block types, filtered as the reader
+// types) and by the block menu a block's handle opens (block-menu/: a header with the block's type,
+// the types it can be turned into as a grid of icons, then its commands). One row (or cell of a
+// grid) is highlighted: ↑/↓ move it (a line of the grid at a time, ←/→ along it) and Enter runs it,
+// the keys being forwarded by the editor, because the focus stays where it was (in the text, or on
+// the page with a block selected). A press on a row never moves the caret. Colors follow the
+// report's light or dark theme (light-dark()). A row may open a submenu (Notion's 颜色 ›): a second
+// card right of it, opened by resting on the row, a click, Enter or →, and closed by ←, by resting
+// on another row, or with the menu; while it is open from the keys they move in it.
+
+const STYLE = `
+  .ge-pop {
+    position: fixed; left: 0; top: 0; z-index: ${Z.menu}; width: 265px; max-width: calc(100vw - 16px); max-height: calc(100vh - 24px);
+    overflow-x: hidden; overflow-y: auto; padding: 4px 0; border-radius: 10px; background: var(--ge-bg); color: var(--ge-tx);
+    box-shadow: var(--ge-shadow-pop);
+    font: 14px/1.2 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
+    user-select: none; scrollbar-width: thin; scrollbar-color: var(--ge-line-strong) transparent; animation: ge-pop-in .12s ease-out;
+  }
+  @keyframes ge-pop-in { from { opacity: 0; transform: scale(.98); } }
+  @media (prefers-reduced-motion: reduce) { .ge-pop { animation: none; } }
+  .ge-pop-title { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--ge-tx2); font-size: 12px; font-weight: 500; line-height: 14px; }
+  .ge-pop-title:has(> .ge-pop-icon) { padding-block: 4px; }
+  .ge-pop-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  /* Notion's 4px above the first row (a row right at the top had its corners cut by the card's); a
+     title or a search field first keeps its own room. */
+  .ge-pop > .ge-pop-title:first-child { padding-top: 6px; }
+  .ge-pop:has(> .ge-pop-search:first-child) { padding-top: 0; }
+  .ge-pop-row { display: flex; align-items: center; gap: 8px; width: calc(100% - 8px); height: 28px; margin: 0 4px 1px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+  .ge-pop-row[data-active] { background: var(--ge-hover); }
+  .ge-pop-row:disabled { cursor: default; }
+  .ge-pop-row:disabled:not([data-current]) .ge-pop-label, .ge-pop-row:disabled:not([data-current]) .ge-pop-icon { opacity: .45; }
+  .ge-pop-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--ge-ico); }
+  .ge-pop-icon svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
+  .ge-pop-icon img { display: block; width: 20px; height: 20px; border-radius: 3px; object-fit: contain; }
+  .ge-pop-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  /* A row with a hint (its current choice, its key) reads by its label first: the label keeps its
+     words and the hint takes what is left, cut short with an ellipsis where it is too long (an English
+     row's current choice once took the whole row, its label drawn 0px wide). */
+  .ge-pop-label:has(+ .ge-pop-hint) { flex: 1 0 auto; max-width: 100%; }
+  .ge-pop-hint { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ge-tx3); font-size: 12px; white-space: nowrap; }
+  /* A row of a page (its title, the page it is under as its hint): a long title is what an ellipsis
+     cuts, and the page above keeps its words, up to a part of the row. */
+  .ge-pop-row[data-long] .ge-pop-label { flex: 1 1 0; max-width: none; }
+  .ge-pop-row[data-long] .ge-pop-hint { flex: none; max-width: 40%; }
+  .ge-pop-check, .ge-pop-arrow { flex: none; width: 16px; height: 16px; }
+  .ge-pop-arrow { color: var(--ge-tx3); }
+  .ge-pop-arrow svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+  .ge-pop-row[aria-expanded="true"] { background: var(--ge-hover); }
+  .ge-pop-check svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
+  .ge-pop-sep { height: 1px; margin: 3px 12px 4px; background: var(--ge-line); }
+  .ge-pop-note { padding: 0 12px 6px 40px; color: var(--ge-tx3); font-size: 12px; line-height: 1.5; }
+  .ge-pop-empty { padding: 8px 12px; color: var(--ge-tx3); }
+  /* What a row makes, shown beside it under the pointer (a component package's preview.svg). */
+  .ge-pop-preview { display: block; width: 240px; max-height: 180px; border-radius: 4px; object-fit: contain; background: var(--ge-bg); }
+  .ge-pop-search { position: sticky; top: 0; z-index: 1; padding: 8px 8px 6px; background: var(--ge-bg); }
+  .ge-pop-search input { box-sizing: border-box; width: 100%; height: 28px; margin: 0; padding: 0 8px; border: 0; border-radius: 6px; outline: none; background: var(--ge-hover); color: var(--ge-tx); font: inherit; box-shadow: inset 0 0 0 1px var(--ge-line); }
+  .ge-pop-search input:focus { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ge-tx3) 60%, transparent); }
+  .ge-pop-search input::placeholder { color: var(--ge-tx3); }
+  /* Rows in a card that is there already (inside: a link card's pages): under what stands in it, as wide as it, no card of their own. */
+  .ge-pop[data-inside] { position: static; flex: 0 0 100%; width: auto; max-width: none; padding: 4px 0 0; border-radius: 0; background: none; box-shadow: none; animation: none; }
+  .ge-pop[data-inside] .ge-pop-row { width: 100%; margin-inline: 0; }
+`;
+
+// A section's lines, of the icons of 在下方新建分区 and 解散分区: the mark beside them says which.
+const SECTION_LINES = '<path d="M3.25 5.25h13.5M3.25 9.75h9"/>';
+
+/** Icons of the editor's menus (a block type's own is in its component's description). */
+export const ICONS = {
+  plus: svg('<path d="M10 4.25v11.5M4.25 10h11.5"/>'),
+  copy: svg('<rect x="7.25" y="7.25" width="9.5" height="9.5" rx="2"/><path d="M12.75 7.25V5.5a2 2 0 0 0-2-2h-5.5a2 2 0 0 0-2 2V11a2 2 0 0 0 2 2h2"/>'),
+  trash: svg('<path d="M3.75 5.75h12.5M8 5.75V4.5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1.25M5.25 5.75l.7 9.6a1.5 1.5 0 0 0 1.5 1.4h5.1a1.5 1.5 0 0 0 1.5-1.4l.7-9.6"/>'),
+  outer: svg('<rect x="3.25" y="3.25" width="13.5" height="13.5" rx="2.5" stroke-dasharray="2.2 2.2"/><rect x="6.5" y="6.5" width="7" height="7" rx="1.25"/>'),
+  section: svg(`${SECTION_LINES}<path d="M14.5 12v5M12 14.5h5"/>`),
+  dissolve: svg(`${SECTION_LINES}<path d="m12.75 12.75 3.5 3.5M16.25 12.75l-3.5 3.5"/>`), // section's plus, turned 45°
+  // Blocks gathered into a new section: their lines between brackets.
+  group: svg('<path d="M6 3.75h-.75a2 2 0 0 0-2 2v8.5a2 2 0 0 0 2 2H6M14 3.75h.75a2 2 0 0 1 2 2v8.5a2 2 0 0 1-2 2H14"/><path d="M7.25 7.75h5.5M7.25 12.25h5.5"/>'),
+  center: svg('<rect x="5.25" y="4.25" width="9.5" height="11.5" rx="1.75"/><path d="M2.75 4v12M17.25 4v12"/>'),
+  full: svg('<rect x="3.25" y="4.25" width="13.5" height="11.5" rx="1.75"/><path d="m6.5 10h7M6.5 10l1.75-1.75M6.5 10l1.75 1.75M13.5 10l-1.75-1.75M13.5 10l-1.75 1.75"/>'),
+  reset: svg('<path d="M4.75 6.75A6 6 0 1 1 4 10.5"/><path d="M4.5 3.5v3.5H8"/>'),
+  check: svg('<path d="m3.5 8.5 3 3 6-7"/>', 16),
+  frame: svg('<rect x="3.25" y="4.25" width="13.5" height="11.5" rx="3"/><path d="M6.25 7.75h3"/>'),
+  rename: svg('<path d="M11.75 4.75l3.5 3.5"/><path d="M13.25 3.25a1.5 1.5 0 0 1 2.12 0l1.38 1.38a1.5 1.5 0 0 1 0 2.12L7.5 16H4v-3.5z"/>'),
+  chevron: svg('<path d="m6.5 4 4 4-4 4"/>', 16),
+  face: svg('<circle cx="10" cy="10" r="6.75"/><path d="M7.5 11.5a3 3 0 0 0 5 0"/><circle cx="7.9" cy="8.5" r=".9" fill="currentColor" stroke="none"/><circle cx="12.1" cy="8.5" r=".9" fill="currentColor" stroke="none"/>'),
+};
+
+// A row's picture, as the tooltip shows it.
+const previewOf = ({ src }) => element("img", { class: "ge-pop-preview", src, alt: "" });
+
+const opened = new Set(); // the menus open now, whichever part of the page opened them
+
+/** Whether a menu is open anywhere on the page (a press outside it closes it). */
+export const menuOpen = () => opened.size > 0;
+
+/**
+ * items: rows { label, run, icon?, hint?, long?, current?, checked?, disabled?, note?, preview? } (long:
+ * a label of any length, a page's title, cut before its hint is; current: the choice
+ * made, checked and not to be chosen again; checked: a switch that is on, checked and clicked to turn
+ * it off; preview: { src, says }, a picture of what the row makes, where it has one, and a line on it,
+ * shown at the row's right while the pointer rests on it, notion-lite's row tooltip) (or { label, icon?, submenu:
+ * () => items, width?, search? } opening a submenu, with a search field at its top when `search` is
+ * given, as `opts.search` below, and `search.empty` the words shown when nothing is found), titles
+ * { title, icon? }, separators { separator: true } and grids { node, cells, columns } (type-grid.mjs: the
+ * node shown as it is, its cells, buttons that act on their own click, highlighted as rows are).
+ * opts: { label, empty, highlight, onClose, around, side, width } — width: the card's, in px, instead
+ * of 265 (the block menu: as wide as its grid of types). around: the rect of the block a handle
+ * (the anchor) stands for; the menu keeps clear of that block: left of it beside the handle, else
+ * below or above it (scrolling inside when only part of it fits), and over it only when the block
+ * leaves no room at all. side: "right": beside the anchor, right of it (left of it when there is no
+ * room), level with it (a section's bar). Without either the menu stands below the anchor (the
+ * caret), or above it when there is no room below; align: "end", its right edge at the anchor's.
+ * icons: false, rows of words alone (no column for icons: a code block's languages); height: the
+ * card's greatest height, in px (its rows scroll inside it past that). stand(size): where the card
+ * stands, its { left, top } for its { width, height }, in place of all of these rules (a pasted
+ * address's 选择视图, by the format bar's rule: placement.mjs besideText). inside: an element the rows
+ * go in, in place of a card over the page (a link card's pages): they stand where it has them.
+ * search: { placeholder, filter(text) }: a field above the rows, which takes the focus (unless
+ * `focus` is false: a submenu the pointer opened, whose field the first letter typed goes to,
+ * menu.type); what is typed in it gives the rows anew (filter returns the items), its keys moving the
+ * highlight (↑/↓), running the row (Enter) and closing the menu (Esc).
+ */
+export function createMenu() {
+  addStyle(STYLE);
+  let node = null;
+  let list = null; // where the rows go: the card, or under its search field
+  let rows = [];
+  let active = -1;
+  let pointed = false; // the highlight is where the pointer is (not where the keys moved it)
+  let options = {};
+  let anchor = null;
+  let sub = null; // the submenu's card (a menu of its own), made when first needed
+  let subRow = null; // the row it is open from
+  let subKeys = false; // opened from the keys: they move in it
+  let subTimer = 0;
+  let pointedRow = null;
+
+  // The pointer over a row highlights it. In a menu that starts with nothing highlighted (the block
+  // menu), leaving the row takes the highlight off again, as :hover would; a row the keys moved to
+  // stays, and so does the "/" menu's, the row Enter runs.
+  const point = (row) => {
+    highlight(rows.indexOf(row), false);
+    pointed = true;
+    if (row === pointedRow) return;
+    pointedRow = row;
+    clearTimeout(subTimer);
+    // Notion's: a submenu opens 80ms after the pointer rests on its row (200ms while another is
+    // open), and goes 250ms after the pointer rests elsewhere.
+    if (row.submenu && row !== subRow) subTimer = setTimeout(() => openSub(row), subRow ? 200 : 80);
+    else if (!row.submenu && subRow) subTimer = setTimeout(closeSub, 250);
+  };
+  const leave = (row) => {
+    if (pointed && rows[active] === row && options.highlight === false) highlight(-1);
+    if (pointedRow !== row) return;
+    pointedRow = null;
+    clearTimeout(subTimer); // passing over a row opens nothing
+    if (subRow === row && !subKeys) subTimer = setTimeout(closeSub, 250); // unless the pointer goes into it
+  };
+
+  function build(items) {
+    rows = [];
+    const children = [];
+    for (const item of items) {
+      if (item.separator) {
+        if (children.length > 0 && !children.at(-1).classList.contains("ge-pop-sep")) children.push(element("div", { class: "ge-pop-sep", role: "separator" }));
+      } else if (item.title) children.push(element("div", { class: "ge-pop-title" }, ...(item.icon ? [element("span", { class: "ge-pop-icon", html: item.icon })] : []), element("span", { class: "ge-pop-name", text: item.title })));
+      else if (item.node) {
+        const grid = { start: rows.length, count: item.cells.length, columns: item.columns };
+        for (const cell of item.cells) {
+          cell.grid = grid;
+          cell.addEventListener("pointermove", () => point(cell));
+          cell.addEventListener("pointerleave", () => leave(cell));
+          rows.push(cell);
+        }
+        children.push(item.node);
+      } else {
+        const row = element("button", { type: "button", class: "ge-pop-row", role: "menuitem" });
+        if (item.long) row.setAttribute("data-long", "");
+        if (options.icons !== false) row.append(element("span", { class: "ge-pop-icon", html: item.icon ?? "" }));
+        row.append(element("span", { class: "ge-pop-label", text: item.label }));
+        if (item.hint) row.append(element("span", { class: "ge-pop-hint", text: item.hint }));
+        if (item.submenu) {
+          row.append(element("span", { class: "ge-pop-arrow", html: ICONS.chevron }));
+          row.setAttribute("aria-haspopup", "menu");
+          row.submenu = item.submenu;
+          row.subWidth = item.width;
+          row.subSearch = item.search;
+        }
+        if (item.current || item.checked) {
+          row.append(element("span", { class: "ge-pop-check", html: ICONS.check, "aria-label": item.current ? t("当前") : t("已开启") }));
+          row.setAttribute("data-current", "");
+          if (item.checked) row.setAttribute("aria-checked", "true");
+        }
+        row.disabled = Boolean(item.disabled || item.current);
+        row.run = item.run;
+        row.addEventListener("mousedown", (event) => event.preventDefault());
+        row.addEventListener("pointermove", () => point(row));
+        row.addEventListener("pointerleave", () => leave(row));
+        row.addEventListener("click", () => run(row));
+        rows.push(row);
+        children.push(row);
+        if (item.note) children.push(element("div", { class: "ge-pop-note", text: item.note }));
+        if (item.preview) tooltip(row, item.preview.src ? () => previewOf(item.preview) : item.preview.says, item.preview.src ? item.preview.says : null, { placement: "right", align: "start", beside: true });
+      }
+    }
+    while (children.at(-1)?.classList.contains("ge-pop-sep")) children.pop();
+    if (rows.length === 0 && options.empty) children.push(element("div", { class: "ge-pop-empty", text: options.empty }));
+    hideTooltip();
+    list.replaceChildren(...children);
+    active = -1;
+    pointed = false;
+  }
+
+  function highlight(index, scroll = true) {
+    rows[active]?.removeAttribute("data-active");
+    active = index;
+    const row = rows[active];
+    if (!row) return;
+    row.setAttribute("data-active", "");
+    if (scroll) row.scrollIntoView({ block: "nearest" });
+  }
+
+  const clamp = (value, low, high) => Math.max(low, Math.min(high, value));
+
+  function place() {
+    if (options.inside) return;
+    const margin = 8;
+    const gap = 6;
+    node.style.maxHeight = options.height ? `${options.height}px` : "";
+    if (options.width) node.style.width = `${options.width}px`;
+    const width = node.offsetWidth;
+    let height = node.offsetHeight;
+    const room = innerHeight - 2 * margin;
+    const fit = (space) => {
+      if (height > space) {
+        node.style.maxHeight = `${Math.floor(space)}px`;
+        height = space;
+        // A card as wide as its content widens by the scrollbar it now has.
+        if (options.width) node.style.width = `${options.width + node.offsetWidth - node.clientWidth}px`;
+      }
+    };
+    let left;
+    let top;
+    const block = options.around;
+    if (options.stand) {
+      fit(room);
+      ({ left, top } = options.stand({ width, height }));
+    } else if (options.side === "right") {
+      fit(room);
+      const aside = options.gap ?? gap;
+      left = anchor.right + aside + width <= innerWidth - margin ? anchor.right + aside : anchor.left - aside - width;
+      top = clamp(anchor.top, margin, innerHeight - margin - height);
+    } else if (!block) {
+      // Below the anchor (the caret), or above it where there is more room; never over it (it once
+      // covered the line typed in, at the top of the window): the card scrolls inside when it fits
+      // in neither.
+      const aside = options.gap ?? gap;
+      left = clamp(options.align === "end" ? anchor.right - width : anchor.left, margin, innerWidth - width - margin);
+      const below = innerHeight - margin - (anchor.bottom + aside);
+      const above = anchor.top - aside - margin;
+      if (height <= below || below >= above) {
+        fit(Math.max(below, 120));
+        top = anchor.bottom + aside;
+      } else {
+        fit(Math.max(above, 120));
+        top = Math.max(margin, anchor.top - aside - height);
+      }
+    } else {
+      const below = innerHeight - margin - (block.bottom + gap);
+      const above = block.top - gap - margin;
+      const beside = anchor.left - gap - width;
+      if (beside >= margin) {
+        // Left of the block, centered on its handle.
+        fit(room);
+        left = beside;
+        top = clamp((anchor.top + anchor.bottom) / 2 - height / 2, margin, innerHeight - margin - height);
+      } else if (Math.max(below, above) >= Math.min(height, 180)) {
+        // Below the block, else above it; in the larger of the two when it fits in neither.
+        left = clamp(anchor.left, margin, innerWidth - width - margin);
+        const under = height <= below || (height > above && below >= above);
+        fit(under ? below : above);
+        top = under ? block.bottom + gap : block.top - gap - height;
+      } else {
+        // The block fills the window: beside the handle, over the block.
+        fit(room);
+        left = Math.min(anchor.right + gap, innerWidth - width - margin);
+        top = clamp((anchor.top + anchor.bottom) / 2 - height / 2, margin, innerHeight - margin - height);
+      }
+    }
+    node.style.left = `${Math.round(Math.max(margin, left))}px`;
+    node.style.top = `${Math.round(top)}px`;
+  }
+
+  // ---------- a row's submenu ----------
+
+  function openSub(row, keys = false) {
+    clearTimeout(subTimer);
+    if (!node || !rows.includes(row)) return;
+    if (subRow === row && sub?.isOpen) {
+      if (keys && !subKeys) {
+        subKeys = true;
+        sub.move(1);
+      }
+      return;
+    }
+    closeSub();
+    sub ??= createMenu();
+    subRow = row;
+    subKeys = keys;
+    row.setAttribute("aria-expanded", "true");
+    // A choice in it closes both cards, then runs; so does one its search field found.
+    const closing = (items) => items.map((item) => (item.run ? { ...item, run: () => { close(); item.run(); } } : item));
+    const items = closing(row.submenu());
+    const search = row.subSearch && { placeholder: row.subSearch.placeholder, filter: (text) => closing(row.subSearch.filter(text)) };
+    sub.open(items, row.getBoundingClientRect(), {
+      side: "right", gap: 0, height: Math.round(innerHeight * 0.7), highlight: keys, width: row.subWidth, label: row.textContent, search, empty: row.subSearch?.empty, focus: keys,
+      onClose: () => {
+        row.removeAttribute("aria-expanded");
+        if (subRow === row) {
+          subRow = null;
+          subKeys = false;
+        }
+      },
+    });
+    for (const card of sub.nodes) card.addEventListener("pointerenter", () => clearTimeout(subTimer));
+  }
+
+  function closeSub() {
+    clearTimeout(subTimer);
+    sub?.close();
+  }
+
+  function run(row) {
+    if (!row || row.disabled) return false;
+    if (row.submenu) {
+      openSub(row, true);
+      return true;
+    }
+    if (row.grid) {
+      row.click(); // a grid's cell does its own work (and closes the menu)
+      return true;
+    }
+    const action = row.run;
+    close();
+    action?.();
+    return true;
+  }
+
+  // The search field: what is typed in it filters the rows (not while an input method composes).
+  function searchField(search) {
+    const field = element("input", { type: "text", placeholder: search.placeholder ?? t("搜索"), spellcheck: "false", autocomplete: "off", "aria-label": search.placeholder ?? t("搜索") });
+    const filter = () => {
+      build(search.filter(field.value));
+      highlight(rows.findIndex((row) => !row.disabled));
+    };
+    field.addEventListener("input", (event) => { if (!event.isComposing) filter(); });
+    field.addEventListener("compositionend", filter);
+    field.addEventListener("keydown", (event) => {
+      if (event.isComposing || event.keyCode === 229) return;
+      if (!menu.arrow(event)) {
+        if (event.key === "Enter") menu.choose();
+        else if (event.key === "Escape") close();
+        else if (event.key !== "Tab") return;
+      }
+      event.preventDefault();
+    });
+    return element("div", { class: "ge-pop-search" }, field);
+  }
+
+  function close() {
+    if (!node) return;
+    opened.delete(menu);
+    closeSub();
+    hideTooltip();
+    pointedRow = null;
+    node.remove();
+    node = null;
+    list = null;
+    rows = [];
+    active = -1;
+    const done = options.onClose;
+    options = {};
+    done?.();
+  }
+
+  const menu = {
+    open(items, rect, opts = {}) {
+      close();
+      options = opts;
+      anchor = rect;
+      opened.add(menu);
+      node = element("div", { class: "ge-pop", role: "menu", "aria-label": opts.label ?? t("菜单") });
+      if (opts.inside) {
+        node.setAttribute("data-inside", "");
+        opts.inside.append(node);
+      } else mount(node);
+      list = node;
+      if (opts.search) {
+        list = element("div");
+        node.append(searchField(opts.search), list);
+      }
+      build(items);
+      if (opts.highlight !== false) highlight(rows.findIndex((row) => !row.disabled && !row.passed));
+      place();
+      if (opts.focus !== false) node.querySelector(".ge-pop-search input")?.focus({ preventScroll: true });
+    },
+    /** Replace the rows (filtering), keeping the place; `first`: the first row highlighted. */
+    update(items, rect = anchor, { first = true } = {}) {
+      if (!node) return;
+      anchor = rect;
+      build(items);
+      if (first) highlight(rows.findIndex((row) => !row.disabled && !row.passed));
+      place();
+    },
+    /** Stand again, by `rect` or by what `stand` reads: the page moved under it. */
+    follow(rect = anchor) {
+      if (!node) return;
+      anchor = rect;
+      place();
+    },
+    close,
+    /**
+     * Move the highlight by one row, skipping disabled rows; in a grid by a line of it, out of it
+     * past its first or last line. `along`: ←/→ in a grid (false when no cell is highlighted).
+     */
+    move(delta, along = false) {
+      if (sub?.isOpen && subKeys) {
+        if (along && delta < 0 && !sub.move(delta, true)) {
+          closeSub();
+          return true;
+        }
+        return along ? true : sub.move(delta);
+      }
+      if (along && delta > 0 && rows[active]?.submenu) {
+        openSub(rows[active], true);
+        return true;
+      }
+      if (rows.length === 0) return false;
+      pointed = false;
+      const grid = rows[active]?.grid;
+      if (along) {
+        if (!grid) return false;
+        highlight(grid.start + (active - grid.start + delta + grid.count) % grid.count);
+        return true;
+      }
+      let index = active < 0 && delta < 0 ? rows.length : active; // from nothing, ↑ reaches the last row
+      if (grid) {
+        const at = active - grid.start;
+        const line = Math.floor(at / grid.columns);
+        const last = Math.floor((grid.count - 1) / grid.columns);
+        const next = delta > 0 && line < last ? Math.min(at + grid.columns, grid.count - 1) : delta < 0 && line > 0 ? at - grid.columns : null;
+        if (next !== null) {
+          highlight(grid.start + next);
+          return true;
+        }
+        index = delta > 0 ? grid.start + grid.count - 1 : grid.start;
+      }
+      // Passed over: a disabled row, and a cell that is already the block's (passed: a color's swatch).
+      for (let step = 0; step < rows.length; step++) {
+        index = (index + delta + rows.length) % rows.length;
+        if (!rows[index].disabled && !rows[index].passed) break;
+      }
+      highlight(index);
+      return true;
+    },
+    /** ↑/↓ as a key event: moves the highlight (`move`); false for any other key (the caller's own keys stay its). */
+    arrow(event) {
+      if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return false;
+      menu.move(event.key === "ArrowDown" ? 1 : -1);
+      return true;
+    },
+    /**
+     * A letter typed while a submenu with a search field is open (the pointer opened it, the focus
+     * staying where it was): the field takes the focus, and the letter goes into it (the key's own
+     * typing, not prevented). Returns whether it went there.
+     */
+    type(event) {
+      const field = sub?.isOpen ? sub.nodes[0]?.querySelector(".ge-pop-search input") : null;
+      if (!field || event.ctrlKey || event.metaKey || event.altKey || (event.key.length !== 1 && event.keyCode !== 229)) return false;
+      subKeys = true; // its keys now move in it
+      field.focus({ preventScroll: true });
+      return true;
+    },
+    /** Run the highlighted row. Returns whether one ran. */
+    choose: () => (sub?.isOpen && subKeys ? sub.choose() : run(rows[active])),
+    get isOpen() { return node !== null; },
+    get hasChoice() { return sub?.isOpen && subKeys ? sub.hasChoice : Boolean(rows[active] && !rows[active].disabled); },
+    /** Whether the highlight is where the pointer is, not where the keys moved it. */
+    get pointed() { return pointed; },
+    contains: (target) => Boolean(node?.contains(target) || sub?.contains(target)),
+    /** The nodes to keep in the top layer when a modal dialog opens. */
+    get nodes() { return node ? [node, ...(sub?.nodes ?? [])] : []; },
+  };
+  return menu;
+}

package/browser/editor/page/merge.mjs

@@ -0,0 +1,100 @@
+// Merging a block's inline HTML word by word (mergeText), and the helpers around it: the server's
+// commits merge with them (source/merge.mjs), and the page undoes a change three ways with them
+// once someone else's words were merged into the block (history.mjs).
+
+// Longest common subsequence of two lists of strings, as index pairs. Shared ends are matched
+// first, so the table only covers the part that changed. (The page's one LCS: the merge, the three-way
+// undo and the conflict card's word diff all use it.)
+export function commonRun(xs, ys) {
+  const head = [];
+  let start = 0;
+  while (start < xs.length && start < ys.length && xs[start] === ys[start]) head.push([start, start++]);
+  let endX = xs.length;
+  let endY = ys.length;
+  const tail = [];
+  while (endX > start && endY > start && xs[endX - 1] === ys[endY - 1]) tail.unshift([--endX, --endY]);
+  const n = endX - start;
+  const m = endY - start;
+  const table = Array.from({ length: n + 1 }, () => new Uint32Array(m + 1));
+  for (let i = n - 1; i >= 0; i--) {
+    for (let j = m - 1; j >= 0; j--) {
+      table[i][j] = xs[start + i] === ys[start + j] ? table[i + 1][j + 1] + 1 : Math.max(table[i + 1][j], table[i][j + 1]);
+    }
+  }
+  const middle = [];
+  for (let i = 0, j = 0; i < n && j < m;) {
+    if (xs[start + i] === ys[start + j]) middle.push([start + i++, start + j++]);
+    else if (table[i + 1][j] >= table[i][j + 1]) i++;
+    else j++;
+  }
+  return [...head, ...middle, ...tail];
+}
+
+// ---------- merging a block both sides changed ----------
+
+// Tokens of a block's inline HTML: a tag, an entity, a word, a run of spaces, or any other single
+// character (each Chinese or Japanese character on its own). Tokens compare by what they mean
+// (`key`): entities decoded, a tag by its name and attributes, spaces collapsed, so the editor's
+// rewrite of text it did not change still matches the source.
+const TOKEN = /<[^>]*>|&(?:#\d+|#x[\da-f]+|[a-z]+\d*);|(?:(?![\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}])[\p{L}\p{N}_])+|[ \t\r\n\f]+|[\s\S]/giu;
+
+const ENTITIES = { amp: "&", lt: "<", gt: ">", quot: '"', apos: "'", nbsp: " " };
+
+const decodeEntities = (text) => text.replace(/&(#\d+|#x[\da-f]+|[a-z]+\d*);/gi, (whole, name) => {
+  if (name[0] !== "#") return ENTITIES[name.toLowerCase()] ?? whole;
+  const code = /^#x/i.test(name) ? parseInt(name.slice(2), 16) : Number(name.slice(1));
+  return code > 0 && code <= 0x10ffff ? String.fromCodePoint(code) : whole;
+});
+
+function tokenKey(raw) {
+  const tag = /^<(\/?)\s*([a-z][\w-]*)([^>]*?)\/?>$/i.exec(raw);
+  if (!tag) return /^[ \t\r\n\f]+$/.test(raw) ? " " : decodeEntities(raw);
+  const attributes = [...tag[3].matchAll(/([^\s=/]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g)]
+    .map(([, name, double, single, bare]) => ` ${name.toLowerCase()}=${decodeEntities(double ?? single ?? bare ?? "")}`);
+  return `<${tag[1]}${tag[2].toLowerCase()}${attributes.join("")}>`;
+}
+
+const tokensOf = (html) => (html.match(TOKEN) ?? []).map((raw) => ({ raw, key: tokenKey(raw) }));
+
+/**
+ * Three-way merge of a block's inline HTML: the reader's and the file's changes to the same base
+ * text. Changes to different places, with at least one unchanged word, character or tag (not
+ * just a space) between them, both go in; two changes to the same or neighbouring places, unless
+ * identical, make it a conflict (null). The caller still validates the result like any edit.
+ */
+export function mergeText(base, mine, theirs) {
+  const [b, m, t] = [base, mine, theirs].map(tokensOf);
+  if (b.length + m.length + t.length > 6000) return null; // long enough that a conflict is the better answer
+  const keys = (tokens) => tokens.map((token) => token.key);
+  const toMine = new Map(commonRun(keys(b), keys(m)));
+  const toTheirs = new Map(commonRun(keys(b), keys(t)));
+  const same = (x, y) => x.length === y.length && x.every((token, index) => token.key === y[index].key);
+  const output = [];
+  let [i, j, k] = [0, 0, 0]; // the next token of each version not written yet
+  // Tokens both sides kept (spaces aside) anchor the merge; between two anchors, at most one side
+  // changed anything.
+  for (let at = 0; at <= b.length; at++) {
+    const end = at === b.length;
+    if (!end && !(b[at].key !== " " && toMine.has(at) && toTheirs.has(at))) continue;
+    const [nextMine, nextTheirs] = end ? [m.length, t.length] : [toMine.get(at), toTheirs.get(at)];
+    const [was, ours, their] = [b.slice(i, at), m.slice(j, nextMine), t.slice(k, nextTheirs)];
+    if (same(ours, was)) output.push(...their);
+    else if (same(their, was) || same(ours, their)) output.push(...ours);
+    else return null;
+    if (!end) output.push(m[nextMine]);
+    [i, j, k] = [at + 1, nextMine + 1, nextTheirs + 1];
+  }
+  return output.map((token) => token.raw).join("");
+}
+
+export function commonPrefix(a, b) {
+  let length = 0;
+  while (length < a.length && length < b.length && a[length] === b[length]) length++;
+  return length;
+}
+
+export function commonSuffix(a, b) {
+  let length = 0;
+  while (length < a.length && length < b.length && a[a.length - 1 - length] === b[b.length - 1 - length]) length++;
+  return length;
+}