@heycys/gallery 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,309 @@
+import { Z } from "../../../shared/layers.mjs";
+import { gestureLock } from "../../page/gesture.mjs";
+import { SPAN, SPAN_SIZE, UPLOAD_LIMITS, sizeLimit } from "../../../shared/media.mjs";
+import { ICONS } from "../../page/menu.mjs";
+import { onSettle, own } from "../../page/overlays.mjs";
+import { drawAt, shapeOf } from "../../page/overlay-layer.mjs";
+import { keptByComponent } from "../../page/page-objects.mjs";
+import { addStyle, addStyleTo, copyAddress, element, mountOver, overlayHost } from "../../page/ui.mjs";
+import { TOOL_ICONS } from "../media/icons.mjs";
+import { captionNode, captionOf, showFile } from "../media/parts.mjs";
+import { SNAP, columnRoom } from "../media/size.mjs";
+import { TOOLBAR_STYLE, mediaBar, toolButton } from "../media/toolbar.mjs";
+import { EMBED_ICONS } from "./icons.mjs";
+import { FILE_SANDBOX, HEIGHT, HEIGHT_SIZE, WEB_SANDBOX, frameAddress, frameOf, newEmbed } from "./index.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// 嵌入 on the page (notion-lite's src/blocks/embed/, Notion's 605415 media block and 726447 frame). A
+// new embed (the "/" menu's 嵌入, made from an empty block: convert.mjs) is a placeholder, a gray bar,
+// until something is given in the menu that opens below it at once and on a click (../media/page.mjs;
+// 300px): 链接, a
+// web page (https; a YouTube video shown as its player, a Google document as its preview), which the
+// server asks first whether it lets other pages frame it, one that does not becoming a bookmark as
+// Notion's (a bookmark's fromLink); 上传, an HTML or PDF file (20 MB at most) kept in the report's folder. One
+// undo step. With the pointer on its frame, notion-lite's toolbar stands at its top right (全屏,
+// 查看原始内容, 更多: the block menu) and a handle at each bottom corner: dragging one sets the frame's
+// width (a share of the width it stands in, the frame centered, so both sides move) and height (96 to
+// 2000px) together, one undo step on letting go (Esc puts them back). While a block or a handle is
+// dragged the frames let the pointer through. 全屏 shows the page or file over the page in a frame of
+// its own (Esc, 关闭 or a click beside it closes it). No caption is asked for (one the file has still
+// shows). The block menu has 替换, 全屏, 查看原始内容, 复制链接, 恢复默认大小.
+
+const MAX_BYTES = UPLOAD_LIMITS.embed;
+
+// Its placeholder's look (every empty block's) is served with the page: ../placeholder.mjs.
+const STYLE = `
+  html[data-ge-drag] .doc-embed-frame, html[data-ge-embed-resize] .doc-embed-frame { pointer-events: none; }
+  ${gestureLock("data-ge-embed-resize=\"right\"", { cursor: "nwse-resize" })}
+  ${gestureLock("data-ge-embed-resize=\"left\"", { cursor: "nesw-resize" })}
+  .ge-layer > .ge-embed-corner { pointer-events: auto; }
+  /* A corner handle: a plain gray bar bent round the frame's corner, no border (as the image's sides). */
+  .ge-embed-corner { width: 20px; height: 20px; cursor: nwse-resize; }
+  .ge-embed-corner[data-side="left"] { cursor: nesw-resize; }
+  .ge-embed-corner::after { content: ""; position: absolute; bottom: 5px; width: 9px; height: 9px; border: 0 solid light-dark(rgb(55 53 47 / 35%), rgb(255 255 255 / 38%)); border-bottom-width: 3px; transition: border-color 120ms ease; }
+  .ge-embed-corner[data-side="right"]::after { right: 5px; border-right-width: 3px; border-bottom-right-radius: 5px; }
+  .ge-embed-corner[data-side="left"]::after { left: 5px; border-left-width: 3px; border-bottom-left-radius: 5px; }
+  .ge-embed-corner:hover::after, html[data-ge-embed-resize] .ge-embed-corner::after { border-color: light-dark(rgb(55 53 47 / 60%), rgb(255 255 255 / 62%)); }
+  /* 全屏: notion-lite's panel over the page (72px from its edges, 1360px wide at most). */
+  .ge-embed-viewer { position: fixed; inset: 0; z-index: ${Z.viewer}; background: light-dark(rgb(15 15 15 / 60%), rgb(15 15 15 / 80%)); }
+  .ge-embed-viewer-panel { position: absolute; inset: 72px; max-width: 1360px; margin: 0 auto; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
+    background: light-dark(#fff, #202020); box-shadow: 0 0 0 1px var(--ge-outline), 0 20px 40px rgb(0 0 0 / 30%); }
+  .ge-embed-viewer-bar { display: flex; align-items: center; gap: 8px; height: 45px; flex: none; padding: 0 12px 0 16px; border-bottom: 1px solid var(--ge-line);
+    color: var(--ge-tx); font: 500 14px/1.2 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
+  .ge-embed-viewer-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+  .ge-embed-viewer-panel > iframe { flex: 1; width: 100%; min-height: 0; border: 0; background: light-dark(#fff, #191919); }
+`;
+
+/**
+ * Embeds on the page, with what the editor gives them: the media blocks' shared parts (`pages.media`:
+ * ../media/page.mjs block("embed"): the undo steps, say, active(), the block menu, the upload of
+ * kind "embed": { path }, the menu), embedUrl(path) (where the server shows a file of the report's
+ * folder in a frame), frameable(url) (whether a page lets frames show it) and the bookmarks' page
+ * object (`pages.bookmark`: fromLink, a bookmark of the page in the figure's place).
+ */
+export function create({ pages, embedUrl, frameable }) {
+  const media = pages.media.block("embed");
+  const { look, say, active, openMenu } = media;
+  addStyle(STYLE);
+
+  // A frame of `src` (a web page, or a file of the report's folder), and an empty caption.
+  function frameParts(doc, src, caption = "") {
+    const local = !/^https:/.test(src);
+    const frame = doc.createElement("iframe");
+    frame.className = "doc-embed-frame";
+    showFile(frame, "src", src, local ? embedUrl(src) : src);
+    if (!local) {
+      frame.setAttribute("sandbox", WEB_SANDBOX);
+      frame.setAttribute("referrerpolicy", "strict-origin-when-cross-origin");
+      frame.setAttribute("allowfullscreen", "");
+    } else if (!/\.pdf$/i.test(src)) frame.setAttribute("sandbox", FILE_SANDBOX);
+    frame.setAttribute("loading", "lazy");
+    return [frame, captionNode(doc, caption)];
+  }
+
+  /** The 链接 / 上传 menu of an embed, below it. */
+  const pick = (figure) => media.pick(figure, {
+    tabs: [{ key: "link", label: t("链接") }, { key: "upload", label: t("上传") }],
+    width: 300,
+    link: { placeholder: t("粘贴网页链接，例如 https://…"), button: t("嵌入链接"), caption: t("适用于允许嵌入的网页。") },
+    upload: { label: t("选择文件"), primary: true, accept: ".html,.htm,.pdf", caption: t("支持 HTML 和 PDF 文件。") },
+    onEmbed: (url) => embedLink(figure, url),
+    onUpload: (file) => uploadInto(figure, file),
+  });
+
+  async function embedLink(figure, url, options = {}) {
+    if (!/^https:/i.test(url)) return say(t("只能嵌入 https 开头的网页。"), "error");
+    media.busy(figure, t("正在检查网页…"));
+    const answer = await frameable(url).catch(() => ({ frameable: true }));
+    if (!figure.isConnected) return;
+    if (!answer.frameable) {
+      media.idle(figure);
+      if (!pages.bookmark) return say(t("这个网页不允许嵌入。"), "error");
+      say(t("这个网页不允许嵌入，已改为网页书签。"));
+      return pages.bookmark.fromLink(figure, url, options);
+    }
+    place(figure, frameAddress(url), options);
+  }
+
+  async function uploadInto(figure, file) {
+    if (!/\.(html?|pdf)$/i.test(file.name)) return say(t("只能嵌入 HTML 或 PDF 文件。"), "error");
+    if (file.size > MAX_BYTES) return say(t("文件太大（最多 {0}）。", sizeLimit("embed")), "error");
+    return media.attempt(figure, t("正在上传 {0}…", file.name), t("无法上传这个文件"), async () => place(figure, (await media.uploadFile(file)).path));
+  }
+
+  // The frame in: a new embed in the place of the placeholder (or of the embed replaced, with its
+  // caption and height), never the same element, so that undo brings back what stood there. One undo
+  // step; the embed selected.
+  function place(figure, src, { pasted = false } = {}) {
+    if (!figure.isConnected) return;
+    const doc = figure.ownerDocument;
+    const replacing = Boolean(frameOf(figure));
+    const next = newEmbed(doc);
+    next.classList.toggle("doc-embed--file", !/^https:/.test(src));
+    const height = figure.style.getPropertyValue(HEIGHT);
+    if (replacing && height) next.style.setProperty(HEIGHT, height);
+    next.replaceChildren(...frameParts(doc, src, captionOf(figure)?.innerHTML ?? ""));
+    media.place(figure, next, { replacing, pasted });
+    if (replacing) say(t("已替换嵌入内容 · Ctrl+Z 撤销"));
+  }
+
+  // ---------- the toolbar and the corner handles ----------
+
+  let hovered = null;
+  let resizing = null; // { figure, side, x, y, width, height, room, before: { height, span } }
+  const bar = mediaBar(t("嵌入操作"));
+  const tool = (label, tip, icon, run) => toolButton({ label, tip, icon, run: (button) => run(hovered, button), alive: () => hovered?.isConnected });
+  bar.append(
+    tool(t("全屏"), t("全屏查看"), TOOL_ICONS.expand, (figure) => fullScreen(figure)),
+    tool(t("查看原始内容"), t("在新标签页中打开"), EMBED_ICONS.open, (figure) => original(figure)),
+    tool(t("更多"), t("打开区块操作菜单"), TOOL_ICONS.more, (figure, button) => {
+      const rect = button.getBoundingClientRect();
+      openMenu(figure, { left: rect.left, right: rect.right, top: rect.top, bottom: rect.bottom });
+    }),
+  );
+  const corners = { left: element("div", { class: "ge-embed-corner", "data-side": "left" }), right: element("div", { class: "ge-embed-corner", "data-side": "right" }) };
+  const tools = () => [bar, corners.left, corners.right];
+
+  function show(figure) {
+    hovered = figure;
+    const frame = figure && frameOf(figure);
+    const shape = frame && shapeOf(frame);
+    if (!shape) {
+      hovered = null;
+      tools().forEach((node) => node.remove());
+      return;
+    }
+    const alive = () => hovered === figure && figure.isConnected;
+    for (const node of tools()) own(node, "embed tools", { owner: figure, alive });
+    const { rect } = shape;
+    if (bar.parentNode !== shape.layer) shape.layer.append(bar); // in the page before its width is measured
+    drawAt(bar, shape.layer, rect.right - 4 - bar.offsetWidth, rect.top + 4);
+    drawAt(corners.left, shape.layer, rect.left, rect.bottom - 20);
+    drawAt(corners.right, shape.layer, rect.right - 20, rect.bottom - 20);
+  }
+
+  // The pointer reaching a frame (its own document gets the moves inside it), or leaving it for the page.
+  document.addEventListener("mouseover", (event) => {
+    if (resizing || tools().some((node) => node.contains(event.target))) return;
+    const figure = active() && !keptByComponent(event.target) ? event.target.closest?.("main figure.doc-embed") ?? null : null;
+    if (figure !== hovered) show(figure && frameOf(figure) ? figure : null);
+  }, true);
+  addEventListener("scroll", () => { if (hovered && !resizing) show(hovered); }, { passive: true, capture: true });
+  // The hovered frame taken off the page by an undo, a redo or a commit: the tools go at once, not at the next pointer move.
+  onSettle(() => { if (hovered && !hovered.isConnected && !resizing) show(null); });
+
+  // A corner dragged: the frame's width (centered, so the corner follows the pointer and the other side
+  // moves as far) and height, live; one undo step on letting go.
+  const sizeOf = (figure) => ({ height: figure.style.getPropertyValue(HEIGHT), span: figure.style.getPropertyValue(SPAN).trim() });
+  const setSize = (figure, { height, span }) => {
+    for (const [name, value] of [[HEIGHT, height], [SPAN, span]]) value ? figure.style.setProperty(name, value) : figure.style.removeProperty(name);
+  };
+  const end = (keep) => {
+    if (!resizing) return;
+    const { figure, before } = resizing;
+    resizing = null;
+    document.documentElement.removeAttribute("data-ge-embed-resize");
+    const now = sizeOf(figure);
+    setSize(figure, before);
+    const changed = now.height !== before.height || now.span !== before.span;
+    if (keep && changed && look(figure, { sizes: { [HEIGHT]: now.height || null, [SPAN]: now.span || null } })) {
+      say(t("嵌入大小：{0}，{1} · Ctrl+Z 撤销", now.span ? t("{0}% 宽", Math.round(Number(now.span) * 100)) : t("整行宽"), now.height || t("默认高度")));
+    }
+    show(figure);
+  };
+  for (const [side, corner] of Object.entries(corners)) {
+    corner.addEventListener("pointerdown", (event) => {
+      if (event.button !== 0 || !hovered) return;
+      event.preventDefault();
+      const figure = hovered;
+      const room = columnRoom(figure);
+      const rect = frameOf(figure).getBoundingClientRect();
+      resizing = { figure, side, x: event.clientX, y: event.clientY, width: rect.width, height: rect.height, room, before: sizeOf(figure) };
+      corner.setPointerCapture?.(event.pointerId);
+      document.documentElement.setAttribute("data-ge-embed-resize", side);
+    });
+    corner.addEventListener("pointermove", (event) => {
+      if (!resizing) return;
+      const { figure, x, y, width, height, room } = resizing;
+      let next = Math.max(room * SPAN_SIZE.min, Math.min(room, width + (event.clientX - x) * (side === "right" ? 2 : -2)));
+      if (room - next <= SNAP) next = room; // the whole width snaps
+      setSize(figure, {
+        height: `${Math.round(Math.max(HEIGHT_SIZE.min, Math.min(HEIGHT_SIZE.max, height + event.clientY - y)))}px`,
+        span: next >= room ? "" : String(Math.round((next / room) * 1000) / 1000),
+      });
+      show(figure);
+    });
+    corner.addEventListener("pointerup", () => end(true));
+    corner.addEventListener("pointercancel", () => end(false));
+    corner.addEventListener("lostpointercapture", () => end(true));
+  }
+  document.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape" || !resizing) return;
+    event.preventDefault();
+    event.stopPropagation();
+    end(false);
+  }, true);
+
+  // ---------- the page or file itself, the block menu ----------
+
+  // The page, or the file where the preview shows it, in a new tab.
+  function original(figure) {
+    const frame = frameOf(figure);
+    if (frame) window.open(frame.src, "_blank", "noopener,noreferrer");
+  }
+
+  // Where the block shows from, absolute: a web page's address, a file's where the preview serves it.
+  const addressOf = (figure) => {
+    const frame = frameOf(figure);
+    return frame ? new URL(frame.getAttribute("src"), location.href).href : "";
+  };
+
+  // 全屏: the page or file in a frame of its own over the page (sandboxed as its frame is),
+  // notion-lite's panel; Esc, 关闭 or a click beside the panel closes it.
+  let viewer = null;
+  function fullScreen(figure) {
+    const frame = frameOf(figure);
+    if (!frame) return;
+    closeViewer();
+    const name = element("div", { class: "ge-embed-viewer-name", text: addressOf(figure) });
+    const close = element("div", { class: "ge-media-tool", role: "button", "aria-label": t("关闭"), text: "×" });
+    const copy = frame.cloneNode(false);
+    copy.removeAttribute("class");
+    copy.removeAttribute("style");
+    const panel = element("div", { class: "ge-embed-viewer-panel", role: "dialog", "aria-label": t("全屏查看") }, element("div", { class: "ge-embed-viewer-bar" }, name, close), copy);
+    // Over the whole window: the workbench's, when the page is shown in one (ui.mjs overlayHost).
+    const host = overlayHost();
+    addStyleTo(host.doc, TOOLBAR_STYLE);
+    addStyleTo(host.doc, STYLE);
+    const node = mountOver(host, element("div", { class: "ge-embed-viewer" }, panel));
+    node.addEventListener("click", (event) => { if (event.target === node || close.contains(event.target)) closeViewer(); });
+    const keys = (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopPropagation();
+      closeViewer();
+    };
+    const docs = [...new Set([document, host.doc])];
+    docs.forEach((doc) => doc.addEventListener("keydown", keys, true));
+    viewer = { node, keys, docs };
+  }
+  function closeViewer() {
+    if (!viewer) return;
+    viewer.docs.forEach((doc) => doc.removeEventListener("keydown", viewer.keys, true));
+    viewer.node.remove();
+    viewer = null;
+  }
+
+  // 复制链接: where the block shows from.
+  function copyLink(figure) {
+    const href = addressOf(figure);
+    if (href) copyAddress(href, say);
+  }
+
+  /** An embed's rows in its block menu. */
+  function menuItems(target) {
+    if (!target?.matches?.("figure.doc-embed") || !frameOf(target)) return [];
+    const rows = [
+      { label: t("替换"), icon: ICONS.reset, run: () => setTimeout(() => pick(target)) },
+      { label: t("全屏"), icon: TOOL_ICONS.expand, run: () => setTimeout(() => fullScreen(target)) },
+      { label: t("查看原始内容"), icon: EMBED_ICONS.open, run: () => original(target) },
+      { label: t("复制链接"), icon: ICONS.copy, run: () => copyLink(target) },
+    ];
+    if (target.style.getPropertyValue(HEIGHT) || target.style.getPropertyValue(SPAN)) {
+      rows.push({ label: t("恢复默认大小"), icon: ICONS.reset, run: () => { if (look(target, { sizes: { [HEIGHT]: null, [SPAN]: null } })) say(t("已恢复默认大小 · Ctrl+Z 撤销")); } });
+    }
+    return rows;
+  }
+
+  return {
+    pick, menuItems,
+    /** A new one: its page or file chosen next. */
+    onCreated(figure) {
+      pick(figure);
+      return true;
+    },
+    /** An embed pasted with its page's address (clipboard/): checked and framed, one undo step with the paste (`options`). */
+    fromLink: embedLink,
+    get nodes() { return [...tools(), ...(viewer ? [viewer.node] : [])].filter((node) => node.isConnected); },
+  };
+}

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

