@heycys/gallery 0.1.2 → 0.2.1

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

@@ -1,3 +1,4 @@
+import { IN_LAYER } from "../../../shared/layers.mjs";
 import { tooltip } from "../../page/tooltip.mjs";
 import { element } from "../../page/ui.mjs";
 
@@ -7,7 +8,7 @@ import { element } from "../../page/ui.mjs";
 
 /** The toolbar's look, and its buttons' (a popover's too: an image's 对齐 pops three of them). */
 export const TOOLBAR_STYLE = `
-  .ge-layer > .ge-media-bar { pointer-events: auto; }
+  .ge-layer > .ge-media-bar { pointer-events: auto; z-index: ${IN_LAYER.button}; } /* over its block's fill while the block is selected */
   .ge-media-bar { display: flex; padding: 2px; border-radius: 6px; background: var(--ge-bg);
     box-shadow: 0 0 0 1px var(--ge-outline), 0 4px 12px -2px light-dark(rgb(25 25 25 / 8%), rgb(0 0 0 / 30%)); }
   .ge-media-tool { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; color: var(--ge-ico2); cursor: pointer; user-select: none; transition: background 20ms ease-in; }
@@ -21,11 +22,19 @@ export const mediaBar = (label) => element("div", { class: "ge-media-bar", role:
 /**
  * A toolbar button: `label` (what it is), `tip` (the tooltip), `icon` (an svg, or a function giving
  * it, drawn by draw() each time the bar is shown), `run(button)` on a click while `alive()` (the block it stands for is
- * still on the page).
+ * still on the page). draw() puts a new icon in only when it changed: a bar placed every frame (an
+ * image's, while it is selected) that put its icons in anew each time took the svg a press landed on
+ * out of the page before the button was let go, and the browser then fired no click (2026-11-09).
  */
 export function toolButton({ label, tip, icon, run, alive }) {
   const button = element("div", { class: "ge-media-tool", role: "button", "aria-label": label });
-  button.draw = () => { button.innerHTML = typeof icon === "function" ? icon() : icon; };
+  let drawn = null;
+  button.draw = () => {
+    const markup = typeof icon === "function" ? icon() : icon;
+    if (markup === drawn) return;
+    drawn = markup;
+    button.innerHTML = markup;
+  };
   if (typeof icon !== "function") button.draw(); // a function icon depends on the block: drawn when the bar is shown
   tooltip(button, tip);
   button.addEventListener("pointerdown", (event) => event.preventDefault());

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

@@ -1,5 +1,6 @@
 import { svg } from "../icons.mjs";
 import { PARAGRAPH, classOf } from "../kit.mjs";
+import { ALIGN_TOGGLES } from "../align.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
 // 文本 and 小字: the plain text blocks. A paragraph is the editor's default block: Enter makes one,
@@ -8,7 +9,7 @@ import { t } from "../../../shared/i18n/index.mjs";
 // default, a paragraph is the engines' own: core.mjs (newHost, splitBlock), insert/
 // (paragraphBefore, newParagraph, clickBlank), convert.mjs (typeOf tells 小字 from text), clipboard/own/
 // (a text block's description is the engine's own, and a block that says no kind is written as a paragraph).
-// Its color (颜色 in the block menu): class switches, colors.mjs.
+// Its color (颜色 in the block menu): class switches, colors.mjs; its alignment and indent (对齐与缩进), align.mjs.
 // Its look: the kit's styles/flow.css (src/render/kit/).
 /** The class of small text's end part (the page editor's Tab), a span at the line's right end (the kit's styles/flow.css). */
 export const TAB = classOf(PARAGRAPH.tail);
@@ -23,7 +24,7 @@ export default {
   name: "paragraph",
   listed: () => t("文本"), hideable: false,
   units: {
-    paragraph: { name: t("文本"), match: [{ rank: 180, tag: "p" }], colors: ["text", "background"], emptyIsNothing: true, fromWords: true },
+    paragraph: { name: t("文本"), match: [{ rank: 180, tag: "p" }], colors: ["text", "background"], toggles: ALIGN_TOGGLES, emptyIsNothing: true, fromWords: true, replacedByFile: true },
   },
   types: {
     paragraph: {
@@ -34,7 +35,7 @@ export default {
     },
     note: { // 小字: a brief label, unit or scope note
       turn: 2, menu: ["basic", 2],
-      tag: "p", className: "doc-note", kind: "paragraph", leaf: "note", text: true, empty: true,
+      tag: "p", className: "doc-note", kind: "paragraph", leaf: "note", text: true, empty: true, emptyToText: true,
       corner: "paragraph", // seldom picked: the gray corner of 文本's cell (type-grid.mjs), so 文本 and the headings fill one line
       label: t("小字"), icon: svg('<path d="M6.25 8.5v-.9h7.5v.9M10 7.6v8.15M8.75 15.75h2.5"/>'), words: "小字 注释 说明 备注 标注 xiaozi zhushi shuoming beizhu xz zs sm note small caption",
       glance: { row: 11, name: "小字", write: "`<p class=\"doc-note\">`, `span.doc-tab` at its right", rule: "Kit blocks" },

