@heycys/gallery 0.1.1 → 0.1.2

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

@@ -0,0 +1,150 @@
+import { TABLE } from "../../components/kit.mjs";
+import { insertRow, moveRow, removeRows, tableState } from "../../components/table/page.mjs";
+import { tableOf } from "../../components/table/grid.mjs";
+import { ownHTML } from "../core.mjs";
+import { menuEntry, viewKeys } from "../page-objects.mjs";
+import { CHART_SOURCE, TABLE_READERS, VIEW_FROM, nextChartKey } from "../../../shared/table-chart.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+import { TABLE_ICONS } from "./icons.mjs";
+
+// The views of a table (docs/editor.md, "Table views"; the plan's 阶段 4): an instance of a custom
+// block whose needs hold "tables", bound to a table of the document by the key its frame carries
+// (shared/table-chart.mjs VIEW_FROM, the key a chart drawn from a table reads it by), reads the table's
+// rows (the kit's context.table()) and changes them only by asking: a doc-table-intent the kit puts on
+// the instance (runtime/kernel.js), which these tools answer at once, made as the table's own tools make
+// a change, so that a view has no commit, undo or conflict of its own:
+//
+//   set     one cell's words: a text step of that cell (history.mjs recordStep), its commit a cell's text
+//           as typing's is, merged word by word with someone else's change of the cell (source/merge.mjs);
+//   move    a row put before or after another, the cells it names set in the same step (a card dropped
+//           in another column: its status and its place);
+//   add     a row put in after another or last, its cells' words those it names;
+//   remove  a row taken out (never the last of the body, as the tools' 删除);
+//   check   nothing: answered as the others would be (the kit's table().canEdit()), so that a view of a
+//           table these tools do not manage shows it read-only;
+//
+// move, add and remove are the table tools' operations (components/table/page.mjs moveRow, insertRow,
+// removeRows) in one undo step each (index.mjs change), their commit the table's operation, which a
+// change someone else made to the table meanwhile holds back as a conflict with its card, as any. Only a
+// table these tools manage (GRID: written as the kit writes one) and with no merged cell takes them: a
+// view of any other is read-only, as it is in an export (the kit asks nothing there). Its rows of data
+// are those after its header row: the head's rows, or with no head its body's first row, which a view
+// reads its columns' names from; no intent puts a row there or takes that one.
+//
+// 视图 › of a table's block menu (menuRow) lists the custom blocks that read tables and that the
+// document's menus would offer (their `readsTables` row of the custom blocks' menu variants, which follows
+// the 组件列表 switches; page-objects.mjs viewKeys: no other menu lists them, as one put in unbound only
+// says it has no table) and puts one in right after the table bound to it, in one undo step: the table's key
+// where it names this table (the first frame carrying it, as the kit and the checks read a key), or a new
+// one (the first of t1, t2 … the page does not hold) put on its frame in that step (a table made from "/"
+// has none; the second of two an Agent wrote with one key is not the one it names). The commit writes
+// both, and the server makes sure of the key against the file (source/chart-keys.mjs relinkMade); a key
+// it gives the pair anew the page follows, its undo steps too (page/commit.mjs apply, history.mjs rekeyed).
+
+/**
+ * active(): whether the page edits now. change(unit, mutate, said, touched): the table tools' one undo
+ * step (index.mjs). tableAt(node): the table unit these tools manage that a node is in. recordStep(host,
+ * before): a text step of a text block (history.mjs). insertBelow(unit, key, { attributes, done }): a
+ * block of the menu's `key` put in below a block in one undo step, `attributes` ([element, names]) recorded
+ * with it and `done(made)` run in it on the new block (editor.mjs insertBelow). drawn(): the tools drawn
+ * again (a row taken out).
+ */
+export function createViews({ active, change, tableAt, recordStep, insertBelow, drawn = () => {} }) {
+  const merged = (rows) => rows.some((row) => [...row.cells].some((cell) => cell.rowSpan !== 1 || cell.colSpan !== 1));
+  const writable = (cell) => cell?.getAttribute("contenteditable") === "true";
+  const holds = (cell, text) => cell.textContent === text && cell.childElementCount === 0;
+
+  // What a view asks (`detail` of doc-table-intent: kernel.js tableView), made, or refused (false).
+  function run({ table, op, row = null, before = null, after = null, cells = [] }) {
+    if (!active() || !table?.isConnected) return false;
+    const unit = tableAt(table);
+    if (!unit || tableOf(unit) !== table) return false;
+    const state = tableState(unit);
+    if (merged(state.rows) || !Array.isArray(cells) || !cells.every(([column, text]) => Number.isInteger(column) && column >= 0 && column < state.columns && typeof text === "string")) return false;
+    // A view's table().canEdit(): whether an intent of this table would be taken now, nothing changed.
+    if (op === "check") return true;
+    // Its rows of data: after the header a view reads its names from (the head, else the body's first row).
+    const all = state.rows;
+    const data = all.slice(Math.max(1, state.head?.rows.length ?? 0));
+    const ofData = (node) => data.includes(node);
+    const cellsOf = (target) => cells.map(([column]) => target.cells[column]);
+    if (op === "set") {
+      if (!ofData(row) || cells.length !== 1) return false;
+      const [[column, text]] = cells;
+      const cell = row.cells[column];
+      if (!writable(cell)) return false;
+      if (holds(cell, text)) return true;
+      const was = ownHTML(cell);
+      cell.textContent = text;
+      recordStep(cell, was);
+      return true;
+    }
+    if (op === "move") {
+      const target = before ?? after;
+      if (!ofData(row) || (target && !ofData(target)) || !cellsOf(row).every(writable)) return false;
+      const from = all.indexOf(row);
+      const rest = all.filter((node) => node !== row);
+      const to = !target || target === row ? from : before ? rest.indexOf(before) : rest.indexOf(after) + 1;
+      if (to === from && cells.every(([column, text]) => holds(row.cells[column], text))) return true;
+      return change(unit, () => {
+        if (to !== from && moveRow(unit, from, to) === false) return false;
+        for (const [column, text] of cells) row.cells[column].textContent = text;
+        return true;
+      }, null, cellsOf(row)) !== null;
+    }
+    if (op === "add") {
+      if (after && !ofData(after)) return false;
+      const at = after ? all.indexOf(after) + 1 : all.length;
+      return change(unit, () => {
+        const made = insertRow(unit, at);
+        for (const [column, text] of cells) if (made.cells[column]) made.cells[column].textContent = text;
+        return made;
+      }, null) !== null;
+    }
+    if (op === "remove") {
+      if (!ofData(row)) return false;
+      const at = all.indexOf(row);
+      const done = change(unit, () => removeRows(unit, at, at), null) !== null;
+      drawn();
+      return done;
+    }
+    return false;
+  }
+  document.addEventListener("doc-table-intent", (event) => {
+    if (run(event.detail ?? {})) event.preventDefault();
+  });
+
+  // The frame a key names, as the kit reads it (runtime/table-reading.js frameOf) and the checks do: the
+  // first that carries it, none of a dev block's.
+  const frameOf = (key) => [...document.querySelectorAll(`[${CHART_SOURCE}]`)].find((node) => node.getAttribute(CHART_SOURCE) === key && node.matches(TABLE.frame) && !node.closest("[data-doc-dev]")) ?? null;
+  // A view of the block `key` put in right after `unit`, bound to its table: by its key where that names
+  // it, else by a new one put on it in the same step (a table made from "/" has none; one of two an Agent
+  // wrote with one key is not the one it names, the first: a view by it would read and change that one).
+  function insertView(unit, key) {
+    const own = unit.getAttribute(CHART_SOURCE);
+    const taken = new Set([...document.querySelectorAll([CHART_SOURCE, ...TABLE_READERS].map((name) => `[${name}]`).join(", "))].flatMap((node) => [CHART_SOURCE, ...TABLE_READERS].map((name) => node.getAttribute(name)).filter((value) => value !== null)));
+    const bound = own !== null && frameOf(own) === unit ? own : nextChartKey(taken);
+    insertBelow(unit, key, {
+      attributes: [[unit, [CHART_SOURCE]]],
+      done(made) {
+        made?.setAttribute(VIEW_FROM, bound);
+        if (bound !== own) unit.setAttribute(CHART_SOURCE, bound);
+      },
+    });
+  }
+
+  return {
+    /** The 视图 › row of a table's block menu: one for each custom block that reads tables, or null where there is none or the table cannot be read as rows (no frame, a merged cell). */
+    menuRow(unit) {
+      const keys = viewKeys();
+      if (keys.length === 0 || !unit.matches(TABLE.frame) || merged(tableState(unit).rows)) return null;
+      return {
+        label: t("视图"), icon: TABLE_ICONS.view,
+        submenu: () => viewKeys().map((key) => {
+          const row = menuEntry(key).variant;
+          return { label: row.label, icon: row.icon, run: () => insertView(unit, key) };
+        }),
+      };
+    },
+  };
+}

