@heycys/gallery 0.0.0-stage → 0.1.0

package/browser/editor/page/marks.mjs

@@ -0,0 +1,377 @@
+// Inline formatting of a selection inside one block: bold, italic, underline, strikethrough, inline
+// code, text color and highlight (DOM only; tested with jsdom). Only the selected part is split
+// and wrapped, so the rest of the block keeps its markup, including the author's attributes, as
+// it was.
+
+import { COLOR_NAMES } from "../../shared/colors.mjs";
+import { HELD_TAGS } from "../../shared/components/list.mjs";
+import { ZWSP, blank } from "../../shared/inline-spacing.mjs";
+
+// The kit's colors (styles/base.css: Notion's nine, src/shared/colors.mjs), in the order the toolbar's panel shows them.
+export const TEXT_COLORS = COLOR_NAMES;
+export const HIGHLIGHTS = TEXT_COLORS;
+const INK = new RegExp(`^doc-(text-(${TEXT_COLORS.join("|")})|highlight-(${HIGHLIGHTS.join("|")}))$`);
+
+/** A class of the shared kit's text colors and highlights (kept by the serializer and the server). */
+export const isInkClass = (name) => INK.test(name);
+
+// What an underline's line may take besides its default, red and 2px (styles/base.css): a color
+// ("plain": the text's own) and a weight, each a class of the u element itself.
+export const UNDERLINE_COLORS = ["orange", "blue", "purple", "plain"];
+export const UNDERLINE_WEIGHTS = ["thin", "thick"]; // 1px, 3px
+const UNDERLINE_CLASS = new RegExp(`^doc-underline-(${[...UNDERLINE_COLORS, ...UNDERLINE_WEIGHTS].join("|")})$`);
+
+/** A class of the kit's underline colors and weights (kept by the serializer on a u). */
+export const isUnderlineClass = (name) => UNDERLINE_CLASS.test(name);
+
+// Tag families are on or off; color families carry a value (the color name) as a span's class;
+// an underline's color and weight are facets of the u element itself, a class each ("default":
+// none, the red and 2px), the values each takes listed in `own`.
+const FAMILIES = {
+  bold: { tags: ["STRONG", "B"], tag: "strong" },
+  italic: { tags: ["EM", "I"], tag: "em" },
+  underline: { tags: ["U"], tag: "u" },
+  strike: { tags: ["S", "STRIKE", "DEL"], tag: "s" },
+  code: { tags: ["CODE"], tag: "code" },
+  text: { prefix: "doc-text-" },
+  highlight: { prefix: "doc-highlight-" },
+  underlineColor: { tags: ["U"], tag: "u", prefix: "doc-underline-", own: UNDERLINE_COLORS },
+  underlineWeight: { tags: ["U"], tag: "u", prefix: "doc-underline-", own: UNDERLINE_WEIGHTS },
+};
+const ATOM = "[data-ge-atom]";
+
+// The family's value carried by this element, or null.
+function valueIn(element, family) {
+  if (element.nodeType !== 1 || element.hasAttribute("data-ge-atom")) return null;
+  if (family.own) {
+    if (!family.tags.includes(element.tagName)) return null;
+    const name = [...element.classList].find((entry) => entry.startsWith(family.prefix) && family.own.includes(entry.slice(family.prefix.length)));
+    return name ? name.slice(family.prefix.length) : "default";
+  }
+  if (family.tags) return family.tags.includes(element.tagName) ? true : null;
+  if (element.tagName !== "SPAN") return null;
+  const name = [...element.classList].find((entry) => entry.startsWith(family.prefix) && isInkClass(entry));
+  return name ? name.slice(family.prefix.length) : null;
+}
+
+// Elements of the block's own markup (not the rendered insides of formula chips).
+const inlineElements = (host) => [...host.querySelectorAll("*")].filter((node) => !node.parentElement.closest(ATOM));
+
+// Text nodes and formula chips with at least one character inside the range, in document order.
+function leavesIn(host, range) {
+  const leaves = [];
+  const visit = (node) => {
+    for (const child of node.childNodes) {
+      if (!range.intersectsNode(child)) continue;
+      if (child.nodeType === 3) {
+        const start = child === range.startContainer ? range.startOffset : 0;
+        const end = child === range.endContainer ? range.endOffset : child.length;
+        if (end > start) leaves.push({ node: child, size: end - start });
+      } else if (child.nodeType === 1) {
+        if (child.hasAttribute("data-ge-atom")) leaves.push({ node: child, size: 1 });
+        else visit(child);
+      }
+    }
+  };
+  visit(host);
+  return leaves;
+}
+
+/**
+ * The value every selected character shares for a family: true for bold, italic or code, the
+ * color name for text and highlight; null when some character lacks it or values differ.
+ */
+export function markValue(host, range, name) {
+  const family = FAMILIES[name];
+  let shared = null;
+  for (const [index, { node }] of leavesIn(host, fit(host, range)).entries()) {
+    let value = null;
+    for (let parent = node.parentNode; parent && parent !== host && value === null; parent = parent.parentNode) value = valueIn(parent, family);
+    if (value === null || (index > 0 && value !== shared)) return null;
+    shared = value;
+  }
+  return shared;
+}
+
+/** Whether text typed at `node` (a point of the caret, in `host`) lands inside an element of a tag family (bold, italic, underline, strike, code): what the browser gives it. */
+export function markAround(host, node, name) {
+  const family = FAMILIES[name];
+  for (let parent = node.nodeType === 3 ? node.parentNode : node; parent && parent !== host; parent = parent.parentNode) if (valueIn(parent, family) === true) return true;
+  return false;
+}
+
+/**
+ * Set a family on the selected text: `value` true or a color name applies it (replacing another
+ * color; for an underline's facets, "default" is the red and 2px), false or null removes it.
+ * Returns the range covering the same text afterwards.
+ */
+export function formatRange(host, range, name, value) {
+  const family = FAMILIES[name];
+  const doc = host.ownerDocument;
+  // The other facet of an underline (its weight when its color changes, and the other way round)
+  // stays as the selected text had it.
+  const kept = family.own ? Object.entries(FAMILIES)
+    .filter(([, other]) => other.own && other !== family && other.tag === family.tag)
+    .map(([other, facet]) => [facet, markValue(host, range, other)]) : [];
+  dropPads(host, range);
+  const selection = fit(host, range);
+  if (selection.collapsed) return selection;
+  const start = doc.createComment("");
+  const end = doc.createComment("");
+  const tail = selection.cloneRange();
+  tail.collapse(false);
+  tail.insertNode(end);
+  selection.insertNode(start);
+
+  // No element of the family may straddle a boundary: split it there.
+  for (const marker of [start, end]) {
+    const ancestors = [];
+    for (let node = marker.parentNode; node !== host; node = node.parentNode) ancestors.push(node);
+    for (const ancestor of ancestors) if (valueIn(ancestor, family) !== null) splitAround(ancestor, marker);
+  }
+  const between = () => {
+    const inner = doc.createRange();
+    inner.setStartAfter(start);
+    inner.setEndBefore(end);
+    return inner;
+  };
+  const inside = between();
+  for (const element of inlineElements(host)) {
+    if (valueIn(element, family) !== null && contains(inside, element)) strip(element, family);
+  }
+  if (value !== null && value !== false) {
+    const wrapper = doc.createElement(family.tag ?? "span");
+    const classes = family.prefix && value !== "default" ? [family.prefix + value] : [];
+    for (const [facet, facetValue] of kept) if (facetValue && facetValue !== "default") classes.push(facet.prefix + facetValue);
+    if (classes.length > 0) wrapper.className = classes.join(" ");
+    const content = between();
+    wrapper.append(content.extractContents());
+    content.insertNode(wrapper);
+  }
+
+  // Remember the selection as character offsets, tidy up, and find it again.
+  const offsets = [offsetAt(host, start.parentNode, indexOf(start)), offsetAt(host, end.parentNode, indexOf(end))];
+  start.remove();
+  end.remove();
+  tidy(host, family);
+  return rangeAt(host, offsets);
+}
+
+/** A range as character offsets in the block (a formula counts as one), e.g. to restore it after undo. */
+export function rangeOffsets(host, range) {
+  const fitted = fit(host, range);
+  return [offsetAt(host, fitted.startContainer, fitted.startOffset), offsetAt(host, fitted.endContainer, fitted.endOffset)];
+}
+
+export function rangeAt(host, [from, to]) {
+  const range = host.ownerDocument.createRange();
+  range.setStart(...pointAt(host, from, true));
+  range.setEnd(...pointAt(host, to, false));
+  return range;
+}
+
+// The range inside the block, with no boundary inside a formula chip.
+function fit(host, range) {
+  const fitted = range.cloneRange();
+  if (!host.contains(fitted.startContainer)) fitted.setStart(host, 0);
+  if (!host.contains(fitted.endContainer)) fitted.setEnd(host, ownEnd(host));
+  const atom = (node) => (node.nodeType === 1 ? node : node.parentElement)?.closest(ATOM);
+  const first = atom(fitted.startContainer);
+  if (first && host.contains(first)) fitted.setStartBefore(first);
+  const last = atom(fitted.endContainer);
+  if (last && host.contains(last)) fitted.setEndAfter(last);
+  return fitted;
+}
+
+// Split `element` at `marker` into two copies and leave the marker between them.
+function splitAround(element, marker) {
+  const tail = element.ownerDocument.createRange();
+  tail.setStartAfter(marker);
+  tail.setEnd(element, element.childNodes.length);
+  const rest = element.cloneNode(false);
+  rest.append(tail.extractContents());
+  element.after(marker, rest);
+}
+
+const indexOf = (node) => [...node.parentNode.childNodes].indexOf(node);
+
+function contains(range, node) {
+  const index = indexOf(node);
+  return range.comparePoint(node.parentNode, index) === 0 && range.comparePoint(node.parentNode, index + 1) === 0;
+}
+
+function strip(element, family) {
+  if (family.prefix && !family.own) {
+    [...element.classList].filter((entry) => entry.startsWith(family.prefix)).forEach((entry) => element.classList.remove(entry));
+    if (element.classList.length > 0) return; // still carries the other color family
+  }
+  element.replaceWith(...element.childNodes);
+}
+
+// The editor's pads (pads.mjs: a zero-width space that only holds a caret, as inside inline code at
+// its start) go before a selection is formatted, its ends kept on the text: one left in a piece split
+// off would keep that piece, drawn as an empty box (inline code cleared, its start's pad left in a
+// <code> of its own).
+function dropPads(host, range) {
+  const pads = [];
+  const walk = (node) => {
+    for (const child of node.childNodes) {
+      if (child.nodeType === 3 && child.data === ZWSP) pads.push(child);
+      else if (child.nodeType === 1 && !child.hasAttribute("data-ge-atom")) walk(child);
+    }
+  };
+  walk(host);
+  for (const pad of pads) {
+    if (range.startContainer === pad) range.setStartAfter(pad);
+    if (range.endContainer === pad) range.setEndBefore(pad);
+    pad.remove();
+  }
+}
+
+// The inline elements text carries its marks in: the format bar's (bold… a color), a link.
+const MARKS = new Set(["STRONG", "B", "EM", "I", "U", "INS", "S", "STRIKE", "DEL", "CODE", "KBD", "SAMP", "SUP", "SUB", "A", "SPAN", "MARK"]);
+/** Whether `node` is an element text carries a mark in (bold… a color, a link; not a chip). */
+export const isMark = (node) => node?.nodeType === 1 && MARKS.has(node.tagName) && !node.hasAttribute("data-ge-atom");
+
+/**
+ * A collapsed `range` in `host` taken out of the marks around it, each split there (a half left
+ * holding nothing goes): what goes in there carries its own marks alone, as notion-lite's pasted
+ * text keeps its own (the caret's are not added to it). Returns a range at that place.
+ */
+export function outOfMarks(host, range) {
+  const doc = host.ownerDocument;
+  const marker = doc.createComment("");
+  range.insertNode(marker);
+  while (marker.parentNode !== host && isMark(marker.parentNode)) {
+    const mark = marker.parentNode;
+    splitAround(mark, marker);
+    const rest = marker.nextSibling;
+    if (holdsNothing(mark)) mark.remove();
+    if (isMark(rest) && holdsNothing(rest)) rest.remove();
+  }
+  const at = doc.createRange();
+  at.setStartBefore(marker);
+  at.collapse(true);
+  marker.remove();
+  return at;
+}
+
+// What makes two marks the same: their tag and attributes (a link's address too).
+const markSignature = (node) => `${node.tagName} ${[...node.attributes].filter((entry) => entry.name !== "data-ge-src").map((entry) => `${entry.name}=${entry.value}`).sort().join(" ")}`;
+
+/**
+ * Two neighbours `left` and `right` (right after it) that are the same mark made one, and so on
+ * inward where their insides meet (bold pasted beside bold is one bold, notion-lite's text normalized).
+ * Returns the mark kept (`left`), or null when they are not the same.
+ */
+export function joinMarks(left, right) {
+  if (!isMark(left) || !isMark(right) || left.nextSibling !== right || markSignature(left) !== markSignature(right)) return null;
+  for (let [a, b] = [left, right]; isMark(a) && isMark(b) && a.nextSibling === b && markSignature(a) === markSignature(b);) {
+    const [inner, next] = [a.lastChild, b.firstChild];
+    a.append(...b.childNodes);
+    b.remove();
+    [a, b] = [inner, next];
+  }
+  left.normalize();
+  return left;
+}
+
+/** Whether an inline element holds nothing: no text but pads, no formula, no break (and is no break or formula itself). */
+export const holdsNothing = (element) => element.tagName !== "BR" && !element.hasAttribute("data-ge-atom") && element.textContent.replaceAll(ZWSP, "") === "" && !element.querySelector(`${ATOM}, br`);
+
+// Unwrap elements left empty by the splits, merge neighbours that now carry the same mark, and
+// join adjacent text nodes.
+function tidy(host, family) {
+  for (const element of inlineElements(host)) if (holdsNothing(element)) element.replaceWith(...element.childNodes);
+  host.normalize(); // drops the empty text nodes the splits leave between neighbours
+  const signature = (node) => [...node.attributes].filter((entry) => entry.name !== "data-ge-src").map((entry) => `${entry.name}=${entry.value}`).sort().join(" ");
+  for (const element of inlineElements(host)) {
+    if (!element.isConnected || valueIn(element, family) === null) continue;
+    for (let next = element.nextSibling; next?.nodeType === 1 && next.tagName === element.tagName && signature(next) === signature(element); next = element.nextSibling) {
+      element.append(...next.childNodes);
+      next.remove();
+    }
+  }
+  host.normalize();
+}
+
+// What makes two pieces of inline code the same: their attributes, the editor's marks aside.
+const codeSignature = (node) => [...node.attributes].filter((entry) => !/^(data-ge-|contenteditable$)/.test(entry.name))
+  .map((entry) => `${entry.name}=${entry.value}`).sort().join(" ");
+/**
+ * Inline code right after inline code, nothing between them (what stood between deleted, two
+ * blocks joined), is one piece, as Feishu's: the second's text goes into the first. A caret that
+ * was between them (or in a pad of the second) goes to the join, inside; one in the second's text
+ * stays where it was. Returns whether any were joined.
+ */
+export function joinCode(host) {
+  const selection = host.ownerDocument.getSelection();
+  let joined = false;
+  for (const code of [...host.querySelectorAll("code")]) {
+    if (!code.isConnected || code.parentElement.closest(ATOM)) continue;
+    for (;;) {
+      const between = [];
+      let next = code.nextSibling;
+      for (; blank(next); next = next.nextSibling) between.push(next);
+      if (next?.nodeName !== "CODE" || codeSignature(next) !== codeSignature(code)) break;
+      const saved = selection?.rangeCount ? [selection.anchorNode, selection.anchorOffset, selection.focusNode, selection.focusOffset] : null;
+      const siblings = [...code.parentNode.childNodes];
+      const going = (node, offset) => between.includes(node) || node === next || (blank(node) && next.contains(node))
+        || (node === code.parentNode && offset > siblings.indexOf(code) && offset <= siblings.indexOf(next));
+      const toJoin = saved && selection.isCollapsed && going(saved[0], saved[1]);
+      const last = textsOf(code).at(-1);
+      const join = last ? [last, last.data.length] : [code, code.childNodes.length];
+      between.forEach((node) => node.remove());
+      code.append(...[...next.childNodes].filter((node) => !blank(node)));
+      next.remove();
+      joined = true;
+      if (toJoin) selection.setBaseAndExtent(join[0], join[1], join[0], join[1]);
+      else if (saved && saved[0].isConnected && saved[2].isConnected) selection.setBaseAndExtent(...saved);
+    }
+  }
+  return joined;
+}
+
+// The text nodes with something more than a pad's space in them, in order.
+function textsOf(node) {
+  const texts = [];
+  for (const child of node.childNodes) {
+    if (child.nodeType === 3 && !blank(child)) texts.push(child);
+    else if (child.nodeType === 1) texts.push(...textsOf(child));
+  }
+  return texts;
+}
+
+// Characters (a formula chip counts as one) between the block start and a boundary point.
+function offsetAt(host, container, offset) {
+  const before = host.ownerDocument.createRange();
+  before.setStart(host, 0);
+  before.setEnd(container, offset);
+  return leavesIn(host, before).reduce((sum, leaf) => sum + leaf.size, 0);
+}
+
+// The point `count` characters into the block. At a node boundary a start prefers the next
+// node and an end the previous one, so the selection stays inside what was just formatted.
+function pointAt(host, count, forward) {
+  const everything = host.ownerDocument.createRange();
+  everything.setStart(host, 0);
+  everything.setEnd(host, ownEnd(host));
+  const leaves = leavesIn(host, everything);
+  for (const { node, size } of leaves) {
+    if (count < size || (count === size && !forward)) {
+      return node.nodeType === 3 ? [node, count] : [node.parentNode, indexOf(node) + count];
+    }
+    count -= size;
+  }
+  // No text to count in at all (an emptied block, its placeholder <br> alone): at its start, before
+  // the <br>, where an empty block's caret is (caret.mjs atEdge reads it there as the block's start,
+  // so Backspace in an emptied item moved out a level still works); past the text, at its end.
+  return leaves.length === 0 ? [host, 0] : [host, ownEnd(host)];
+}
+
+// Where a block's own content ends: a list item's text stops before the blocks it holds (its lists, a
+// paragraph, a task board…), so that no offset of its counts their words.
+function ownEnd(host) {
+  const index = host.tagName === "LI" ? [...host.childNodes].findIndex((node) => node.nodeType === 1 && HELD_TAGS.has(node.localName)) : -1;
+  return index < 0 ? host.childNodes.length : index;
+}