@@ -0,0 +1,87 @@
+import { SPAN } from "../../../shared/media.mjs";
+import { CHART_KEY } from "../../../shared/table-chart.mjs";
+import { svg } from "../icons.mjs";
+import { writtenCaption } from "../media/parts.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// 卡片 (卡片块): a card (figure.doc-figure) holding a figure, a chart or a drawing of the report's
+// own (its HTML, CSS or SVG), its title and caption. One block: its title and caption are text
+// blocks (fields), a chart is drawn by the report's own type (DocCharts.define, its data in its
+// host's JSON or a table's rows), a drawing's words are words only (text: fixed in place, never
+// split, source/blocks.mjs). Its width and chart height are sizes, and it may be centered.
+//
+// Where the engines reach it (src/editor/page/ unless named): resize/ (dragging its right and
+// bottom edges: widthAt, heightAt), page.mjs (its block menu rows: 居中显示, 全宽显示,
+// 恢复默认大小), history.mjs (charts are told a size changed: setLook), src/transfer/markdown.mjs
+// (`clipboard`), ../source/ (finding its title and caption).
+// Its look: the kit's styles/figure.css and chart.css, its chart drawn by charts/ (src/render/kit/).
+export const CENTERED = "doc-figure--compact"; // 居中显示
+export const CHART_HEIGHT = "--doc-chart-height";
+
+// A chart drawn from a table names it by a key (src/shared/table-chart.mjs): a copy of a card or a
+// table pasted on the page may get keys of its own (page/clipboard/own/chart-keys.mjs), which it
+// holds as JSON ({ old: new | null }) until it is a unit of the file, and which go to the server with
+// it (page/core.mjs nodeOf: { copy, keys }; source/text.mjs copiedSource writes them).
+export const COPY_KEYS = "data-ge-chart-keys";
+
+/**
+ * A copy's keys as the page sends them, checked: { old: new | null }, each old one a key as the file
+ * writes it, each new one a key the page made (t1, t2 …), or null when they are not that.
+ */
+export function copyKeys(keys) {
+  if (!keys || typeof keys !== "object" || Array.isArray(keys)) return null;
+  const entries = Object.entries(keys);
+  return entries.length > 0 && entries.length <= 50 && entries.every(([from, to]) => from.length > 0 && from.length <= 200 && (to === null || (typeof to === "string" && CHART_KEY.test(to)))) ? keys : null;
+}
+
+// The parts of a card a page export writes, an empty line between them: its title in bold, the chart
+// as an image (`chart`: its picture in the export, else none), its tables and a drawing's words when
+// there is no picture of it, the pictures it holds, its caption.
+function cardParts(unit, how) {
+  const heading = unit.querySelector(":scope > h2, :scope > h3, :scope > h4");
+  const parts = heading && how.plain(heading) ? [[`**${how.inline(how.serializeInner(heading))}**`]] : [];
+  const link = how.chart(unit);
+  const charted = Boolean(unit.querySelector("[data-doc-chart]"));
+  if (link) parts.push([`![${how.plain(heading) || how.untitled(unit, charted)}](${link})`]);
+  else {
+    for (const inner of unit.querySelectorAll("table")) parts.push(how.writtenAs("table", inner));
+    // No picture of it (复制页面内容, an export with no browser): a drawing of the report's own
+    // says its words, as a whole block does (a chart's are its data, in its table or nowhere).
+    const drawing = charted ? [] : [...unit.children].filter((child) => child !== heading && !child.matches("figcaption, .doc-figure-caption, p, table, .doc-table-wrap, .doc-table-meta, script, style, template"));
+    const words = drawing.flatMap((part) => how.wordsIn(part, "text"));
+    if (words.length) parts.push([words.join(" · ")]);
+  }
+  for (const picture of how.picturesIn(unit, { tables: false })) parts.push([picture]);
+  const caption = writtenCaption(unit);
+  const said = (caption ? how.inline(how.serializeInner(caption)) : "") || [...unit.querySelectorAll(":scope > p")].map((p) => how.inline(how.serializeInner(p))).filter(Boolean).join("\n\n");
+  if (said) parts.push(said.split("\n"));
+  return parts;
+}
+
+export default {
+  name: "figure",
+  glance: [
+    { row: 20, name: "图表", write: "a card holding `<div data-doc-chart=\"type\">` with its data as JSON, the type defined with `DocCharts.define`; or `<table data-doc-chart=\"type\">`, drawn from its rows", after: "for the table: its frame, then a card after it, its caption the card's `h3`", rule: "Figures and charts" },
+    { row: 21, name: "图 (示意图、时间线)", write: "`figure.doc-figure` holding your own HTML or SVG", rule: "Figures and charts" },
+  ],
+  units: {
+    figure: {
+      name: t("卡片"),
+      icon: svg('<path d="M3.75 16.25h12.5"/><path d="M6.25 13.25v-3.5M10 13.25v-7.5M13.75 13.25v-5.5"/>'),
+      match: [{ rank: 50, tag: "figure" }],
+      boxed: true,
+      resizable: "figure[data-ge-unit]", // its right and bottom edges, once it is in the file
+      toggles: [CENTERED], // 居中显示
+      sizes: {
+        [SPAN]: { min: 0.15, max: 1 },
+        [CHART_HEIGHT]: { min: 120, max: 2000, px: true, height: true },
+      },
+      clipboard: { kind: "parts", read: cardParts, unsaid: "[data-doc-chart]" }, // copied as itself; a chart's data are no words of it
+    },
+  },
+  attributes: ["data-doc-chart"], // a declared chart (charts/): its type, then what it draws
+  hosts: {
+    // A card's title and caption, and the spans of a table's scope line.
+    field: { name: t("卡片标题和说明"), caps: ({ bound }) => bound ? ["links"] : ["remove", "links"] },
+  },
+};

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

