@heycys/gallery 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,286 @@
+import { Z } from "../../../shared/layers.mjs";
+import { emojiSvgDataUrl, loadEmojiData, randomEmoji } from "../../../shared/emoji/data.mjs";
+import { FACE_ICON } from "../icons.mjs";
+import { glyphSVGOf, loadGlyphs } from "../../../shared/emoji/glyphs.mjs";
+import { keptByComponent } from "../../page/page-objects.mjs";
+import { addStyle, element, mount } from "../../page/ui.mjs";
+import { HIGHLIGHT } from "../kit.mjs";
+import { ICON, iconElement, iconKind, iconValueOf } from "./index.mjs";
+import { isStep } from "../flowchart/index.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// Icons on the page (index.mjs): the page's, and a highlight block's (Notion's callout icon), as
+// Notion's. The page's:
+//   - with the pointer in the header and no icon, 添加图标 shows above the title, left-aligned with
+//     its text (28 high, 8 each side, 6 round, 14px, the third text color, a filled face 6 before
+//     it; fading in): a click puts a random emoji there (an activity, an object or a place);
+//   - a click on the icon opens the icon picker below it (notion-lite's, page/emoji-picker/): an
+//     emoji, an icon of the 图标 tab (MingCute's or Tabler's) in a color, or an image (上传, kept in the report's folder by the server;
+//     a custom emoji of the library copied there first) takes its place, 移除 takes it away, 随机
+//     shows another and leaves the picker open; a second click closes it. Each is one undo step
+//     (struct), and the server writes it into the file and report.json (its commit).
+// A highlight block's: first in it, left of its blocks (the kit's highlight.css); a click on it opens
+// the same picker (移除 takes it away), and the block menu adds or changes it (rowBeside). A new
+// highlight block comes with 💡 (convert.mjs, iconElement). A flowchart node's, exactly so: first in
+// it, drawn in its number's place (the kit's flowchart.css); a click on it, or on the number of a
+// node that has none, opens the picker below it (移除 brings the number back), and the node's block
+// menu adds or changes it. An icon of Tabler's numbers is an icon like any other: its number fixed,
+// counted by nothing.
+// Shown as a picture of its kind, as the server serves it (render/emoji.mjs): an emoji's Twemoji
+// image, an icon's SVG (the kit colors it), the image where the server serves it. Its value
+// stays the element's own (data-ge-icon), which a commit writes.
+
+// A flowchart's node (its icon first in it, in its number's place).
+const STEP = "ol.doc-flow > li";
+
+const STYLE = `
+  [data-ge-editing] main :is(.doc-header, ${HIGHLIGHT.match}, ${STEP}) > .${ICON} { border-radius: 6px; cursor: pointer; transition: background .1s ease-in; }
+  [data-ge-editing] main :is(.doc-header, ${HIGHLIGHT.match}, ${STEP}) > .${ICON}:hover { background: light-dark(rgb(55 53 47 / 8%), rgb(255 255 255 / 8%)); }
+  [data-ge-editing] main ${STEP}:not(:has(> .${ICON}))::before { cursor: pointer; }
+  /* The node itself while the pointer is on its number (numberAt: the tint below), as the icon's: what
+     finds the element under the pointer finds the node, not its ::before, and reads its cursor. */
+  [data-ge-editing] main ${STEP}[data-ge-number-hover]:not(:has(> .${ICON})) { cursor: pointer; }
+  [data-ge-editing] main ${STEP}[data-ge-number-hover]:not(:has(> .${ICON}))::before { box-shadow: inset 0 0 0 20px light-dark(rgb(55 53 47 / 8%), rgb(255 255 255 / 8%)); }
+  .ge-add-icon { position: fixed; left: 0; top: 0; z-index: ${Z.affordance}; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: 6px;
+    color: var(--ge-tx3); font: 14px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+    white-space: nowrap; cursor: pointer; user-select: none; opacity: 0; transition: opacity .1s ease-in, background .1s ease-in; }
+  .ge-add-icon svg { display: block; flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
+  .ge-add-icon[data-shown] { opacity: 1; }
+  .ge-add-icon:hover { background: light-dark(rgb(55 53 47 / 6%), rgb(255 255 255 / 6%)); }
+`;
+
+// What holds an icon: the page's header, a highlight block (the opening summary is one), a flowchart's node.
+const HOLDERS = `main :is(.doc-header, ${HIGHLIGHT.match}, ${STEP})`;
+const SELECTOR = `${HOLDERS} > .${ICON}`;
+// A block an icon leads (first in it): a highlight block, a flowchart's node; not the header (the page's icon).
+const isPanel = (holder) => holder.matches(HIGHLIGHT.match) || isStep(holder);
+
+// A node's number (no icon of its own), where the kit draws it (the step's ::before, in its card's
+// padding on its first line: flowchart.css), as a rect of the window, or null.
+function numberRect(step) {
+  if (!isStep(step) || iconIn(step) || !step.parentElement?.hasAttribute("data-ge-box")) return null;
+  const before = getComputedStyle(step, "::before");
+  if (before.content === "none" || before.position !== "absolute") return null;
+  const box = step.getBoundingClientRect();
+  const style = getComputedStyle(step);
+  const inner = box.left + parseFloat(style.borderLeftWidth);
+  const width = parseFloat(before.width) || 20;
+  const right = box.right - parseFloat(style.borderRightWidth) - parseFloat(before.right);
+  const top = box.top + parseFloat(style.borderTopWidth) + parseFloat(before.top);
+  const height = parseFloat(before.height) || 20;
+  return right > inner ? { left: right - width, right, top, bottom: top + height, width, height } : null;
+}
+
+// The node whose number is under a point (2px to spare), or null.
+function numberAt(target, x, y) {
+  const step = keptByComponent(target) ? null : target?.closest?.(`main ${STEP}`);
+  const rect = step && numberRect(step);
+  return rect && x >= rect.left - 2 && x <= rect.right + 2 && y >= rect.top - 2 && y <= rect.bottom + 2 ? { step, rect } : null;
+}
+const iconIn = (holder) => holder?.querySelector(`:scope > .${ICON}`) ?? null;
+const iconOf = () => document.querySelector(`main .doc-header > .${ICON}`); // the page's
+const titleOf = () => document.querySelector("main .doc-header > h1");
+
+/** The value an icon element stands for. */
+const valueOf = (node) => node.getAttribute("data-ge-icon") ?? iconValueOf(node.outerHTML);
+
+/**
+ * The picture of an icon's value, ready to show: an image decoded already (assetUrl: where the
+ * server serves a report's image), so it never shows empty for a moment. Null when there is none
+ * (an emoji the pack lacks stays its text).
+ */
+async function picture(value, assetUrl) {
+  const kind = iconKind(value);
+  let shown = null;
+  if (kind === "emoji") {
+    await loadEmojiData();
+    const url = await emojiSvgDataUrl(value).catch(() => null);
+    if (url) shown = element("img", { alt: value, src: url, draggable: "false" });
+  } else if (kind === "glyph") {
+    await loadGlyphs().catch(() => null);
+    const svg = glyphSVGOf(value);
+    if (svg) {
+      const holder = document.createElement("template");
+      holder.innerHTML = svg.replace("<svg ", '<svg aria-hidden="true" ');
+      shown = holder.content.firstElementChild;
+    }
+  } else if (kind === "image") shown = element("img", { src: assetUrl(value), alt: "", draggable: "false" });
+  if (shown instanceof HTMLImageElement) await shown.decode().catch(() => {});
+  return shown;
+}
+
+/** Show an icon element as the picture of its value. Its value is kept first (data-ge-icon): the picture says it no more. */
+async function show(node, assetUrl) {
+  const value = valueOf(node);
+  if (!iconKind(value)) return;
+  node.setAttribute("data-ge-icon", value);
+  const shown = await picture(value, assetUrl);
+  if (shown && node.isConnected && valueOf(node) === value) node.replaceChildren(shown);
+}
+
+/**
+ * struct(parents, touched, mutate): the editor's undoable structural change. say: the status line.
+ * isEditing(): whether the page edits. openMediaPicker({ origin, value, onPick }) (emoji-picker/).
+ * assetUrl(path): where the server serves an image of the report's folder (assets/<file>).
+ * importEmoji(id): a custom emoji of the library copied into the report's folder: its path there.
+ */
+export function create({ struct, say, isEditing, openMediaPicker, assetUrl, importEmoji }) {
+  addStyle(STYLE);
+  // The page's icons as they come in without their picture (an Agent's write taken in, undo).
+  const showAll = () => document.querySelectorAll(SELECTOR).forEach((node) => {
+    if (!node.querySelector("img, svg")) show(node, assetUrl);
+  });
+  showAll();
+  new MutationObserver(showAll).observe(document.querySelector("main") ?? document.body, { childList: true, subtree: true });
+
+  // The icon made on the page, its picture in it already (the server writes it before the title
+  // wherever the page puts it).
+  const made = async (value) => {
+    const node = iconElement(document, value);
+    node.replaceChildren((await picture(value, assetUrl)) ?? value);
+    return node;
+  };
+
+  // One undo step: the header or a highlight block (`holder`, the header by default) with the icon
+  // `value` (null: none), the page's right before the title, a highlight block's first in it. The
+  // old icon stays until the new one's picture is ready, and they change places at once: nothing
+  // below moves meanwhile. The last of several picks in a row wins (随机 clicked again).
+  let latest = 0;
+  async function setIcon(value, verb, holder = document.querySelector("main .doc-header")) {
+    const ticket = ++latest;
+    const now = iconIn(holder);
+    if (now && value && valueOf(now) === value) return false;
+    const node = value ? await made(value) : null;
+    const title = isPanel(holder) ? null : titleOf();
+    if (ticket !== latest || !holder?.isConnected || (!isPanel(holder) && !title)) return false;
+    const old = iconIn(holder);
+    if (old && value && valueOf(old) === value) return false;
+    const result = struct([holder], [], () => {
+      old?.remove();
+      if (node) title ? title.before(node) : holder.prepend(node);
+      return { touched: [], focus: null };
+    });
+    if (result) say(t("{0} · Ctrl+Z 撤销", verb));
+    hideAdd();
+    return Boolean(result);
+  }
+
+  // What the picker gives, as a page's icon: a custom emoji copied into the report's folder first;
+  // an image anywhere else (a link the server could not download) is none.
+  async function pick(value, holder) {
+    const what = isPanel(holder) ? t("图标") : t("页面图标");
+    if (value === null) return setIcon(null, t("已移除{0}", what), holder);
+    const custom = /^notion:\/\/custom_emoji\/[^/]+\/([^/]+)$/.exec(value)?.[1];
+    if (custom) {
+      try {
+        value = await importEmoji(custom);
+      } catch (error) {
+        return say(error.message || t("无法使用这个自定义表情"));
+      }
+    }
+    if (!iconKind(value)) return say(t("这张图片没能存进文档"));
+    return setIcon(value, t("已更换{0}", what), holder);
+  }
+
+  // ---------- 添加图标 ----------
+
+  const add = element("div", { class: "ge-add-icon", role: "button", tabindex: "0", html: t("{0}添加图标", FACE_ICON) });
+  add.addEventListener("mousedown", (event) => event.preventDefault());
+  add.addEventListener("click", async () => {
+    await loadEmojiData();
+    setIcon(randomEmoji(), t("已添加页面图标"));
+  });
+  let shown = false;
+  function showAdd() {
+    const title = titleOf();
+    const header = title?.parentElement;
+    if (!title || !header) return hideAdd();
+    if (!add.isConnected) mount(add);
+    const first = header.firstElementChild.getBoundingClientRect();
+    const range = document.createRange();
+    range.selectNodeContents(title);
+    const text = range.getClientRects()[0] ?? title.getBoundingClientRect();
+    add.style.transform = `translate(${Math.round(text.left - 8)}px, ${Math.round(first.top - 28 - 6)}px)`;
+    if (!shown) requestAnimationFrame(() => add.setAttribute("data-shown", ""));
+    shown = true;
+  }
+  function hideAdd() {
+    shown = false;
+    add.removeAttribute("data-shown");
+  }
+  // With the pointer in the header (or on the control itself), editing, and no icon yet.
+  document.addEventListener("mousemove", (event) => {
+    const header = titleOf()?.parentElement;
+    if (!isEditing() || !header || iconOf() || event.buttons) return hideAdd();
+    if (add.contains(event.target)) return;
+    const box = header.getBoundingClientRect();
+    const near = event.clientY >= box.top - 40 && event.clientY <= box.bottom && event.clientX >= box.left - 40 && event.clientX <= box.right;
+    if (near) showAdd();
+    else hideAdd();
+  }, { passive: true, capture: true });
+  addEventListener("scroll", () => { if (shown) showAdd(); }, { passive: true, capture: true });
+
+  // ---------- the picker ----------
+
+  let picker = null; // its popup
+  let wasOpen = false; // when the press began: a click on the icon then closes it (the press did)
+  addEventListener("mousedown", (event) => {
+    wasOpen = Boolean(picker && !picker.closed && (event.target.closest?.(SELECTOR) || numberAt(event.target, event.clientX, event.clientY)));
+  }, true);
+  // A press on a node's number moves no caret and starts no box selection: its click opens the picker.
+  document.addEventListener("pointerdown", (event) => {
+    if (!isEditing() || event.button !== 0 || !numberAt(event.target, event.clientX, event.clientY)) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }, true);
+  let hovered = null; // the node whose number the pointer is on (its tint)
+  document.addEventListener("mousemove", (event) => {
+    const step = isEditing() && !event.buttons ? numberAt(event.target, event.clientX, event.clientY)?.step ?? null : null;
+    if (step === hovered) return;
+    hovered?.removeAttribute("data-ge-number-hover");
+    hovered = step;
+    step?.setAttribute("data-ge-number-hover", "");
+  }, { passive: true, capture: true });
+  document.addEventListener("click", (event) => {
+    if (!isEditing() || keptByComponent(event.target)) return;
+    const node = event.target.closest?.(SELECTOR);
+    const number = node ? null : numberAt(event.target, event.clientX, event.clientY);
+    if (!node && !number) return;
+    event.preventDefault();
+    if (wasOpen || (picker && !picker.closed)) {
+      picker?.close();
+      picker = null;
+      return;
+    }
+    if (node) open(node.parentElement, node.getBoundingClientRect());
+    else open(number.step, number.rect);
+  }, true);
+
+  // The picker for a holder's icon, below `origin`.
+  function open(holder, origin) {
+    const own = iconIn(holder);
+    picker = openMediaPicker({ origin, value: own ? valueOf(own) : null, isCallout: isPanel(holder), onPick: (value) => { pick(value, holder); } });
+  }
+
+  return {
+    /** The editor's UI nodes to keep in the top layer. */
+    get nodes() { return [add]; },
+    /** The page's icon as the page shows it, its value (the tab's, the workbench's), or null. */
+    pageIcon() {
+      const icon = document.querySelector(`main .doc-header > .${ICON}`);
+      return icon ? icon.getAttribute("data-ge-icon") ?? iconValueOf(icon.outerHTML) : null;
+    },
+    /** The block menu's row for a highlight block's or a flowchart node's icon (添加图标 or 更换图标), or null for another block. */
+    rowBeside(target) {
+      if (!target?.matches?.(HIGHLIGHT.match) && !(isStep(target) && target.parentElement?.hasAttribute("data-ge-box"))) return null;
+      const own = iconIn(target);
+      return {
+        label: own ? t("更换图标") : t("添加图标"), icon: FACE_ICON,
+        run: () => {
+          const box = (own ?? target).getBoundingClientRect();
+          open(target, own ? box : numberRect(target) ?? { left: box.left + 12, right: box.left + 36, top: box.top + 12, bottom: box.top + 36, width: 24, height: 24 });
+        },
+      };
+    },
+  };
+}

