@heycys/gallery 0.1.1 → 0.2.0

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

@@ -0,0 +1,288 @@
+import { IN_LAYER } from "../../../shared/layers.mjs";
+import { UNIT, can, isEmpty, isHost, newHost, removalTarget, takeOut, withLeads } from "../core.mjs";
+import { atEdge, caretAt, hosts } from "../caret.mjs";
+import { caretBeside } from "../beside.mjs";
+import { contentOf, extentOf } from "../geometry.mjs";
+import { FOLLOW, task } from "../frames.mjs";
+import { layerOf } from "../overlay-layer.mjs";
+import { onSettle, own } from "../overlays.mjs";
+import { addStyle, element } from "../ui.mjs";
+import { alignClass, shownAlign } from "../align.mjs";
+import { accepts, texOnly } from "../../components/registry.mjs";
+
+// The caret after a block (docs/editor.md, "The caret after a block"; the user's, 2026-11-09): a click
+// right of a block that is no text of its own (a picture, a table, a code block, a callout, a divider, a
+// card, an instance of a custom block, a row of columns…: insert/ boxedBeside, beside.mjs) puts a caret
+// at its bottom right, a blinking one, as the browser draws in text. Neither notion-lite nor
+// feishu-lite has one (Gallery's click there selected the block before); this is the plainest rule.
+// The text right below such a block comes back to it (the user's, 2026-11-09: Backspace there went
+// into the block, a table's last cell, a callout's box, or past it, a picture passed over): Backspace
+// at the start of the text block right after it (typing/, after the block's own keys and its
+// alignment), and ← or ↑ there, put this caret after it, an empty block left going as it does
+// (one undo step), one with words staying (no step); a second Backspace is this caret's.
+//
+//   Backspace, Delete   the block becomes an empty paragraph in its place, whatever follows it (the
+//                       user's, 2026-11-09; the box it stands in taking one), aligned as the block was
+//                       shown (a picture centred: centred, align.mjs shownAlign), the caret in it; one
+//                       more Backspace takes that alignment off (typing/: align.mjs unalign) before
+//                       anything else
+//   Enter               an empty paragraph right after it, the caret in it
+//   a key typed         a paragraph right after it holding what was typed, the caret at its end (an
+//                       input method composes in the caret, its words going there once it ends)
+//   ↑ ←, ↓ →            the text before it (its own last text: a table's last cell, a picture's caption),
+//                       or after it, at its end or start; none there, the caret stays
+//   Esc                 the block selected
+//   Ctrl+V              a paste goes into a new paragraph after it
+//
+// Each change is one undo step, the words typed going with the paragraph they made (history.mjs
+// typedInto), and undo puts this caret back after the block. The caret is an element of the editor's
+// layer (overlay-layer.mjs: the page's, a dialog's), never the report's: an empty field that takes the
+// focus, in the body text's font, at the block's right edge with its bottom on the block's, kept there
+// as the page moves (a task of frames.mjs); it goes with the focus, its block, or a press elsewhere.
+
+const STYLE = `
+  .ge-after { z-index: ${IN_LAYER.frame}; display: inline-block; min-width: 2px; margin: 0; padding: 0; border: 0; outline: none; white-space: pre; background: transparent; color: var(--doc-text, currentColor); caret-color: var(--doc-text, currentColor); pointer-events: none; }
+`;
+
+/**
+ * struct(parents, touched, mutate, options): the editor's undoable structural change (history.mjs).
+ * blocks(): the block tools (blocks.mjs). keepText(unit): why a block may not go. removeBlocks(units):
+ * the blocks deleted as the selected ones are (where no paragraph can take its place). say: the status
+ * line. undo(), redo(): the editor's.
+ */
+export function createAfter({ struct, blocks, keepText, removeBlocks, say, undo, redo }) {
+  addStyle(STYLE);
+  const node = element("span", { class: "ge-after", contenteditable: "true", spellcheck: "false", "data-doc-dev": "" });
+  let at = null; // the block the caret stands after
+
+  const follow = task("after", {
+    run() {
+      if (!at) return false;
+      if (!at.isConnected || at.getClientRects().length === 0) {
+        hide();
+        return false;
+      }
+      draw();
+      return FOLLOW;
+    },
+    fail: () => hide(),
+  });
+
+  // At the block's right edge, its bottom on the block's: as tall as a line of the body text of the box it stands in.
+  function draw() {
+    const rect = extentOf(at);
+    if (!rect) return;
+    const layer = layerOf(at);
+    if (node.parentNode !== layer) layer.append(node);
+    const origin = layer.getBoundingClientRect();
+    const height = node.offsetHeight || 24;
+    node.style.transform = `translate(${Math.round(rect.right + 1 - origin.left)}px, ${Math.round(rect.bottom - height - origin.top)}px)`;
+    own(node, "after", { owner: at, alive: () => Boolean(at) && at.isConnected });
+  }
+
+  /** The caret after block `unit`, focused. */
+  function place(unit) {
+    if (!unit?.isConnected) return;
+    blocks().clear();
+    at = unit;
+    // The body text's font of the box it stands in (what a paragraph there is typed in).
+    const style = getComputedStyle(unit.parentElement ?? document.body);
+    const size = parseFloat(style.fontSize) || 16;
+    const line = parseFloat(style.lineHeight) || size * 1.5;
+    Object.assign(node.style, { fontFamily: style.fontFamily, fontSize: `${size}px`, lineHeight: `${line}px`, height: `${line}px` });
+    node.textContent = "";
+    draw();
+    node.focus({ preventScroll: true });
+    const range = document.createRange();
+    range.setStart(node, 0);
+    getSelection().removeAllRanges();
+    getSelection().addRange(range);
+    follow.wake();
+  }
+
+  function hide() {
+    at = null;
+    node.textContent = "";
+    node.remove();
+  }
+
+  // What the caret stands after, the caret taken away (the focus going where the change puts it).
+  function take() {
+    const unit = at;
+    at = null;
+    node.textContent = "";
+    if (document.activeElement === node) node.blur();
+    node.remove();
+    return unit;
+  }
+
+  const takesParagraph = (box) => Boolean(box) && accepts(box.getAttribute("data-ge-box-kind") ?? "flow", "paragraph");
+
+  // A paragraph right after the block (`text` in it: what was typed), the caret at its end; one undo
+  // step, the words typed on into it with it (typedInto), undo putting this caret back after the block.
+  function paragraphAfter(text = "") {
+    const unit = at;
+    const box = unit?.parentElement;
+    if (!takesParagraph(box)) return null;
+    take();
+    const paragraph = newHost(document, "paragraph");
+    if (text) paragraph.textContent = text;
+    struct([box], [], () => {
+      unit.after(paragraph);
+      return { touched: [paragraph], focus: paragraph, settle: (backwards) => backwards && queueMicrotask(() => place(unit)) };
+    }, { typedInto: text ? paragraph : null });
+    caretAt(paragraph, "end");
+    return paragraph;
+  }
+
+  // Backspace, Delete: the block becomes an empty paragraph in its place, aligned as it was shown, the
+  // caret in it, whatever follows it (the user's, 2026-11-09: it was the text after it that took the
+  // caret, no paragraph made); where its box takes none, it is deleted as a selected block is. One undo
+  // step, which puts this caret back after the block.
+  function remove() {
+    const unit = at;
+    const reason = keepText(unit);
+    if (reason) {
+      say(reason, "note", 6000);
+      return;
+    }
+    const box = unit.parentElement;
+    if (!takesParagraph(box)) {
+      take();
+      removeBlocks([unit]);
+      return;
+    }
+    const parts = withLeads(unit);
+    const area = contentOf(box.getBoundingClientRect(), getComputedStyle(box));
+    const aligned = alignClass(shownAlign(unit.getBoundingClientRect(), area));
+    take();
+    const paragraph = newHost(document, "paragraph");
+    if (aligned) paragraph.classList.add(aligned);
+    struct([box], [], () => {
+      parts[0].before(paragraph);
+      parts.forEach((part) => part.remove());
+      return { touched: [paragraph], focus: paragraph, settle: (backwards) => backwards && queueMicrotask(() => place(unit)) };
+    });
+    caretAt(paragraph, "start");
+  }
+
+  // The block of no text right above text block `host` (one a click right of puts this caret after:
+  // beside.mjs caretBeside), shown: the block before it in its box, before a list's first item the one
+  // before the list; or null. `host` is the first text of its block (a paragraph, a heading, a list's
+  // first item), never a table's cell or a code block's text.
+  function above(host) {
+    if (!isHost(host) || texOnly(host) || !host.matches(UNIT)) return null;
+    let node = host;
+    while (!withLeads(node)[0].previousElementSibling && /^(UL|OL)$/.test(node.parentElement?.tagName ?? "") && node.parentElement.matches(UNIT)) node = node.parentElement;
+    const block = withLeads(node)[0].previousElementSibling;
+    return caretBeside(block) && block.parentElement?.hasAttribute("data-ge-box") && block.getClientRects().length > 0 && block.checkVisibility?.() !== false ? block : null;
+  }
+
+  /**
+   * Backspace at the start of text block `host` (typing/, after its own keys): the caret after the
+   * block of no text right above it, `host` going when it is empty (one undo step, undo putting the
+   * caret back in it, redo this caret after the block), staying when it holds words. Whether it did.
+   */
+  function back(host) {
+    const unit = above(host);
+    if (!unit) return false;
+    const node = isEmpty(host) && can(host, "remove") ? removalTarget(host) : null;
+    if (node && !keepText(node)) {
+      struct([node.parentNode], [host], () => {
+        takeOut(node);
+        return { touched: [], focus: null, settle: (backwards) => !backwards && queueMicrotask(() => place(unit)) };
+      });
+    }
+    place(unit);
+    return true;
+  }
+
+  /** ← or ↑ with the caret at the start of text block `host` (editor.mjs): the caret after the block above it, as back(). Whether it did. */
+  function up(host, key) {
+    if (key !== "ArrowLeft" && key !== "ArrowUp") return false;
+    const selection = getSelection();
+    if (!selection.rangeCount || !selection.isCollapsed || !atEdge(host, false)) return false;
+    const unit = above(host);
+    if (!unit) return false;
+    place(unit);
+    return true;
+  }
+
+  // ↑ ←: the text before the caret (the block's own last, or the one before it), at its end; ↓ →: the
+  // first after it, at its start. Formula blocks are passed over (no text to type in).
+  function leave(back) {
+    const unit = at;
+    const list = hosts().filter((host) => !texOnly(host));
+    const before = (host) => unit.contains(host) || Boolean(host.compareDocumentPosition(unit) & Node.DOCUMENT_POSITION_FOLLOWING);
+    const target = back ? list.filter(before).at(-1) : list.find((host) => !before(host));
+    if (!target) return;
+    take();
+    caretAt(target, back ? "end" : "start");
+  }
+
+  /** A key with the caret after a block (editor.mjs onKeydown, first): whether it was this caret's. */
+  function key(event) {
+    if (!at || event.target !== node) return false;
+    if (event.isComposing || event.keyCode === 229) return true; // an input method's: composed here, put in at its end
+    const mod = event.ctrlKey || event.metaKey;
+    const name = event.key.toLowerCase();
+    if (mod && !event.altKey && (name === "z" || name === "y")) {
+      event.preventDefault();
+      take();
+      name === "y" || event.shiftKey ? redo() : undo();
+      return true;
+    }
+    if (mod && !event.altKey && !event.shiftKey && name === "v") {
+      paragraphAfter(); // the paste that follows goes into it
+      return true;
+    }
+    if (mod && name === "s") return false; // saving, the editor's
+    if (event.key === "Backspace" || event.key === "Delete") remove();
+    else if (event.key === "Enter") paragraphAfter();
+    else if (event.key === "Escape") {
+      const unit = take();
+      blocks().select(unit);
+    } else if (event.key.startsWith("Arrow") && !mod && !event.altKey) leave(event.key === "ArrowUp" || event.key === "ArrowLeft");
+    else if (!mod && event.key.length === 1) return true; // a character: typed here, put in a paragraph (input)
+    else if (mod || event.key === "Tab") event.preventDefault(); // nothing to format or move: the keys do nothing here
+    else return true;
+    event.preventDefault();
+    return true;
+  }
+
+  // What was typed (a key's character, an input method's words once it ends): a paragraph after the
+  // block holding it.
+  node.addEventListener("input", (event) => {
+    if (event.isComposing || !at) return;
+    const text = node.textContent;
+    node.textContent = ""; // nothing stays in the field, wherever the words go (a box that takes no paragraph: nowhere)
+    if (text) paragraphAfter(text);
+  });
+  node.addEventListener("compositionend", (event) => {
+    if (!at) return;
+    const text = event.data || node.textContent;
+    node.textContent = "";
+    if (text) paragraphAfter(text);
+  });
+  // The focus gone elsewhere on the page (a press, a key that moved it): the caret goes. The window
+  // losing it keeps it, as the browser's own caret is kept.
+  node.addEventListener("blur", () => {
+    if (at && document.hasFocus()) hide();
+  });
+  // Its block taken off the page (an Agent's write, undo): it goes at once.
+  onSettle(() => {
+    if (at && !at.isConnected) hide();
+  });
+  globalThis.__galleryAfter = () => (at && document.activeElement === node ? at : null); // the block the caret stands after (the browser tests)
+
+  return {
+    place,
+    key,
+    back,
+    up,
+    /** The block the caret stands after, or null. */
+    get block() { return at; },
+    /** The editor's UI nodes to keep in the top layer when a modal dialog opens. */
+    get nodes() { return node.isConnected ? [node] : []; },
+  };
+}

