@heycys/gallery 0.1.1 → 0.2.0

package/browser/editor/page/custom-page.mjs

@@ -0,0 +1,110 @@
+import { startBoard } from "./board/index.mjs";
+import { relayTo } from "./notices.mjs";
+import { connectWorkbench } from "./session.mjs";
+
+// A custom page inside a workbench (src/server/routes.mjs serves it at /pages/<slug> with this module;
+// docs/workbench.md "Custom pages"): no document editor, the session, by which the workbench shows it
+// as it shows a document's page, and its boards' editing (./board/: the cards moved, resized, added,
+// taken out, their settings and their blocks' writes, through the page service, by the page map the
+// server writes in its head), which shows the page again only once nothing of it waits. Its session's
+// slug is "@<slug>", the page's address in the workbench (#@<slug>), which no document's slug can be.
+// It answers the session's own commands (theme, keys, scroll-top: src/editor/page/session.mjs),
+// prepare-close (once the board's ops sent are answered: each is written at once, nothing else waits),
+// add-card where it has a board (the top bar's 添加自定义块: the library of the page's first board, under the
+// button's place that the workbench sends; a page with none, a blank one or one an Agent wrote with no
+// board, offers no 添加自定义块) and, on a page with the default cards (its page map's `defaults`: its
+// page.json's defaultCards, the default home page's), restore-defaults (恢复默认卡片, its menu's: the board's,
+// one step of its undo; its answer { ok, added, skipped } the workbench says) and undo-restore ({ cards }:
+// that step undone while it is the board's last, the workbench's 撤销),
+// and sends ready, reload (its live script heard that page.html or page.json changed, or a block it
+// holds: the workbench loads it again in a hidden frame and swaps it in once drawn), open (a link to a
+// document or another page, or a block's context.workspace.open: doc-open-request) and key. Opened on its own (not in a frame of the workbench), it has no
+// session: its board edits all the same, and the live script reloads it.
+
+const slug = decodeURIComponent(location.pathname.split("/")[2] ?? "");
+const IDLE = { editing: false, pending: false, saving: false, offline: false, conflicts: 0, unfit: 0, changed: false };
+// Nothing stands over a custom page as a modal.
+const NO_MODALS = { open: () => [], listen() {}, closeTop: () => false };
+
+// The page map (routes.mjs: its slug, its token, the version it was served at, its blocks): the boards edit.
+let map = null;
+try {
+  map = JSON.parse(document.querySelector("script[data-ge-page]")?.textContent ?? "null");
+} catch {}
+const hasBoard = Boolean(document.querySelector(".gallery-board"));
+
+let board = null;
+const session = connectWorkbench({
+  slug: `@${slug}`,
+  snapshot: () => ({ title: document.title, icon: null, state: IDLE }),
+  commands: {
+    "prepare-close": async () => {
+      await board?.idle();
+      return { ok: true };
+    },
+    // 添加自定义块 of the workbench's top bar: the library opens in the page, at `anchor` (the button's place in
+    // this frame's coordinates; none: in the middle of the window), the first board's.
+    ...(hasBoard ? { "add-card": async ({ anchor } = {}) => (board ? board.addCard({ anchor }) : { ok: false, reason: "board" }) } : {}),
+    ...(map?.defaults ? {
+      "restore-defaults": async () => (board ? board.restoreDefaults() : { ok: false, reason: "board" }),
+      "undo-restore": async ({ cards }) => (board ? board.undoRestore(cards) : { ok: false, reason: "board" }),
+    } : {}),
+  },
+  modals: NO_MODALS,
+});
+
+board = map?.token ? startBoard({ map, reload: () => (session ? session.reload() : location.reload()), hosted: Boolean(session) }) : null;
+// The live script (routes.mjs) shows the page again through the workbench, which swaps a new page in
+// once drawn: no reload seen; once the board's own writes, a drag, a form or a field typed in are done.
+if (board) window.__galleryEditReload = () => board.swap();
+
+if (session) {
+  // Its notices (a card someone else changed) are the workbench's toasts, as a document's page's are.
+  relayTo(session.notice, session.noticeRoom);
+  if (!board) window.__galleryEditReload = () => session.reload();
+
+  // A block's context.workspace.open (the kit's runtime/workspace.js: 我的待办's item, 最近编辑's
+  // document): a document, at its block where it names one, or a custom page, opened in the workbench.
+  addEventListener("doc-open-request", (event) => {
+    const { slug = null, block = null, page = null } = event.detail ?? {};
+    event.preventDefault();
+    session.open(page ? { hash: `@${page}` } : { target: slug, block });
+  });
+
+  // A link to a document or a page of the workbench goes there in the workbench, never in this frame:
+  // a workbench's address (#<link>, #@<slug>, /#…), a document's page (/generated/<slug>.html) or its
+  // file (../<slug>/doc.html), a custom page's served path (/pages/<slug>, the page alone that gallery
+  // page open gives, or written relative to this one: "reading" from /pages/home). Another site's
+  // opens in a tab of its own.
+  addEventListener("click", (event) => {
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    const link = event.target instanceof Element ? event.target.closest("a[href]") : null;
+    if (!link || link.hasAttribute("download")) return;
+    const raw = link.getAttribute("href") ?? "";
+    // A place in this page (an element of that id) is the browser's to go to.
+    if (raw.startsWith("#") && raw.length > 1 && document.getElementById(decodeURIComponent(raw.slice(1)))) return;
+    let url;
+    try {
+      url = new URL(raw, location.href);
+    } catch {
+      return;
+    }
+    if (url.origin !== location.origin) {
+      event.preventDefault();
+      window.open(url.href, "_blank", "noopener");
+      return;
+    }
+    const custom = /^\/pages\/([a-z0-9-]+)\/?$/.exec(url.pathname)?.[1];
+    const page = /^\/generated\/([a-z0-9-]+)\.html$/.exec(url.pathname)?.[1] ?? /^\/([a-z0-9-]+)\/(?:doc|report)\.html$/.exec(url.pathname)?.[1];
+    if (custom) {
+      event.preventDefault();
+      session.open({ hash: `@${custom}` });
+    } else if (page) {
+      event.preventDefault();
+      session.open({ target: page, block: url.hash.slice(1) || null });
+    } else if ((url.pathname === "/" || raw.startsWith("#")) && url.hash.length > 1) {
+      event.preventDefault();
+      session.open({ hash: decodeURIComponent(url.hash.slice(1)) });
+    }
+  });
+}