package/browser/editor/components/icons.mjs

@@ -0,0 +1,45 @@
+// The editor's icons as markup: 20×20 line drawings (the menus' CSS draws them, menu.mjs and
+// type-grid.mjs), the block types' drawn after Notion's (thin lines, a serif T, a light H with its
+// level small beside it), not taken from it. Pure strings, so components can name their icons in
+// their descriptions, which the server loads too.
+
+/** A line drawing in a box of `box` units. */
+export const svg = (body, box = 20) => `<svg viewBox="0 0 ${box} ${box}" aria-hidden="true">${body}</svg>`;
+
+// The level beside a heading's H, small and on its baseline.
+const LEVELS = {
+  1: '<path d="M13.25 10.6 15.1 9.25v6"/>',
+  2: '<path d="M12.85 10.7a1.85 1.85 0 0 1 3.6.5c0 1.1-.85 1.8-3.65 4.05h3.85"/>',
+  3: '<path d="M12.9 9.75h3.35l-1.85 2.1a1.7 1.7 0 1 1-1.55 2.55"/>',
+  4: '<path d="M15.6 15.25V9.6l-3.1 4.15h4.2"/>',
+};
+
+/** A formula (√x): the format bar's button and the "/" menu's 公式, one drawing. */
+export const FORMULA_ICON = svg('<path d="M1.6 11.6 5.5 16.25 9.5 3.75h8.75"/><path d="m10.6 7.9 6.6 8.35M17.2 7.9l-6.6 8.35"/>');
+
+/** A link (two rings of a chain): the "/" menu's 链接, 链接视图, an empty link's chip, one drawing. */
+/** A page (the workbench's tree draws the same): the "/" menu's 页面, a page block left empty, a page with no icon in a search's rows. */
+export const PAGE_ICON = svg('<path d="M5.75 2.75h5.5l3.5 3.5v9.5a1.5 1.5 0 0 1-1.5 1.5h-7.5a1.5 1.5 0 0 1-1.5-1.5V4.25a1.5 1.5 0 0 1 1.5-1.5z"/><path d="M11 2.75v3c0 .41.34.75.75.75h3"/><path d="M7.25 10h5.5M7.25 13h3.5"/>');
+
+/** A detail card (详情卡片): a card with two lines of text. */
+export const DIALOG_ICON = svg('<rect x="3.25" y="3.75" width="13.5" height="12.5" rx="2.5"/><path d="M6.5 8h7M6.5 11.5h4.5"/>');
+export const LINK_ICON = svg('<g transform="rotate(45 10 10)"><path d="M7 8.5V6a3 3 0 0 1 6 0v2.5M7 11.5V14a3 3 0 0 0 6 0v-2.5M10 7.5v5"/></g>'); // two U's and the line between them, turned 45°
+
+// A speech bubble, round with its lower left a corner, a little rounded (as Feishu's comment bubble).
+const BUBBLE = '<path d="M10 16.75A6.75 6.75 0 1 0 3.25 10v5.25a1.5 1.5 0 0 0 1.5 1.5z"/>';
+/** 批注: the bubble with two lines of text, the upper longer (a row of the format bar's "更多", the block menu's row). */
+export const NOTE_ICON = svg(`${BUBBLE}<path d="M7.5 9h5.5M7.5 12h3.5"/>`);
+/** A new 批注: the bubble with a plus (the button beside a block). */
+export const NOTE_ADD_ICON = svg(`${BUBBLE}<path d="M10 7v6M7 10h6"/>`);
+
+/** Code (</>): the format bar's inline code and the 代码块 type, one drawing, as wide as the others. */
+export const CODE_ICON = svg('<path d="M6.5 5.5 2.25 10l4.25 4.5M13.5 5.5l4.25 4.5-4.25 4.5M11.6 3.75 8.4 16.25"/>');
+
+/** "H" with a heading level beside it. */
+export const headingIcon = (level) => svg(`<path d="M3.25 4.75v10.5M10.25 4.75v10.5M3.25 10h7"/>${LEVELS[level]}`);
+
+/** A picture (a frame, a sun, a hill): the 图片 type and its placeholder, the icon picker's upload. */
+export const PHOTO_ICON = svg('<rect x="3.25" y="4.25" width="13.5" height="11.5" rx="2"/><circle cx="7.5" cy="8.25" r="1.25"/><path d="m3.75 14.25 3.6-3.4a1 1 0 0 1 1.36 0l1.79 1.65 2.1-2.05a1 1 0 0 1 1.4 0l2.75 2.75"/>');
+
+/** A smiling face: the block menu's 更换图标 and 添加图标, the 添加图标 control, the icon picker's people. */
+export const FACE_ICON = svg('<circle cx="10" cy="10" r="6.75"/><path d="M7.5 11.5a3 3 0 0 0 5 0"/><circle cx="7.9" cy="8.5" r=".9" fill="currentColor" stroke="none"/><circle cx="12.1" cy="8.5" r=".9" fill="currentColor" stroke="none"/>');