@@ -0,0 +1,33 @@
+import { SPAN } from "../../../shared/media.mjs";
+import { ICONS } from "../../page/menu.mjs";
+import { lookRow } from "../rows.mjs";
+import { CENTERED, CHART_HEIGHT } from "./index.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// 卡片 on the page: its rows of the block menu (docs/editor.md, "Resizing cards, tables and
+// code blocks"; resize/ drags the same sizes by their edges): the card centered or at full width,
+// and back to the default size once a width or height is set.
+
+/**
+ * look(element, { classes, sizes }, select): the editor's undoable change of classes and sizes
+ * (history.mjs); say: the status line.
+ */
+export function create({ look, say }) {
+  const row = (target, options) => lookRow({ look, say }, target, options);
+  return {
+    /** The card's rows of the block menu (none for another block). */
+    menuItems(target) {
+      if (target?.getAttribute?.("data-ge-unit-kind") !== "figure") return [];
+      const centered = target.classList.contains(CENTERED);
+      const span = target.style.getPropertyValue(SPAN).trim();
+      const rows = [
+        row(target, { label: t("居中显示"), icon: ICONS.center, current: centered && span === "", change: { classes: { [CENTERED]: true }, sizes: { [SPAN]: null } }, done: t("卡片已居中显示") }),
+        row(target, { label: t("全宽显示"), icon: ICONS.full, current: !centered && (span === "1" || span === ""), change: { classes: { [CENTERED]: false }, sizes: { [SPAN]: null } }, done: t("卡片已全宽显示") }),
+      ];
+      if (span !== "" || target.style.getPropertyValue(CHART_HEIGHT).trim() !== "") {
+        rows.push(row(target, { label: t("恢复默认大小"), icon: ICONS.reset, current: false, change: { sizes: { [SPAN]: null, [CHART_HEIGHT]: null } }, done: t("已恢复默认大小") }));
+      }
+      return rows;
+    },
+  };
+}

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