package/browser/editor/page/editor.mjs

@@ -15,14 +15,17 @@ import { createCommits, kindOf } from "./commit.mjs";
 import { createConflicts, packageChanged, unfit } from "./conflicts.mjs";
 import { checkLeft, createAutosave, keepWith, lostKey, pendingKey, readLost, recover, reloadView, setReloader, takeView, viewNow } from "./autosave.mjs";
 import { SOLO, connectWorkbench } from "./session.mjs";
+import { OUTLINE_OPEN_KEY, onOutlineOpen, outlineOpen, setOutlineOpen } from "../../shared/preferences.mjs";
 import { lookOfElement } from "../../shared/document-look.mjs";
 import { belowTargets, convertBlock, convertGroup, groupParents, groupTargets, noTextToCarry, targetsOf, touchedBy, turnInto, turnParents, turnUnit, typeOf } from "./convert.mjs";
 import { joinCode, rangeAt, rangeOffsets } from "./marks.mjs";
-import { addStyle, button, copyAddress, element, layer } from "./ui.mjs";
+import { addStyle, copyAddress, element, layer, textButton } from "./ui.mjs";
 import { createClipboard } from "./clipboard/index.mjs";
+import { serveFiles } from "./served.mjs";
 import { createFormatting } from "./format-bar/index.mjs";
 import { connectHints, hideHint, readOnlyReason, scheduleHint, trackPointer } from "./hints/index.mjs";
 import { createInsert } from "./insert/index.mjs";
+import { createAfter } from "./after/index.mjs";
 import { connectLinks, dismissLink, drawPasted, followLink, leadsToPage, linkBoxNode, linkHolds, linkNodes, linkOf, linkPending, openLink, pageLinkOf } from "./links/index.mjs";
 import { bookmarkItems, connectViews, linkTitle, offerViews } from "./links/views.mjs";
 import { connectChipFills } from "./chip-fills.mjs";
@@ -35,6 +38,7 @@ import { createResize } from "./resize/index.mjs";
 import { connectPages, fieldOpen, keptByComponent, menuRow, modalOps, pageAt, pageIcon, pageObjects, pageOf, pageOfHost, pageOfType, pageOfUnit, panelOpen, typedAsIs } from "./page-objects.mjs";
 import { preloading } from "./type-grid.mjs";
 import { createColumnGaps } from "./columns/index.mjs";
+import { viewFrames } from "./table/binding.mjs";
 import { createTableEditing } from "./table/index.mjs";
 import { createAtMenu } from "./at-menu/index.mjs";
 import { createSlashMenu } from "./slash-menu/index.mjs";
@@ -58,6 +62,7 @@ import { goBackTo, placeIn, unmoved } from "../../shared/reading-place.mjs";
 import { heldList, holdPages } from "./links/pages.mjs";
 import { hideBlocks } from "./offered.mjs";
 import { local, storageOf } from "./storage.mjs";
+import { createTodoWrites } from "./todo-writes.mjs";
 import { language, t } from "../../shared/i18n/index.mjs";
 
 // In-place editing for the live preview (`npm run dev:local` only; never exported).
@@ -70,6 +75,7 @@ import { language, t } from "../../shared/i18n/index.mjs";
 //
 //   typing/       Enter, Backspace/Delete at block edges, auto spacing, placeholders
 //   insert/       new blocks: below a block (its menu), a click below the last block, a paragraph before or after
+//   after/        the caret after a block of no text (a click right of it): Backspace deletes it, Enter or a key a paragraph after it
 //   format-bar/   the bar over selected text and its keys (marks.mjs does the marks)
 //   links/        the link box (Ctrl+K), following links; hints/: why something is read-only
 //   formula/      the formula box: selected text made an inline formula (Ctrl+Shift+E)
@@ -259,7 +265,9 @@ function showLanded(node) {
   modalOps().show(node);
 }
 
-const insert = createInsert({ struct, blocks: () => blocks });
+// The caret after a block of no text, where a click right of one puts it (insert/ clickBlank).
+const after = createAfter({ struct, blocks: () => blocks, keepText: (node) => blocks.keepText(node), removeBlocks: (units) => blocks.remove(units), say, undo: () => undo(), redo: () => redo() });
+const insert = createInsert({ struct, blocks: () => blocks, after });
 const { newParagraph } = insert;
 
 // What a component does on the page beyond what every block does is its own page module