package/browser/editor/components/image/crop.mjs

@@ -0,0 +1,189 @@
+import { Z } from "../../../shared/layers.mjs";
+import { addStyle, element, mount } from "../../page/ui.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// 裁剪图片 (notion-lite's blocks/image/edit/crop.js, Notion's 31868): a dialog over the page, the
+// picture in it at most 70vw × 75vh, a box over it marking what is kept (the rest dimmed): dragged
+// to move it, by a corner to size it, at least 32px and never past the picture; 自由 or a shape
+// (1:1, 4:3, 3:2, 16:9: the box keeps it). It may start from the picture a cropped one was cropped
+// from, with the box kept then (`from`: { src, crop }, notion-lite's original and crop), so what was
+// cut away can be brought back. 保存 draws what is kept onto a canvas, at most 2000px wide, as a PNG
+// for `save(blob, kept)` (kept: "x y width height" in % of the picture; null, the blob too, when the
+// whole picture is kept: page.mjs puts the original back); 取消, Esc or a click beside the dialog
+// closes it, nothing saved.
+
+const STYLE = `
+  .ge-crop { position: fixed; inset: 0; z-index: ${Z.viewer}; display: flex; align-items: center; justify-content: center; background: rgb(15 15 15 / 60%); user-select: none;
+    font: 14px/1.2 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
+  .ge-crop-dialog { display: flex; flex-direction: column; max-width: calc(100vw - 48px); border-radius: 12px; overflow: hidden; background: var(--ge-bg); color: var(--ge-tx);
+    box-shadow: 0 0 0 1px var(--ge-outline), 0 20px 40px rgb(0 0 0 / 30%); }
+  .ge-crop-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--ge-line); }
+  .ge-crop-title { flex: 1; text-align: center; font-weight: 500; white-space: nowrap; }
+  .ge-crop-shape, .ge-crop-cancel, .ge-crop-save { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
+  .ge-crop-shape { color: var(--ge-tx2); }
+  .ge-crop-shape[aria-pressed="true"] { background: var(--ge-fill); color: var(--ge-accent-text); }
+  .ge-crop-shape:hover, .ge-crop-cancel:hover { background: var(--ge-hover); }
+  .ge-crop-cancel { color: var(--ge-tx2); }
+  .ge-crop-save { background: var(--ge-accent); color: #fff; font-weight: 500; }
+  .ge-crop-save:hover { background: var(--ge-accent-hover); }
+  .ge-crop-body { display: flex; justify-content: center; padding: 30px; background: light-dark(#f7f6f3, #1f1f1f); }
+  .ge-crop-stage { position: relative; overflow: hidden; }
+  .ge-crop-stage > img { display: block; max-width: 70vw; max-height: 75vh; pointer-events: none; }
+  .ge-crop-box { position: absolute; cursor: move; box-shadow: 0 0 0 9999px rgb(255 255 255 / 50%), inset 0 0 0 1px rgb(0 0 0 / 10%), 0 0 0 1px rgb(255 255 255 / 50%); }
+  .ge-crop-corner { position: absolute; width: 20px; height: 20px; }
+  .ge-crop-corner::after { content: ""; position: absolute; inset: 0; border: 0 solid rgb(255 255 255 / 90%); filter: drop-shadow(0 0 1px rgb(0 0 0 / 60%)); }
+  .ge-crop-corner[data-at="nw"] { left: -2px; top: -2px; cursor: nwse-resize; } .ge-crop-corner[data-at="nw"]::after { border-width: 3px 0 0 3px; }
+  .ge-crop-corner[data-at="ne"] { right: -2px; top: -2px; cursor: nesw-resize; } .ge-crop-corner[data-at="ne"]::after { border-width: 3px 3px 0 0; }
+  .ge-crop-corner[data-at="sw"] { left: -2px; bottom: -2px; cursor: nesw-resize; } .ge-crop-corner[data-at="sw"]::after { border-width: 0 0 3px 3px; }
+  .ge-crop-corner[data-at="se"] { right: -2px; bottom: -2px; cursor: nwse-resize; } .ge-crop-corner[data-at="se"]::after { border-width: 0 3px 3px 0; }
+`;
+
+const SHAPES = [[t("自由"), null], ["1:1", 1], ["4:3", 4 / 3], ["3:2", 3 / 2], ["16:9", 16 / 9]];
+const MIN = 32;
+const MAX_EXPORT = 2000;
+
+let open = null; // { node, keys }
+
+/** Crop `img` (an image block's picture), from `from` when given; `save(blob, kept)` gets the PNG of what is kept. */
+export function openCrop(img, save, from = {}) {
+  addStyle(STYLE);
+  closeCrop();
+  const picture = element("img", { src: from.src ?? img.src, alt: "", draggable: "false" });
+  const box = element("div", { class: "ge-crop-box" }, ...["nw", "ne", "sw", "se"].map((at) => element("div", { class: "ge-crop-corner", "data-at": at })));
+  const stage = element("div", { class: "ge-crop-stage" }, picture, box);
+  const shapes = SHAPES.map(([label, ratio]) => {
+    const button = element("button", { type: "button", class: "ge-crop-shape", "aria-pressed": String(ratio === null), text: label });
+    button.addEventListener("click", () => shape(ratio, button));
+    return button;
+  });
+  const cancel = element("button", { type: "button", class: "ge-crop-cancel", text: t("取消") });
+  const done = element("button", { type: "button", class: "ge-crop-save", text: t("保存") });
+  const dialog = element("div", { class: "ge-crop-dialog", role: "dialog", "aria-label": t("裁剪图片") },
+    element("div", { class: "ge-crop-bar" }, ...shapes, element("div", { class: "ge-crop-title", text: t("裁剪图片") }), cancel, done),
+    element("div", { class: "ge-crop-body" }, stage));
+  const node = mount(element("div", { class: "ge-crop" }, dialog));
+  let rect = null; // the box, in the picture's shown pixels: { x, y, w, h }
+  let ratio = null;
+  const size = () => ({ w: picture.clientWidth, h: picture.clientHeight });
+  const paint = () => Object.assign(box.style, { left: `${rect.x}px`, top: `${rect.y}px`, width: `${rect.w}px`, height: `${rect.h}px` });
+  // The box kept last time, or the whole picture.
+  const start = () => {
+    const { w, h } = size();
+    const kept = from.crop;
+    rect = kept ? { x: (kept.x / 100) * w, y: (kept.y / 100) * h, w: (kept.width / 100) * w, h: (kept.height / 100) * h } : { x: 0, y: 0, w, h };
+    paint();
+  };
+  if (picture.complete && picture.naturalWidth) start();
+  else picture.addEventListener("load", start, { once: true });
+
+  // A shape: the box keeps its left, top and width, its height following, made smaller to fit.
+  function shape(value, button) {
+    ratio = value;
+    shapes.forEach((each) => each.setAttribute("aria-pressed", String(each === button)));
+    if (!ratio || !rect) return;
+    const { w, h } = size();
+    let width = rect.w;
+    let height = width / ratio;
+    if (rect.y + height > h) {
+      height = h - rect.y;
+      width = height * ratio;
+    }
+    if (rect.x + width > w) {
+      width = w - rect.x;
+      height = width / ratio;
+    }
+    rect = { ...rect, w: width, h: height };
+    paint();
+  }
+
+  // Dragging the box moves it; dragging a corner sizes it from the opposite one.
+  box.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0 || !rect) return;
+    event.preventDefault();
+    const at = event.target.closest(".ge-crop-corner")?.getAttribute("data-at") ?? null;
+    const from = { x: event.clientX, y: event.clientY, rect: { ...rect } };
+    const { w, h } = size();
+    box.setPointerCapture?.(event.pointerId);
+    const move = (moving) => {
+      const dx = moving.clientX - from.x;
+      const dy = moving.clientY - from.y;
+      const was = from.rect;
+      if (!at) {
+        rect = { ...was, x: Math.max(0, Math.min(w - was.w, was.x + dx)), y: Math.max(0, Math.min(h - was.h, was.y + dy)) };
+      } else {
+        // The corner opposite stays; the one dragged follows, inside the picture.
+        const left = at.includes("w");
+        const top = at.includes("n");
+        const fixedX = left ? was.x + was.w : was.x;
+        const fixedY = top ? was.y + was.h : was.y;
+        let x = Math.max(0, Math.min(w, (left ? was.x : was.x + was.w) + dx));
+        let y = Math.max(0, Math.min(h, (top ? was.y : was.y + was.h) + dy));
+        let width = Math.max(MIN, Math.abs(x - fixedX));
+        let height = Math.max(MIN, Math.abs(y - fixedY));
+        if (ratio) {
+          height = width / ratio;
+          const room = top ? fixedY : h - fixedY;
+          if (height > room) {
+            height = room;
+            width = height * ratio;
+          }
+        }
+        width = Math.min(width, left ? fixedX : w - fixedX);
+        height = Math.min(height, top ? fixedY : h - fixedY);
+        rect = { x: left ? fixedX - width : fixedX, y: top ? fixedY - height : fixedY, w: width, h: height };
+      }
+      paint();
+    };
+    const up = () => {
+      box.removeEventListener("pointermove", move);
+      box.removeEventListener("pointerup", up);
+      box.removeEventListener("pointercancel", up);
+    };
+    box.addEventListener("pointermove", move);
+    box.addEventListener("pointerup", up);
+    box.addEventListener("pointercancel", up);
+  });
+
+  // 保存: what is kept, drawn from the picture's own pixels (2000px wide at most), as a PNG, and where
+  // it is in the picture; the whole picture kept is none.
+  done.addEventListener("click", () => {
+    if (!rect) return;
+    const { w, h } = size();
+    if (rect.x < 1 && rect.y < 1 && rect.w > w - 1 && rect.h > h - 1) {
+      closeCrop();
+      return save(null, null);
+    }
+    const share = (value, of) => Math.round((value / of) * 100000) / 1000;
+    const kept = [share(rect.x, w), share(rect.y, h), share(rect.w, w), share(rect.h, h)].map((value) => String(Math.min(100, value))).join(" ");
+    const scale = picture.naturalWidth / picture.clientWidth;
+    const source = { x: rect.x * scale, y: rect.y * scale, w: rect.w * scale, h: rect.h * scale };
+    const out = Math.min(1, MAX_EXPORT / source.w);
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.max(1, Math.round(source.w * out));
+    canvas.height = Math.max(1, Math.round(source.h * out));
+    canvas.getContext("2d").drawImage(picture, source.x, source.y, source.w, source.h, 0, 0, canvas.width, canvas.height);
+    canvas.toBlob((blob) => {
+      closeCrop();
+      if (blob) save(blob, kept);
+    }, "image/png");
+  });
+  cancel.addEventListener("click", closeCrop);
+  node.addEventListener("pointerdown", (event) => { if (event.target === node) closeCrop(); });
+  const keys = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      closeCrop();
+    } else if (!event.target.closest?.(".ge-crop")) event.stopPropagation();
+  };
+  document.addEventListener("keydown", keys, true);
+  open = { node, keys };
+}
+
+/** The crop dialog gone, nothing saved. */
+function closeCrop() {
+  if (!open) return;
+  document.removeEventListener("keydown", open.keys, true);
+  open.node.remove();
+  open = null;
+}

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

