@heycys/gallery 0.1.2 → 0.2.0

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

@@ -5,7 +5,7 @@ import { formulaMaker } from "../formula/index.mjs";
 import { inlineItems, spaceAround } from "../../../shared/inline-spacing.mjs";
 import { caretAt, editable, hostOf, select } from "../caret.mjs";
 import { formatRange, joinMarks, outOfMarks, rangeAt, rangeOffsets } from "../marks.mjs";
-import { BASIC_UNITS, HOSTS, KIND_NAMES, accepts, clipboardOf, takesFormula, texOnly } from "../../components/registry.mjs";
+import { BASIC_UNITS, HOSTS, KIND_NAMES, accepts, clipboardOf, replacedByFile, takesFormula, texOnly } from "../../components/registry.mjs";
 import { listType } from "../../components/list/index.mjs";
 import { nodeAround } from "../../components/flowchart/index.mjs";
 import { cellsData } from "../../components/table/index.mjs";
@@ -284,7 +284,9 @@ export function createClipboard({ editing, blocks, struct, recordText, say, load
   // anchor.parent, after })): right after the block of `at` (unitElement: a new code block's code stands
   // for the block), whole, where a block pasted there goes (placeFor: the first box out that takes it, a
   // list or quote that does not splitting after the block), one undo step (`put`, handed to the
-  // component, which makes the block and fills it). Returns whether one did.
+  // component, which makes the block and fills it, the fill part of that step). An empty block of a kind
+  // that says `replacedByFile` (an empty paragraph: notion-lite's pasteFiles removes an empty text block)
+  // gives its place to the block instead of staying before it. Returns whether one did.
   const fromFiles = (at, files) => {
     const unit = unitElement(at);
     if (!unit?.closest("main")) return false;
@@ -294,7 +296,12 @@ export function createClipboard({ editing, blocks, struct, recordText, say, load
         say(t("这里放不下这种块。"));
         return false;
       }
-      struct(place.parents, [], () => ({ touched: [], focus: null, created: placeAfter(place, [block]) }));
+      const replaced = replacedByFile(unit.getAttribute("data-ge-unit-kind")) && removableEmpty(unit, unit) && !isFirstLine(unit);
+      struct([...new Set([unit.parentElement, ...place.parents])], [], () => {
+        const created = placeAfter(place, [block]);
+        if (replaced) removalTarget(unit).remove();
+        return { touched: [], focus: null, created };
+      });
       return true;
     };
     return pageObjects().some((page) => {

package/browser/editor/page/clipboard/own/blocks.mjs

@@ -2,9 +2,8 @@ import { escapeText } from "../../../../shared/escape.mjs";
 import { heldIn, newContainer, newHost, pastedLines } from "../../core.mjs";
 import { pageBuild } from "../../../components/builders.mjs";
 import { BLOCK_TYPES, COPIED_AS_ITSELF, HOLDS_ONE, TEXT_TYPES, TOGGLES, UNSAID, accepts, clipboardHooks, clipboardOf, isLead, sizeValue } from "../../../components/registry.mjs";
-import { BLOCK_COLORS } from "../../../components/colors.mjs";
 import { MAX_CELL_HTML } from "../../../components/table/index.mjs";
-import { copied, copyOf } from "./describe.mjs";
+import { BLOCK_LOOKS, copied, copyOf } from "./describe.mjs";
 import { imageSource, kindOfBlock, webPage } from "./rules.mjs";
 
 // Described blocks (describe.mjs and selection.mjs, and import/to-blocks.mjs for other programs' content) made (build),
@@ -42,7 +41,7 @@ export function checkBlocks(blocks) {
     const { type } = block;
     const clip = clipboardOf(type);
     if (box && !accepts(box, kindOfBlock(block)) && clip.pastedIn !== box) return false;
-    if (block.color !== undefined && (typeof block.color !== "string" || !block.color.split(" ").every((name) => BLOCK_COLORS.includes(name)))) return false;
+    if (block.color !== undefined && (typeof block.color !== "string" || !block.color.split(" ").every((name) => BLOCK_LOOKS.includes(name)))) return false;
     if (TEXT_TYPES.has(type)) return string(block.html);
     if (type === "copy") return COPIES.has(block.kind) && Number.isInteger(block.unit) && [block.report, block.text, block.html].every((value) => typeof value === "string")
       && (block.data === undefined || (Boolean(clipboardOf(block.data?.type).data) && valid(block.data)));
@@ -120,7 +119,7 @@ function inline(doc, html, { formula = null, mention = null, picture = null } =
 }
 
 
-// A block's colors (`color`: their classes, one of each family), those its kind takes (TOGGLES).
+// A block's colors (`color`: their classes, one of each family, and a text block's alignment and indent), those its kind takes (TOGGLES).
 function colored(element, block) {
   for (const name of block.color?.split(" ") ?? []) if (TOGGLES[element.getAttribute("data-ge-unit-kind")]?.includes(name)) element.classList.add(name);
   return element;

package/browser/editor/page/clipboard/own/describe.mjs

@@ -1,5 +1,6 @@
 import { isHost, nestedBlocks, serializeInner, unitsOf } from "../../core.mjs";
 import { BLOCK_TYPES, COPIED_AS_ITSELF, COPY_KEEPS, TEXT_TYPES, askClipboard, clipboardOf, sizeValue, unitClipboard } from "../../../components/registry.mjs";
+import { ALIGN_TOGGLES, TEXT_BLOCKS } from "../../../components/align.mjs";
 import { BLOCK_COLORS } from "../../../components/colors.mjs";
 import { containerType, typeOf } from "../../convert.mjs";
 import { pageOfType, pageOfUnit } from "../../page-objects.mjs";
@@ -72,8 +73,11 @@ export function copied(doc, block) {
   return (typeof block.data?.html === "string" ? copy.outerHTML === block.html : copy.textContent === block.text) ? unit : null;
 }
 
-/** A block's colors (their classes, space-separated), or null. */
-export const colorOf = (node) => BLOCK_COLORS.filter((name) => node.classList.contains(name)).join(" ") || null;
+/** The classes a block's copy carries as its `color`: its colors, and a paragraph's or a heading's alignment and indent. */
+export const BLOCK_LOOKS = [...BLOCK_COLORS, ...ALIGN_TOGGLES];
+
+/** A block's colors, and a text block's alignment and indent (their classes, space-separated), or null. */
+export const colorOf = (node) => (node.matches?.(TEXT_BLOCKS) ? BLOCK_LOOKS : BLOCK_COLORS).filter((name) => node.classList.contains(name)).join(" ") || null;
 
 /** The type a text block is copied as: its own, the type of the text blocks of what wraps it (a quote's paragraph), or null (code, whose text is no text block's). */
 export function copiedType(host) {

package/browser/editor/page/commit.mjs

@@ -1241,8 +1241,8 @@ export function createCommits({ root, map, baselines, units, boxes, getLayout, s
       else if (element) proposals.set(identityOf(element), id);
     }
     for (const [key, hash] of Object.entries(receipt.hashes ?? {})) if (map.units[Number(key)]) map.units[Number(key)].hash = hash;
-    // The keys of tables the file gave the blocks the commit made and the tables it keyed (a view's
-    // 视图 ›: the key its frame took, an attribute of the unit), other than the page chose
+    // The keys of tables the file gave the blocks the commit made and the tables it keyed (a view
+    // made from a menu: the key its frame took, an attribute of the unit), other than the page chose
     // (source/chart-keys.mjs: one the file had meanwhile): theirs on the page too, so that each card and
     // view reads the table the file links it to ({ old: new | null }, null: off a table); `rekeyed` says
     // which it changed ([element, name, old, new | null]), for the undo steps that recorded them (history.mjs).

package/browser/editor/page/core.mjs

@@ -10,6 +10,7 @@ import { gridOf, tableChange } from "../components/table/grid.mjs";
 import { HELD_TAGS, heldListType, listType } from "../components/list/index.mjs";
 import { isFlowchart, isStep } from "../components/flowchart/index.mjs";
 import { markEmpty } from "../components/placeholder.mjs";
+import { carry } from "../components/align.mjs";
 import { unread } from "./tex.mjs";
 import { MENTION, MENTION_ICON, MENTION_PAGE } from "../../shared/components/mention.mjs";
 import { FLOW_BLOCKS } from "../../shared/components/index.mjs";
@@ -577,7 +578,8 @@ export function newTail(container, type) {
 }
 
 // New blocks split off `from` are paragraphs, or list items in a list.
-const newBlock = (doc, tag, from) => newHost(doc, tag === "li" ? "item" : "paragraph", from);
+// A paragraph split off a paragraph or a heading keeps its alignment and indent (components/align.mjs carry).
+const newBlock = (doc, tag, from) => (tag === "li" ? newHost(doc, "item", from) : carry(from, newHost(doc, "paragraph", from)));
 
 /** A new, empty paragraph, as a split makes one outside a list (the page's title's Enter: typing/ enterBody). */
 export const newParagraphHost = (doc) => newBlock(doc, "p", null);

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

@@ -10,10 +10,12 @@ import { connectWorkbench } from "./session.mjs";
 // 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 (the top bar's 添加自定义块: the library of the page's first board, under the button's place that
-// the workbench sends) and, on the home page, restore-defaults (恢复默认卡片, the sidebar'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 撤销),
+// 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
@@ -24,6 +26,13 @@ const IDLE = { editing: false, pending: false, saving: false, offline: false, co
 // 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}`,
@@ -35,8 +44,8 @@ const session = connectWorkbench({
     },
     // 添加自定义块 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.
-    "add-card": async ({ anchor } = {}) => (board ? board.addCard({ anchor }) : { ok: false, reason: "board" }),
-    ...(slug === "home" ? {
+    ...(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" }),
     } : {}),
@@ -44,11 +53,6 @@ const session = connectWorkbench({
   modals: NO_MODALS,
 });
 
-// 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 {}
 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.

package/browser/editor/page/editor.mjs

@@ -15,6 +15,7 @@ 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";
@@ -24,6 +25,7 @@ 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";
@@ -36,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";
@@ -72,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)
@@ -261,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
@@ -326,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({
@@ -673,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);
 }
 
@@ -703,10 +711,9 @@ 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.
  */
-// `also` (a table's 视图 ›: page/table/views.mjs): `attributes` ([element, names]) the step records too, and
-// `done(made)` run in it on the new block (the element where the empty paragraph was), so that what binds
-// the block to the one above it is the same step.
-function insertBelow(target, type, typed = null, also = null) {
+// 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;
   while (!splits && after && !accepts(after.parentElement?.getAttribute("data-ge-box-kind"), "paragraph")) after = after.parentElement?.closest(OUTER);
@@ -724,12 +731,10 @@ function insertBelow(target, type, typed = null, also = null) {
       after.after(fresh);
     }
     if (!fresh) return null;
-    const prior = fresh.previousSibling; // what the new block stands right after, made where the paragraph was
     const turned = type === "paragraph" && fresh.localName === "p" ? { focus: null, created: [] } : convertBlock(fresh, type, { fresh: true });
-    also?.done?.(fresh.isConnected ? fresh : prior?.nextElementSibling ?? null);
     const focus = turned.focus ?? fresh;
     return { touched: splits ? [target, focus] : [focus], focus, created: turned.created };
-  }, { attributes: also?.attributes ?? [] });
+  }, { attributes: viewFrames(type) });
   if (result) afterConvert(result.focus, type, t("已插入{0}", menuRow(type).label));
 }
 
@@ -782,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");
@@ -823,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;
@@ -928,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();
   }
 }
 
@@ -1243,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"]');
@@ -1473,8 +1489,9 @@ 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).
   // `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() }), commands: COMMANDS, modals: modalOps() });
+  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.
@@ -1655,8 +1672,8 @@ function boot() {
   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, cellsOf: (data) => clipboard.cellsOf(data), upload: uploadTo, typedKey,
-    recordStep, insertBelow: (unit, type, also) => insertBelow(unit, type, null, also),
+    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);

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;
   }
 
@@ -151,7 +157,7 @@ export function createHistory({ changed, beforeUndo, blocks, afterText, refuse =
   // 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 table's 视图 › redone with the key its view
+  // 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;
@@ -162,6 +168,14 @@ export function createHistory({ changed, beforeUndo, blocks, afterText, refuse =
           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;
+          });
+        }
+      }
     }
   }
 
@@ -194,7 +208,7 @@ export function createHistory({ changed, beforeUndo, blocks, afterText, refuse =
   // 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 } = {}) {
+  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
@@ -246,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");

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

@@ -1,10 +1,10 @@
 import { OUTER, UNIT, blocksIn, boxKind, heldIn, newHost, newTail, placeBefore, unitElement, withLeads } from "../core.mjs";
 import { containerType } from "../convert.mjs";
 import { begin, done, made } from "../made.mjs";
-import { selectsBeside } from "../beside.mjs";
+import { caretBeside } from "../beside.mjs";
 import { caretAt, nearestOnLine, placeCaret, selectAt } from "../caret.mjs";
 import { sectionOps } from "../page-objects.mjs";
-import { contentOf, endOf, hoverAt, innerBox, measure } from "../geometry.mjs";
+import { endOf, hoverAt, innerBox, measure } from "../geometry.mjs";
 import { BOXED, HOLDS_ONE, accepts } from "../../components/registry.mjs";
 import { DIALOG } from "../../components/kit.mjs";
 
@@ -18,9 +18,9 @@ import { DIALOG } from "../../components/kit.mjs";
 
 /**
  * struct(parents, touched, mutate): the editor's undoable structural change (history.mjs). blocks():
- * the block tools (blocks.mjs).
+ * the block tools (blocks.mjs). after: the caret after a block (after/).
  */
-export function createInsert({ struct, blocks }) {
+export function createInsert({ struct, blocks, after }) {
   // An empty paragraph right before the block of a text block, the caret staying where it is.
   // Returns whether one could go there.
   function paragraphBefore(host) {
@@ -54,10 +54,10 @@ export function createInsert({ struct, blocks }) {
   // (geometry.mjs endOf). Under the last block of a box whose end is its own padding (endIsPadding: a
   // highlight block, a callout, a disclosure's content; the user's, 2026-11-06, as notion-lite's click-blank.js
   // makes a block only below the page and in a column) it is a gap like any other, below. Right of
-  // the text area a boxed block (a code block, a callout, a file…: not text) or a row of columns
-  // stands in, at its height (boxedBeside), that block selected, so Delete takes it and Enter puts a
-  // paragraph after it; between a narrower block's right edge and its column's, as beside any block
-  // of no text (below). Elsewhere beside text, the caret goes into the text block on that line (the nearest of those
+  // a boxed block (a code block, a callout, a file…: not text) or a row of columns, at its height
+  // (boxedBeside), the caret after it, at its bottom right (after/: Backspace deletes it, Enter or a
+  // key makes a paragraph after it; the user's, 2026-11-09: a click there selected it before).
+  // Elsewhere beside text, the caret goes into the text block on that line (the nearest of those
   // side by side), where the line is nearest the click (Notion's way); in the gap between two
   // blocks, or beside a block of no text, into the nearer of the blocks around it that is text, in the
   // innermost box at that height (boxBeside: the press may be on the page's margin, the block in a
@@ -82,7 +82,7 @@ export function createInsert({ struct, blocks }) {
     if (end) return newParagraph(end.box, end.after);
     const top = y + scrollY;
     const beside = boxedBeside(main, x, y, target);
-    if (beside) return blocks().select(beside);
+    if (beside) return after.place(beside);
     const host = hoverAt(measure(main, { top, bottom: top }), x + scrollX, top, { reach: Infinity, skip: (unit) => !unit.text });
     if (host) return caretNear(host, x, y);
     for (let around = boxBeside(box, x, y); around; around = around === box ? null : around.parentElement.closest("[data-ge-box]")) {
@@ -157,26 +157,24 @@ export function createInsert({ struct, blocks }) {
     const texts = [unit, ...unit.querySelectorAll("[data-ge-block], [data-ge-new]")].filter((node) => node.isContentEditable && node.getClientRects().length > 0 && !node.closest("details:not([open]) > :not(summary)"));
     return (last ? texts.at(-1) : texts[0]) ?? null;
   }
-  // A boxed block or a row of columns at height `y` with (x, y) right of the text area it stands in
-  // (the content box of its box: the page's column, a column of 分栏, a section's, a quote's, a
-  // highlight block's or a callout's, a disclosure's content) and right of the block itself (one
-  // wider than that area), or null: in the page's margin, or in the padding of the box it stands in;
-  // never between a narrower block's right edge and its area's (a table, a picture: the user's,
-  // 2026-11-07, a click there selected it), nor in another text area (the blank box `target` the
-  // press was on holds the block: a column further right is no place beside one in the column left
-  // of it). The innermost, but never a block inside a row of columns the click is to the right of too
-  // (the row is selected whole): past a column's edge is the gap to the next column, whose press is
-  // the gap's (columns/: it drags, a click alone changes nothing), or past the row, which is selected.
+  // A boxed block or a row of columns at height `y` with (x, y) right of it: between its right edge
+  // and the text area's it stands in (a table, a picture narrower than its column: the user's,
+  // 2026-11-09, the caret after it where a click there once selected it, 2026-11-07, and later went to
+  // the nearest text), in the padding of the box it stands in (a highlight block's, a callout's) or in the
+  // page's margin; or null. Never in another text area (the blank box `target` the press was on holds the
+  // block: a column further right is no place beside one in the column left of it). The innermost,
+  // but never a block inside a row of columns the click is to the right of too (the caret goes after
+  // the row): past a column's edge is the gap to the next column, whose press is the gap's (columns/:
+  // it drags, a click alone changes nothing), or past the row.
   function boxedBeside(main, x, y, target) {
     let found = null;
     const right = (unit) => {
       const rect = unit.getBoundingClientRect();
       if (y < rect.top || y > rect.bottom || (target?.contains && !target.contains(unit))) return false;
-      const box = unit.parentElement;
-      return x > Math.max(rect.right, contentOf(box.getBoundingClientRect(), getComputedStyle(box)).right);
+      return x > rect.right;
     };
     for (const unit of main.querySelectorAll(`[data-ge-unit-kind]`)) {
-      if (!selectsBeside(unit) || !unit.parentElement?.hasAttribute("data-ge-box") || unit.parentElement.closest("details:not([open])")) continue;
+      if (!caretBeside(unit) || !unit.parentElement?.hasAttribute("data-ge-box") || unit.parentElement.closest("details:not([open])")) continue;
       if (!right(unit)) continue;
       const row = unit.parentElement.closest('[data-ge-unit-kind="columns"]');
       if (row && main.contains(row) && right(row)) continue;

package/browser/editor/page/menu.mjs

@@ -86,8 +86,8 @@ const STYLE = `
   /* A note wraps at the card's width and never widens it (no width of its own: contain). */
   .ge-pop-note { contain: inline-size; padding: 0 12px 6px 40px; color: var(--ge-tx3); font-size: 12px; line-height: 1.5; }
   .ge-pop-empty { padding: 8px 12px; color: var(--ge-tx3); }
-  /* What a row makes, shown beside it under the pointer (a component package's preview.svg). */
-  .ge-pop-preview { display: block; width: 240px; max-height: 180px; border-radius: 4px; object-fit: contain; background: var(--ge-bg); }
+  /* What a row makes, shown beside it under the pointer (a component package's preview.svg), in the middle of the bubble: its description under it wraps wider than the picture. */
+  .ge-pop-preview { display: block; width: 240px; max-width: 100%; max-height: 180px; margin: 0 auto; border-radius: 4px; object-fit: contain; object-position: center; background: var(--ge-bg); }
   .ge-pop-search { position: sticky; top: 0; z-index: 1; padding: 8px 8px 6px; background: var(--ge-bg); }
   .ge-pop-search input { box-sizing: border-box; width: 100%; height: 28px; margin: 0; padding: 0 8px; border: 0; border-radius: 6px; outline: none; background: var(--ge-hover); color: var(--ge-tx); font: inherit; box-shadow: inset 0 0 0 1px var(--ge-line); }
   .ge-pop-search input:focus { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ge-tx3) 60%, transparent); }
@@ -145,7 +145,9 @@ export const menuOpen = () => opened.size > 0;
  * as its rows (FIT; SEARCHING with a search field). around: the rect of the block a handle
  * (the anchor) stands for; the menu keeps clear of that block: left of it beside the handle, else
  * below or above it (scrolling inside when only part of it fits), and over it only when the block
- * leaves no room at all. side: "right": beside the anchor, right of it (left of it when there is no
+ * leaves no room at all; a tall block (more than TALL high: a table, a formula, a highlight, an image)
+ * has it beside the handle, left of it or, with no room there,
+ * right of it over the block, centered on the handle, never over the handle. side: "right": beside the anchor, right of it (left of it when there is no
  * room), level with it (a section's bar). Without either the menu stands below the anchor (the
  * caret), or above it when there is no room below; align: "end", its right edge at the anchor's.
  * icons: false, rows of words alone (no column for icons: a code block's languages; a row that opens a
@@ -276,6 +278,7 @@ export function createMenu() {
   }
 
   const clamp = (value, low, high) => Math.max(low, Math.min(high, value));
+  const TALL = 34; // px: a block taller than this (a line of text is 26px) is a tall one: its menu may stand over it
 
   function place() {
     if (options.inside) return;
@@ -324,11 +327,16 @@ export function createMenu() {
       const below = innerHeight - margin - (block.bottom + gap);
       const above = block.top - gap - margin;
       const beside = anchor.left - gap - width;
-      if (beside >= margin) {
-        // Left of the block, centered on its handle.
+      // A block of more than a line (a table, a formula, a highlight, an image: taller than TALL) may
+      // have the menu over it: beside its handle, right of it where there is no room left of it,
+      // rather than below the block, away from the handle.
+      const middle = (anchor.top + anchor.bottom) / 2;
+      const onRight = block.bottom - block.top > TALL && anchor.right + gap + width <= innerWidth - margin;
+      if (beside >= margin || onRight) {
+        // Beside the handle (never over it), left first, centered on it.
         fit(room);
-        left = beside;
-        top = clamp((anchor.top + anchor.bottom) / 2 - height / 2, margin, innerHeight - margin - height);
+        left = beside >= margin ? beside : anchor.right + gap;
+        top = clamp(middle - height / 2, margin, innerHeight - margin - height);
       } else if (Math.max(below, above) >= Math.min(height, 180)) {
         // Below the block, else above it; in the larger of the two when it fits in neither.
         left = clamp(anchor.left, margin, innerWidth - width - margin);

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

@@ -36,14 +36,10 @@ const variants = () => Object.keys(TYPE_COMPONENT).flatMap((type) => Object.entr
 
 /**
  * The keys of the variants the menus of blocks offer now ("/", 在下方新建, the handle's +, 转换成): every
- * one but a view of a table (`readsTables`: a custom block whose needs hold "tables"), which a table's
- * 视图 › alone offers, as it puts one in bound to that table (viewKeys): one put in anywhere else would
- * only say it has no table to read.
+ * one, a view of a table (`readsTables`: a custom block whose needs hold "tables") too, which binds
+ * itself to the table above it as it is made (components/installed/page.mjs; page/table/binding.mjs).
  */
-export const variantKeys = () => variants().filter(([, row]) => !row.readsTables).map(([key]) => key);
-
-/** The keys of the variants that are views of a table, for a table's 视图 › (table/views.mjs). */
-export const viewKeys = () => variants().filter(([, row]) => row.readsTables).map(([key]) => key);
+export const variantKeys = () => variants().map(([key]) => key);
 
 /** The page objects, in the order they are made. */
 export const pageObjects = () => Object.values(pages);

package/browser/editor/page/present-links.mjs

@@ -2,7 +2,7 @@ import { t } from "../../shared/i18n/index.mjs";
 import { addressOn, elsewhere, fromFile, isPageAddress, mayBePage, pageAddress, workbenchHash } from "../../shared/page-address.mjs";
 import { inTrash, linkedPages, pageLinks } from "../../shared/page-links.mjs";
 import { entryOfKey } from "../../shared/extension-sidebar.mjs";
-import { PROTOCOL, VERSION } from "../../shared/session.mjs";
+import { SHELL, tell } from "./present-shell.mjs";
 
 // The links of a page shown in 演示视图 (?present: src/server/routes.mjs), which has no editor and whose
 // frame the presentation holds (src/workbench/app/features/present/). A link to a document or a block
@@ -16,7 +16,8 @@ import { PROTOCOL, VERSION } from "../../shared/session.mjs";
 // a click stays theirs: an anchor, a link to save, a link of a target of its own, any click with a key
 // held. A workbench's address that names a web link of the sidebar, or an entry of an extension's column
 // (#~<id>/<entry id>, one with an address), is a web address to the presentation: its page goes to a new
-// tab; an entry the list does not hold, or one with no address, is said gone as a document is.
+// tab; an entry the list does not hold, or one with no address, is said gone as a document is. (In a draft's presentation, a frame
+// of its workspace's own server, the word goes to the workbench of another origin and a link keeps it around the page: present-shell.mjs.)
 
 const own = pageAddress(location.href)?.slug ?? null;
 const openTab = (address) => window.open(address, "_blank", "noopener");
@@ -24,13 +25,13 @@ const read = (route) => fetch(`/__gallery/workspace/${route}`).then((answer) =>
 
 function go({ slug, block }) {
   const fragment = block ? `#${encodeURIComponent(block)}` : "";
-  if (slug !== own) location.assign(`/generated/${slug}.html?present${fragment}`);
+  if (slug !== own) location.assign(`/generated/${slug}.html?present${SHELL ? `&shell=${encodeURIComponent(SHELL)}` : ""}${fragment}`); // a draft's presentation keeps the workbench around it (present-shell.mjs)
   else if (block) dispatchEvent(new CustomEvent("doc-jump-request", { detail: { hash: fragment } })); // the kit's jump, a step of the history as a link #<block id> is
 }
 
 function sayGone(name, { trash = [] } = {}) {
   const text = inTrash(trash, name) ? t("这个页面已删除。") : t("没有找到这个页面。");
-  window.parent.postMessage({ protocol: PROTOCOL, v: VERSION, type: "notice", slug: own, text }, location.origin);
+  tell("notice", { text });
 }
 
 async function follow(address) {