package/browser/editor/page/media-menu/index.mjs

@@ -0,0 +1,158 @@
+import { closePopup, esc, openPopup, showSnackbar, style } from "../emoji-picker/support.mjs";
+import { addStyle } from "../ui.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// The 上传 / 链接 menu of media blocks (notion-lite's ui/media-menu.js, Notion's 353650: images,
+// files, bookmarks and embeds), right below the block's placeholder (or the block), centered:
+// tabs (上传, 链接) when there are two, then the tab's content. 上传: a button
+// choosing a file (a file dropped on the menu goes too); 链接: a field, a blue button under it and a
+// line of gray text; Enter goes too. Esc or a press outside closes it. Drawn in the icon picker's
+// popup layer (emoji-picker/support.mjs: Notion's tokens, light and dark); carries data-doc-dev.
+//
+// openMediaMenu(anchor, options): anchor, the element it opens below;
+//   tabs      [{ key: "upload" | "link", label }], in that order, the first shown first
+//   upload    { label, accept, primary, caption }: the button's text, the file types it takes; primary: the
+//             blue button (a file block's 选择文件) instead of the outlined one, with a gray line under it (caption)
+//   width     the menu's, in px (300 for a file, a bookmark and an embed, 360 for an image)
+//   link      { placeholder, button, caption, invalid }: the field's placeholder, the button's text,
+//             the gray line under it, what an address that is no link says
+//   onUpload(file), onEmbed(url): what was chosen (the menu closed already)
+
+const STYLE = `
+  .nmedia-menu { max-width: calc(100vw - 24px); border-radius: 10px; background: var(--c-popBac); box-shadow: var(--c-shaOutLg); overflow: hidden; color: var(--c-texPri); user-select: none; }
+  .nmedia-menu-tabs { display: flex; height: 40px; padding: 0 8px; box-shadow: inset 0 -1px 0 var(--ca-borSecTra); font-size: 14px; }
+  .nmedia-menu-tab-wrap { position: relative; padding: 6px 0; }
+  .nmedia-menu-tab { display: inline-flex; align-items: center; height: 28px; padding: 0 8px; border-radius: 6px; line-height: 1.2; color: var(--c-texTer); cursor: pointer; white-space: nowrap; transition: background 20ms ease-in; }
+  .nmedia-menu-tab:hover { background: var(--ca-bacIntTra); }
+  .nmedia-menu-tab.active { color: var(--c-texPri); }
+  .nmedia-menu-tab.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; border-bottom: 2px solid var(--c-texPri); }
+  .nmedia-menu-body { padding: 12px 12px 10px; }
+  .nmedia-menu-inner { display: flex; justify-content: center; padding: 4px; }
+  .nmedia-menu-upload { display: flex; align-items: center; justify-content: center; width: 100%; height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--ca-borPriTra); font-size: 14px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background 20ms ease-in; }
+  .nmedia-menu-upload:hover { background: var(--ca-bacIntTra); }
+  .nmedia-menu-link { flex-direction: column; align-items: stretch; gap: 8px; }
+  .nmedia-menu-input { display: flex; align-items: center; gap: 4px; width: 100%; height: 28px; padding: 3px 6px; border-radius: 6px; background: var(--ca-bacSecTra); box-shadow: 0 0 0 1px var(--ca-borPriTra); box-sizing: border-box; }
+  .nmedia-menu-input:focus-within { box-shadow: var(--c-inpBluFocRin); }
+  .nmedia-menu-input input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; padding: 0; font: inherit; font-size: 14px; line-height: 20px; color: var(--c-texPri); }
+  .nmedia-menu-input input::placeholder { color: var(--c-texTer); }
+  .nmedia-menu-embed { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 300px; margin: 0 auto; height: 28px; padding: 0 8px; border-radius: 6px; background: var(--c-bluBacAccPri); color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; box-sizing: border-box; }
+  .nmedia-menu-embed:hover { filter: brightness(.94); }
+  .nmedia-menu-caption { margin: -6px 0 4px; padding: 4px 0; font-size: 12px; line-height: 1.4; color: var(--c-texSec); text-align: center; }
+  .nmedia-menu.dragover .nmedia-menu-body { background: var(--ca-bluBacSecTra); }
+  .nmedia-menu-choose { margin-top: 8px; }
+`;
+
+let menu = null; // the popup open
+
+/** An address as a link: a scheme added where none was written; { url, error }. */
+function normalizeLink(raw) {
+  let url = String(raw ?? "").trim();
+  if (!url) return { url: "" };
+  if (!/^[a-z][\w+.-]*:/i.test(url) && /^[\w-]+(\.[\w-]+)+(:\d+)?(\/|\?|#|$)/.test(url)) url = `https://${url}`;
+  if (!/^(https?:\/\/[^\s]+\.[^\s]+|https?:\/\/localhost[^\s]*)/i.test(url)) return { url, error: t("请输入有效的链接。") };
+  return { url };
+}
+
+/** Choose a file (of `accept`'s types); `done(file)`. */
+function pickFile(accept, done) {
+  const input = document.createElement("input");
+  input.type = "file";
+  if (accept) input.accept = accept;
+  input.addEventListener("change", () => { const file = input.files?.[0]; if (file) done(file); });
+  input.click();
+}
+
+export function openMediaMenu(anchor, { tabs, width, upload = {}, link = {}, onUpload, onEmbed }) {
+  closeMediaMenu();
+  style();
+  addStyle(STYLE);
+  const el = document.createElement("div");
+  el.className = "nmedia-menu";
+  el.style.width = `${width}px`;
+  el.setAttribute("role", "dialog");
+  el.setAttribute("data-doc-dev", "");
+  const render = (current) => {
+    el.innerHTML = (tabs.length > 1 ? `<div class="nmedia-menu-tabs" role="tablist">${tabs.map(({ key, label }) =>
+      `<div class="nmedia-menu-tab-wrap"><div role="tab" class="nmedia-menu-tab${key === current ? " active" : ""}" aria-selected="${key === current}" data-tab="${key}">${esc(label)}</div></div>`).join("")}</div>` : "")
+      + `<div class="nmedia-menu-body">${current === "upload"
+        ? (upload.primary
+          ? `<div class="nmedia-menu-inner nmedia-menu-link"><div role="button" tabindex="0" class="nmedia-menu-embed nmedia-menu-choose" data-do="upload">${esc(upload.label ?? t("选择文件"))}</div>${upload.caption ? `<div class="nmedia-menu-caption">${esc(upload.caption)}</div>` : ""}</div>`
+          : `<div class="nmedia-menu-inner"><div role="button" tabindex="0" class="nmedia-menu-upload" data-do="upload">${esc(upload.label ?? t("上传文件"))}</div></div>`)
+        : `<div class="nmedia-menu-inner nmedia-menu-link"><div class="nmedia-menu-input"><input type="url" placeholder="${esc(link.placeholder ?? t("粘贴链接…"))}" autocomplete="off"></div>`
+          + `<div role="button" tabindex="0" class="nmedia-menu-embed" data-do="embed">${esc(link.button ?? t("嵌入链接"))}</div>`
+          + (link.caption ? `<div class="nmedia-menu-caption">${esc(link.caption)}</div>` : "") + "</div>"}</div>`;
+    const input = el.querySelector("input");
+    if (input) {
+      input.addEventListener("keydown", (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          embed();
+        } else if (event.key === "Escape") {
+          event.preventDefault();
+          event.stopPropagation();
+          closeMediaMenu();
+        }
+      });
+      requestAnimationFrame(() => input.focus({ preventScroll: true }));
+    }
+  };
+  const embed = () => {
+    const { url, error } = normalizeLink(el.querySelector("input")?.value);
+    if (!url) return;
+    if (error) return showSnackbar(link.invalid ?? error);
+    closeMediaMenu();
+    onEmbed(url);
+  };
+  el.addEventListener("mousedown", (event) => { if (!event.target.closest("input")) event.preventDefault(); });
+  // A file dropped on the menu's 上传 tab goes as one chosen.
+  const hasFiles = (event) => [...(event.dataTransfer?.types ?? [])].includes("Files") && el.querySelector('[data-do="upload"]');
+  el.addEventListener("dragover", (event) => {
+    if (!hasFiles(event)) return;
+    event.preventDefault();
+    event.stopPropagation();
+    el.classList.add("dragover");
+  });
+  el.addEventListener("dragleave", (event) => { if (!el.contains(event.relatedTarget)) el.classList.remove("dragover"); });
+  el.addEventListener("drop", (event) => {
+    if (!hasFiles(event)) return;
+    event.preventDefault();
+    event.stopPropagation();
+    el.classList.remove("dragover");
+    const file = event.dataTransfer.files?.[0];
+    if (file) {
+      closeMediaMenu();
+      onUpload(file);
+    }
+  });
+  el.addEventListener("click", (event) => {
+    const tabNode = event.target.closest("[data-tab]");
+    if (tabNode) return render(tabNode.dataset.tab);
+    const act = event.target.closest("[data-do]")?.dataset.do;
+    if (act === "upload") pickFile(upload.accept, (file) => {
+      closeMediaMenu();
+      onUpload(file);
+    });
+    else if (act === "embed") embed();
+  });
+  render(tabs[0].key);
+  const rect = anchor.getBoundingClientRect();
+  const popup = openPopup({ origin: { left: rect.left, right: rect.right, top: rect.top, bottom: rect.bottom, width: rect.width, height: rect.height }, placement: "bottom", align: "center", gap: 0, content: el });
+  menu = popup;
+  const onKey = (event) => {
+    if (event.key !== "Escape" || menu !== popup) return;
+    event.preventDefault();
+    event.stopPropagation();
+    closeMediaMenu();
+  };
+  document.addEventListener("keydown", onKey, true);
+  popup.onClose = () => {
+    document.removeEventListener("keydown", onKey, true);
+    if (menu === popup) menu = null;
+  };
+  return popup;
+}
+
+export function closeMediaMenu() {
+  if (menu && !menu.closed) closePopup(menu);
+  menu = null;
+}