@@ -0,0 +1,104 @@
+import { SPAN, SPAN_SIZE } from "../../../shared/media.mjs";
+import { PHOTO_ICON } 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 image block): the kit's figure.doc-image, a picture of the report's folder
+// (assets/<file>) and its caption, a <figcaption> always written (empty while there is none). A
+// card: one block, its caption a text block of its own kind (mediaCaption: plain inline text, may be
+// empty), its width a size (--doc-span), its side a class (left or right; centered without).
+// Made from an empty block (the "/" menu: 图片): a placeholder until a picture is chosen (上传, or a
+// link the server downloads into the report's folder: editor/media-store.mjs), written once it has
+// one. page.mjs: the picker, the toolbar, resizing, the viewer (what the four media blocks share:
+// ../media/); 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/ (an
+// image pasted: `clipboard`), src/transfer/markdown.mjs (`read`), page.mjs (its block menu rows: 对齐, 标题, 替换, 原始大小), ../source/ (its caption:
+// blocks.mjs).
+// Its look: the kit's styles/image.css (src/render/kit/); its picture where the preview serves it
+// and embedded in an export: src/render/images.mjs.
+export const ALIGN = ["doc-image--left", "doc-image--right"]; // centered with neither
+
+/**
+ * A picture'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-image", PHOTO_ICON, t("添加图片")); // its words in the language t() says them in now (placeholder.mjs showEmpty)
+
+export default {
+  name: "image",
+  listed: () => t("图片"),
+  readOnly: [mediaReadOnly("image")],
+  units: {
+    image: {
+      name: t("图片"),
+      match: [{ rank: 45, tag: "figure", class: "doc-image" }],
+      boxed: true,
+      toggles: ALIGN,
+      sizes: { [SPAN]: SPAN_SIZE },
+    },
+  },
+  types: {
+    image: {
+      menu: ["advanced", 16], fresh: 2,
+      tag: "figure", className: "doc-image", kind: "image", bare: true,
+      create: ({ doc, put }) => put(newImage(doc)), // its placeholder stands for the empty block; what it holds is chosen next
+      // Copied as itself, a card. It comes as this from another program: its address, filled once on the page.
+      clipboard: {
+        kind: "image",
+        read(unit, { plain }) {
+          const image = unit.querySelector(":scope > img");
+          const src = image?.getAttribute("src");
+          if (!src) return null;
+          const name = src.split("/").pop();
+          return { label: plain(unit.querySelector(":scope > figcaption")) || image.getAttribute("alt") || name, src, name, caption: writtenCaption(unit) };
+        },
+        check: (block, { imageSource, string }) => imageSource(block.src) && (block.caption === undefined || string(block.caption, 2000)),
+        build: ({ doc, block, pending }) => pending(newImage(doc), block.src),
+        text: () => [],
+      },
+      // What a new one is written with (core.mjs nodeOf): its picture, caption, side and width; an
+      // empty figure while it has no picture (its placeholder, kept: file.mjs).
+      extras: (element) => imageNode(element),
+      part: ".doc-image",
+      bar: placeholder,
+      label: t("图片"), icon: PHOTO_ICON,
+      words: "图片 图像 照片 截图 tupian tp image picture photo img screenshot",
+      glance: { row: 10, name: "图片", write: "`<figure><img src=\"assets/…\"><figcaption>`, or a lone `<img>`", after: "`figure.doc-image`", rule: "Pictures" },
+    },
+  },
+};
+
+/** An image block's picture element, once it has one. */
+export const imageOf = (figure) => figure.querySelector(":scope > img[data-ge-src]");
+
+/** A crop as written (data-crop: "x y width height", in % of the original), or null. */
+export function cropOf(value) {
+  const numbers = String(value ?? "").trim().split(/\s+/).map(Number);
+  if (numbers.length !== 4 || numbers.some((number) => !Number.isFinite(number))) return null;
+  const [x, y, width, height] = numbers;
+  return x >= 0 && y >= 0 && width > 0 && height > 0 && x + width <= 100.01 && y + height <= 100.01 ? { x, y, width, height } : null;
+}
+
+// What a new image is written with: its picture (the file, not where the preview serves it), its
+// caption's text, its side and its width; cropped, the picture it was cropped from and what of it
+// is kept (裁剪图片 starts from them again).
+function imageNode(figure) {
+  const span = figure.style.getPropertyValue(SPAN).trim();
+  const side = ALIGN.filter((name) => figure.classList.contains(name));
+  const img = imageOf(figure);
+  const original = img?.getAttribute("data-original");
+  const crop = img?.getAttribute("data-crop");
+  return {
+    ...(original && cropOf(crop) ? { original, crop } : {}),
+    src: fileOf(imageOf(figure), "src") ?? "",
+    caption: captionWords(figure),
+    ...(side.length > 0 ? { classes: side } : {}),
+    ...(span ? { span: Number(span) } : {}),
+  };
+}
+
+/** A new image (the "/" menu's 图片): its placeholder (添加图片), until a picture is chosen (page.mjs). */
+export const newImage = (doc) => newMediaFigure(doc, "image", placeholder());