@@ -268,7 +276,12 @@ const { newParagraph } = insert;
 
 // The icon picker's images go into the report's folder (editor/media-store.mjs), where the server serves them.
 const assetUrl = (file) => mediaUrl("asset", MAP.slug, file);
+serveFiles(assetUrl); // a table cell's pictures (单元格里的图片) show where the server serves them
 connectPicker({ slug: MAP.slug, token: MAP.token, notify: say });
+// A block of the page checking a to-do of a document (context.workspace.setTodo: ./todo-writes.mjs): written
+// by the workspace's service, this one's too as any write it did not make, which the page merges; no step of
+// its undo (only a custom page keeps one: board/).
+createTodoWrites({ token: MAP.token }).listen();
 // Whether a block tool may act: the page edits, no reload is on its way and no field of a component is being edited.
 const active = () => editing && !autosave?.state.reloading && !fieldOpen();
 // A picture or file sent to the report's folder (kind: "image", "file" or "embed"): the server's answer.
@@ -319,6 +332,8 @@ const typing = createTyping({
   adding: () => slash?.adding ?? null,
   leave: createLeaving({ struct, touchedBy, convertHost, typeOf, targetsOf }),
   showHidden: (node) => blocks?.folds.showAround(node), // a folded heading's section opened before a join takes in its words (fold/)
+  look: lookStep, // a block's alignment and indent taken off by Backspace (align.mjs)
+  afterAbove: (host) => after.back(host), // Backspace right after a block of no text: the caret after it (after/)
 });
 // Selecting text across blocks: its listeners go before the editor's own keys and clipboard.
 const crossText = createTextSelection({
@@ -372,6 +387,7 @@ const clipboard = createClipboard({
   pageLink: pageLinkOf,
   titleBold: () => formatting?.armed ?? false, // a node's empty title: what is pasted there bold, as typed
   showCaret,
+  pictures: () => tables?.pictures ?? null, // a table cell's (table/pictures.mjs)
 });
 
 // ---------- editing ----------
@@ -440,17 +456,19 @@ function enter() {
       conflicts.add(entries.map((entry) => ({ ...entry, key: `r:${entry.key}`, revert: entry.key, kind: entry.written ? "reverted-source" : entry.unit === undefined ? "reverted" : "reverted-unit" })));
       say(t("AI 的写入把你之前保存的 {0} 处修改改回去了：在左下方选择保留哪一边。", entries.length), "error");
     },
+    listed: () => showLost(), // a block the page before this one made, which someone else's write took out
   });
   conflicts = createConflicts({ act: decide, nodeOf: conflictNode, restorable, copyBlock: (node) => clipboard.copyBlocks([node]), say });
   editing = true;
   document.documentElement.setAttribute("data-ge-editing", "");
+  typing.untitled(); // an empty title says 未命名文档 from the start
   blocks?.folds.start(); // what was folded, folded again in this task: no frame shows it open (fold/)
   refresh();
   for (const page of pageObjects()) page.entered?.();
 }
 
 // What the page says when what a component wrote went by a manifest that changed: given up, the page shown again.
-const outdatedNotice = () => t("组件包刚刚变了，这次改动没有保存，页面已按新的组件重新显示。");
+const outdatedNotice = () => t("自定义块刚刚变了，这次改动没有保存，页面已按新的块重新显示。");
 
 // What 仍然调整 wrote over someone else's change of what a component writes, by page unit: the step that
 // gives theirs back (installed/ overwrite), and when its write went in, all of it (commit.mjs `forced`).