package/browser/editor/page/align.mjs

@@ -0,0 +1,91 @@
+import { ALIGNS, ALIGN_TOGGLES, INDENT_MOST, alignLook, alignOf, aligns, indentLook, indentOf, indents } from "../components/align.mjs";
+import { TOGGLES } from "../components/registry.mjs";
+import { svg } from "../components/icons.mjs";
+import { TABLE_ICONS } from "./table/icons.mjs";
+import { t } from "../../shared/i18n/index.mjs";
+
+// 对齐与缩进 (docs/editor.md, "Alignment and indent"; Feishu's 缩进和对齐 ›, its block menu's), shared by
+// the tools that use it (block-menu/, typing/, after/): a
+// paragraph's or a heading's alignment and indent, class switches its component takes (components/
+// align.mjs) that the file keeps and the kit draws; a table's frame takes the alignment alone (it is
+// placed on the page left, centred or right, as a text block's words are), by the same row, named 对齐.
+// The block menu's row (block-menu/), for one block or
+// for several selected that all take them, one undo step; Enter carrying them to the block it makes
+// (core.mjs newBlock: components/align.mjs carry), and Backspace at a block's start taking them off before anything else
+// (typing/: unalign), one at a time: a centred or right-aligned block to the left, then its indent a
+// level less (Feishu's text block: 退对齐, then 反缩进, then 合并到上一块), each one undo step, the caret
+// staying at the start. The same for a paragraph left in a block's place by Backspace after it
+// (after/): it takes the alignment the block showed.
+
+// Its icons, in the menus' lines (20 units, the table's alignments beside them): text lines the middle
+// two moved in (the row), and the same with an arrow in (增加缩进) or out (减少缩进) at their left.
+const LINES = '<path d="M3.75 4.75h12.5M9.25 8.5h7M9.25 11.75h7M3.75 15.25h12.5"/>';
+export const ALIGN_ICONS = {
+  row: svg('<path d="M3.75 4.75h12.5M7.25 8.5h9M7.25 11.75h9M3.75 15.25h12.5"/>'),
+  left: TABLE_ICONS["doc-align-left"],
+  center: TABLE_ICONS["doc-align-center"],
+  right: TABLE_ICONS["doc-align-right"],
+  indent: svg(`${LINES}<path d="m3.75 7.9 2.25 2.25-2.25 2.25"/>`),
+  outdent: svg(`${LINES}<path d="M6 7.9 3.75 10.15 6 12.4"/>`),
+};
+
+const LABELS = { left: t("左对齐"), center: t("居中对齐"), right: t("右对齐") };
+
+/** Whether a block takes an alignment: its kind's class switches hold it (`kind`: its unit kind). */
+export const alignable = (kind) => aligns(TOGGLES[kind]);
+
+/** Whether a block takes an indent too, as a text block does (`kind`: its unit kind). */
+export const indentable = (kind) => indents(TOGGLES[kind]);
+
+/**
+ * The block menu's 对齐与缩进 › for `units` (one block, or several selected), when they all take one
+ * (kindOf(unit): its unit kind), or none: the three alignments (the one they share checked), then 增加缩进
+ * and 减少缩进 (each a level for every one of them, disabled where none can go further), one undo step
+ * each (look: the editor's change of classes). Where they do not all take an indent (a table's frame
+ * has none) the row is 对齐 › with the three alignments alone.
+ */
+export function alignRows(units, { kindOf, look }) {
+  if (units.length === 0 || !units.every((unit) => alignable(kindOf(unit)))) return [];
+  const shared = units.every((unit) => alignOf(unit) === alignOf(units[0])) ? alignOf(units[0]) : null;
+  const withIndent = units.every((unit) => indentable(kindOf(unit)));
+  const levels = units.map(indentOf);
+  const indent = (step) => look(units, units.map((unit) => indentLook(Math.max(0, Math.min(INDENT_MOST, indentOf(unit) + step)))), units);
+  return [{
+    label: withIndent ? t("对齐与缩进") : t("对齐"), icon: ALIGN_ICONS.row,
+    submenu: () => [
+      ...["left", "center", "right"].map((name) => ({ label: LABELS[name], icon: ALIGN_ICONS[name], current: shared === name, run: () => look(units, alignLook(name), units) })),
+      ...(withIndent ? [
+        { separator: true },
+        { label: t("增加缩进"), icon: ALIGN_ICONS.indent, disabled: levels.every((level) => level >= INDENT_MOST), run: () => indent(1) },
+        { label: t("减少缩进"), icon: ALIGN_ICONS.outdent, disabled: levels.every((level) => level === 0), run: () => indent(-1) },
+      ] : []),
+    ],
+  }];
+}
+
+/**
+ * Backspace at the start of text block `host` (typing/): its alignment taken off (to the left), else its
+ * indent a level less, one undo step (look), the caret where it is. Returns whether it did either.
+ */
+export function unalign(host, look) {
+  if (!indentable(host.getAttribute?.("data-ge-unit-kind")) || !ALIGN_TOGGLES.some((name) => host.classList.contains(name))) return false;
+  if (alignOf(host) !== "left") return look(host, alignLook("left"));
+  return look(host, indentLook(indentOf(host) - 1));
+}
+
+/**
+ * The alignment a block shows in the text area of the box it stands in (`area`: that area's rect,
+ * window coordinates): "center" or "right" when it is narrower and stands there, else "left" (a
+ * block as wide as the area has none). How a picture, a card or a table set narrower is placed,
+ * whatever says so (its class, its margins): what the reader sees.
+ */
+export function shownAlign(rect, area) {
+  const left = rect.left - area.left;
+  const right = area.right - rect.right;
+  if (left <= 2 && right <= 2) return "left";
+  if (Math.abs(left - right) <= 2) return "center";
+  return right <= 2 ? "right" : "left";
+}
+
+/** The class that gives a new paragraph the alignment `name`, or null for the left. */
+export const alignClass = (name) => ALIGNS[name] ?? null;