package/browser/editor/components/registry.mjs

@@ -44,7 +44,7 @@ import { t } from "../../shared/i18n/index.mjs";
 //               without. What is hidden goes from "/", 在下方新建 and the handle's grid and nothing else
 //               (page/offered.mjs); its blocks, its Markdown shortcut and "Blocks at a glance" stay.
 //   units       the unit kinds it defines (blocks the reader selects, moves and deletes):
-//               { [kind]: { name, icon?, match, chapter?, fixed?, block?, handle?, below?, boxed?, beside?, inRow?, sharesHeight?, entersAfter?, resizable?, copy?, clipboard?, sizes?, toggles?, colors?, colorDefaults?, removedEmpty?, turnsEmpty?, leadsChapter?, canHaveChildren?, emptyIsNothing?, fromWords?, attributes? } }
+//               { [kind]: { name, icon?, match, chapter?, fixed?, block?, handle?, below?, boxed?, beside?, inRow?, sharesHeight?, entersAfter?, resizable?, copy?, clipboard?, sizes?, toggles?, colors?, colorDefaults?, removedEmpty?, turnsEmpty?, leadsChapter?, canHaveChildren?, emptyIsNothing?, fromWords?, replacedByFile?, attributes? } }
 //               match: rules an element matches by its tag (one of `tag`), its class and its
 //               attribute, and by the element it stands in (`parent`: { tag?, class? }, a flowchart's
 //               step being an li whose parent is an ol.doc-flow), whichever are given; every
@@ -58,7 +58,7 @@ import { t } from "../../shared/i18n/index.mjs";
 //               (its container's: a tab's, the Sheet area's, on the tab row); below: false, its menu
 //               offers no new block below it (a tab, a Sheet area); boxed: a block with a frame of its
 //               own, no text flowing beside it: a double click between two of them makes a paragraph,
-//               a click to its right selects it, Enter on it selected puts a paragraph after it unless
+//               a click to its right puts the caret after it (page/after/), Enter on it selected puts a paragraph after it unless
 //               it is a text block (beside.mjs), and it is a block of its own to Ctrl+A; beside: the
 //               same click and Enter without being boxed (a row of columns); inRow(element): whether
 //               this one stands beside another now, as a row of columns always does and a flowchart's
@@ -91,6 +91,8 @@ import { t } from "../../shared/i18n/index.mjs";
 //               keys of a block stand after it as they stand in what it is in (a list: under its last item).
 //               emptyIsNothing: a block of it left empty counts as nothing written, in a container
 //               that says `removedEmpty`. fromWords: a block of it can be made again from its words alone.
+//               replacedByFile: a file pasted at the caret in an empty block of it takes the block's place (notion-lite's
+//               pasteFiles: an empty text block goes), else it goes after the block (page/clipboard/).
 //   boxes       the box kinds it defines (containers whose children are units): { [kind]: { role,
 //               name?, classes?, find?, owner?, takenBy?, also?, leaveByEnter?, endIsPadding?, lead?, firstLineActs?, firstBlock?, groups?, holdsOne?, emptyIsNothing?, outer?, selectAll? } }, classes being the kit's classes that make an element one
 //               (rank order, as above); the others the server knows by their tag (findUnits). find: where
@@ -165,7 +167,7 @@ import { t } from "../../shared/i18n/index.mjs";
 //   types       the blocks the reader can make on the page or turn a block into (the "/" menu,
 //               Markdown shortcuts, the block menu), written by the server in the kit's plain markup:
 //               { [type]: { tag, className?, kind, box?, leaf?, wraps?, container?, part?, text?, inside?, tex?,