@@ -465,9 +483,10 @@ const keepsOverwrite = (asked) => !asked && [...overwrites.values()].some(({ lan
 
 // A commit was taken in (commit.mjs): a block merged with someone else's words shows the merge;
 // what the file refused is flagged and held back, the rest goes on.
-function committed({ conflicts: held, merged, outdated, forced = [] }, receipt) {
+function committed({ conflicts: held, merged, outdated, forced = [], rekeyed = [] }, receipt) {
   agentChanges?.committed(receipt);
   for (const host of merged) history.merged(host);
+  history.rekeyed(rekeyed); // the keys of tables the file gave otherwise, in the steps that recorded them
   for (const unit of forced) {
     const written = overwrites.get(unit);
     if (!written || written.landed > 0) continue;
@@ -485,7 +504,7 @@ function committed({ conflicts: held, merged, outdated, forced = [] }, receipt)
     conflicts.add(held);
     const conflicted = held.filter((entry) => !unfit(entry) && !packageChanged(entry)).length;
     const packaged = held.filter(packageChanged).length;
-    say(conflicted > 0 ? t("{0} 处修改和文件的最新版本冲突，没有保存：在左下方选择怎么处理。", conflicted) : packaged > 0 ? t("组件包刚刚变了，{0} 处修改没有保存：在左下方选择怎么处理。", packaged) : t("{0} 处内容文档存不下，没有保存：在左下方选择怎么处理。", held.length), "error");
+    say(conflicted > 0 ? t("{0} 处修改和文件的最新版本冲突，没有保存：在左下方选择怎么处理。", conflicted) : packaged > 0 ? t("自定义块刚刚变了，{0} 处修改没有保存：在左下方选择怎么处理。", packaged) : t("{0} 处内容文档存不下，没有保存：在左下方选择怎么处理。", held.length), "error");
   }
   else if (outdated || merged.length > 0 || receipt.texts?.some((entry) => entry.status === "merged")) {
     const count = receipt.texts.filter((entry) => entry.status === "merged").length;
@@ -612,6 +631,7 @@ function markChanged(now = false) {
     conflicts?.reflag();
   }
   if (messageKind() === "error") settle(); // the reader is dealing with it
+  typing.untitled(); // a title emptied (or filled) by any change says 未命名文档 (or nothing) at once
   lastChange = Date.now();
   discrete ||= now;
   const counting = checkPending;
@@ -661,7 +681,7 @@ function convertHost(host, type, typed = null, after = null) {
     if (!focus && !typed) return null;
     const more = focus && after ? after(focus) : [];
     return { touched: [focus ?? host], focus: focus ?? host, created: [...created, ...more] };
-  });
+  }, { attributes: viewFrames(type) });
   if (result) afterConvert(result.focus, type, result.focus !== host ? t("已转换为{0}", menuRow(type).label) : null);
 }
 
@@ -691,6 +711,8 @@ function afterConvert(focus, type, said) {
  * heading) and the new block turns into the type; below any other block, an empty paragraph of its
  * box does (the first box out that takes one). One undo step.
  */
+// A view of a table (a custom block that reads tables) is bound to the table above it as it is made
+// (installed/page.mjs create), the tables' keys recorded in the same step (viewFrames).
 function insertBelow(target, type, typed = null) {
   const splits = isHost(target) && can(target, "split");
   let after = target;
@@ -712,7 +734,7 @@ function insertBelow(target, type, typed = null) {
     const turned = type === "paragraph" && fresh.localName === "p" ? { focus: null, created: [] } : convertBlock(fresh, type, { fresh: true });
     const focus = turned.focus ?? fresh;
     return { touched: splits ? [target, focus] : [focus], focus, created: turned.created };
-  });
+  }, { attributes: viewFrames(type) });
   if (result) afterConvert(result.focus, type, t("已插入{0}", menuRow(type).label));
 }
 
