@heycys/gallery 0.1.1 → 0.2.0

package/browser/editor/components/installed/served.mjs

@@ -17,13 +17,14 @@ let any = false; // the server could not say which: the page connected a moment
 export const isBehind = (id) => any || behind.has(id);
 
 /**
- * `components`, the list a page holds, as the reader's settings now say: the state each package says,
- * which a menu reads, at once and with nothing shown again (`doc-settings-changed`). A package that
- * comes on is in none of that yet: it comes with the list the page reads as the catalog changes, as
- * one added does (`doc-catalog-changed`, ./page.mjs).
+ * `components`, the list a page holds, as the reader's settings now say: the state each package says
+ * by its `places` and gallery.json's hidden, shown, disabled, unlisted and packs off (settingState, inDocumentMenus: the
+ * server's own rule), which a menu reads, at once and with nothing shown again (`doc-settings-changed`).
+ * A package that comes on is in none of that yet: it comes with the list the page reads as the catalog
+ * changes, as one added does (`doc-catalog-changed`, ./page.mjs).
  */
 export function followSettings(components, settings) {
-  for (const entry of components) entry.state = settingState(entry.id, settings);
+  for (const entry of components) entry.state = settingState(entry.id, { hidden: [], shown: [], disabled: [], unlisted: [], packsOff: [], ...settings }, entry.places);
 }
 
 /** Hears what changed of the catalog while the page held no instance of it. */

package/browser/editor/components/instances.mjs

@@ -0,0 +1,18 @@
+import { ATTRIBUTE, INSTANCE } from "../../shared/components/installed.mjs";
+
+// A custom page's card read for the instance it holds, by the host's own mark of an instance
+// (shared/components/installed.mjs INSTANCE, ATTRIBUTE: a div or section naming its package): the one
+// the server reads (shared/page-cards.mjs readPage, which refuses an article or a span carrying the
+// attribute, and page check fails it) and the kit's page runtime reads. The board
+// (src/editor/page/board/index.mjs) is a page engine and knows no package's marks, so what it asks of
+// the DOM it asks here: a card with an `<article data-doc-component="…">` is a card with no instance on
+// the page too, offered no settings and sending no part, instead of one the service then refuses.
+
+/** The instance card `card` holds (its child that is one), or null. */
+export const instanceOf = (card) => [...card.children].find((child) => child.matches(INSTANCE)) ?? null;
+
+/** The package id an instance names (<scope>/<name>), or null for no instance. */
+export const packageOf = (instance) => instance?.getAttribute(ATTRIBUTE) ?? null;
+
+/** The nearest instance around `node` (itself counted), or null. */
+export const instanceAround = (node) => node.closest(INSTANCE);

package/browser/editor/components/list/page.mjs

@@ -6,7 +6,7 @@ import { begin, done, made } from "../../page/made.mjs";
 import { createMenu } from "../../page/menu.mjs";
 import { keptByComponent } from "../../page/page-objects.mjs";
 import { hideTooltip, tooltipAt } from "../../page/tooltip.mjs";
-import { addStyle, element } from "../../page/ui.mjs";
+import { addStyle, element, textButton } from "../../page/ui.mjs";
 import { CHECKED, CONTINUE, FLOW, START, TODO, heldListType, holdsSays, listType, mergeSays } from "./index.mjs";
 import { BLOCK_TYPES, accepts } from "../registry.mjs";
 import { FLOW_KEY, isFlowLabel } from "../../../shared/components/list.mjs";
@@ -186,8 +186,7 @@ const STYLE = `
   .ge-list-value-title { padding: 10px 12px 0; color: var(--ge-tx2); font-size: 12px; font-weight: 500; line-height: 14px; }
   .ge-list-value input { box-sizing: border-box; flex: 1; min-width: 0; 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-list-value input:focus { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ge-tx3) 60%, transparent); }
-  .ge-list-value button { flex: none; height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--ge-accent); color: #fff; font: inherit; cursor: pointer; }
-  .ge-list-value button:hover { background: var(--ge-accent-hover); }
+  .ge-list-value .ge-btn { flex: none; }
 `;
 
 // ---------- keys, numbers ----------
@@ -494,9 +493,7 @@ export function create({ struct, say, convertHost, targetsOf, look, isEditing, b
       } else return;
       event.preventDefault();
     });