@@ -0,0 +1,14 @@
+import { svg } from "../icons.mjs";
+
+// The file block's icons: the editor's own line drawings (components/icons.mjs svg), no size or color of
+// their own: the bar, the menus and the kit's file row (styles/file.css, which draws 上传 and 下载 as a
+// mask of these two) set them.
+
+export const FILE_ICONS = {
+  // A sheet with its corner folded and an arrow rising from its middle.
+  upload: svg('<path d="M6.25 2.75h4.5l4.5 4.5v8.5a1.5 1.5 0 0 1-1.5 1.5h-7.5a1.5 1.5 0 0 1-1.5-1.5v-11.5a1.5 1.5 0 0 1 1.5-1.5z"/><path d="M10.75 2.75v3a1.5 1.5 0 0 0 1.5 1.5h3"/><path d="M10 14v-4.75M7.9 11.1 10 9l2.1 2.1"/>'),
+  // An arrow down in a ring.
+  download: svg('<circle cx="10" cy="10" r="7.25"/><path d="M10 6.5v6.25M7.4 10.2 10 12.8l2.6-2.6"/>'),
+  // A clip.
+  paperclip: svg('<path d="M15.2 9.2 9.6 14.8a3.6 3.6 0 0 1-5.1-5.1l6.1-6.1a2.4 2.4 0 0 1 3.4 3.4l-6.1 6.1a1.2 1.2 0 0 1-1.7-1.7l5.4-5.4"/>'),
+};

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