package/browser/editor/page/text-select/index.mjs

@@ -1,7 +1,7 @@
 import { chipBox } from "../chip-fills.mjs";
 import { DETAILS, DIALOG } from "../../components/kit.mjs";
 import { boxRole } from "../../components/registry.mjs";
-import { UNIT, can, isHost, mergeInto, partsOf, removalTarget, takeOut, textEnd, unitElement } from "../core.mjs";
+import { UNIT, can, isEmpty, isHost, mergeInto, partsOf, removalTarget, takeOut, textEnd, unitElement } from "../core.mjs";
 import { atomOf, caretAt, caretAtOffset, dragPlace, editable, hosts, pointRange, select } from "../caret.mjs";
 import { edgeFollower } from "../edge-scroll.mjs";
 import { FOLDED } from "../folded.mjs";
@@ -22,7 +22,9 @@ import { t } from "../../../shared/i18n/index.mjs";
 // the window's edges), drawn with the CSS Custom Highlight API in the selection's own colors, the
 // browser's selecting held off meanwhile; back in that block, the browser's again. Shift+click in
 // another block selects from the caret to there.
-// Its text is that of body text, headings and list items (in quotes, highlight blocks, callouts, columns…).
+// Its text is that of body text, headings and list items (in quotes, highlight blocks, callouts, columns…),
+// and the page's title's, which a deletion takes its part of but never joins with the body's (notion-lite's
+// selection runs from its page title into the blocks; the user's: what is left of the body stays in the body).
 // A block holding none (a code block, a table, a file, an image, a formula block, a
 // divider…) is taken whole as it passes it, filled as a selected block is (selection/ mark), its
 // own text not marked: over one, an end of the selection stands before it or after it, as the drag