-//               empty?, resettable?, bare?, placeholder?, bar?, label?, icon?, hint?, markdown?, words?, turn?, menu?, fresh?,
+//               empty?, resettable?, emptyToText?, bare?, placeholder?, bar?, label?, icon?, hint?, markdown?, words?, turn?, menu?, fresh?,
 //               corner?, preload?, onSplit?, create?, takesAsIs?, holder?, nests?, joins?, leadIcon?, fromSelection?, clipboard?, glance? } } and, for the blocks the page
 //               and the server write apart from text, title?, content?, keyed?, written?,
 //               extras?, textHost?, blanks?, blankSays? (what each says is at its component). Leaves hold
@@ -174,7 +176,8 @@ import { t } from "../../shared/i18n/index.mjs";
 //               giving its markup, its words in the language t() says them in: components/placeholder.mjs
 //               mediaBar); resettable: an empty block of the type
 //               turns into body text on Enter, and the first of its container on Backspace at its start (a
-//               quote's paragraph, a list item: notion-lite's `resettable`, typing/leave.mjs). leaf: the text block a block turned
+//               quote's paragraph, a list item: notion-lite's `resettable`, typing/leave.mjs); emptyToText: Backspace in an
+//               empty block of the type turns it into an empty paragraph where it stands (a heading, small text: typing/leave.mjs). leaf: the text block a block turned
 //               into the type becomes; wraps: such a text block sits in a container of the type, found
 //               by `container` (a selector); text: a plain text leaf; empty: a leaf written with no
 //               text too (a paragraph, a heading, a list item, a code block: an empty