@@ -0,0 +1,77 @@
+import { FILE_ICONS } from "./icons.mjs";
+import { captionWords, fileOf, mediaReadOnly, newMediaFigure, writtenCaption } from "../media/parts.mjs";
+import { barMarkup } from "../placeholder-bar.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// 文件 (Notion's file block): the kit's figure.doc-file, one file of the report's folder
+// (assets/<file>) as a row the reader clicks to save it, its name and size, and its caption, a
+// <figcaption> always written (empty while there is none; a media block's caption, components/media/).
+// A card: one block, moved, deleted, captioned, replaced as a whole; the name and size are the
+// file's. Made from an empty block (the "/" menu: 文件) or a file pasted: a placeholder until a file
+// is chosen (上传, or a link whose file the server downloads into the report's folder:
+// editor/media-store.mjs), written once it has one. page.mjs: the picker, the block
+// menu's rows; file.mjs: a new one in report.html.
+//
+// Where the engines reach it (src/editor/page/ unless named): convert.mjs (made from an empty block:
+// `create`), editor.mjs (the picker opens on a new one: page.mjs `onCreated`), clipboard/ (a file
+// pasted), src/transfer/markdown.mjs (`clipboard`), ../source/ (its caption: blocks.mjs). Its look: the kit's styles/file.css (src/render/kit/); its
+// file handed out by the preview and embedded in an export: src/render/files.mjs.
+export const PAPERCLIP = FILE_ICONS.paperclip;
+
+/**
+ * A file block's placeholder bar, as markup: in a new one, and in one the file keeps empty from the first paint (the server
+ * puts it there: components/placeholder.mjs showEmpty).
+ */
+const placeholder = () => barMarkup("doc-file", FILE_ICONS.upload, t("上传文件")); // its words in the language t() says them in now (placeholder.mjs showEmpty)
+
+export default {
+  name: "file",
+  listed: () => t("文件"),
+  readOnly: [mediaReadOnly("file")],
+  units: {
+    file: { name: t("文件"), match: [{ rank: 44, tag: "figure", class: "doc-file" }], boxed: true },
+  },
+  types: {
+    file: {
+      menu: ["advanced", 18], fresh: 3,
+      tag: "figure", className: "doc-file", kind: "file", bare: true,
+      create: ({ doc, put }) => put(newFile(doc)), // its placeholder stands for the empty block; what it holds is chosen next
+      clipboard: {
+        kind: "media",
+        read(unit, { plain }) {
+          const link = unit.querySelector(":scope > a.doc-file-link");
+          const href = link?.getAttribute("href");
+          if (!href) return null;
+          const name = link.getAttribute("download") || plain(link.querySelector(".doc-file-name")) || href.split("/").pop();
+          return { label: name, src: href, name, file: true, caption: writtenCaption(unit) };
+        },
+      },
+      // What a new one is written with (core.mjs nodeOf): its file, name, size and caption; an empty
+      // figure while it has no file (its placeholder, kept: file.mjs).
+      extras: (element) => fileNode(element),
+      part: ".doc-file",
+      bar: placeholder,
+      label: t("文件"), icon: PAPERCLIP,
+      words: "文件 附件 上传 wenjian wj fujian fj file attachment upload",
+      glance: { row: 17, name: "文件", write: "`figure.doc-file`", rule: "Kit blocks" },
+    },
+  },
+};
+
+/** A file block's link, once it has a file. */
+export const linkOf = (figure) => figure.querySelector(":scope > a.doc-file-link[data-ge-href]");
+
+// What a new file is written with: its file (not where the preview hands it out), its name, size and caption.
+function fileNode(figure) {
+  const link = linkOf(figure);
+  const size = link?.querySelector(".doc-file-size")?.textContent ?? "";
+  return {
+    href: fileOf(link, "href") ?? "",
+    name: link?.querySelector(".doc-file-name")?.textContent ?? "",
+    ...(size ? { size } : {}),
+    caption: captionWords(figure),
+  };
+}
+
+/** A new file block (the "/" menu's 文件): its placeholder (上传文件), until a file is chosen (page.mjs). */
+export const newFile = (doc) => newMediaFigure(doc, "file", placeholder());

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