-    const confirm = element("button", { type: "button", text: t("确定") });
-    confirm.addEventListener("mousedown", (event) => event.preventDefault());
-    confirm.addEventListener("click", apply);
+    const confirm = textButton(t("确定"), apply, { primary: true });
     const view = element("div", {}, element("div", { class: "ge-list-value-title", text: t("新编号为") }), element("div", { class: "ge-list-value" }, field, confirm));
     item.setAttribute("data-ge-number", "open");
     menu.open([{ node: view, cells: [] }], rect, { label: t("修改编号值"), icons: false, width: 148, highlight: false, onClose: () => item.removeAttribute("data-ge-number") });

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

@@ -1,18 +1,23 @@
 import { svg } from "../icons.mjs";
+import { TABLE_ICONS } from "../../page/table/icons.mjs";
 
 // The media blocks' toolbar icons (an image's, an embed's, the block menus' rows): the editor's own line
 // drawings (components/icons.mjs svg) on the same 20 units as the menus' others, the picture in the
 // middle 16 of them. They carry no size or color: the toolbar's buttons and the menus set them.
+// Plain, a few strokes each (the user, 2026-11-09: Notion's looked too close, then the bars against a
+// guide line that took their place too busy): a side is the editor's own 对齐 lines, the ones a text
+// block's and a table's 对齐 › show (table/icons.mjs), so one look says it everywhere; a caption a picture
+// (one hill in it) over a line of words; viewing large one line corner to corner with a head at each end; three dots.
 
 export const TOOL_ICONS = {
-  // The three sides: a picture beside the line it stands against, between a rule above and below.
-  alignLeft: svg('<path d="M4 4.5h12M4 15.5h12"/><rect x="4" y="7.25" width="6.5" height="5.5" rx="1.25"/>'),
-  alignCenter: svg('<path d="M4 4.5h12M4 15.5h12"/><rect x="6.75" y="7.25" width="6.5" height="5.5" rx="1.25"/>'),
-  alignRight: svg('<path d="M4 4.5h12M4 15.5h12"/><rect x="9.5" y="7.25" width="6.5" height="5.5" rx="1.25"/>'),
-  // A picture with two lines of caption under it.
-  caption: svg('<rect x="4.5" y="4" width="11" height="6.5" rx="1.5"/><path d="M4.5 13.25h11M4.5 16h6"/>'),
-  // A magnifier with a plus.
-  expand: svg('<circle cx="9" cy="9" r="5"/><path d="m12.75 12.75 3.5 3.5M7 9h4M9 7v4"/>'),
+  // The three sides: the editor's alignment lines (a text block's 对齐 ›, a table's).
+  alignLeft: TABLE_ICONS["doc-align-left"],
+  alignCenter: TABLE_ICONS["doc-align-center"],
+  alignRight: TABLE_ICONS["doc-align-right"],
+  // A picture (its frame, one hill in it) over a line of words.
+  caption: svg('<rect x="3.75" y="3.25" width="12.5" height="9.5" rx="1.5"/><path d="m4 11.75 4-3.5 4.5 4M3.75 16.25h12.5"/>'),
+  // One line from corner to corner, a head at each end.
+  expand: svg('<path d="M11.5 4.25h4.25V8.5M8.5 15.75H4.25V11.5M15.25 4.75l-10.5 10.5"/>'),
   // An arrow down onto a line.
   download: svg('<path d="M10 4v9M6.5 9.75l3.5 3.5 3.5-3.5M4.5 16h11"/>'),
   more: svg('<circle cx="5" cy="10" r="1.3" fill="currentColor" stroke="none"/><circle cx="10" cy="10" r="1.3" fill="currentColor" stroke="none"/><circle cx="15" cy="10" r="1.3" fill="currentColor" stroke="none"/>'),

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

@@ -175,14 +175,16 @@ export function create({ struct, finishStep, look, say, active, blocks, newParag
       },
       /**
        * `file` pasted: a new block made by `make(doc)`, put in its place by `put` (the paste's, clipboard/:
-       * where a block pasted there goes, one undo step; false when it could not), then `fill(figure, file)`
-       * (its placeholder filled). Returns whether it took the file.
+       * where a block pasted there goes, one undo step; false when it could not), the block selected, then
+       * `fill(figure, file, { pasted: true })` (its placeholder filled, in the same undo step: one Ctrl+Z
+       * takes the paste back to what stood there). Returns whether it took the file.
        */
       paste(put, file, make, fill) {
         if (!file) return false;
         const figure = make(document);
         if (!put(figure)) return false;
-        fill(figure, file);
+        blocks()?.select(figure, { quiet: true });
+        fill(figure, file, { pasted: true });
         return true;
       },
     };

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

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

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

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

package/browser/editor/components/registry.mjs

@@ -44,7 +44,7 @@ import { t } from "../../shared/i18n/index.mjs";
 //               without. What is hidden goes from "/", 在下方新建 and the handle's grid and nothing else
 //               (page/offered.mjs); its blocks, its Markdown shortcut and "Blocks at a glance" stay.
 //   units       the unit kinds it defines (blocks the reader selects, moves and deletes):
-//               { [kind]: { name, icon?, match, chapter?, fixed?, block?, handle?, below?, boxed?, beside?, inRow?, sharesHeight?, entersAfter?, resizable?, copy?, clipboard?, sizes?, toggles?, colors?, colorDefaults?, removedEmpty?, turnsEmpty?, leadsChapter?, canHaveChildren?, emptyIsNothing?, fromWords?, attributes? } }
+//               { [kind]: { name, icon?, match, chapter?, fixed?, block?, handle?, below?, boxed?, beside?, inRow?, sharesHeight?, entersAfter?, resizable?, copy?, clipboard?, sizes?, toggles?, colors?, colorDefaults?, removedEmpty?, turnsEmpty?, leadsChapter?, canHaveChildren?, emptyIsNothing?, fromWords?, replacedByFile?, attributes? } }
 //               match: rules an element matches by its tag (one of `tag`), its class and its
 //               attribute, and by the element it stands in (`parent`: { tag?, class? }, a flowchart's
 //               step being an li whose parent is an ol.doc-flow), whichever are given; every
@@ -58,7 +58,7 @@ import { t } from "../../shared/i18n/index.mjs";
 //               (its container's: a tab's, the Sheet area's, on the tab row); below: false, its menu
 //               offers no new block below it (a tab, a Sheet area); boxed: a block with a frame of its
 //               own, no text flowing beside it: a double click between two of them makes a paragraph,
-//               a click to its right selects it, Enter on it selected puts a paragraph after it unless
+//               a click to its right puts the caret after it (page/after/), Enter on it selected puts a paragraph after it unless
 //               it is a text block (beside.mjs), and it is a block of its own to Ctrl+A; beside: the
 //               same click and Enter without being boxed (a row of columns); inRow(element): whether
 //               this one stands beside another now, as a row of columns always does and a flowchart's
@@ -91,6 +91,8 @@ import { t } from "../../shared/i18n/index.mjs";
 //               keys of a block stand after it as they stand in what it is in (a list: under its last item).
 //               emptyIsNothing: a block of it left empty counts as nothing written, in a container
 //               that says `removedEmpty`. fromWords: a block of it can be made again from its words alone.
+//               replacedByFile: a file pasted at the caret in an empty block of it takes the block's place (notion-lite's
+//               pasteFiles: an empty text block goes), else it goes after the block (page/clipboard/).
 //   boxes       the box kinds it defines (containers whose children are units): { [kind]: { role,
 //               name?, classes?, find?, owner?, takenBy?, also?, leaveByEnter?, endIsPadding?, lead?, firstLineActs?, firstBlock?, groups?, holdsOne?, emptyIsNothing?, outer?, selectAll? } }, classes being the kit's classes that make an element one
 //               (rank order, as above); the others the server knows by their tag (findUnits). find: where
@@ -136,7 +138,7 @@ import { t } from "../../shared/i18n/index.mjs";
 //               own. Every component's rules are tried in `rank` order, with the page's (PAGE below),
 //               and the first match wins: a rule ranked below the page's 80 goes before any control's,
 //               and is the one that can claim a button as its own.
-//   hosts       the kinds of text block it defines (data-ge-kind): { [kind]: { name, caps, tex?, wrapped?, parts?, opensBefore?, textFilters?, formula?, closed?, inner?, blankSays?, placeholder? } }, caps
+//   hosts       the kinds of text block it defines (data-ge-kind): { [kind]: { name, caps, tex?, wrapped?, parts?, opensBefore?, textFilters?, formula?, closed?, inner?, pictures?, blankSays?, placeholder?, untitled?, opensBody? } }, caps
 //               ({ bound, blockLevel }) giving what such a text block can do (source/); opensBefore:
 //               Enter at its very start, with words in it, puts an empty paragraph before its block
 //               where it does not split, as one that splits does (typing/); textFilters: false, what
@@ -145,14 +147,19 @@ import { t } from "../../shared/i18n/index.mjs";
 //               none there (takesFormula);
 //               closed: the page holds no text block for it until the reader opens it (a code block);
 //               inner(element): the text a save takes of one, as markup, where that is not what its
-//               nodes say (a code block's code);
+//               nodes say (a code block's code); pictures: it holds pictures amid its words (a table
+//               cell's), { show(root) (the file's made the page's: where the server serves them),
+//               write(element) (one's markup, "" for one of no file, null for no picture) } (core.mjs);
 //               parts: the parts of components ([component id, part name]: a part of its shared
 //               description edited as text, src/shared/components/) whose elements are text blocks
 //               of this kind, found so by the server's scan; tex: its text is a formula's TeX alone; wrapped: the page makes the text block a
 //               span inside the element, which keeps its own behaviour (a Sheet tab's button);
 //               blankSays: what the status line says of one left blank that must hold words, as a
 //               type's says of a block of it (blankSaysOf); placeholder: what one says while it
-//               is empty under the caret, whatever part it is (placeholderOf)
+//               is empty under the caret, whatever part it is (placeholderOf); untitled: it says its
+//               placeholder whenever it is empty, the caret in it or not (the page's title, notion-lite's
+//               data-ph 新页面: typing/ updatePlaceholder); opensBody: Enter in it goes to the body, what
+//               follows the caret a new paragraph right below it (the page's title: typing/ enterBody)
 //   placeholders  what an empty text block says while the caret is in it: { [part]: text }, part
 //               being a part of its shared description (src/shared/components/) whose element it is
 //               (placeholderOf); a heading's own is its type's `placeholder`, and a type's `placeholder:
@@ -160,7 +167,7 @@ import { t } from "../../shared/i18n/index.mjs";
 //   types       the blocks the reader can make on the page or turn a block into (the "/" menu,
 //               Markdown shortcuts, the block menu), written by the server in the kit's plain markup:
 //               { [type]: { tag, className?, kind, box?, leaf?, wraps?, container?, part?, text?, inside?, tex?,
-//               empty?, resettable?, bare?, placeholder?, bar?, label?, icon?, hint?, markdown?, words?, turn?, menu?, fresh?,
+//               empty?, resettable?, emptyToText?, bare?, placeholder?, bar?, label?, icon?, hint?, markdown?, words?, turn?, menu?, fresh?,
 //               corner?, preload?, onSplit?, create?, takesAsIs?, holder?, nests?, joins?, leadIcon?, fromSelection?, clipboard?, glance? } } and, for the blocks the page
 //               and the server write apart from text, title?, content?, keyed?, written?,
 //               extras?, textHost?, blanks?, blankSays? (what each says is at its component). Leaves hold
@@ -169,7 +176,8 @@ import { t } from "../../shared/i18n/index.mjs";
 //               giving its markup, its words in the language t() says them in: components/placeholder.mjs
 //               mediaBar); resettable: an empty block of the type
 //               turns into body text on Enter, and the first of its container on Backspace at its start (a
-//               quote's paragraph, a list item: notion-lite's `resettable`, typing/leave.mjs). leaf: the text block a block turned
+//               quote's paragraph, a list item: notion-lite's `resettable`, typing/leave.mjs); emptyToText: Backspace in an
+//               empty block of the type turns it into an empty paragraph where it stands (a heading, small text: typing/leave.mjs). leaf: the text block a block turned
 //               into the type becomes; wraps: such a text block sits in a container of the type, found
 //               by `container` (a selector); text: a plain text leaf; empty: a leaf written with no
 //               text too (a paragraph, a heading, a list item, a code block: an empty
@@ -380,7 +388,11 @@ const PAGE = {
   hosts: {
     // A free text block may be left empty (Notion's): written as an empty element, one line high.
     flow: { opensBefore: true, caps: ({ bound }) => bound ? ["split", "merge", "links"] : ["split", "merge", "remove", "empty", "links"] },
-    title: { name: t("文档主标题"), caps: () => ["plain"], blankSays: t("文档主标题还空着：写上标题后才会保存。") },
+    // The page's title may be left empty (notion-lite's page title): an untitled document, its title
+    // saying 未命名文档 in gray (`untitled`), never written into the file; whatever names the document
+    // names it so (the workbench's reportTitle, links/pages.mjs, an export's <title>). Enter in it goes to the
+    // body (`opensBody`: typing/ enterBody, notion-lite's page title).
+    title: { name: t("文档主标题"), caps: () => ["plain", "empty"], placeholder: t("未命名文档"), untitled: true, opensBody: true },
     ...MEDIA_HOSTS,
   },
   readOnly: [
@@ -427,6 +439,12 @@ export const CATEGORY_NAMES = Object.fromEntries(Object.entries(CATEGORIES).map(
  */
 export const COPIED_AS_ITSELF = new Set(Object.entries(UNITS).filter(([kind, unit]) => UNIT_CATEGORY[kind] === "card" || unit.copy === "itself").map(([kind]) => kind));
 
+/**
+ * The unit kinds drawn with no selection fill while selected alone (their own tools show it), each with
+ * the selector its element must hold for that (an image with its picture: a placeholder is filled).
+ */
+export const UNFILLED_ALONE = Object.fromEntries(Object.entries(UNITS).filter(([, unit]) => unit.unfilled).map(([kind, unit]) => [kind, unit.unfilled]));
+
 /** What the reader calls each kind of unit (block labels while dragging, the block menu). */
 export const KIND_NAMES = Object.fromEntries(Object.entries(UNITS).filter(([, unit]) => unit.name).map(([kind, unit]) => [kind, unit.name]));
 
@@ -735,6 +753,9 @@ export const removedFromAnywhere = (kind) => UNITS[kind]?.removedEmpty === "anyw
 const NOTHING_EMPTY = flagged("emptyIsNothing");
 export const TEXT_BLOCKS = [...new Set(Object.values(BLOCK_TYPES).filter((spec) => NOTHING_EMPTY.has(spec.kind)).map((spec) => spec.tag)), ...Object.values(BOXES).filter((box) => box.emptyIsNothing).flatMap((box) => box.classes.map((rule) => `.${rule.class}`))].join(", ");
 
+/** Whether an empty unit of this kind gives its place to a file pasted at its caret (`replacedByFile`). */
+export const replacedByFile = (kind) => Boolean(UNITS[kind]?.replacedByFile);
+
 /** Whether what a unit of this kind is turned into is an empty block in its place (`turnsEmpty`). */
 export const turnsEmpty = (kind) => Boolean(UNITS[kind]?.turnsEmpty);
 
@@ -768,7 +789,7 @@ export const hasOuter = (boxKind) => BOXES[boxKind]?.outer !== false;
 /** The unit kinds with a frame of their own (`boxed`): a double click between two makes a paragraph (insert/). */
 export const BOXED = flagged("boxed");
 
-/** The unit kinds a click to the right of one, past the text area it stands in, selects: the boxed ones and those that say `beside` (beside.mjs). */
+/** The unit kinds a click to the right of one puts the caret after (page/after/): the boxed ones and those that say `beside` (beside.mjs). */
 export const BESIDE = new Set([...BOXED, ...flagged("beside")]);
 
 /** Whether a unit of this kind stands beside another now, `element` being that unit (`beside`, `inRow`). */

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

@@ -1,3 +1,4 @@
+import { ALIGN_PLACES } from "../align.mjs";
 import { BLOCK_COLORS } from "../colors.mjs";
 import { svg } from "../icons.mjs";
 import { SPAN } from "../../../shared/media.mjs";
@@ -6,6 +7,8 @@ import { columnWidths, slotsOf, tileSlots, tileSpans } from "../../../shared/tab
 import { CELL_ALIGN_CLASSES, CELL_BOLD_CLASS, CELL_VALIGN_CLASSES } from "../../../shared/components/table.mjs";
 import { CHART_KEY, CHART_SOURCE } from "../../../shared/table-chart.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
+import { escapeAttribute } from "../../../shared/escape.mjs";
+import { servedFile } from "../../page/served.mjs";
 
 const ICON = svg('<rect x="3.25" y="3.75" width="13.5" height="12.5" rx="2"/><path d="M3.25 8h13.5M3.25 12.1h13.5M8.25 3.75v12.5"/>');
 
@@ -51,9 +54,12 @@ export default {
         { rank: 90, class: "doc-table-wrap" },
       ],
       boxed: true,
+      toggles: ALIGN_PLACES, // the table placed on the page, at the left (the kit's own), centred or at the right: 对齐 ›, a text block's classes (align.mjs)
       resizable: ".doc-table-wrap[data-ge-unit]", // its right and bottom edges, once it is in the file
       copy: "itself", // within the report a copy keeps all of its markup (its scope line, its frame's size); another report's gets the table's data (tableData) made anew
-      attributes: { [NUMBERS]: (value) => value === "off" },
+      // 识别数字列 off, and the key a chart or a view reads it by (src/shared/table-chart.mjs), which a view
+      // made from a menu puts on a table that has none (page/table/binding.mjs) in the step that makes the view.
+      attributes: { [NUMBERS]: (value) => value === "off", [CHART_SOURCE]: (value) => CHART_KEY.test(value) },
       sizes: {
         [SPAN]: { min: 0.15, max: 3 }, // past 1 the table is wider than the text and scrolls in its frame
         [TABLE_HEIGHT]: { min: 80, max: 4000, px: true, none: true, height: true },
@@ -62,7 +68,7 @@ export default {
   },
   components: ["doc-table-wrap", "doc-table-meta"],
   hosts: {
-    cell: { name: t("表格单元格"), caps: () => ["empty", "links"] },
+    cell: { name: t("表格单元格"), caps: () => ["empty", "links"], pictures: { show: showPictures, write: writtenPicture } },
   },
   types: {
     // Made by a paste or the "/" menu (三列三行, a header row: page.mjs newTable): no class here, so
@@ -306,3 +312,56 @@ export function tableData(element, serializeInner) {
     ...(chart && CHART_KEY.test(chart) ? { chart } : {}),
   };
 }
+
+// ---------- a cell's pictures ----------
+// 单元格里的图片 (page/table/pictures.mjs; source/blocks.mjs cellPictureProblem says what the file
+// takes): an <img> amid a cell's words, a picture of the report's folder. On the page it shows where
+// the server serves the folder (`src`, page/served.mjs), the file it is in data-ge-src, as an
+// image block's; the cell's text writes it back from its element (the host's `pictures`, which
+// core.mjs reads): <img src="assets/<file>" alt="…" width="N">, its attributes in the order the
+// element has them, the file's own; one the browser put in from elsewhere, its file no picture of
+// the folder, is no part of the text.
+
+const PICTURE_FILE = /^assets\/[A-Za-z0-9][A-Za-z0-9._-]{0,80}$/;
+const PICTURE_WIDTH = /^[1-9]\d{0,3}$/;
+const isPicture = (node) => node?.nodeType === 1 && node.localName === "img";
+
+/** The file of a picture in a cell (assets/<file>), or null: none the page writes. */
+export const pictureFile = (img) => {
+  const file = img.getAttribute("data-ge-src") || img.getAttribute("src") || "";
+  return PICTURE_FILE.test(file) ? file : null;
+};
+
+/**
+ * A picture for a cell: the file `path` (assets/<file>) shown where the server serves it, its `alt`
+ * words, its `width` in pixels (none: the kit's own size).
+ */
+export function cellPicture(doc, path, { alt = "", width = null } = {}) {
+  const img = doc.createElement("img");
+  img.setAttribute("src", servedFile(path));
+  img.setAttribute("alt", alt);
+  if (width) img.setAttribute("width", String(Math.round(width)));
+  img.setAttribute("data-ge-src", path);
+  img.draggable = false;
+  return img;
+}
+
+// A cell's pictures as the file has them made the page's (core.mjs prepareBlock): shown where the server serves them.
+function showPictures(root) {
+  for (const img of root.querySelectorAll("img")) {
+    const file = img.getAttribute("src") ?? "";
+    if (!PICTURE_FILE.test(file)) continue;
+    img.setAttribute("data-ge-src", file);
+    img.setAttribute("src", servedFile(file));
+    img.draggable = false;
+  }
+}
+
+// A picture as the cell's text writes it: its markup, "" (no file of the folder), null (no picture).
+function writtenPicture(node) {
+  if (!isPicture(node)) return null;
+  const file = pictureFile(node);
+  if (!file) return "";
+  const said = [...node.attributes].filter(({ name, value }) => name === "src" || name === "alt" || (name === "width" && PICTURE_WIDTH.test(value)));
+  return `<img${said.map(({ name, value }) => ` ${name}="${escapeAttribute(name === "src" ? file : value)}"`).join("")}>`;
+}

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

@@ -120,7 +120,7 @@ function cellNodes(doc, html, inline) {
  * row, its names' column a header column, its numeric columns read (the page's own copy as it was).
  */
 export function build({ doc, block, inline }) {
-  const rows = block.rows.map((row) => row.map((html) => cellNodes(doc, html, inline)));
+  const rows = block.rows.map((row) => row.map((html) => cellNodes(doc, html, (text) => inline(text, { pictures: true })))); // a cell's pictures its own
   const table = newTable(doc, { rows, header: Boolean(block.header), column: Boolean(block.column), numbers: block.numbers !== false, looks: block.looks, widths: block.widths, spans: block.spans, chart: block.chart });
   if (block.outside) optimizeTable(table);
   return table;