@@ -436,6 +439,12 @@ export const CATEGORY_NAMES = Object.fromEntries(Object.entries(CATEGORIES).map(
  */
 export const COPIED_AS_ITSELF = new Set(Object.entries(UNITS).filter(([kind, unit]) => UNIT_CATEGORY[kind] === "card" || unit.copy === "itself").map(([kind]) => kind));
 
+/**
+ * The unit kinds drawn with no selection fill while selected alone (their own tools show it), each with
+ * the selector its element must hold for that (an image with its picture: a placeholder is filled).
+ */
+export const UNFILLED_ALONE = Object.fromEntries(Object.entries(UNITS).filter(([, unit]) => unit.unfilled).map(([kind, unit]) => [kind, unit.unfilled]));
+
 /** What the reader calls each kind of unit (block labels while dragging, the block menu). */
 export const KIND_NAMES = Object.fromEntries(Object.entries(UNITS).filter(([, unit]) => unit.name).map(([kind, unit]) => [kind, unit.name]));
 
@@ -744,6 +753,9 @@ export const removedFromAnywhere = (kind) => UNITS[kind]?.removedEmpty === "anyw
 const NOTHING_EMPTY = flagged("emptyIsNothing");
 export const TEXT_BLOCKS = [...new Set(Object.values(BLOCK_TYPES).filter((spec) => NOTHING_EMPTY.has(spec.kind)).map((spec) => spec.tag)), ...Object.values(BOXES).filter((box) => box.emptyIsNothing).flatMap((box) => box.classes.map((rule) => `.${rule.class}`))].join(", ");
 
+/** Whether an empty unit of this kind gives its place to a file pasted at its caret (`replacedByFile`). */
+export const replacedByFile = (kind) => Boolean(UNITS[kind]?.replacedByFile);
+
 /** Whether what a unit of this kind is turned into is an empty block in its place (`turnsEmpty`). */
 export const turnsEmpty = (kind) => Boolean(UNITS[kind]?.turnsEmpty);
 
@@ -777,7 +789,7 @@ export const hasOuter = (boxKind) => BOXES[boxKind]?.outer !== false;
 /** The unit kinds with a frame of their own (`boxed`): a double click between two makes a paragraph (insert/). */
 export const BOXED = flagged("boxed");
 
-/** The unit kinds a click to the right of one, past the text area it stands in, selects: the boxed ones and those that say `beside` (beside.mjs). */
+/** The unit kinds a click to the right of one puts the caret after (page/after/): the boxed ones and those that say `beside` (beside.mjs). */
 export const BESIDE = new Set([...BOXED, ...flagged("beside")]);
 
 /** Whether a unit of this kind stands beside another now, `element` being that unit (`beside`, `inRow`). */

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

@@ -1,3 +1,4 @@
+import { ALIGN_PLACES } from "../align.mjs";
 import { BLOCK_COLORS } from "../colors.mjs";
 import { svg } from "../icons.mjs";
 import { SPAN } from "../../../shared/media.mjs";
@@ -53,10 +54,11 @@ export default {
         { rank: 90, class: "doc-table-wrap" },
       ],
       boxed: true,
+      toggles: ALIGN_PLACES, // the table placed on the page, at the left (the kit's own), centred or at the right: 对齐 ›, a text block's classes (align.mjs)
       resizable: ".doc-table-wrap[data-ge-unit]", // its right and bottom edges, once it is in the file
       copy: "itself", // within the report a copy keeps all of its markup (its scope line, its frame's size); another report's gets the table's data (tableData) made anew
-      // 识别数字列 off, and the key a chart or a view reads it by (src/shared/table-chart.mjs), which 视图 ›
-      // of its menu puts on a table that has none (page/table/views.mjs) in the step that puts the view in.
+      // 识别数字列 off, and the key a chart or a view reads it by (src/shared/table-chart.mjs), which a view
+      // made from a menu puts on a table that has none (page/table/binding.mjs) in the step that makes the view.
       attributes: { [NUMBERS]: (value) => value === "off", [CHART_SOURCE]: (value) => CHART_KEY.test(value) },
       sizes: {
         [SPAN]: { min: 0.15, max: 3 }, // past 1 the table is wider than the text and scrolls in its frame

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/beside.mjs

@@ -6,16 +6,15 @@ import { isHost } from "./core.mjs";
 // (selection/).
 
 /**
- * Whether a click to the right of a block, past the text area it stands in (insert/ boxedBeside),
- * selects it: a boxed block (a code block, a highlight block, a disclosure, a card, a table, a
- * divider…) or a row of columns, as opposed to text and the boxes text flows in (a list, a quote, a
- * section).
+ * Whether a click to the right of a block (insert/ boxedBeside) puts the caret after it (after/): a
+ * boxed block (a code block, a highlight block, a disclosure, a card, a table, a divider…) or a row
+ * of columns, as opposed to text and the boxes text flows in (a list, a quote, a section).
  */
-export const selectsBeside = (unit) => BESIDE.has(unit?.getAttribute?.("data-ge-unit-kind"));
+export const caretBeside = (unit) => BESIDE.has(unit?.getAttribute?.("data-ge-unit-kind"));
 
 /**
  * Whether Enter on a block selected (the first of those selected) puts a new paragraph after them
  * (blocks.mjs, insert.paragraphAfter): a block of no text of its own, those a click to their right
- * selects and a 选项卡区块; not a text block among them (a formula block, whose editor it opens).
+ * puts the caret after and a 选项卡区块; not a text block among them (a formula block, whose editor it opens).
  */
 export const entersAfter = (unit) => Boolean(unit) && !isHost(unit) && ENTERS_AFTER.has(unit.getAttribute("data-ge-unit-kind"));

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

@@ -10,6 +10,7 @@ import { columnOps, menuRow, pageOfUnit, rowBeside, sectionOps } from "../page-o
 import { MENU_COLUMNS, MENU_WIDTH, typeGrid } from "../type-grid.mjs";
 import { rememberType, typeItems } from "../slash-menu/index.mjs";
 import { COLOR_ICON, COLOR_WIDTH, colorItems } from "./colors.mjs";
+import { alignRows } from "../align.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
 // The block menu (docs/editor.md, "Deleting blocks" and "New blocks and conversions"; the card is
@@ -30,7 +31,8 @@ import { t } from "../../../shared/i18n/index.mjs";
 // "分区与分栏 ›" (组成新分区 for neighbours in the page or a Sheet panel, 解散所在分区 for blocks all in
 // one section, 分成 n 栏 for neighbours side by side, a column each) and deleting them all. A block that
 // takes a color (a paragraph, a heading: components/colors.mjs) has "颜色 ›" right below its types,
-// as Notion's (colors.mjs); so do several selected ones that all take one. It keeps clear of the block, or stands right of a section's bar.
+// as Notion's (colors.mjs); so do several selected ones that all take one. A paragraph and a heading
+// have "对齐与缩进 ›" right above it (align.mjs, Feishu's 缩进和对齐 ›), several selected that all take one too. It keeps clear of the block, or stands right of a section's bar.
 // A component whose block has a menu of its own gives it (`menu`): a Sheet tab's is Notion's tab
 // menu, below the tab (components/sheets/page.mjs): 重命名, 编辑图标 and 删除. A block that turns into
 // nothing has its name at the head (`nameOf`), with its mark where its component has one (`iconOf`:
@@ -147,7 +149,7 @@ export function createBlockMenu({ info, menu, selection, remove, takenWith = (un
         }, { columns: COLUMNS });
         items.push({ node: grid, cells: [...grid.querySelectorAll(".ge-type")], columns: COLUMNS }, { separator: true });
       }
-      const colors = colorRow(group);
+      const colors = [...alignRows(group, { kindOf, look }), ...colorRow(group)];
       items.push(...colors, ...(colors.length > 0 ? [{ separator: true }] : []));
       // Blocks next to each other in the page or a Sheet panel become a section; a selection with gaps does not.
       // A folded heading among them goes in with what it hides (fold/).
@@ -171,7 +173,8 @@ export function createBlockMenu({ info, menu, selection, remove, takenWith = (un
     }
     // A highlight block's icon (添加图标 / 更换图标: components/icon/page.mjs rowBeside) beside its color.
     const icon = rowBeside(target);
-    if (colorable(target) || icon) items.push(...(colorable(target) ? colorRow([target]) : []), ...(icon ? [icon] : []), { separator: true });
+    const aligned = alignRows([target], { kindOf, look });
+    if (aligned.length > 0 || colorable(target) || icon) items.push(...aligned, ...(colorable(target) ? colorRow([target]) : []), ...(icon ? [icon] : []), { separator: true });
     // A component's own rows (an image's: components/image/page.mjs; a table's, with its size's
     // 铺满正文宽度…; a card's, a code block's, a Sheet area's), one group, from its page module.
     const own = pageOfUnit(target)?.menuItems?.(target) ?? [];

package/browser/editor/page/blocks.mjs

@@ -67,7 +67,8 @@ export function createBlocks({ slug = "", units, boxes, active, struct, look, sa
   const blockMenu = createBlockMenu({ info, menu, selection, remove: (targets) => remove(targets), takenWith: folds.takenWith, turnInto, convert, turnIntoAll, convertAll, below, belowTypes, add, look, copyLink, linkAhead });
   const handle = createHandle({ info, active, selection, drag, menu, openMenu: blockMenu.open, drawing: () => marquee.drawing, schedule, keeps: (node) => keepsHandle(node) || folds.holds(node), aside: folds.holds, add: (target, where) => { selection.clear(); addNear(target, where); }, notes });
   const remove = createDelete({ info, selection, struct, say, closeMenu, forget: () => handle.forget(), folds });
-  // What a component makes with these tools (`blockTools`): a Sheet's tabs as Notion's pills, a click, a drag, their menu, + (components/sheets/pills.mjs).
+  // What a component makes with these tools (`blockTools`): a Sheet's tabs as Notion's pills, a click, a drag, their menu, + (components/sheets/pills.mjs);
+  // an image's grips and bar while it is the one block selected (components/image/page.mjs), placed in this task's frames (`follow`).
   const parts = pageObjects().flatMap((page) => page.blockTools?.({ active, drag, menu, openMenu: blockMenu.open, struct, say }) ?? []);
   // A press on empty space: a box selection, or a click there (marquee.mjs clears the selection).
   const marquee = createMarquee({
@@ -91,6 +92,7 @@ export function createBlocks({ slug = "", units, boxes, active, struct, look, sa
     step("selection", () => selection.paint(drag.active), () => selection.unpaint());
     step("handle", () => handle.place(), () => handle.hide());
     step("fold", () => folds.place(handle.pointed), () => folds.hide());
+    step("parts", () => parts.forEach((part) => part.follow?.(drag.active ? [] : selection.picked)), () => parts.forEach((part) => part.hide()));
     if (drag.active) return true;
     return handle.showing || folds.showing || selection.picked.length > 0 ? FOLLOW : false;
   }