@@ -0,0 +1,114 @@
+import { UPLOAD_LIMITS, sizeLimit } from "../../../shared/media.mjs";
+import { ICONS } from "../../page/menu.mjs";
+import { TOOL_ICONS } from "../media/icons.mjs";
+import { captionNode, captionOf, showFile } from "../media/parts.mjs";
+import { FILE_ICONS } from "./icons.mjs";
+import { formatSize } from "../../../shared/media.mjs";
+import { linkOf, newFile } from "./index.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// 文件 on the page (notion-lite's src/blocks/file/edit.js, Notion's 957562). A new file block (the
+// "/" menu's 文件, made from an empty block: convert.mjs; or a file pasted that is no image) is a
+// placeholder, a gray bar saying 上传文件, until a file is chosen in the 上传 / 链接 menu
+// (media-menu/, 300px: 选择文件, or a link whose file the server downloads; it opens below it at
+// once, and on a click: ../media/page.mjs): the file goes to the report's folder (20 MB at most), and the block shows
+// its row, its name and size. One undo step. The row hands the file out for saving, as the report
+// does. Its caption is a media block's (../media/page.mjs: shown once 标题 asks for it).
+// The block menu has 替换文件, 下载 and 标题 (menuItems).
+
+const MAX_BYTES = UPLOAD_LIMITS.file;
+
+// A file of the report's folder (`path`) where the server hands it out (`url`), named and sized, and an empty caption.
+function fileParts(doc, { path, name, size }, url, caption = "") {
+  const link = doc.createElement("a");
+  link.className = "doc-file-link";
+  showFile(link, "href", path, url);
+  link.setAttribute("download", name);
+  link.setAttribute("contenteditable", "false");
+  const title = doc.createElement("span");
+  title.className = "doc-file-name";
+  title.textContent = name;
+  link.append(title);
+  if (Number.isFinite(size)) {
+    const weight = doc.createElement("span");
+    weight.className = "doc-file-size";
+    weight.textContent = formatSize(size);
+    link.append(weight);
+  }
+  return [link, captionNode(doc, caption)];
+}
+
+/**
+ * File blocks on the page, with what the editor gives them: the media blocks' shared parts
+ * (`pages.media`: ../media/page.mjs block("file"): the undo steps, say, select, the upload of kind "file":
+ * { path, name, size }, the menu, the caption) and fileUrl(path) (where the server hands out a file
+ * of the report's folder).
+ */
+export function create({ pages, fileUrl }) {
+  const media = pages.media.block("file");
+  const { say } = media;
+
+  /** The 上传 / 链接 menu of a file block, below it. */
+  const pick = (figure) => media.pick(figure, {
+    tabs: [{ key: "upload", label: t("上传") }, { key: "link", label: t("链接") }],
+    width: 300,
+    upload: { label: t("选择文件"), primary: true },
+    link: { placeholder: t("粘贴文件链接…"), button: t("嵌入链接"), caption: t("适用于任何文件的网址。") },
+    onUpload: (file) => uploadInto(figure, file),
+    onEmbed: (url) => fetchInto(figure, url),
+  });
+
+  async function uploadInto(figure, file) {
+    if (file.size > MAX_BYTES) return say(t("文件太大（最多 {0}）。", sizeLimit("file")), "error");
+    return media.attempt(figure, t("正在上传 {0}…", file.name), t("无法上传这个文件"), async () => place(figure, await media.uploadFile(file)));
+  }
+
+  const fetchInto = (figure, url) => media.attempt(figure, t("正在下载…"), t("无法下载这个文件"), async () => place(figure, await media.uploadUrl(url)));
+
+  // The file in: a new block in the place of the placeholder, or of the block that had one (替换文件,
+  // with its caption), never the same element, so that undo brings back what stood there (a
+  // placeholder never written, a block as it was) and the file loses the new one. One undo step; the
+  // block selected.
+  function place(figure, answer) {
+    if (!figure.isConnected) return;
+    const doc = figure.ownerDocument;
+    const replacing = Boolean(linkOf(figure));
+    const next = newFile(doc);
+    next.replaceChildren(...fileParts(doc, answer, fileUrl(answer.path), captionOf(figure)?.innerHTML ?? ""));
+    media.place(figure, next, { replacing });
+    if (replacing) say(t("已替换文件 · Ctrl+Z 撤销"));
+  }
+
+  // Saving the file, as a click on its row does.
+  function download(figure) {
+    const link = linkOf(figure);
+    if (!link) return;
+    const save = figure.ownerDocument.createElement("a");
+    save.href = link.href;
+    save.download = link.getAttribute("download") ?? "";
+    save.click();
+  }
+
+  /** A file block's rows in its block menu. */
+  function menuItems(target) {
+    if (!target?.matches?.("figure.doc-file") || !linkOf(target)) return [];
+    return [
+      { label: t("替换文件"), icon: ICONS.reset, run: () => setTimeout(() => pick(target)) },
+      { label: t("下载"), icon: FILE_ICONS.download, run: () => download(target) },
+      { label: t("标题@caption"), icon: TOOL_ICONS.caption, run: () => setTimeout(() => media.caption(target)) },
+    ];
+  }
+
+  return {
+    pick, menuItems,
+    /** Whether a file makes a file block: any that is no image. */
+    acceptsFile: (file) => !/^image\//.test(file.type),
+    /** A file block below the block of `host` (a text block), `file` uploaded. Returns whether it took it. */
+    fromFiles: (host, [file]) => media.paste(host, file, newFile, uploadInto),
+    /** A new one: its file chosen next. */
+    onCreated(figure) {
+      pick(figure);
+      return true;
+    },
+  };
+}