@@ -765,7 +787,7 @@ function convertUnit(unit, type, { loaded = false } = {}) {
     const turned = turnUnit(unit, type);
     emptied = Boolean(turned.emptied);
     return turned.focus ? { touched: [turned.focus], focus: turned.focus, created: turned.created, select: emptied ? null : unit } : null;
-  });
+  }, { attributes: viewFrames(type) });
   if (!result) return;
   if (!made || !onCreated(type, result.focus)) {
     if (emptied && isHost(result.focus)) caretAt(result.focus, "start");
@@ -806,6 +828,7 @@ function convertAll(group, type, { select = true } = {}) {
 function onKeydown(event) {
   compositionOver(event);
   if (!editing) return;
+  if (after.key(event)) return; // the caret after a block: its keys are its own (after/)
   // A 批注's card is a field of its own: its keys are its own, but for Ctrl+S, which saves it and the report.
   if (annotate?.holds(event.target)) {
     const mod = event.ctrlKey || event.metaKey;
@@ -911,7 +934,8 @@ function onKeydown(event) {
     moveHostBlock(host, event.key === "ArrowUp" ? -1 : 1);
   } else if (event.key.startsWith("Arrow") && !mod && !event.altKey && !event.shiftKey && !renamed) {
     // ←/→ stop on both sides of inline code's edges (typing/code-edges.mjs); a tab's caret stays in its name.
-    if ((textFilters(host) && codeArrow(host, event.key)) || arrow(host, event.key)) event.preventDefault();
+    // ← or ↑ at the start of the text right after a block of no text: the caret after that block (after/).
+    if ((textFilters(host) && codeArrow(host, event.key)) || after.up(host, event.key) || arrow(host, event.key)) event.preventDefault();
   }
 }
 
@@ -1160,7 +1184,8 @@ async function newSubpage(title) {
 }
 
 // The report's title as the reader sees it now (while editing, the title block's text).
-const currentTitle = () => (document.querySelector('[data-ge-kind="title"]') ?? document.querySelector("h1.doc-title, .doc-header h1"))?.textContent.replace(/\s+/g, " ").trim() ?? "";
+const titleNode = () => document.querySelector('[data-ge-kind="title"]') ?? document.querySelector("h1.doc-title, .doc-header h1");
+const currentTitle = () => titleNode()?.textContent.replace(/\s+/g, " ").trim() ?? "";
 
 // This page, as the list of pages takes it (links/pages.mjs).
 const thisPage = () => ({ slug: MAP.slug, title: currentTitle() });
@@ -1225,6 +1250,15 @@ const COMMANDS = {
     if (!editing || !annotate) return { ok: false, reason: "editing" };
     return annotate.action(message);
   },
+  // The outline (目录) switched by the workbench's 更多: a draft of another workspace is shown from that workspace's own origin,
+  // whose storage the workbench cannot write (the switch is kept per origin: shared/preferences.mjs outlineOpen), so it asks and
+  // this page keeps it, shown as another tab's change is (the storage event the outline listens for). Answers the switch as kept.
+  async outline({ open }) {
+    if (typeof open !== "boolean") return { ok: false, reason: "open" };
+    setOutlineOpen(MAP.slug, open);
+    dispatchEvent(new StorageEvent("storage", { key: OUTLINE_OPEN_KEY }));
+    return { ok: true, outline: outlineOpen(MAP.slug) };
+  },
   // Rename the report: its title, selected for typing (saving it updates <title> and report.json).
   async "edit-title"() {
     const title = document.querySelector('[data-ge-kind="title"]');
@@ -1454,8 +1488,21 @@ function handOff() {
 function connect() {
   // The look the page shows (字体与布局: its <html>'s, src/shared/document-look.mjs), which the workbench's
   // 更多 marks as chosen; told again when it changes (the kit's ui.js, doc-look-change).
-  workbench = connectWorkbench({ slug: MAP.slug, snapshot: () => ({ title: currentTitle(), icon: pageIcon(), look: lookOfElement(document.documentElement), state: sessionState(), annotations: annotate?.count() }), commands: COMMANDS, modals: modalOps() });
+  // `title`: null for a page with no title at all (the workbench names it by its doc.json); "" an untitled one (未命名文档).
+  workbench = connectWorkbench({ slug: MAP.slug, snapshot: () => ({ title: titleNode() ? currentTitle() : null, icon: pageIcon(), look: lookOfElement(document.documentElement), state: sessionState(), annotations: annotate?.count(), outline: outlineOpen(MAP.slug) }), commands: COMMANDS, modals: modalOps() });
   addEventListener("doc-look-change", () => workbench?.update());
+  onOutlineOpen(() => workbench?.update()); // the switch changed in another tab of this origin: the workbench's 目录 follows it (a draft's)
+  // A block's context.workspace.open (the kit's runtime/workspace.js): a document, or a block of one, goes
+  // where a link to it goes (goTo: in the workbench, its address; on its own, the page once saved); a custom
+  // page, the workbench's #@<slug>, or /pages/<slug> once saved.
+  addEventListener("doc-open-request", (event) => {
+    const { slug = null, block = null, page = null } = event.detail ?? {};
+    event.preventDefault();
+    if (page) {
+      if (window.parent !== window && !SOLO) workbench?.open({ hash: `@${page}` });
+      else COMMANDS["prepare-close"]().then(() => location.assign(`/pages/${page}`));
+    } else goTo({ slug, block }, `/generated/${slug}.html${block ? `#${encodeURIComponent(block)}` : ""}`);
+  });
   relayTo(workbench ? workbench.notice : null, workbench ? workbench.noticeRoom : null); // the workbench shows the page's notices, above the page's bottom panels
   handOff();
   // A page on its own in a frame (?solo: the 写作偏好 dialog's, which no session asks to save) is saved
@@ -1514,6 +1561,10 @@ async function start() {
     TAB = newTab();
     session.set(keys.tab, TAB);
   }
+  // What earlier pages of the document committed, made and wrote (this tab's, and those of tabs no longer
+  // open), asked of at once where this page opened on another version of the file than they last knew
+  // (its cards and list said through the workbench).
+  autosave?.opened(open);
   const prefix = pendingKey(MAP.slug, "");
   const left = local.keys().filter((key) => key.startsWith(prefix) && key !== pendingKey(MAP.slug, TAB) && !open.has(key.slice(prefix.length)));
   if (left.length === 0) return;
@@ -1573,7 +1624,7 @@ function showLost() {
     if (block) {
       panelItem(
         element("p", { text: t("文件里的这一块已被修改：复制你的版本，再粘贴到页面上。") }),
-        element("div", { class: "ge-actions" }, button(t("复制这一块"), () => { if (!clipboard.copyBlocks([block])) say(t("没能完成，请再试一次。"), "error"); })),
+        element("div", { class: "ge-actions" }, textButton(t("复制这一块"), () => { if (!clipboard.copyBlocks([block])) say(t("没能完成，请再试一次。"), "error"); })),
       );
       continue;
     }
@@ -1581,10 +1632,10 @@ function showLost() {
     panelItem(
       element("p", { text: LOST[item.why] ?? LOST.refused }),
       element("div", { class: "ge-version", text }),
-      element("div", { class: "ge-actions" }, button(t("复制文字"), () => navigator.clipboard?.writeText(text).then(() => say(t("已复制。"))))),
+      element("div", { class: "ge-actions" }, textButton(t("复制文字"), () => navigator.clipboard?.writeText(text).then(() => say(t("已复制。"))))),
     );
   }
-  panelItem(element("div", { class: "ge-actions" }, button(t("都处理好了，不再保留"), () => {
+  panelItem(element("div", { class: "ge-actions" }, textButton(t("都处理好了，不再保留"), () => {
     local.remove(lostKey(MAP.slug));
     closePanel();
   }, { primary: true })));
@@ -1617,10 +1668,13 @@ function boot() {
     copyLink: SOLO ? null : copyBlockLink, // what ?solo shows (写作偏好) only its dialog opens: no address leads there
     linkAhead: () => holdPages(thisPage),
   });
-  resize = createResize({ units, active, look: lookStep, say, owns: (node) => tables?.owns(node) ?? false });
-  gaps = createColumnGaps({ active, struct, look: lookStep, say });
+  resize = createResize({ units, active, look: lookStep, say, settle, owns: (node) => tables?.owns(node) ?? false });
+  gaps = createColumnGaps({ active, struct, look: lookStep, say, settle });
   for (const page of pageObjects()) page.install?.(); // the round "+" at a flowchart node's right, renaming Sheet tabs
-  tables = createTableEditing({ active, struct, look: lookStep, selectBlock: (unit) => blocks.select(unit), resizeTable: (event, unit, axis) => resize.startTable(event, unit, axis), say, ownCells: (data) => clipboard.ownCells(data), typedKey });
+  tables = createTableEditing({
+    active, struct, look: lookStep, selectBlock: (unit) => blocks.select(unit), resizeTable: (event, unit, axis) => resize.startTable(event, unit, axis), say, settle, cellsOf: (data) => clipboard.cellsOf(data), upload: uploadTo, typedKey,
+    recordStep,
+  });
   selectAll = createSelectAll({ blocks, say, cells: { table: () => tables.selectedTable, clear: () => tables.clear() } });
   createFrame(() => editing);
   createFlags(() => editing);

package/browser/editor/page/emoji-picker/styles.mjs

@@ -64,14 +64,14 @@ export const PICKER_CSS = `
 .nmm-cell.focus-visible { background: var(--ge-press); }
 .nmm-cell img { display: block; }
 .nmm-cell img.notion-custom-emoji { object-fit: contain; color: transparent; }
-/* 添加表情符号: the custom group's first cell, a round plus (26, 3 around, a 1px --ge-edge inside, the plus
-   --ge-ico3); with no result, a button (28 high, a 1px --ge-edge inside, 13px / 500) */
-.nmm-cell.nmm-add-cell { width: 26px; height: 26px; margin: 3px; box-sizing: border-box; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ge-edge); --nmm-icon: var(--ge-ico3); }
+/* 添加表情符号: the custom group's first cell, a round plus (26, 3 around, the plus --ge-ico3, no line round
+   it: gray under the pointer as a cell); with no result, a button (28 high, 13px / 500, no line either) */
+.nmm-cell.nmm-add-cell { width: 26px; height: 26px; margin: 3px; box-sizing: border-box; border-radius: 50%; --nmm-icon: var(--ge-ico3); }
 .nmm-cell.nmm-add-cell.focused { --nmm-icon: var(--ge-ico); }
 .nmm-empty { padding: 8px 12px; }
 .nmm-empty-caption { display: flex; align-items: center; height: 20px; padding: 0 4px; font-size: 12px; font-weight: 500; color: var(--ge-tx3); }
 .nmm-empty.with-add { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
-.nmm-cell.nmm-add-button { justify-content: flex-start; gap: 6px; width: max-content; height: 28px; padding: 0 10px 0 8px; box-sizing: border-box; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ge-edge); font-size: 13px; font-weight: 500; line-height: 1; color: var(--ge-tx); white-space: nowrap; --nmm-icon: var(--ge-ico2); }
+.nmm-cell.nmm-add-button { justify-content: flex-start; gap: 6px; width: max-content; height: 28px; padding: 0 10px 0 8px; box-sizing: border-box; border-radius: 6px; font-size: 13px; font-weight: 500; line-height: 1; color: var(--ge-tx); white-space: nowrap; --nmm-icon: var(--ge-ico2); }
 
 /* The category bar: a --ge-line above it, 6 12 8; buttons 28 x 28, icons 18 in --ge-ico3; the group scrolled
    to on --ge-hover, its icon --ge-ico; a group with no emoji faded to .35 and not to be clicked (自定义 and
@@ -106,8 +106,8 @@ export const PICKER_CSS = `
 
 /* The 上传 tab and the 添加表情符号 popup (upload.mjs): the zone an image goes in on --ge-field, a 1px
    --ge-edge inside it, rounded 8, deeper while a file is dragged over it (--ge-hover, --ge-ico3), never blue;
-   保存 a text button (--ge-tx, 500, --ge-hover under the pointer, --ge-tx3 while it cannot be clicked), 取消 /
-   返回 --ge-tx2; the checkbox checked --ge-tx2 with a white tick; an error --ge-red */
+   保存 the pale blue primary and 取消 / 返回 the plain text button (look.mjs BUTTONS: .ge-btn, dimmed while it cannot be
+   clicked); the checkbox checked --ge-tx2 with a white tick; an error --ge-red */
 .nmm-upload { display: flex; flex-direction: column; padding: 0 16px; font-size: 14px; color: var(--ge-tx); }
 .nmm-upload-title { margin-top: 14px; font-size: 14px; font-weight: 600; }
 .nmm-upload-description { margin-top: 2px; font-size: 12px; color: var(--ge-tx2); }
@@ -142,12 +142,7 @@ export const PICKER_CSS = `
 .nmm-upload-name-error { margin-top: 10px; font-size: 12px; color: var(--ge-red); }
 .nmm-upload-name-error[hidden], .nmm-upload [hidden] { display: none; }
 .nmm-upload-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0 12px; }
-.nmm-upload-secondary, .nmm-upload-save { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 10px; border-radius: 6px; font-size: 14px; line-height: 1.2; white-space: nowrap; cursor: pointer; user-select: none; }
-.nmm-upload-secondary { color: var(--ge-tx2); }
-.nmm-upload-secondary:hover { background: var(--ge-hover); color: var(--ge-tx); }
-.nmm-upload-save { color: var(--ge-tx); font-weight: 500; }
-.nmm-upload-save:not(.disabled):hover { background: var(--ge-hover); }
-.nmm-upload-save.disabled { color: var(--ge-tx3); cursor: default; }
+.nmm-upload-secondary, .nmm-upload-save { font-size: 14px; }
 .nmm-custom-emoji-popup { min-width: 280px; border-radius: 10px; background: var(--ge-bg); box-shadow: var(--ge-shadow-pop); }
 
 /* A button reached by Tab: a gray fill, not the browser's dark or blue ring; the checkbox a gray ring */

package/browser/editor/page/emoji-picker/upload.mjs

@@ -76,8 +76,8 @@ export function createUploadForm({ showTitle = false, largeEmoji = false, allowU
     `<label class="nmm-upload-name" hidden><div class="nmm-upload-name-label">${T.nameLabel}</div>` +
       `<div class="nmm-upload-input"><input type="text" placeholder="${T.namePlaceholder}" autocomplete="off" spellcheck="false"></div>` +
       `<div class="nmm-upload-name-error" hidden></div></label>` +
-    `<div class="nmm-upload-footer"><div role="button" tabindex="0" class="nmm-upload-secondary" data-act="secondary"></div>` +
-      `<div role="button" tabindex="0" class="nmm-upload-save" data-act="save">${T.save}</div></div>` +
+    `<div class="nmm-upload-footer"><div role="button" tabindex="0" class="ge-btn nmm-upload-secondary" data-act="secondary"></div>` +
+      `<div role="button" tabindex="0" class="ge-btn nmm-upload-save" data-primary data-act="save">${T.save}</div></div>` +
     `<input type="file" accept="${ACCEPT}" hidden>`;
 
   const zone = el.querySelector('.nmm-upload-zone'), wrap = el.querySelector('.nmm-upload-zone-wrap');

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

@@ -44,13 +44,12 @@ import { t } from "../../../shared/i18n/index.mjs";
 // (lineAt, blocks.mjs). The handle and the bar are drawn in the editor's own layer (overlay-layer.mjs:
 // the one of the block they stand beside), never inside a block, each belonging to the block it stands
 // beside (overlays.mjs). A press ends when the pointer comes up, is cancelled, or the handle loses the
-// pointer capture (then a drag under way is cancelled, never dropped). While the page is edited, its
+// pointer capture (then a drag under way is cancelled, never dropped). On a page the editor edits, its
 // side gutters (the kit's --doc-page-gutter, --doc-wide-gutter) are at least the room the
-// handle takes left of a block, and a little (EDGE): on a narrow window the handle stands in the
-// margin, never over the text, as Feishu's and Notion's do; the section bar has the same room on
-// the right. A wide window, whose column leaves more than that, does not change.
-
-const EDGE = ADD.width + HANDLE.width + HANDLE.gap + 12; // the page's gutter while editing: the bar's square, the grip, its gap, and room to breathe (64)
+// handle takes left of a block, and a little (margin.mjs MARGIN.edge, from the page's first paint: the
+// head's MARGIN_STYLE): on a narrow window the handle stands in the margin, never over the text, as
+// Feishu's and Notion's do; the section bar has the same room on the right. A wide window, whose column
+// leaves more than that, does not change.
 
 const STYLE = `
   .ge-handle { position: absolute; left: 0; top: 0; z-index: ${IN_LAYER.handle}; display: flex; align-items: center; height: ${HANDLE.height}px; touch-action: none; }
@@ -84,8 +83,6 @@ const STYLE = `
   .ge-section-bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: 6px; width: 4px; border-radius: 2px; background: light-dark(rgb(55 53 47 / 14%), rgb(255 255 255 / 14%)); transition: background .08s ease-in; }
   .ge-section-bar:hover::before { background: light-dark(rgb(55 53 47 / 28%), rgb(255 255 255 / 26%)); }
   .ge-section-bar[data-active]::before { background: color-mix(in srgb, var(--doc-accent, #2678d8) 60%, transparent); }
-  /* Room for the handle beside the page's blocks: the page's gutters while editing (resize/ reads --ge-edge-room). */
-  :root[data-ge-editing] { --ge-edge-room: ${EDGE}px; --doc-page-gutter: var(--ge-edge-room); --doc-wide-gutter: var(--ge-edge-room); }
 `;
 
 // Notion's grip in size (its dragHandle icon at its icons' 20px): 2.5px dots 5px apart across and 6px down (notion-lite's were 5px down, the grip 2px shorter than Notion's: the user, 2026-10-26).

package/browser/editor/page/history.mjs

@@ -69,7 +69,7 @@ export function createHistory({ changed, beforeUndo, blocks, afterText, refuse =
       typing.time = at;
     } else {
       closeTyping();
-      typing = { type: "text", element: host, before, after, time: at };
+      typing = { type: "text", element: host, before, after, time: at, began: at };
     }
     changed(now);
   }
@@ -83,8 +83,14 @@ export function createHistory({ changed, beforeUndo, blocks, afterText, refuse =
     changed(true);
   }
 
+  // A run of typing closed: a step of its own, unless it went into the block the last step made for
+  // what was typed (struct's `typedInto`: a paragraph after a block, after/), begun within a second of it:
+  // then it is part of that step, which undo takes away whole, redo putting the words back with it.
   function closeTyping() {
-    if (typingChanged()) push(typing);
+    const last = undoStack.at(-1);
+    if (typingChanged() && last?.typedInto === typing.element && typing.began - last.madeAt < 1000) last.htmlAfter.set(typing.element, typing.after);
+    else if (typingChanged()) push(typing);
+    if (typing && last?.typedInto) last.typedInto = null;
     typing = null;
   }
 
@@ -148,6 +154,31 @@ export function createHistory({ changed, beforeUndo, blocks, afterText, refuse =
     for (const stack of [undoStack, redoStack]) if (stack.includes(step)) stack.splice(stack.indexOf(step), 1);
   }
 
+  // An attribute the file gave another value than the page had (`changes`: [element, name, from, to],
+  // `to` null for none; a key of a table a commit gave a pair anew: page/commit.mjs apply), the page's
+  // element set so: the steps that recorded `from` of it record `to` instead, so that an undo or a redo
+  // puts back what the file has, never the value it changed (a view made from "/" redone with the key its view
+  // no longer carries).
+  function rekeyed(changes) {
+    if (changes.length === 0) return;
+    for (const step of [...undoStack, ...redoStack]) {
+      for (const recorded of [step.attributesBefore, step.attributesAfter]) {
+        for (const [element, name, from, to] of changes) {
+          const values = recorded?.get(element);
+          if (values?.some(([each, value]) => each === name && value === from)) recorded.set(element, values.map(([each, value]) => [each, each === name && value === from ? to : value]));
+        }
+      }
+      // A view's table chosen in its 设置 is a step of look (installed/page.mjs readTable): its attributes by element.
+      if (step.type === "look") {
+        for (const recorded of [step.before, step.after]) {
+          step.elements.forEach((each, index) => {
+            for (const [element, name, from, to] of changes) if (each === element && recorded[index]?.attributes?.[name] === from) recorded[index].attributes[name] = to;
+          });
+        }
+      }
+    }
+  }
+
   // What a step puts into a block (`from`: what the step left there, `to`: what it puts back): as
   // recorded, unless someone else's words were merged into the block since the step; then the step's
   // change three ways against what the block holds now (null: the two touch the same place).
@@ -174,8 +205,10 @@ export function createHistory({ changed, beforeUndo, blocks, afterText, refuse =
   // after undo and redo (a deleted Sheet tab switches the Sheet shown). A step that names no text block
   // it came from keeps where the caret stood, which undo puts back, as notion-lite's selectionBefore.
   // `attributes`: [element, [names]] whose attributes the step records too (a table's cells: their
-  // spans and widths, which its operations change: components/table/page.mjs).
-  function struct(parents, touched, mutate, { attributes = [] } = {}) {
+  // spans and widths, which its operations change: components/table/page.mjs). `caret`: where the caret
+  // stood in the first text block it touched is kept too, which undo puts back (notion-lite's Enter in the
+  // page's title, enter.js: "撤销后光标回到回车前的位置"; typing/ enterBody).
+  function struct(parents, touched, mutate, { attributes = [], caret = false, typedInto = null } = {}) {
     closeTyping();
     // What the change may leave untidy is tidied after it by the components that know (rows of
     // columns with a column emptied, lists set side by side: tidy), so what they name is recorded
@@ -189,7 +222,7 @@ export function createHistory({ changed, beforeUndo, blocks, afterText, refuse =
     }
     // A text block among the parents (a list item whose lists change) keeps its text through undo too.
     touched = [...new Set([...touched, ...parents.filter(isHost)])];
-    const place = touched[0] ? null : caretPlace(parents[0]);
+    const place = touched[0] && !caret ? null : caretPlace(parents[0]);
     const before = parents.map(contentOf);
     const htmlBefore = new Map(touched.map((node) => [node, ownHTML(node)]));
     const classesBefore = new Map(touched.map((node) => [node, new Set(node.classList)]));
@@ -219,7 +252,7 @@ export function createHistory({ changed, beforeUndo, blocks, afterText, refuse =
         .filter(({ added, removed }) => added.length > 0 || removed.length > 0),
       attributesBefore,
       attributesAfter: attributesOf(),
-      focusBefore: touched[0] ?? place?.host,
+      focusBefore: (caret ? place?.host : null) ?? touched[0] ?? place?.host,
       caretBefore: place?.offsets ?? null,
       focusAfter: result.focus,
       select: result.select ?? null,
@@ -227,6 +260,7 @@ export function createHistory({ changed, beforeUndo, blocks, afterText, refuse =
       selectAfter: result.selectAfter ?? null, // what redo selects instead
       caret: result.caret ?? null, // where redo puts the caret when it selects nothing (tidyEmptied)
       settle: result.settle ?? null,
+      typedInto, madeAt: Date.now(), // the block made for what is typed, whose first run of typing is part of this step (closeTyping)
     });
     result.touched.forEach((node) => lastKnown.set(node, ownHTML(node)));
     note("history", "change");
@@ -381,6 +415,7 @@ export function createHistory({ changed, beforeUndo, blocks, afterText, refuse =
     sourceStep,
     fold,
     drop,
+    rekeyed,
     closeTyping,
     struct,
     finish,