package/browser/editor/page/annotate/card.mjs

@@ -32,8 +32,7 @@ export const STYLE = `
   .ge-note-marker { width: ${RAIL.marker}px; height: ${RAIL.marker}px; box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; display: grid; place-items: center; color: var(--ge-ico2); cursor: pointer; pointer-events: auto; }
   .ge-note-marker svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
   .ge-note-marker[hidden], .ge-note-card[hidden] { display: none; }
-  .ge-note-marker:hover, .ge-note-marker[data-hot] { background: var(--ge-hover); color: var(--ge-ico); }
-  .ge-note-marker:active { background: var(--ge-press); }
+  .ge-note-marker[data-hot] { background: var(--ge-hover); color: var(--ge-ico); }
   .ge-note-marker:focus-visible { outline: 2px solid var(--ge-focus); outline-offset: -2px; }
   /* The card, where the format bar would stand: a popover as the bar is, as wide as ${RAIL.card}px or the column. Its face is what shows; the card itself stands still, so a face going left under the pointer keeps it. */
   .ge-note-card { z-index: 1; width: ${RAIL.card}px; box-sizing: border-box; color: var(--ge-tx); pointer-events: auto; cursor: text; }
@@ -60,8 +59,6 @@ export const STYLE = `
   .ge-note-card[data-long][data-top] textarea { --top: 28px; }
   /* Its delete button, on the field's first line, in the room the field leaves it. */
   .ge-note-delete { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; display: grid; place-items: center; color: var(--ge-ico3); cursor: pointer; }
