@heycys/gallery 0.0.0-stage → 0.1.1

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) }));
+  });
+}

package/browser/editor/page/table/cell-bar.mjs

@@ -0,0 +1,141 @@
+import { belowControl, colorSection, colorSwatch, FORMAT_ICONS, formatLook, listItem, tool } from "../format-bar/bar.mjs";
+import { HIGHLIGHTS, TEXT_COLORS } from "../marks.mjs";
+import { placeBox } from "../placement.mjs";
+import { hideTooltip, shortcut } from "../tooltip.mjs";
+import { addStyle, element, fadeIn, fadeOut, mount } from "../ui.mjs";
+import { alignItems } from "./aligns.mjs";
+import { TABLE_ICONS } from "./icons.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// The bar over selected cells of a table (cells.mjs), in the format bar's look (format-bar/bar.mjs:
+// its card, buttons, "A" and color picker, its list): one row of the "A" (the cells' color, one of
+// Notion's text colors or fills as a block's; a click opens the colors below it: 文本颜色, 背景颜色,
+// the cells' own ringed), bold, the alignment (its three below it, then the three vertical ones), 合并单元格 (several cells) or
+// 拆分单元格 (one merged cell), then 清除内容 and "更多" (a row or column put in beside the cells,
+// the cells' rows or columns taken out). It stands above the
+// cells, below them when there is no room. It shows the cells' state and reports commands;
+// cells.mjs applies them.
+
+const APPEAR = 120;
+const PANEL = 120;
+const GAP = 8; // between the cells and the bar
+// A cell's fill is a block's: its swatches and its "A" show --doc-fill, not the words' deeper fill the kit gives a span.
+const STYLE = `.ge-cell-bar :is(.ge-ink-sample, .ge-swatch > span)[class*="doc-highlight-"] { background: var(--doc-fill); }`;
+
+/**
+ * run(command, value): "color" with { kind: "text" | "background", color } (null: none), "bold", "align" with an
+ * alignment class (CELL_ALIGNS, CELL_VALIGNS), "clear", "insert" with "above" | "below" | "left" | "right",
+ * "remove" with "rows" | "columns", "merge", "split".
+ */
+export function createCellBar(run) {
+  formatLook();
+  addStyle(STYLE);
+  const sample = element("span", { class: "ge-ink-sample", text: "A" });
+  const tools = {
+    color: tool("color", t("颜色"), sample, () => toggle("colors")),
+    bold: tool("bold", t("加粗"), FORMAT_ICONS.bold, () => run("bold"), shortcut("mod+b")),
+    align: tool("align", t("对齐"), TABLE_ICONS["doc-align-left"], () => toggle("aligns")),
+    merge: tool("merge", () => (state.merge === "split" ? t("拆分单元格") : t("合并单元格")), TABLE_ICONS.merge, () => run(state.merge ?? "merge")),
+    clear: tool("clear", t("清除内容"), TABLE_ICONS.clear, () => run("clear"), "Del"),
+    more: tool("more", t("更多"), FORMAT_ICONS.more, () => toggle("more")),
+  };
+  for (const name of ["color", "align", "more"]) tools[name].setAttribute("aria-expanded", "false");
+
+  // A row of a list (the format bar's "更多" list) that closes the panels as it acts.
+  const item = (label, icon, action) => listItem(null, label, icon, () => { closePanels(); action(); });
+  const colors = element("div", { class: "ge-colors", role: "dialog", "aria-label": t("颜色"), hidden: "" });
+  // The alignments (aligns.mjs): the three, a separator, the three vertical ones.
+  const aligns = element("div", { class: "ge-more", role: "menu", "aria-label": t("对齐"), hidden: "" });
+  aligns.append(...alignItems([], (name) => run("align", name)).flatMap((align, index, all) => {
+    const node = item(align.label, align.icon, align.run);
+    node.dataset.align = align.name;
+    return index > 0 && align.vertical !== all[index - 1].vertical ? [element("div", { class: "ge-format-sep", role: "separator" }), node] : [node];
+  }));
+  const more = element("div", { class: "ge-more", role: "menu", "aria-label": t("更多"), hidden: "" },
+    item(t("在上方插入行"), TABLE_ICONS.above, () => run("insert", "above")),
+    item(t("在下方插入行"), TABLE_ICONS.below, () => run("insert", "below")),
+    item(t("在左侧插入列"), TABLE_ICONS.left, () => run("insert", "left")),
+    item(t("在右侧插入列"), TABLE_ICONS.right, () => run("insert", "right")),
+    item(t("删除所在行"), TABLE_ICONS.removeRow, () => run("remove", "rows")),
+    item(t("删除所在列"), TABLE_ICONS.removeColumn, () => run("remove", "columns")));
+  const panels = { colors, aligns, more };
+  const opener = { colors: tools.color, aligns: tools.align, more: tools.more };
+  let openPanel = null;
+  let state = { color: null, bold: false, aligns: alignItems([]), merge: null };
+
+  const box = element("div", { class: "ge-format-box" },
+    element("div", { class: "ge-format-row" }, tools.color, tools.bold, tools.align, tools.merge, tools.clear, tools.more));
+  const node = element("div", { class: "ge-format ge-cell-bar", role: "toolbar", "aria-label": t("单元格"), hidden: "" }, box, colors, aligns, more);
+  mount(node);
+
+  function toggle(name) {
+    const was = openPanel;
+    closePanels();
+    if (was !== name) openPanelNamed(name);
+  }
+
+  function openPanelNamed(name) {
+    hideTooltip();
+    const panel = panels[name];
+    if (name === "colors") {
+      // One color (默认 takes it away): the cells' own ringed, 默认文本 when they have none.
+      const kind = { text: "text", highlight: "background" };
+      const ringed = (family, value) => (value === null ? family === "text" && state.color === null : state.color?.kind === kind[family] && state.color.color === value);
+      const marked = (family, list) => list.map((value) => {
+        const swatch = colorSwatch(family, value, () => { closePanels(); run("color", value === null ? null : { kind: kind[family], color: value }); });
+        swatch.setAttribute("aria-pressed", String(ringed(family, value)));
+        return swatch;
+      });
+      colors.replaceChildren(colorSection(t("文本颜色"), marked("text", [null, ...TEXT_COLORS])), colorSection(t("背景颜色"), marked("highlight", [null, ...HIGHLIGHTS])));
+    }
+    if (name === "aligns") {
+      for (const row of aligns.querySelectorAll("[data-align]")) row.setAttribute("aria-pressed", String(state.aligns.some((align) => align.current && align.name === row.dataset.align)));
+    }
+    openPanel = name;
+    opener[name].setAttribute("aria-expanded", "true");
+    fadeIn(panel, PANEL);
+    belowControl(panel, opener[name]); // below its button, inside the window
+  }
+
+  function closePanels(atOnce = false) {
+    if (!openPanel) return false;
+    const panel = panels[openPanel];
+    opener[openPanel].setAttribute("aria-expanded", "false");
+    openPanel = null;
+    if (atOnce) panel.hidden = true;
+    fadeOut(panel, PANEL);
+    return true;
+  }
+
+  return {
+    node,
+    get visible() { return !node.hidden; },
+    holds: (target) => node.contains(target),
+    /** Close the colors or a list, if one is open (Esc); returns whether one was. */
+    closePanels,
+    /**
+     * Show over `rect` (the selected cells, window coordinates), centered above them. now: the
+     * cells' { color: { kind, color } | null (undefined: not the same in all), bold, aligns (aligns.mjs alignItems), merge }.
+     */
+    show(rect, now) {
+      state = now;
+      const { kind, color } = now.color ?? {};
+      sample.className = ["ge-ink-sample", color && (kind === "text" ? `doc-text-${color}` : `doc-highlight-${color}`)].filter(Boolean).join(" ");
+      sample.setAttribute("data-ring", kind === "background" ? color : "default");
+      tools.bold.setAttribute("aria-pressed", String(now.bold));
+      tools.align.innerHTML = (now.aligns.find((align) => align.current && !align.vertical) ?? now.aligns[0]).icon;
+      // 合并单元格 or 拆分单元格, or none (one plain cell).
+      tools.merge.hidden = !now.merge;
+      tools.merge.innerHTML = TABLE_ICONS[now.merge ?? "merge"];
+      tools.merge.setAttribute("aria-label", now.merge === "split" ? t("拆分单元格") : t("合并单元格"));
+      if (node.hidden) fadeIn(node, APPEAR);
+      const { offsetWidth: width, offsetHeight: height } = box;
+      const { left, top } = placeBox(rect, { width, height }, { placement: "top", align: "center", gap: GAP, margin: 12 });
+      node.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;
+    },
+    hide() {
+      closePanels(true);
+      node.hidden = true;
+    },
+  };
+}