@heycys/gallery 0.0.0-stage → 0.1.0

package/browser/editor/page/slash-menu/index.mjs

@@ -0,0 +1,291 @@
+import { MENU_GROUPS, takesFormula, textFilters } from "../../components/registry.mjs";
+import { FORMULA_ICON, LINK_ICON, PAGE_ICON } from "../../components/icons.mjs";
+import { caretRect, hostOf } from "../caret.mjs";
+import { can, isFirstLine } from "../core.mjs";
+import { belowTargets, convertible, typeOf, typedTargets } from "../convert.mjs";
+import { rangeAt, rangeOffsets } from "../marks.mjs";
+import { createMenu } from "../menu.mjs";
+import { offered } from "../offered.mjs";
+import { menuRow, variantKeys } from "../page-objects.mjs";
+import { recentList } from "../storage.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// The "/" menu (docs/editor.md, "New blocks and conversions"), Notion's (notion-lite
+// editor/menus/slash-menu.js): "/" (or "、", "／", the same key with a Chinese input method) typed in
+// a text block opens a menu of blocks at the caret, filtered by what follows it (label, pinyin,
+// initials; while composing too). In a block holding nothing else, a block chosen is what the block
+// turns into; in one with text, a new block of the type goes below it (insertBelow), and so it does
+// below a flowchart node's first line (its title, which turns into nothing: core.mjs firstLineOf); 公式,
+// 链接 and 页面 go where the "/" was. In text no block can come of (a table's cell, a caption, a card's
+// title: what takes links, as the "@" menu goes by) it holds those three alone, where notion-lite opens
+// no menu. Unfiltered, the menu shows 建议 (the four blocks used last, kept on
+// this computer) and the blocks by group, the workspace's component packages the last of those
+// (组件: notion-lite's variants, "installed:<id>", each named as the reader reads and found by its
+// words, offered where a block of its own stands: convert.mjs); filtered, one list. 240px wide, at most min(448px, 40vh)
+// high (its rows scroll), below the caret or above it where there is more room; ↑/↓, Enter or Tab
+// and Esc work while it is open. It closes when the "/" goes, the caret leaves for another block or
+// before the "/", what follows starts with a space or ends with two, or three more characters are
+// typed after nothing matched (a "、" in the middle of text, a Chinese list's comma most often, at
+// once), none of it while an input method composes. The block handle's "+" opens it with no "/" (in
+// the empty block it made: `add`, notion-lite's openAddMenu), filtered by what is typed there. The card
+// is menu.mjs; markdown/ tells it what is typed.
+
+/** The characters that open the menu: "/", and what the same key types with a Chinese input method. */
+export const SLASH = new Set(["/", "、", "／"]);
+
+// The rows not blocks of their own, where the "/" was (notion-lite's inline section).
+const INLINE = {
+  // 公式 is the format bar's (an inline formula; a formula block of its own would be 公式块).
+  "inline:formula": { label: t("公式"), icon: FORMULA_ICON, words: "公式 行内公式 gongshi hangneigongshi gs hngs equation inline math latex tex $" },
+  "inline:link": { label: t("链接"), icon: LINK_ICON, words: "链接 超链接 lianjie chaolianjie lj link url href" },
+  "inline:page": { label: t("页面"), icon: PAGE_ICON, words: "页面 页面块 子页面 yemian yemiankuai ziyemian ym zym page subpage mention" },
+};
+
+// Groups of the unfiltered menu: 基本区块, 高级区块 (media, code, tabs and formula blocks: what
+// holds more than text; the types' own `menu`, registry.mjs MENU_GROUPS), 组件 (what the variants
+// are now: the workspace's), and what is no block under 内联.
+const SECTIONS = [
+  { title: t("基本区块"), types: () => MENU_GROUPS.basic },
+  { title: t("高级区块"), types: () => MENU_GROUPS.advanced },
+  { title: t("组件@group"), types: variantKeys },
+];
+
+const infoOf = (key) => INLINE[key] ?? menuRow(key);
+
+/**
+ * How well a row (a block type, or 公式 / 链接 / 页面) matches what the reader typed after "/": 0 when
+ * its name is just that, 1 when one of its words (pinyin, initials, English) is, 2 when one starts
+ * with it, 3 when one has it inside; null when none (Notion's order: "gl" is 高亮块 before 折叠列表's
+ * "toggle", "链接" the link before 网页书签, which has the word).
+ */
+export function matchScore(type, query) {
+  const text = query.trim().toLowerCase().replace(/\s/g, "");
+  if (!text) return 0;
+  const { label, words } = infoOf(type);
+  const names = [label.replace(/\s/g, "").toLowerCase(), ...words.split(" ")];
+  if (names[0] === text) return 0;
+  if (names.includes(text)) return 1;
+  if (names.some((name) => name.startsWith(text))) return 2;
+  if (names[0].includes(text) || (text.length > 1 && names.some((name) => name.includes(text)))) return 3;
+  return null;
+}
+
+/** Whether a row matches what the reader typed after "/". */
+export const typeMatches = (type, query) => matchScore(type, query) !== null;
+
+// ---------- the blocks used last (建议) ----------
+
+const recent = recentList("gallery-edit:recent-types", { max: 8, valid: (key) => typeof key === "string" && Boolean(infoOf(key)) });
+
+/** The rows chosen last, newest first. */
+export const recentTypes = () => recent.read();
+
+/** A row chosen: first among the recent ones. */
+export const rememberType = (key) => recent.use(key);
+
+/**
+ * The menu's items for `those` (block types, and 公式 / 链接 / 页面 as "inline:formula" / "inline:link" / "inline:page"),
+ * but what the reader hid (offered.mjs) and a package's row that went while a card stood open, run(key) choosing one: filtered by `query`, one list; else
+ * 建议 and the groups. The block menu's 在下方新建 shows the same (block-menu/). `blocks`: in a block
+ * holding nothing but the "/…", whose type it would become — the blocks that match come before what
+ * goes in the text (/gs: 公式块, then 公式), as in text the best match comes first (公式, then 公式块).
+ */
+export function typeItems(those, run, query = "", { blocks = false } = {}) {
+  const keys = offered(those).filter(infoOf);
+  const rowOf = (key) => ({ ...infoOf(key), run: () => run(key) });
+  if (query) {
+    // Best match first, the menu's order within each (sort is stable).
+    const rank = (key, score) => (blocks && INLINE[key] ? 10 : 0) + score;
+    return keys.map((key) => [key, matchScore(key, query)]).filter(([, score]) => score !== null).sort((a, b) => rank(a[0], a[1]) - rank(b[0], b[1])).map(([key]) => rowOf(key));
+  }
+  const items = [];
+  const recent = recentTypes().filter((key) => keys.includes(key)).slice(0, 4);
+  if (recent.length > 0) items.push({ title: t("建议") }, ...recent.map(rowOf));
+  for (const { title, types } of SECTIONS) {
+    const shown = types().filter((key) => keys.includes(key));
+    if (shown.length > 0) items.push({ title }, ...shown.map(rowOf));
+  }
+  const inline = keys.filter((key) => INLINE[key]);
+  if (inline.length > 0) items.push({ title: t("内联") }, ...inline.map(rowOf));
+  return items;
+}
+
+/**
+ * convert(host, type, typed): the block, holding nothing but the "/…" typed (`typed`, a range of it),
+ * turned into the type (editor.mjs convertHost); insertBelow(host, type, typed): a new block of the
+ * type below the block, the typed "/…" taken away; inline.formula(host, typed), inline.link(host,
+ * typed) and inline.page(host, typed): a formula, a link or a page block where the "/…" was, its field
+ * open. composing():
+ * whether an input method is composing (editor.mjs). closed(host): the menu the "+" opened in `host`
+ * closed (its hint, 输入以筛选…, goes: typing/ updatePlaceholder).
+ */
+export function createSlashMenu({ convert, insertBelow, inline, composing = () => false, closed = () => {} }) {
+  const menu = createMenu();
+  let slash = null; // { host, at, char, quiet, missed }: the block, where the "/" is (a character offset), which
+
+  const caretOffset = (host) => {
+    const selection = getSelection();
+    return selection.rangeCount && selection.isCollapsed && host.contains(selection.anchorNode) ? rangeOffsets(host, selection.getRangeAt(0))[1] : null;
+  };
+
+  function rect(host) {
+    const selection = getSelection();
+    const caret = selection.rangeCount && host.contains(selection.anchorNode) ? caretRect(selection.getRangeAt(0)) : null;
+    const box = host.getBoundingClientRect();
+    return caret ? { left: caret.left - 4, top: caret.top, bottom: caret.bottom } : { left: box.left, top: box.top, bottom: box.bottom };
+  }
+
+  // The "/…" typed (`state`: where the menu opened), as a range of the block, or null when it is not
+  // there any more (deleted, or the caret before it). Opened by the handle's "+" (`char` null: no
+  // "/"), what is typed from where it opened, nothing at first.
+  function typedRange(state) {
+    const caret = caretOffset(state.host);
+    if (caret === null || caret < state.at || (state.char && caret === state.at)) return null;
+    const range = rangeAt(state.host, [state.at, caret]);
+    return !state.char || range.toString()[0] === state.char ? range : null;
+  }
+
+  // Whether a block can come of a "/" typed in it: what it turns into, or a block below it.
+  const takesBlocks = (host) => convertible(host) || can(host, "split");
+
+  // Whether the block holds nothing but the "/…": then a block chosen is what it turns into (a node's
+  // title never: what is chosen goes below it).
+  const alone = (host, typed) => !isFirstLine(host) && host.textContent.replace(/\s/g, "") === typed.toString().replace(/\s/g, "") && !host.querySelector("[data-ge-atom]");
+
+  // The rows for what follows the "/"; null closes the menu. While a Chinese input method composes
+  // pinyin there, it shows it with its syllables apart ("gs" as "g's" or "g s"): what is looked for is
+  // its letters, as Enter puts them in (the menu staying open for a second Enter to choose).
+  function rows() {
+    const state = slash;
+    const { host } = state;
+    const typed = typedRange(state);
+    if (!typed) return null;
+    const written = typed.toString().slice(state.char ? 1 : 0).replace(/ /g, " ");
+    const query = composing() ? written.replace(/['\s]/g, "") : written;
+    if (/^\s/.test(query) || /\s\s$/.test(query) || (query.length > 16 && !composing())) return null;
+    const empty = alone(host, typed);
+    const blocks = !takesBlocks(host) ? [] : empty ? typedTargets(host, true) : belowTargets(host);
+    const keys = [...blocks, ...(can(host, "links") ? Object.keys(INLINE).filter((key) => key !== "inline:formula" || takesFormula(host)) : [])];
+    const found = typeItems(keys, (key) => choose(state, key), query, { blocks: empty }); // the menu closes before a row runs
+    if (found.length > 0) {
+      slash.missed = null;
+      return found;
+    }
+    // Letters being composed are no text yet: what they turn into is looked for once they do, a
+    // package's name that its words do not spell in pinyin among it.
+    if (composing()) return found;
+    if (slash.quiet) return null; // "甲、乙": a comma, not a menu
+    slash.missed ??= query.length;
+    return query.length - slash.missed >= 3 ? null : found;
+  }
+
+  function open() {
+    const found = rows();
+    if (!found) {
+      slash = null;
+      return;
+    }
+    menu.open(found, rect(slash.host), {
+      label: t("插入块"),
+      empty: t("没有结果"),
+      width: 240,
+      height: Math.min(448, Math.round(innerHeight * 0.4)),
+      gap: 8,
+      onClose: () => {
+        const added = slash && !slash.char ? slash.host : null;
+        slash = null;
+        if (added) closed(added);
+      },
+    });
+  }
+
+  // The rows follow what is typed after the "/", and the menu its block.
+  function update() {
+    const found = slash?.host.isConnected ? rows() : null;
+    if (found) menu.update(found, rect(slash.host));
+    else menu.close();
+  }
+
+  // The typed "/…" goes, then: the block turns into the type (it held nothing else), a block of the
+  // type goes below it, or a formula or link goes where the "/" was.
+  function choose(state, key) {
+    const { host } = state;
+    const typed = typedRange(state);
+    menu.close();
+    if (!typed || !infoOf(key)) return; // (a package's row, its package gone while the menu stood)
+    rememberType(key);
+    // Opened by the "+" and nothing typed: the empty block's own type chosen changes nothing (no
+    // undo step that does nothing).
+    if (!state.char && typed.collapsed && typeOf(host) === key && alone(host, typed)) return;
+    if (key === "inline:formula") return inline.formula(host, typed);
+    if (key === "inline:link") return inline.link(host, typed);
+    if (key === "inline:page") return inline.page(host, typed);
+    if (alone(host, typed)) return convert(host, key, typed);
+    // At the block's end, the spaces typed before the "/" go with it (they were for the menu).
+    const [start, end] = rangeOffsets(host, typed);
+    const rest = document.createRange();
+    rest.selectNodeContents(host);
+    rest.setStart(typed.endContainer, typed.endOffset);
+    let from = start;
+    if (!rest.toString().trim()) while (from > 0 && /^\s$/.test(rangeAt(host, [from - 1, from]).toString())) from--;
+    insertBelow(host, key, from < start ? rangeAt(host, [from, end]) : typed);
+  }
+
+  return {
+    /**
+     * Text typed in `host`, `before` the caret: the menu opens when it ends with a "/" standing at the
+     * block's start, after a space, a whole in the text or a character no Latin word or address has
+     * ("and/or" and "https:/" open nothing; "、" anywhere), in a text block a block can be made from, or
+     * that takes links. `whole`: the block's text. Returns whether it opened.
+     */
+    typed(host, before, whole) {
+      const char = before.at(-1);
+      if (!SLASH.has(char) || !textFilters(host) || can(host, "plain") || !(takesBlocks(host) || can(host, "links"))) return false;
+      const caret = caretOffset(host);
+      if (caret === null) return false;
+      const previous = before.at(-2);
+      const word = previous !== undefined && !/\s/.test(previous) && /[\x21-\x7e]/.test(previous);
+      if (char !== "、" && word && !rangeAt(host, [caret - 2, caret - 1]).cloneContents().querySelector("[data-ge-atom]")) return false;
+      slash = { host, at: caret - 1, char, quiet: char === "、" && whole !== char, missed: null };
+      open();
+      return Boolean(slash);
+    },
+    /**
+     * The menu opened with no "/" typed, at the caret in `host` (an empty block the block handle's
+     * "+" made: notion-lite's openAddMenu): unfiltered, then filtered by what is typed from there, the
+     * rest as after a "/" (a block chosen is what the empty block turns into). Returns whether it opened.
+     */
+    add(host) {
+      const caret = caretOffset(host);
+      if (caret === null) return false;
+      slash = { host, at: caret, char: null, quiet: false, missed: null };
+      open();
+      return Boolean(slash);
+    },
+    /** The block the menu is open in, opened by the "+" (`add`), or null. */
+    get adding() { return slash && !slash.char && menu.isOpen ? slash.host : null; },
+    update,
+    close: () => menu.close(),
+    /**
+     * Keys while the menu is open, in its block (the caret's: a block a list item holds is edited in
+     * the item's element, which the keys go to, hostOf). Returns true when handled.
+     */
+    key(event) {
+      if (!menu.isOpen || hostOf(event) !== slash?.host || event.isComposing || event.keyCode === 229) return false;
+      if (!menu.arrow(event)) {
+        if ((event.key === "Enter" || event.key === "Tab") && menu.hasChoice) menu.choose();
+        else if (event.key === "Escape") menu.close();
+        else {
+          if (event.key === "Enter") menu.close();
+          return false;
+        }
+      }
+      event.preventDefault();
+      return true;
+    },
+    /** The block the menu is open for, or null. */
+    get host() { return slash?.host ?? null; },
+    contains: (node) => menu.contains(node),
+    get nodes() { return menu.nodes; },
+  };
+}

package/browser/editor/page/storage.mjs

@@ -0,0 +1,48 @@
+// What the editor keeps in the browser's storage: its crash buffer and tab (autosave.mjs, as strings),
+// the format brush, the colors, formulas and blocks used lately (JSON). Every call is safe where the
+// storage is not: a private window, blocked site data or a full quota store nothing and read nothing,
+// and the page works without (a list used lately is then kept for the page's life only).
+
+/** A storage area (`area()`: localStorage or sessionStorage) whose calls never throw. */
+export const storageOf = (area) => ({
+  get(key) { try { return area().getItem(key); } catch { return null; } },
+  set(key, value) { try { area().setItem(key, value); return true; } catch { return false; } },
+  remove(key) { try { area().removeItem(key); } catch {} },
+  keys() { try { return Object.keys(area()); } catch { return []; } },
+});
+
+/** localStorage, safe. */
+export const local = storageOf(() => localStorage);
+
+/** What `key` holds as JSON when `valid` says it is fit (by default: when there is something), else `fallback`. */
+export function stored(key, fallback, valid = (value) => value !== null) {
+  try {
+    const saved = JSON.parse(local.get(key) ?? "null");
+    if (valid(saved)) return saved;
+  } catch {}
+  return fallback;
+}
+
+/** `value` stored as JSON under `key`. */
+export const keep = (key, value) => local.set(key, JSON.stringify(value));
+
+/**
+ * A list of what was used lately, newest first, kept under `key`: { read(), use(entry) }. At most
+ * `max` entries, those `valid` says are fit (`fallback` when none are); an entry used again moves to
+ * the front (`same(a, b)`: whether two are one).
+ */
+export function recentList(key, { max, valid = () => true, same = (a, b) => a === b, fallback = [] }) {
+  let list = stored(key, [], Array.isArray);
+  const fits = (entry) => { try { return valid(entry); } catch { return false; } }; // an entry that is no object
+  const read = () => {
+    const fit = list.filter(fits).slice(0, max);
+    return fit.length > 0 ? fit : fallback;
+  };
+  return {
+    read,
+    use(entry) {
+      list = [entry, ...read().filter((other) => !same(other, entry))].slice(0, max);
+      keep(key, list);
+    },
+  };
+}

package/browser/editor/page/sync-state.mjs

@@ -0,0 +1,267 @@
+import { ELEMENT_ID, atomSources, knowAtoms } from "./core.mjs";
+import { BLOCK_TYPES, blockTypeOf, boxRole } from "../components/registry.mjs";
+import { COPY_KEYS } from "../components/figure/index.mjs";
+import { ownTypeOf } from "./convert.mjs";
+import { pageOfUnit } from "./page-objects.mjs";
+
+// The page's sync state, as the marks the editor reads (docs/editor.md, "Sync state"). What of
+// the file each element is lives in the commits' table (commit.mjs), under the element's identity
+// (core.mjs ELEMENT_ID), which never changes; the marks are written from that table here, and
+// nowhere else once the page is edited:
+//
+//   data-ge-unit, data-block-id    the unit it is, and the unit's id in the file
+//   data-ge-block                  the text block it is (not while its unit is turned into another type)
+//   data-ge-box                    the box it is (an empty value: a box made on the page)
+//   data-ge-new                    made on the page: what the file does not have (yet)
+//   data-ge-part                   a text block of a block made on the page whose words the file writes
+//                                  from elsewhere (components/installed/page.mjs), until the answer names it
+//   data-ge-convert, data-ge-type  turned into another type than its unit showed as when last
+//                                  committed: the next commit converts the unit (the type it goes as)
+//   data-ge-keep, data-ge-keep-own what the file says keeps it
+//   data-ge-grid                   the file's table is one the table tools are for (a table made on the
+//                                  page has it until the file says: components/table/page.mjs newTable)
+//
+// So undo, which brings elements back as they were, never brings back what the file had: an
+// element it puts back is marked from the table like every other (the element a block was turned
+// from is that unit again, of the type it shows, and turns the unit back). An element whose unit
+// the file dropped while the page still showed it (emptied, or a list going with its last item)
+// is marked as made on the page (asMade), as is everything of the file it was.
+
+const set = (node, name, value) => {
+  if (node.getAttribute(name) !== value) node.setAttribute(name, value);
+};
+
+/**
+ * Write the marks of `nodes` (elements with an identity) from the commits' table, `view`:
+ *   entry(identity)   { unit, block, box }: what of the file it is (undefined: made on the page)
+ *   dropped(identity) { unit, block, box }: what of the file it was, which the file dropped
+ *   keyed(identity)   a keyed block (a detail card) made on the page that the file has
+ *   proposal(identity) the id a block made on the page proposes, once it proposes one
+ *   units, blocks, boxes  the map's entries
+ *   shown(unit)       the type a unit showed as when last committed (convert.mjs ownTypeOf), if known
+ *   element(unit)     the element standing for a unit on the page, if any
+ */
+export function project(nodes, view) {
+  // A unit whose element on the page is of another type than it showed: converted, until committed.
+  const turnedOn = (unit, node) => {
+    const shown = view.shown(unit);
+    return shown !== undefined && Boolean(node) && ownTypeOf(node) !== shown;
+  };
+  const turned = new Map();
+  const turnedUnit = (unit) => {
+    if (!turned.has(unit)) turned.set(unit, turnedOn(unit, view.element(unit)));
+    return turned.get(unit);
+  };
+  for (const node of nodes) {
+    const key = node.getAttribute(ELEMENT_ID);
+    const gone = view.dropped(key);
+    if (gone) {
+      asMade(node, gone);
+      continue;
+    }
+    if (view.keyed(key)) for (const name of ["data-ge-new", "data-ge-type", "data-ge-unit-kind"]) node.removeAttribute(name);
+    const entry = view.entry(key);
+    if (entry?.unit === undefined && view.proposal(key)) set(node, "data-block-id", view.proposal(key));
+    if (!entry) continue;
+    const { unit, block, box } = entry;
+    let other = false;
+    if (unit === undefined) {
+      node.removeAttribute("data-ge-unit");
+      node.removeAttribute("data-ge-convert");
+    } else {
+      const info = view.units[unit];
+      other = turnedOn(unit, node);
+      set(node, "data-ge-unit", String(unit));
+      if (info.blockId) set(node, "data-block-id", info.blockId);
+      if (info.keep) set(node, "data-ge-keep", info.keep.reason);
+      else node.removeAttribute("data-ge-keep");
+      node.toggleAttribute("data-ge-keep-own", Boolean(info.keep?.own));
+      node.toggleAttribute("data-ge-grid", Boolean(info.grid));
+      if (node.hasAttribute("data-ge-copy")) { // a copy, a unit of the file now
+        node.removeAttribute("data-ge-copy");
+        node.removeAttribute("data-ge-type");
+        node.removeAttribute(COPY_KEYS); // its charts' keys, written
+      }
+      if (other) {
+        set(node, "data-ge-convert", String(unit));
+        set(node, "data-ge-type", ownTypeOf(node));
+        set(node, "data-ge-new", "");
+      } else {
+        node.removeAttribute("data-ge-convert");
+        node.removeAttribute("data-ge-new");
+        if (info.kind) set(node, "data-ge-unit-kind", info.kind);
+      }
+    }
+    if (block === undefined) node.removeAttribute("data-ge-block");
+    else {
+      const info = view.blocks[block];
+      const owner = info?.unit;
+      // The text of a unit turned into another type goes with the conversion: a text block made
+      // on the page until it is committed.
+      const off = !info || info.gone || (owner !== null && owner !== undefined && (owner === unit ? other : turnedUnit(owner)));
+      if (off) {
+        node.removeAttribute("data-ge-block");
+        if (node.getAttribute("contenteditable") === "true") set(node, "data-ge-new", "");
+      } else {
+        set(node, "data-ge-block", String(block));
+        node.removeAttribute("data-ge-part");
+        if (unit === undefined) node.removeAttribute("data-ge-new");
+      }
+    }
+    if (box !== undefined) {
+      set(node, "data-ge-box", String(box));
+      if (view.boxes[box]?.kind) set(node, "data-ge-box-kind", view.boxes[box].kind);
+      if (unit === undefined && block === undefined) node.removeAttribute("data-ge-new");
+    }
+  }
+}
+
+/**
+ * The marks of an element the file dropped while the page still showed it (`what`: the unit, text
+ * block or box it was): made on the page from now on, written as a new block where it stands
+ * once it has something to write, never named as what the file dropped (that would be a conflict,
+ * or text lost). A container whose blocks went elsewhere is a new one of its type (undo putting it
+ * back makes it again around the blocks it held); a block its component writes from what it holds
+ * says so (`renew`: what the page shows of it is the reader's, and it is known by no tag or class); a
+ * text block a new one; a box a box made on the page.
+ */
+export function asMade(element, what) {
+  if (what.unit !== undefined) {
+    const type = pageOfUnit(element)?.renew?.(element) ? null : containerTypeOf(element);
+    if (type) reviveMarks(element, type);
+    else renewMarks(element);
+  } else if (what.block !== undefined) {
+    element.removeAttribute("data-ge-block");
+    set(element, "data-ge-new", "");
+  } else if (what.box !== undefined && boxRole(element.getAttribute("data-ge-box-kind")) !== "nest") {
+    set(element, "data-ge-box", "");
+  }
+}
+
+// A text block's or other unit's marks, as made on the page: of its own type (a quote's paragraph
+// as a paragraph, a divider as a divider, a highlight block's icon as an icon: the type its class
+// tells before the first of its tag); an item's box for lists went with it (a new item's lists are
+// written with it).
+function renewMarks(element) {
+  if (!element.hasAttribute("data-ge-type")) {
+    const own = ownTypeOf(element);
+    const type = BLOCK_TYPES[own] ? own : blockTypeOf(element) ?? Object.keys(BLOCK_TYPES).find((each) => !BLOCK_TYPES[each].box && BLOCK_TYPES[each].tag === element.localName) ?? "paragraph";
+    element.setAttribute("data-ge-type", type);
+  }
+  for (const name of ["data-ge-block", "data-ge-unit", "data-ge-convert", "data-block-id"]) element.removeAttribute(name);
+  set(element, "data-ge-new", "");
+  if (boxRole(element.getAttribute("data-ge-box-kind")) === "nest") {
+    element.removeAttribute("data-ge-box");
+    element.removeAttribute("data-ge-box-kind");
+  }
+}
+
+// A container's marks, as one made on the page (core.mjs newContainer): a section, a list, quote,
+// panel or disclosure, a row of columns or a column.
+function reviveMarks(element, type) {
+  const spec = BLOCK_TYPES[type];
+  for (const [name, value] of [["data-ge-new", ""], ["data-ge-type", type], ["data-ge-unit-kind", spec.kind], ["data-ge-pure", ""]]) set(element, name, value);
+  for (const name of ["data-ge-unit", "data-block-id", "data-ge-convert"]) element.removeAttribute(name);
+  const box = spec.content?.(element) ?? element;
+  if (box) {
+    set(box, "data-ge-box", "");
+    set(box, "data-ge-box-kind", spec.box);
+  }
+  const title = spec.title?.(element) ?? null;
+  if (title) {
+    title.removeAttribute("data-ge-block");
+    set(title, "data-ge-new", "");
+  }
+}
+
+/** The type of container a unit's element is (a section, a list, quote, panel or disclosure, a row of columns or a column: a type with a box), or null. */
+export function containerTypeOf(element) {
+  const own = ownTypeOf(element);
+  const type = BLOCK_TYPES[own]?.box ? own : blockTypeOf(element);
+  return BLOCK_TYPES[type]?.box && !BLOCK_TYPES[type].keyed ? type : null;
+}
+
+// ---------- kept for the next page ----------
+// What the commits know goes to the crash buffer with the page as it is (autosave.mjs), so that a
+// page opening once this one is gone takes up exactly where it was: the commit whose answer it
+// never learned taken in on the answer, the next one found against what that left (recover).
+
+const REF = "data-ge-ref";
+
+/**
+ * `value` (the commits' save()) as JSON: its Maps and Sets, and the elements it names as marks in
+ * `document`'s body (as it is, the editor's own UI left out) or, off the page, in the trees they are
+ * in, with the sources of the chips there, which this page alone knows (core.mjs atomSources).
+ * { html, detached: [html], data, atoms }
+ */
+export function pack(document, value) {
+  const refs = new Map();
+  const encode = (item) => {
+    if (item === null || typeof item !== "object") return item;
+    if (item.nodeType === 9) return { $doc: 1 };
+    if (item.nodeType === 1) {
+      if (!refs.has(item)) refs.set(item, refs.size);
+      return { $el: refs.get(item) };
+    }
+    if (item instanceof Map) return { $map: [...item].map(([key, entry]) => [encode(key), encode(entry)]) };
+    if (item instanceof Set) return { $set: [...item].map(encode) };
+    if (Array.isArray(item)) return item.map(encode);
+    return Object.fromEntries(Object.entries(item).map(([key, entry]) => [key, encode(entry)]));
+  };
+  const data = encode(value);
+  const roots = new Set();
+  for (const [element, index] of refs) {
+    element.setAttribute(REF, String(index));
+    if (element.isConnected) continue;
+    let top = element;
+    while (top.parentElement) top = top.parentElement;
+    roots.add(top);
+  }
+  try {
+    const body = document.body.cloneNode(true);
+    body.querySelectorAll("[data-doc-dev]").forEach((node) => node.remove());
+    return { html: body.innerHTML, detached: [...roots].map((root) => root.outerHTML), data, atoms: atomSources([body, ...roots]) };
+  } finally {
+    for (const element of refs.keys()) element.removeAttribute(REF);
+  }
+}
+
+/**
+ * What pack() kept, back as values, its elements in a document of their own (`parse`: html -> a
+ * document), its chips known to this page (knowAtoms); one that cannot be found stands as an element
+ * off the page. { document, value }
+ */
+export function unpack({ html, detached = [], data, atoms = {} }, parse) {
+  knowAtoms(atoms);
+  const document = parse(`<!doctype html><html><head></head><body>${html}</body></html>`);
+  const found = new Map();
+  const take = (root) => {
+    for (const node of [root, ...root.querySelectorAll(`[${REF}]`)]) {
+      if (!node.hasAttribute(REF)) continue;
+      found.set(Number(node.getAttribute(REF)), node);
+      node.removeAttribute(REF);
+    }
+  };
+  take(document.documentElement);
+  for (const tree of detached) {
+    const template = document.createElement("template");
+    template.innerHTML = tree;
+    const root = template.content.firstElementChild;
+    if (!root) continue;
+    take(document.adoptNode(root));
+  }
+  const elementOf = (index) => {
+    if (!found.has(index)) found.set(index, document.createElement("div"));
+    return found.get(index);
+  };
+  const decode = (item) => {
+    if (item === null || typeof item !== "object") return item;
+    if (Array.isArray(item)) return item.map(decode);
+    if ("$doc" in item) return document;
+    if ("$el" in item) return elementOf(item.$el);
+    if ("$map" in item) return new Map(item.$map.map(([key, entry]) => [decode(key), decode(entry)]));
+    if ("$set" in item) return new Set(item.$set.map(decode));
+    return Object.fromEntries(Object.entries(item).map(([key, entry]) => [key, decode(entry)]));
+  };
+  return { document, value: decode(data) };
+}

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

@@ -0,0 +1,29 @@
+import { CELL_ALIGNS, CELL_VALIGNS } from "../../components/table/index.mjs";
+import { TABLE_ICONS } from "./icons.mjs";
+
+// The alignments a cell may have (components/table/index.mjs CELL_ALIGNS, CELL_VALIGNS), as the
+// cells' bar and a column's menu offer them: the three, then the three vertical ones.
+
+/** What all of `cells` have of one group of alignments: the class's name, null when they have none (the kit's own), undefined when they differ. */
+export function sharedAlign(cells, group) {
+  const of = (cell) => group.find(([name]) => cell.classList.contains(name))?.[0] ?? null;
+  return cells.every((cell) => of(cell) === of(cells[0])) ? of(cells[0]) : undefined;
+}
+
+/** The look that gives cells the alignment `name`: its class on, the others of its group off. */
+export function alignLook(name) {
+  const group = CELL_VALIGNS.some(([each]) => each === name) ? CELL_VALIGNS : CELL_ALIGNS;
+  return { classes: Object.fromEntries(group.map(([each]) => [each, each === name])) };
+}
+
+/**
+ * The alignments to offer for `cells`: [{ name, label, icon, vertical, current, run }], each
+ * `current` when all the cells have it (cells with none have the first of its group, the kit's
+ * own, but differing cells have none), `run` (when `apply` is given) calling `apply(name)`.
+ */
+export function alignItems(cells, apply = null) {
+  return [CELL_ALIGNS, CELL_VALIGNS].flatMap((group, index) => {
+    const shared = cells.length > 0 ? sharedAlign(cells, group) : undefined;
+    return group.map(([name, label]) => ({ name, label, icon: TABLE_ICONS[name], vertical: index === 1, current: shared !== undefined && (shared ?? group[0][0]) === name, run: () => apply?.(name) }));
+  });
+}