-  .ge-note-delete:hover { background: var(--ge-hover); }
-  .ge-note-delete:active { background: var(--ge-press); }
   .ge-note-delete svg { width: 18px; height: 18px; pointer-events: none; }
   .ge-note-bar { width: 2px; border-radius: 1px; background: var(--ge-note-line); }
   .ge-note-bar[data-hot] { background: var(--ge-note-hot-line); }
@@ -74,13 +71,13 @@ export const STYLE = `
 export const layerNode = () => element("div", { class: "ge-note-layer", "data-doc-dev": "" });
 
 export function markerNode(id) {
-  return element("button", { type: "button", class: "ge-note-marker", "data-note": id, "aria-label": t("批注"), tabindex: "-1", html: MARKER_ICON });
+  return element("button", { type: "button", class: "ge-note-marker ge-icon-btn", "data-note": id, "aria-label": t("批注"), tabindex: "-1", html: MARKER_ICON });
 }
 
 /** A card: a plain-text field, and the button that deletes what it holds, on its face. */
 export function cardNode() {
   const field = element("textarea", { rows: "1", spellcheck: "false", maxlength: TEXT_MOST, placeholder: t("写下建议…"), "aria-label": t("批注") });
-  const erase = element("button", { type: "button", class: "ge-note-delete", "aria-label": t("删除批注"), tabindex: "-1", html: ICONS.trash });
+  const erase = element("button", { type: "button", class: "ge-note-delete ge-icon-btn", "aria-label": t("删除批注"), tabindex: "-1", html: ICONS.trash });
   tooltip(erase, t("删除批注"));
   return { node: element("div", { class: "ge-note-card", role: "group" }, element("div", { class: "ge-note-face" }, field, erase)), field, erase };
 }