@@ -108,6 +110,10 @@ function lineStrips(texts, origin) {
 
 // The text blocks it takes text from, and a deletion joins: body text, headings, list items.
 const isText = (host) => isHost(host) && (host.getAttribute("data-ge-kind") ?? "flow") === "flow";
+// The page's title: text it takes too (drawn, copied, deleted), kept apart: a deletion leaves it what
+// stands outside the selection and joins nothing to it (remove).
+const isTitle = (host) => isHost(host) && host.getAttribute("data-ge-kind") === "title";
+const isPiece = (host) => isText(host) || isTitle(host);
 const textHosts = (unit) => [...unit.querySelectorAll("[data-ge-block], [data-ge-new]")].filter((node) => isHost(node) && isText(node));
 
 // The outermost block around `node` holding no text of the body (a code block, a table, a file…),
@@ -194,12 +200,12 @@ export function createTextSelection({ isEditing, struct, say, keepText, selectUn
   function pointAt(x, y, from) {
     const place = dragPlace([from.node, from.offset], x, y);
     const host = place && editable(place[0]);
-    if (host?.closest("main") && isText(host)) return { host, node: place[0], offset: place[1] };
+    if (host?.closest("main") && isPiece(host)) return { host, node: place[0], offset: place[1] };
     const whole = wholeOf(document.elementFromPoint(x, y));
     if (whole) return edge(whole, !from || before(from, edge(whole, false)));
     let best = null;
     let bestScore = null;
-    for (const each of hosts().filter((node) => node.closest("main") && isText(node))) {
+    for (const each of hosts().filter((node) => node.closest("main") && isPiece(node))) {
       const rect = each.getBoundingClientRect();
       // By height, then (level ones: columns side by side) by width; of nested ones, the innermost.
       const score = gapScore(rect, x, y);
@@ -220,7 +226,7 @@ export function createTextSelection({ isEditing, struct, say, keepText, selectUn
   // Where the selection starts, `focus` being its other end: the press's place in body text; begun
   // in a block taken whole (its code, a cell), that block's edge away from `focus`.
   function startOf(anchor, focus) {
-    if (isText(anchor.host)) return anchor;
+    if (isPiece(anchor.host)) return anchor;
     const whole = wholeOf(anchor.host) ?? unitElement(anchor.host);
     if (!whole) return anchor;
     const head = edge(whole, false);
@@ -243,7 +249,7 @@ export function createTextSelection({ isEditing, struct, say, keepText, selectUn
     // text it reaches: none when its text stands before the start (the selection begun in a block the
     // item holds) or after the end.
     const reaches = (host) => host === selection.start.host || host === selection.end.host || (range.isPointInRange(host, 0) && range.isPointInRange(host, textEnd(host)));
-    const texts = hosts().filter((host) => host.closest("main") && isText(host) && range.intersectsNode(host) && reaches(host) && !folded(host)).map((host) => {
+    const texts = hosts().filter((host) => host.closest("main") && isPiece(host) && range.intersectsNode(host) && reaches(host) && !folded(host)).map((host) => {
       const part = document.createRange();
       part.setStart(host, 0);
       part.setEnd(host, textEnd(host));
@@ -496,7 +502,7 @@ export function createTextSelection({ isEditing, struct, say, keepText, selectUn
       select(range);
       return;
     }
-    const texts = hosts().filter((host) => host.closest("main") && isText(host));
+    const texts = hosts().filter((host) => host.closest("main") && isPiece(host));
     const next = texts.find((host) => before(point, { node: host, offset: 0 }));
     const previous = texts.filter((host) => before({ node: host, offset: textEnd(host) }, point)).at(-1);
     const host = forward ? next ?? previous : previous ?? next;
@@ -504,14 +510,17 @@ export function createTextSelection({ isEditing, struct, say, keepText, selectUn
   }
 
   // Delete it: the first block keeps its text before it and takes the last block's after it, the
-  // blocks between go (those taken whole among them); one undo step, the caret where it began.
+  // blocks between go (those taken whole among them); one undo step, the caret where it began. From
+  // the page's title (`apart`) nothing joins: the title keeps what stands before it (empty, it says
+  // 未命名文档), the last block what stands after it in a block of its own (gone when that is nothing).
   // Returns whether it went.
   function remove() {
     const selection = cross;
     const { start, end } = selection;
     letGo();
     if (!(start.host ?? start.node).isConnected || !(end.host ?? end.node).isConnected) return false;
-    if (![start.host, end.host].every((host) => !host || isText(host))) {
+    const apart = isTitle(start.host) || isTitle(end.host);
+    if (![start.host, end.host].every((host) => !host || isPiece(host))) {
       say(t("跨块删除只支持正文、标题和列表里的文字。"));
       return false;
     }
@@ -553,9 +562,14 @@ export function createTextSelection({ isEditing, struct, say, keepText, selectUn
       }
       for (const target of targets) takeOut(target);
       // Joined unless the two cannot be (a block that may not merge, lists that cannot go along):
-      // then each keeps what is left of its text.
-      if (start.host && end.host && mergeInto(start.host, end.host, { anyKind: true }) && endTarget !== end.host && endTarget.isConnected) takeOut(endTarget);
-      if (start.host) joinCode(start.host); // inline code meeting inline code at the join is one piece
+      // then each keeps what is left of its text. Apart from the title, the last block left empty
+      // goes as the blocks between do (it was all selected), else it stays with its rest.
+      if (apart) {
+        const last = isTitle(end.host) ? null : end.host;
+        if (last && endTarget && isEmpty(last) && can(last, "remove") && !keepText(endTarget)) takeOut(endTarget);
+      } else if (start.host && end.host && mergeInto(start.host, end.host, { anyKind: true }) && endTarget !== end.host && endTarget.isConnected) takeOut(endTarget);
+      if (start.host && !apart) joinCode(start.host); // inline code meeting inline code at the join is one piece
+      if (isTitle(start.host) && isEmpty(start.host)) start.host.replaceChildren(); // no <br> left in an emptied title
       return { touched: touched.filter((host) => host.isConnected), focus: start.host ?? end.host ?? null };
     });
     if (!result) return false;

package/browser/editor/page/todo-writes.mjs

@@ -0,0 +1,75 @@
+import { TODO_EVENT, TODO_MOST, TODO_ROUTE } from "../../shared/workspace-query.mjs";
+import { postAnswer } from "./post.mjs";
+
+// To-dos of documents checked from this page (workspace.setTodo, the plan's 5.1; docs/editor.md "To-dos
+// checked from another page"): the kit's ask (TODO_EVENT, cancelable on the window: { ask: { slug, ref,
+// done }, answer(promise) }) taken by whoever holds the page's token (a custom page's board, a document's
+// editor) and written by the workspace's service (POST TODO_ROUTE, one document a request: the edit
+// service's setTodos, one commit of the reader's). The checks of one document wait in a line of their own:
+// those asked while one write of it is out go together in the next (its items in the order asked, the
+// last of an item winning), so that a reader ticking five boxes quickly makes two commits, not five.
+// Each ask is answered { ok: true, changed, block } (`block` the item's id now, which the commit gives
+// one that had none) or { ok: false, reason, message? }, never rejected.
+
+/**
+ * `token`: the page map's. `done(ask, answer)`: an ask answered (the board keeps an undo step of one that
+ * changed its document). Returns { write(ask) (a promise of its answer), idle() (once every write asked so
+ * far is answered), listen() (takes the kit's asks; returns the function that stops it) }.
+ */
+export function createTodoWrites({ token, done = () => {} }) {
+  const lines = new Map(); // slug -> { waiting: [{ ask, resolve }], out: Promise | null }
+
+  async function send(slug, line) {
+    const batch = line.waiting.splice(0, TODO_MOST);
+    const answer = await postAnswer(TODO_ROUTE, token, { slug, items: batch.map(({ ask }) => ({ ref: ask.ref, done: ask.done })) });
+    batch.forEach(({ ask, resolve }, index) => {
+      const result = answer?.ok ? answer.results?.[index] ?? { ok: false, reason: "failed" } : { ok: false, reason: answer?.reason === "offline" ? "offline" : answer?.reason ?? "failed", ...(typeof answer?.message === "string" ? { message: answer.message } : {}) };
+      try {
+        done(ask, result);
+      } finally {
+        resolve(result);
+      }
+    });
+  }
+
+  // The line of a document: written once nothing of it is out, what waits then going together.
+  function run(slug) {
+    const line = lines.get(slug);
+    if (line.out || line.waiting.length === 0) return;
+    // A microtask's wait, so that the asks of one gesture (a block checking several at once) go together.
+    line.out = Promise.resolve().then(() => send(slug, line)).catch(() => {}).finally(() => {
+      line.out = null;
+      if (line.waiting.length > 0) run(slug);
+      else lines.delete(slug);
+    });
+  }
+
+  function write(ask) {
+    return new Promise((resolve) => {
+      if (!lines.has(ask.slug)) lines.set(ask.slug, { waiting: [], out: null });
+      lines.get(ask.slug).waiting.push({ ask, resolve });
+      run(ask.slug);
+    });
+  }
+
+  return {
+    write,
+    async idle() {
+      for (;;) {
+        const out = [...lines.values()].map((line) => line.out).filter(Boolean);
+        if (out.length === 0) return;
+        await Promise.all(out);
+      }
+    },
+    listen() {
+      const take = (event) => {
+        const { ask, answer } = event.detail ?? {};
+        if (event.defaultPrevented || !ask || typeof answer !== "function") return;
+        event.preventDefault();
+        answer(write(ask));
+      };
+      addEventListener(TODO_EVENT, take);
+      return () => removeEventListener(TODO_EVENT, take);
+    },
+  };
+}

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

@@ -1,12 +1,12 @@
 import {
-  boxKind, can, emptyContainer, isEmpty, isFirstLine, isHost, limitText, mergeWithPrevious, nestedBlocks, nestedLists, nextLine, parentItem, previousLine, removalTarget, splitBlock, takeOut, textEnd, unitElement,
+  UNIT, boxKind, can, emptyContainer, isEmpty, isFirstLine, isHost, limitText, mergeWithPrevious, nestedBlocks, nestedLists, nextLine, parentItem, previousLine, removalTarget, splitBlock, takeOut, textEnd, unitElement, newParagraphHost, withLeads,
 } from "../core.mjs";
 import { atEdge, caretAt, hosts, select, textNear } from "../caret.mjs";
 import { convertible } from "../convert.mjs";
 import { joinCode } from "../marks.mjs";
 import { numberWithUnit, sideOf, WORD } from "../../../shared/inline-spacing.mjs";
 import { pageOf, pagesAround } from "../page-objects.mjs";
-import { BLOCK_TYPES, HOSTS, firstSaysOf, placeholderOf, textFilters, textTypeOf } from "../../components/registry.mjs";
+import { BLOCK_TYPES, HOSTS, accepts, firstSaysOf, placeholderOf, textFilters, textTypeOf } from "../../components/registry.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
 // Typing in a block (docs/editor.md, "Browser side"): every key goes first to the component the block
@@ -25,6 +25,8 @@ import { t } from "../../../shared/i18n/index.mjs";
 // 3万5千), and a block written without such spaces is typed in its own way (none added).
 const HAN = /[\u2e80-\u2eff\u2f00-\u2fdf\u3040-\u309f\u30a0-\u30fa\u30fc-\u30ff\u3100-\u312f\u3200-\u32ff\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff]/;
 const LATIN = /[A-Za-z0-9]/;
+// The text blocks that say their placeholder whenever they are empty (HOSTS' `untitled`: the page's title).
+const UNTITLED = Object.keys(HOSTS).filter((kind) => HOSTS[kind].untitled).map((kind) => `main [data-ge-kind="${kind}"]`).join(", ");
 const needsSpace = (a, b, before) => ((HAN.test(a) && LATIN.test(b)) || (LATIN.test(a) && HAN.test(b))) && !numberWithUnit(a, b, before);
 // The block's own way with Chinese beside Latin letters and digits, from its text but what was just
 // typed: true when it writes them together more often than apart (a number's unit is no sign either way).
@@ -61,8 +63,43 @@ export function createTyping({ struct, say, keepText, paragraphBefore, removeBlo
     return Boolean(key(pageOf(host)?.keys ?? {})?.(ctx, ...rest) || pagesAround(host).some((page) => key(page.keys?.around ?? {})?.(ctx, ...rest)));
   }
 
+  // Enter in the page's title (HOSTS' `opensBody`): notion-lite's splitBlock for the page (enter.js, its
+  // first rule): what is selected goes, what follows the caret leaves the title for a new paragraph right
+  // below it, the first block of the page (an empty one at its end, a new untitled document's too), and
+  // the caret goes to its start; the title keeps what stands before the caret, never a line break. One
+  // undo step, the caret back in the title where it was. Below the title is the header's first line when it has one
+  // (the paragraph goes before it, in the header), else the first block after the header.
+  function enterBody(title) {
+    const selection = getSelection();
+    if (!selection.rangeCount || !title.contains(selection.getRangeAt(0).startContainer) || !title.contains(selection.getRangeAt(0).endContainer)) return;
+    const range = selection.getRangeAt(0);
+    const header = title.parentElement;
+    let line = title.nextElementSibling;
+    while (line && !line.matches(UNIT)) line = line.nextElementSibling;
+    const [box, before] = line ? [header, withLeads(line)[0]] : [header.parentElement, header.nextSibling];
+    const paragraph = newParagraphHost(document);
+    if (!box?.hasAttribute("data-ge-box") || !accepts(box.getAttribute("data-ge-box-kind"), paragraph.getAttribute("data-ge-type"))) {
+      say(limitText(title, "split"));
+      return;
+    }
+    struct([...new Set([header, box])], [title], () => {
+      range.deleteContents();
+      const tail = document.createRange();
+      tail.setStart(range.startContainer, range.startOffset);
+      tail.setEnd(title, title.childNodes.length);
+      const moved = tail.extractContents();
+      if (moved.textContent.length > 0) paragraph.append(document.createTextNode(moved.textContent)); // the title's words, plain
+      title.normalize();
+      if (isEmpty(title)) title.replaceChildren();
+      box.insertBefore(paragraph, before);
+      return { touched: [title, paragraph], focus: paragraph };
+    }, { caret: true });
+    caretAt(paragraph, "start");
+  }
+
   // Enter.
   function split(host) {
+    if (HOSTS[host.getAttribute("data-ge-kind")]?.opensBody) return enterBody(host);
     // The caret at the very start of a block with text: an empty paragraph goes before the block and
     // the caret stays (a block that splits does this itself, splitBlock). This comes first: in a code
     // block too, whose own Enter breaks the line.
@@ -266,10 +303,23 @@ export function createTyping({ struct, say, keepText, paragraphBefore, removeBlo
     if (hint) host.setAttribute("data-ge-placeholder", hint);
     else host?.removeAttribute("data-ge-placeholder");
     host?.toggleAttribute("data-ge-adding", add);
+    untitled();
+  }
+
+  // The page's title says 未命名文档 whenever it is empty, the caret in it or not (HOSTS' `untitled`:
+  // notion-lite's page title, data-ph 新页面); asked again on every move of the caret and every input,
+  // so an undo, a deletion across blocks and the workbench's renaming are followed too.
+  function untitled() {
+    if (!UNTITLED) return;
+    for (const host of document.querySelectorAll(UNTITLED)) {
+      if (!isHost(host)) continue;
+      if (isEmpty(host)) host.setAttribute("data-ge-placeholder", placeholderOf(host));
+      else if (host !== placeholder) host.removeAttribute("data-ge-placeholder");
+    }
   }
 
   return {
-    split, backspace, forwardDelete, autoSpace, updatePlaceholder,
+    split, backspace, forwardDelete, autoSpace, updatePlaceholder, untitled,
     /** Tab (`back`: Shift+Tab). Whether the key was taken. */
     tab: (host, back) => asked((keys) => keys.tab, host, back),
     /** Ctrl+Enter. Whether the key was taken. */

package/browser/editor/page/ui.mjs

@@ -55,6 +55,19 @@ export function button(label, action, { primary = false, ...props } = {}) {
   return node;
 }
 
+/**
+ * A text button in the editor's one button look (look.mjs BUTTONS, `.ge-btn`): no line, no fill, a gray
+ * under the pointer. `primary` the pale blue one (add, confirm, save; `data-primary`), `danger` with it the
+ * pale red (a delete), `quiet` a small one for looking, not deciding (`data-quiet`). A press on it leaves
+ * the selection where it is (button()).
+ */
+export function textButton(label, action, { primary = false, danger = false, quiet = false, class: own = "", ...props } = {}) {
+  const node = button(label, action, { primary, class: `ge-btn${own ? ` ${own}` : ""}`, ...props });
+  if (danger) node.dataset.danger = "";
+  if (quiet) node.dataset.quiet = "";
+  return node;
+}
+
 // Editor UI lives in the top layer with an open modal dialog, otherwise it would be inert.
 export function layer() {
   return document.querySelector(DIALOG.open) ?? document.body;