@atri-editor/core 0.3.0 → 0.4.0

package/dist/index.js

@@ -8,9 +8,13 @@ import { TaskList, TaskItem } from "@tiptap/extension-list";
 import { TableRow, TableHeader, TableCell, Table } from "@tiptap/extension-table";
 import Image from "@tiptap/extension-image";
 import { NodeSelection, Plugin, PluginKey } from "@tiptap/pm/state";
+import Highlight from "@tiptap/extension-highlight";
+import Subscript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
+import { TextStyle, Color, BackgroundColor, FontFamily, FontSize } from "@tiptap/extension-text-style";
 import { Node as Node$1, DOMParser } from "@tiptap/pm/model";
 import i18next from "i18next";
-import { autoUpdate, computePosition, offset, flip, shift } from "@floating-ui/dom";
+import { offset, flip, shift, autoUpdate, computePosition } from "@floating-ui/dom";
 function isBuiltinTableActive(editor) {
   var _a;
   const spec = (_a = editor.schema.nodes.table) == null ? void 0 : _a.spec;
@@ -126,6 +130,32 @@ function validateFile(file, options) {
 function isImageFile(file) {
   return (file.type || "").toLowerCase().startsWith("image/");
 }
+const HREF_SCHEMES = ["http", "https", "mailto", "tel", "ftp", "ftps"];
+const MEDIA_SCHEMES = ["http", "https", "data", "blob"];
+function stripUrlNoise(value) {
+  const collapsed = value.replace(/[\t\n\r]/g, "");
+  let start = 0;
+  let end = collapsed.length;
+  while (start < end && isStripped(collapsed.charCodeAt(start))) start += 1;
+  while (end > start && isStripped(collapsed.charCodeAt(end - 1))) end -= 1;
+  return collapsed.slice(start, end);
+}
+function isStripped(code) {
+  return code <= 32 || code === 127;
+}
+const SCHEME_PREFIX = /^([a-z][a-z0-9+.-]*):/i;
+function safeHref(value, schemes = HREF_SCHEMES) {
+  var _a;
+  if (typeof value !== "string") return null;
+  const url = stripUrlNoise(value);
+  if (!url) return null;
+  const scheme = (_a = SCHEME_PREFIX.exec(url)) == null ? void 0 : _a[1];
+  if (!scheme) return url;
+  return schemes.includes(scheme.toLowerCase()) ? url : null;
+}
+function safeMediaSrc(value) {
+  return safeHref(value, MEDIA_SCHEMES);
+}
 function isAttachmentForm(name) {
   return name === "attachment" || name === "attachmentLink";
 }
@@ -150,6 +180,12 @@ function insertAttachmentContent(props, typeName, options) {
   const { state, commands, tr, dispatch } = props;
   const target = mediaInsertTarget(state.selection);
   const anchor = typeof target === "number" ? target : target.to;
+  if (safeHref(options.src) === null) {
+    console.warn(
+      `[Atri Editor] insertAttachment rejected: "${options.src}" is not a clickable address.`
+    );
+    return false;
+  }
   if (!commands.insertContentAt(target, {
     type: typeName,
     attrs: {
@@ -182,7 +218,10 @@ function attachmentAttributes() {
   return {
     src: {
       default: null,
-      parseHTML: (element) => element.getAttribute("data-src"),
+      // 粘贴进来的 data-src 也洗一遍：不洗的话它绕开 AttachmentLink 那处 getAttrs，
+      // 直接落进节点属性，再由渲染层的 safeHref 挡掉——属性里仍留着地址，
+      // 而 setNodeMarkup / JSON 回灌都不经过渲染层
+      parseHTML: (element) => safeMediaSrc(element.getAttribute("data-src")),
       renderHTML: (attributes) => dataAttr("data-src", attributes.src)
     },
     name: {
@@ -332,7 +371,19 @@ const Attachment = Node.create({
       ["span", { class: "atri-attachment-icon", "aria-hidden": "true" }]
     ];
     const body = [
-      ["a", { class: "atri-attachment-name", href: src, rel: "noopener noreferrer" }, label]
+      // src 有五条来路（宿主 insertAttachment、上传响应、外部粘贴、setNodeMarkup、
+      // setJSON 回灌），逐条在入口校验拦不全，渲染层是唯一都经过的地方。
+      // 不过 dataAttr 的"空值即省略键"是关键：传 null 会被 mergeAttributes 留下，
+      // 序列化出来就成了 href="null"，反而多一枚假链接
+      [
+        "a",
+        {
+          class: "atri-attachment-name",
+          ...dataAttr("href", safeHref(src)),
+          rel: "noopener noreferrer"
+        },
+        label
+      ]
     ];
     if (size) {
       body.push(["span", { class: "atri-attachment-size" }, formatFileSize(size)]);
@@ -444,8 +495,9 @@ const AttachmentLink = Node.create({
       {
         tag: "a[data-atri-attachment-link]",
         priority: 100,
-        // 手写或从别处粘来的 <a> 只带 href，没有 data-src：认下来，别留一枚空链接
-        getAttrs: (element) => element.getAttribute("data-src") ? {} : { src: element.getAttribute("href") ?? null }
+        // 手写或从别处粘来的 <a> 只带 href，没有 data-src：认下来，别留一枚空链接。
+        // data-src 那条来路在 attachmentAttributes().src.parseHTML 里已经洗过
+        getAttrs: (element) => element.getAttribute("data-src") ? {} : { src: safeHref(element.getAttribute("href")) }
       }
     ];
   },
@@ -456,9 +508,11 @@ const AttachmentLink = Node.create({
       mergeAttributes(HTMLAttributes, {
         "data-atri-attachment-link": "",
         class: "atri-attachment-link",
-        href: src,
+        // 协议不合法就整枚 href 都不写，退化成一枚没有地址的文字，
+        // 而不是留着 href="javascript:…" 等用户点
+        ...dataAttr("href", safeHref(src)),
         // download 让同源地址点击即下载（跨域浏览器会退化成导航）；
-        // mergeAttributes 会丢掉 null，没名字就只剩普通链接
+        // 值为 null 时 PM 序列化会跳过，没名字就只剩普通链接
         download: name,
         rel: "noopener noreferrer"
       }),
@@ -562,6 +616,204 @@ function createMediaExtensions(media, runtime) {
     MediaFiles.configure({ runtime: runtime ?? null })
   ];
 }
+const TEXT_CHARS = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;"
+};
+const QUOTE_CHARS = {
+  '"': "&quot;",
+  "'": "&#39;"
+};
+function replaceAll(value, table, pattern) {
+  return value.replace(pattern, (char) => table[char] ?? char);
+}
+function escapeHtml(value) {
+  return replaceAll(value, TEXT_CHARS, /[&<>]/g);
+}
+function escapeQuotes(value) {
+  return replaceAll(value, QUOTE_CHARS, /["']/g);
+}
+const DECODED = {
+  "&amp;": "&",
+  "&lt;": "<",
+  "&gt;": ">",
+  "&quot;": '"',
+  "&#39;": "'"
+};
+function decodeEntities(value) {
+  return value.replace(/&(?:amp|lt|gt|quot|#39);/g, (entity) => DECODED[entity] ?? entity);
+}
+const STYLE_TO_ATTR = {
+  color: "color",
+  "background-color": "backgroundColor",
+  "font-size": "fontSize",
+  "font-family": "fontFamily"
+};
+const ATTR_TO_STYLE = {
+  color: "color",
+  backgroundColor: "background-color",
+  fontSize: "font-size",
+  fontFamily: "font-family"
+};
+function hasValue(value) {
+  return typeof value === "string" && value.trim() !== "";
+}
+function styleAttrToAttrs(styleText) {
+  const attrs = {};
+  for (const declaration of styleText.split(";")) {
+    const separator = declaration.indexOf(":");
+    if (separator < 1) continue;
+    const prop = declaration.slice(0, separator).trim().toLowerCase();
+    const value = declaration.slice(separator + 1).trim();
+    const mapped = STYLE_TO_ATTR[prop];
+    if (mapped && hasValue(value)) attrs[mapped] = value;
+  }
+  return attrs;
+}
+function attrsToStyleCss(attrs = {}) {
+  const declarations = [];
+  for (const attr of Object.keys(ATTR_TO_STYLE)) {
+    const value = attrs[attr];
+    if (hasValue(value)) declarations.push(`${ATTR_TO_STYLE[attr]}: ${value}`);
+  }
+  return declarations.join("; ");
+}
+function makeInlineHtmlReader(options) {
+  const { tokenName, pattern, begins, resolve } = options;
+  return {
+    markdownTokenName: tokenName,
+    markdownTokenizer: {
+      name: tokenName,
+      level: "inline",
+      start: (src) => {
+        let earliest = -1;
+        for (const needle of begins) {
+          const at = src.indexOf(needle);
+          if (at >= 0 && (earliest < 0 || at < earliest)) earliest = at;
+        }
+        return earliest;
+      },
+      tokenize: (src, _tokens, lexer) => {
+        const match = pattern.exec(src);
+        if (!match) return void 0;
+        return {
+          type: tokenName,
+          raw: match[0],
+          text: match[2] ?? "",
+          openAttrs: match[1] ?? "",
+          // 这一步是整个设计的关键：不在这里重分词，内层的 **粗体** 与转义就会
+          // 在 parse 阶段被当成字面文本，进而每导出一次转义翻一倍
+          tokens: lexer.inlineTokens(match[2] ?? "")
+        };
+      }
+    },
+    /**
+     * token.tokens 已经是分好词的内层，直接 parseInline。
+     *
+     * resolve 认不出属性时（`<span class="x">` 这种）照样解析内层、只是不套 mark——
+     * 把整个 token 丢给 parseInline 会让里面的文字一起消失。
+     */
+    parseMarkdown: (token, helpers) => {
+      const content = helpers.parseInline(token.tokens ?? []);
+      const resolved = resolve(token);
+      return resolved ? helpers.applyMark(resolved.markName, content, resolved.attrs) : content;
+    }
+  };
+}
+function emitAttrValue(value) {
+  return escapeQuotes(escapeHtml(value));
+}
+function renderStyleSpan(node, inner) {
+  const css = attrsToStyleCss(node.attrs);
+  if (!css) return inner;
+  return `<span style="${emitAttrValue(css)}">${inner}</span>`;
+}
+const StyledTextStyle = TextStyle.extend({
+  renderMarkdown: (node, helpers) => renderStyleSpan(node, helpers.renderChildren(node))
+});
+const StyledSubscript = Subscript.extend({
+  renderMarkdown: (_node, helpers) => `<sub>${helpers.renderChildren(_node)}</sub>`
+});
+const StyledSuperscript = Superscript.extend({
+  renderMarkdown: (_node, helpers) => `<sup>${helpers.renderChildren(_node)}</sup>`
+});
+const StyledHighlight = Highlight.configure({ multicolor: true }).extend({
+  renderMarkdown: (node, helpers) => {
+    var _a;
+    const inner = helpers.renderChildren(node);
+    const color = (_a = node.attrs) == null ? void 0 : _a.color;
+    if (typeof color !== "string" || color.trim() === "") return `==${inner}==`;
+    return `<mark data-color="${emitAttrValue(color)}" style="background-color: ${emitAttrValue(color)}; color: inherit">${inner}</mark>`;
+  }
+});
+const StyledSpanReader = Extension.create({
+  // Reader 也得有名有姓：Extension.create 不给 name 就会落成空串，
+  // 三个匿名扩展同名会撞上 tiptap 的 Duplicate extension names 警告
+  name: "atriStyledSpanReader",
+  ...makeInlineHtmlReader({
+    tokenName: "atriStyledSpan",
+    // 非贪婪：我们的发出侧不会产出血缘嵌套的 span（同一个 mark 只出一个标签），
+    // 遇到外来的嵌套就退回内层文本，不抛
+    pattern: /^<span([^>]*)>([\s\S]*?)<\/span>/,
+    begins: ["<span"],
+    resolve: (token) => {
+      var _a;
+      const style = (_a = /(?:^|\s)style="([^"]*)"/i.exec(token.openAttrs ?? "")) == null ? void 0 : _a[1];
+      if (!style) return null;
+      const attrs = styleAttrToAttrs(decodeEntities(style));
+      return Object.keys(attrs).length > 0 ? { markName: "textStyle", attrs } : null;
+    }
+  })
+});
+const SubSupReader = Extension.create({
+  name: "atriInlineTagReader",
+  ...makeInlineHtmlReader({
+    tokenName: "atriInlineTag",
+    pattern: /^<(sub|sup)>([\s\S]*?)<\/\1>/,
+    begins: ["<sub>", "<sup>"],
+    resolve: (token) => {
+      const tag = (token.openAttrs ?? "").toLowerCase();
+      if (tag !== "sub" && tag !== "sup") return null;
+      return { markName: tag === "sup" ? "superscript" : "subscript", attrs: {} };
+    }
+  })
+});
+const HighlightReader = Extension.create({
+  name: "atriStyledMarkReader",
+  ...makeInlineHtmlReader({
+    tokenName: "atriStyledMark",
+    pattern: /^<mark([^>]*)>([\s\S]*?)<\/mark>/,
+    begins: ["<mark"],
+    resolve: (token) => {
+      var _a;
+      const color = (_a = /data-color="([^"]*)"/i.exec(token.openAttrs ?? "")) == null ? void 0 : _a[1];
+      if (!color) return null;
+      return { markName: "highlight", attrs: { color: decodeEntities(color) } };
+    }
+  })
+});
+function createFormattingExtensions(options = {}) {
+  const emit = options.inlineStyles !== "drop";
+  return [
+    emit ? StyledTextStyle : TextStyle,
+    Color,
+    BackgroundColor,
+    FontFamily,
+    FontSize,
+    emit ? StyledHighlight : Highlight.configure({ multicolor: true }),
+    emit ? StyledSubscript : Subscript,
+    emit ? StyledSuperscript : Superscript,
+    StyledSpanReader,
+    SubSupReader,
+    HighlightReader
+  ];
+}
+function usableUrl(candidate) {
+  const value = candidate.trim();
+  if (!value || /[<>\n\r]/.test(value)) return null;
+  return safeMediaSrc(value);
+}
 function pickUrl(body) {
   if (!body || typeof body !== "object") return void 0;
   const record = body;
@@ -605,10 +857,29 @@ function uploadViaEndpoint(config, file, context) {
         body = xhr.responseText;
       }
       if (config.transformResult) {
-        resolve(config.transformResult(body, file));
+        let transformed;
+        try {
+          transformed = config.transformResult(body, file);
+        } catch (cause) {
+          reject(new Error(`上传失败：upload.transformResult 抛出了异常（${String(cause)}）`));
+          return;
+        }
+        const result = transformed;
+        const picked = result && typeof result === "object" ? result.url : void 0;
+        const url2 = typeof picked === "string" ? usableUrl(picked) : null;
+        if (!url2) {
+          reject(
+            new Error(
+              `上传失败：upload.transformResult 没有返回带可用 url 的 UploadResult（拿到 ${JSON.stringify(picked)}）`
+            )
+          );
+          return;
+        }
+        resolve({ ...result, url: url2 });
         return;
       }
-      const url = typeof body === "string" ? body : pickUrl(body);
+      const candidate = typeof body === "string" ? body : pickUrl(body);
+      const url = candidate ? usableUrl(candidate) : null;
       if (!url) {
         reject(new Error("上传失败：响应里找不到文件地址，请用 upload.transformResult 指定"));
         return;
@@ -617,6 +888,8 @@ function uploadViaEndpoint(config, file, context) {
     };
     xhr.onerror = () => reject(new Error("上传失败：网络错误"));
     xhr.onabort = () => reject(new DOMException("Aborted", "AbortError"));
+    xhr.ontimeout = () => reject(new Error(`上传失败：超过 ${config.timeout}ms 未响应`));
+    xhr.timeout = config.timeout ?? 0;
     if (context.signal.aborted) {
       xhr.abort();
       return;
@@ -635,6 +908,17 @@ function createUploader(upload) {
   if (!upload.endpoint) return null;
   return { upload: (file, context) => uploadViaEndpoint(upload, file, context) };
 }
+const reported = /* @__PURE__ */ new WeakSet();
+function runSafely(callback, label, args = []) {
+  if (typeof callback !== "function") return;
+  try {
+    callback(...args);
+  } catch (error) {
+    if (reported.has(callback)) return;
+    reported.add(callback);
+    console.error(`[Atri Editor] The "${label}" callback threw and was skipped:`, error);
+  }
+}
 function readFileAsDataUrl(file) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -975,14 +1259,7 @@ class MediaRuntime {
   findPosition(task) {
     const editor = this.editor;
     if (!editor) return null;
-    let found = null;
-    editor.state.doc.descendants((node, position) => {
-      if (found !== null) return;
-      if (node.attrs.uploadId === task.id || node.attrs.src === task.previewUrl) {
-        found = position;
-      }
-    });
-    return found;
+    return findTaskPosition(editor.state.doc, task);
   }
   taskByPreviewUrl(src) {
     if (typeof src !== "string" || !src) return null;
@@ -1002,7 +1279,7 @@ class MediaRuntime {
   }
   reject(file, reason, cause) {
     if (this.config.onError) {
-      this.config.onError({ file, reason, cause });
+      runSafely(this.config.onError, "media.onError", [{ file, reason, cause }]);
       return;
     }
     console.warn(`[Atri Editor] File "${file.name}" was rejected (${reason}).`);
@@ -1016,6 +1293,17 @@ class MediaRuntime {
 function clampPercent(percent) {
   return Math.round(Math.min(100, Math.max(0, percent)));
 }
+function findTaskPosition(doc, task) {
+  let byUploadId = null;
+  let byPreviewUrl = null;
+  doc.descendants((node, position) => {
+    if (byUploadId === null && node.attrs.uploadId === task.id) byUploadId = position;
+    if (byPreviewUrl === null && task.previewUrl !== null && node.attrs.src === task.previewUrl) {
+      byPreviewUrl = position;
+    }
+  });
+  return byUploadId ?? byPreviewUrl;
+}
 function createPreviewUrl(file) {
   if (typeof URL === "undefined" || typeof URL.createObjectURL !== "function") return null;
   try {
@@ -1031,7 +1319,16 @@ function revokePreviewUrl(task) {
   URL.revokeObjectURL(previewUrl);
   task.previewUrl = null;
 }
-const BUBBLE_TEXT_ITEMS = ["bold", "italic", "underline", "strike", "code"];
+const BUBBLE_TEXT_ITEMS = [
+  "bold",
+  "italic",
+  "underline",
+  "strike",
+  "code",
+  "highlight",
+  "subscript",
+  "superscript"
+];
 const BUBBLE_NODE_ITEMS = ["attachmentDisplay", "delete"];
 const BUBBLE_SELECTABLE_NODES = ["image", "attachment", "attachmentLink"];
 function bubbleNodeNameFor(state) {
@@ -1068,13 +1365,15 @@ const LINK_HTML_ATTRIBUTES = {
 };
 class CoreEditor {
   constructor(config) {
+    this.ownsMediaRuntime = false;
     this.config = config;
     this.placeholderText = config.placeholder ?? "";
     this.mediaRuntime = config.media === false ? null : config.mediaRuntime ?? new MediaRuntime(config.media);
+    this.ownsMediaRuntime = this.mediaRuntime !== null && !config.mediaRuntime;
     this.editor = this.createEditor();
   }
   createEditor() {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const { element, content, contentFormat, editable, extensions } = this.config;
     const editorExtensions = [
       StarterKit.configure({
@@ -1089,7 +1388,14 @@ class CoreEditor {
             ...LINK_HTML_ATTRIBUTES,
             target: ((_c = this.config.link) == null ? void 0 : _c.target) ?? LINK_HTML_ATTRIBUTES.target
           }
-        }
+        },
+        // 关掉内置代码块，让接入方（通常就是 @atri-editor/code-highlight）的实现独占这个节点名。
+        // 为什么提供一个开关而不是让宿主直接传同名扩展顶掉：实测同名确实赢（后注册的赢，
+        // 节点与标记都是），所以不关也能工作——但 tiptap 会打一句
+        // "Duplicate extension names found: ['codeBlock']" 的 warning，而且这件事靠的是
+        // ExtensionManager 的去重顺序这个内部行为，不是对外承诺。
+        // 多一个包就多一处"看起来正常但踩在实现细节上"的配置，不如把意图写成显式的一档
+        codeBlock: this.config.codeBlock === false ? false : void 0
       })
     ];
     editorExtensions.push(
@@ -1134,7 +1440,12 @@ class CoreEditor {
       );
     }
     editorExtensions.push(TaskList, TaskItem);
-    const enableInputRules = ((_g = this.config.markdown) == null ? void 0 : _g.shortcuts) !== false;
+    if (this.config.formatting !== false) {
+      editorExtensions.push(
+        ...createFormattingExtensions({ inlineStyles: (_g = this.config.markdown) == null ? void 0 : _g.inlineStyles })
+      );
+    }
+    const enableInputRules = ((_h = this.config.markdown) == null ? void 0 : _h.shortcuts) !== false;
     if (extensions) {
       editorExtensions.push(...extensions);
     }
@@ -1151,27 +1462,22 @@ class CoreEditor {
         }
       },
       onCreate: () => {
-        var _a2, _b2;
-        (_b2 = (_a2 = this.config).onCreate) == null ? void 0 : _b2.call(_a2);
+        runSafely(this.config.onCreate, "onCreate");
       },
       onUpdate: () => {
-        var _a2, _b2;
-        (_b2 = (_a2 = this.config).onUpdate) == null ? void 0 : _b2.call(_a2);
+        runSafely(this.config.onUpdate, "onUpdate");
       },
       onFocus: () => {
-        var _a2, _b2;
-        (_b2 = (_a2 = this.config).onFocus) == null ? void 0 : _b2.call(_a2);
+        runSafely(this.config.onFocus, "onFocus");
       },
       onBlur: () => {
-        var _a2, _b2;
-        (_b2 = (_a2 = this.config).onBlur) == null ? void 0 : _b2.call(_a2);
+        runSafely(this.config.onBlur, "onBlur");
       },
       onDestroy: () => {
-        var _a2, _b2;
-        (_b2 = (_a2 = this.config).onDestroy) == null ? void 0 : _b2.call(_a2);
+        runSafely(this.config.onDestroy, "onDestroy");
       }
     });
-    (_h = this.mediaRuntime) == null ? void 0 : _h.bind(editor);
+    (_i = this.mediaRuntime) == null ? void 0 : _i.bind(editor);
     return editor;
   }
   /**
@@ -1271,11 +1577,17 @@ class CoreEditor {
    * 销毁编辑器
    */
   destroy() {
+    var _a;
     this.editor.destroy();
+    if (this.ownsMediaRuntime) (_a = this.mediaRuntime) == null ? void 0 : _a.destroy();
+    this.mediaRuntime = null;
   }
 }
 function simpleMarkdownToHtml(markdown2) {
-  let html = markdown2;
+  let html = escapeHtml(markdown2);
+  html = html.replace(/^###### (.+)$/gm, "<h6>$1</h6>");
+  html = html.replace(/^##### (.+)$/gm, "<h5>$1</h5>");
+  html = html.replace(/^#### (.+)$/gm, "<h4>$1</h4>");
   html = html.replace(/^### (.+)$/gm, "<h3>$1</h3>");
   html = html.replace(/^## (.+)$/gm, "<h2>$1</h2>");
   html = html.replace(/^# (.+)$/gm, "<h1>$1</h1>");
@@ -1286,9 +1598,21 @@ function simpleMarkdownToHtml(markdown2) {
   html = html.replace(/`(.+?)`/g, "<code>$1</code>");
   html = html.replace(
     /!\[([^\]]*)\]\(\s*([^\s)]+)(?:\s+"([^"]*)")?\s*\)/g,
-    (_all, alt, src, title) => `<img src="${src}" alt="${alt}"${title ? ` title="${title}"` : ""}>`
+    (_all, alt, src, title) => {
+      const url = safeMediaSrc(src);
+      if (url === null) return alt;
+      const titleAttr = title ? ` title="${escapeQuotes(title)}"` : "";
+      return `<img src="${escapeQuotes(url)}" alt="${escapeQuotes(alt)}"${titleAttr}>`;
+    }
+  );
+  html = html.replace(
+    /\[([^\]]*)\]\(\s*([^\s)]+)(?:\s+"[^"]*")?\s*\)/g,
+    (_all, text, href) => {
+      const url = safeHref(href);
+      if (url === null) return text;
+      return `<a href="${escapeQuotes(url)}">${text}</a>`;
+    }
   );
-  html = html.replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2">$1</a>');
   html = html.replace(/^\* (.+)$/gm, "<li>$1</li>");
   html = html.replace(/^- (.+)$/gm, "<li>$1</li>");
   html = html.replace(/^(\d+)\. (.+)$/gm, "<li>$2</li>");
@@ -1308,6 +1632,9 @@ function simpleHtmlToMarkdown(html) {
   md = md.replace(/<h1[^>]*>(.+?)<\/h1>/gi, "# $1\n\n");
   md = md.replace(/<h2[^>]*>(.+?)<\/h2>/gi, "## $1\n\n");
   md = md.replace(/<h3[^>]*>(.+?)<\/h3>/gi, "### $1\n\n");
+  md = md.replace(/<h4[^>]*>(.+?)<\/h4>/gi, "#### $1\n\n");
+  md = md.replace(/<h5[^>]*>(.+?)<\/h5>/gi, "##### $1\n\n");
+  md = md.replace(/<h6[^>]*>(.+?)<\/h6>/gi, "###### $1\n\n");
   md = md.replace(/<strong[^>]*>(.+?)<\/strong>/gi, "**$1**");
   md = md.replace(/<b[^>]*>(.+?)<\/b>/gi, "**$1**");
   md = md.replace(/<em[^>]*>(.+?)<\/em>/gi, "*$1*");
@@ -1426,6 +1753,7 @@ class MarkdownService {
     return this.config.enabled !== false;
   }
 }
+const THEME_PREFIX$1 = "atri-theme-";
 class ThemeManager {
   constructor(container, theme = "light") {
     this.container = container;
@@ -1436,8 +1764,8 @@ class ThemeManager {
    * 应用当前主题：内置主题与自定义主题走同一条 class 规则，只是名字不同
    */
   applyTheme() {
-    this.container.classList.remove("atri-theme-light", "atri-theme-dark");
-    this.container.classList.add(`atri-theme-${this.currentTheme}`);
+    Array.from(this.container.classList).filter((name) => name.startsWith(THEME_PREFIX$1)).forEach((name) => this.container.classList.remove(name));
+    this.container.classList.add(`${THEME_PREFIX$1}${this.currentTheme}`);
     this.container.setAttribute("data-atri-theme", this.currentTheme);
   }
   /**
@@ -1472,6 +1800,9 @@ const zhResources = {
     heading1: "标题 1",
     heading2: "标题 2",
     heading3: "标题 3",
+    heading4: "标题 4",
+    heading5: "标题 5",
+    heading6: "标题 6",
     paragraph: "正文",
     bulletList: "无序列表",
     orderedList: "有序列表",
@@ -1488,10 +1819,27 @@ const zhResources = {
     table: "表格",
     undo: "撤销",
     redo: "重做",
+    align: "对齐",
     alignLeft: "左对齐",
     alignCenter: "居中",
     alignRight: "右对齐",
-    alignJustify: "两端对齐"
+    alignJustify: "两端对齐",
+    textColor: "文字颜色",
+    highlight: "高亮",
+    highlightColor: "高亮色",
+    fontSize: "字号",
+    fontFamily: "字体",
+    subscript: "下标",
+    superscript: "上标",
+    clearFormat: "清除格式"
+  },
+  formatting: {
+    customColor: "其他颜色…",
+    noColor: "无",
+    defaultValue: "默认",
+    fontSans: "无衬线",
+    fontSerif: "衬线",
+    fontMono: "等宽"
   },
   media: {
     uploading: "上传中 {{files}} 个 · {{percent}}%",
@@ -1549,6 +1897,9 @@ const enResources = {
     heading1: "Heading 1",
     heading2: "Heading 2",
     heading3: "Heading 3",
+    heading4: "Heading 4",
+    heading5: "Heading 5",
+    heading6: "Heading 6",
     paragraph: "Paragraph",
     bulletList: "Bullet List",
     orderedList: "Ordered List",
@@ -1565,10 +1916,27 @@ const enResources = {
     table: "Table",
     undo: "Undo",
     redo: "Redo",
+    align: "Align",
     alignLeft: "Align Left",
     alignCenter: "Align Center",
     alignRight: "Align Right",
-    alignJustify: "Justify"
+    alignJustify: "Justify",
+    textColor: "Text Color",
+    highlight: "Highlight",
+    highlightColor: "Highlight Color",
+    fontSize: "Font Size",
+    fontFamily: "Font",
+    subscript: "Subscript",
+    superscript: "Superscript",
+    clearFormat: "Clear Formatting"
+  },
+  formatting: {
+    customColor: "Custom color…",
+    noColor: "None",
+    defaultValue: "Default",
+    fontSans: "Sans",
+    fontSerif: "Serif",
+    fontMono: "Monospace"
   },
   media: {
     uploading: "Uploading {{files}} · {{percent}}%",
@@ -1614,6 +1982,9 @@ const enResources = {
     error: "AI Error"
   }
 };
+function cloneResources(value) {
+  return JSON.parse(JSON.stringify(value));
+}
 class I18nManager {
   constructor(lang = "zh") {
     this.instance = i18next.createInstance();
@@ -1622,8 +1993,8 @@ class I18nManager {
       fallbackLng: "zh",
       initImmediate: false,
       resources: {
-        zh: { translation: zhResources },
-        en: { translation: enResources }
+        zh: { translation: cloneResources(zhResources) },
+        en: { translation: cloneResources(enResources) }
       }
     });
   }
@@ -1646,6 +2017,30 @@ class I18nManager {
   async changeLanguage(lang) {
     await this.instance.changeLanguage(lang);
   }
+  /**
+   * 注册语言包：给已存在的语言补词条，或引入一门内置清单之外的新语言。
+   *
+   * 内置词条是源码里的两个字面量对象，接入方改不到，于是 lang: 'ja' 只能静默回退中文
+   * ——看起来像"支持可扩展"，实际没有入口。这里补上那个入口。
+   *
+   * overwrite 传 false：同名 key 以先注册的一方为准，防止后加载的包把内置文案悄悄换掉。
+   * 要自定义措辞走 toolbar.items 的 tooltip，那本来就是优先级更高的显式入口。
+   * 注册当前语言时补发一次 languageChanged，让已挂载的界面重取文案；
+   * 不是当前语言就不发，白重刷一遍界面没有意义。
+   */
+  addResources(lang, resources) {
+    this.instance.addResourceBundle(lang, "translation", resources, true, false);
+    if (lang === this.instance.language) {
+      this.instance.emit("languageChanged", lang);
+    }
+  }
+  /**
+   * 该语言是否已有语言包。未注册的语言不会抛错，只会按 fallbackLng 回退，
+   * 所以想知道有没有真的生效得问这里。
+   */
+  hasLanguage(lang) {
+    return this.instance.hasResourceBundle(lang, "translation");
+  }
   /**
    * 监听语言变更，返回取消订阅的函数
    */
@@ -1663,6 +2058,13 @@ class I18nManager {
 function tOrFallback(i18n, key, fallback) {
   return (i18n == null ? void 0 : i18n.tOr(key, fallback)) ?? fallback;
 }
+function zhText(key) {
+  const found = key.split(".").reduce(
+    (node, part) => node && typeof node === "object" ? node[part] : void 0,
+    zhResources
+  );
+  return typeof found === "string" ? found : "";
+}
 class ExtensionManager {
   constructor() {
     this.extensions = /* @__PURE__ */ new Map();
@@ -1742,6 +2144,16 @@ class ExtensionManager {
     return this.extensions.has(name);
   }
 }
+const PANEL_OFFSET = 6;
+const PANEL_SHIFT_PADDING = 8;
+function panelMiddleware() {
+  return [offset(PANEL_OFFSET), flip(), shift({ padding: PANEL_SHIFT_PADDING })];
+}
+function placePanel(panel, x, y) {
+  panel.style.position = "fixed";
+  panel.style.left = `${x}px`;
+  panel.style.top = `${y}px`;
+}
 function positionPanel(trigger, panel, isCurrent) {
   let stopAutoUpdate = null;
   const update = async () => {
@@ -1749,12 +2161,10 @@ function positionPanel(trigger, panel, isCurrent) {
     try {
       const { x, y } = await computePosition(trigger, panel, {
         placement: "bottom-start",
-        middleware: [offset(6), flip(), shift({ padding: 8 })]
+        middleware: panelMiddleware()
       });
       if (!isCurrent()) return;
-      panel.style.position = "fixed";
-      panel.style.left = `${x}px`;
-      panel.style.top = `${y}px`;
+      placePanel(panel, x, y);
     } catch {
     }
   };
@@ -1789,10 +2199,20 @@ function listenPanelDismiss(trigger, panel, onClose) {
     document.removeEventListener("keydown", onKeyDown, true);
   };
 }
-function copyThemeClasses(source, panel) {
-  const root = source == null ? void 0 : source.closest(".atri-editor");
-  const themes = Array.from((root == null ? void 0 : root.classList) ?? []).filter((name) => name.startsWith("atri-theme-"));
-  panel.classList.add(...themes);
+const THEME_PREFIX = "atri-theme-";
+function syncThemeClasses(target, root) {
+  Array.from(target.classList).filter((name) => name.startsWith(THEME_PREFIX)).forEach((name) => target.classList.remove(name));
+  const themes = Array.from(root.classList).filter((name) => name.startsWith(THEME_PREFIX));
+  target.classList.add(...themes);
+}
+function followThemeClasses(source, panel) {
+  const root = (source == null ? void 0 : source.closest(".atri-editor")) ?? null;
+  if (root) syncThemeClasses(panel, root);
+  if (!root || typeof MutationObserver === "undefined") return () => {
+  };
+  const observer = new MutationObserver(() => syncThemeClasses(panel, root));
+  observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+  return () => observer.disconnect();
 }
 const FIELDS = {
   image: { url: true, alt: true, kind: "image" },
@@ -1805,6 +2225,7 @@ class InsertPanel {
     this.mode = null;
     this.floating = null;
     this.detachDismiss = null;
+    this.detachTheme = null;
     this.labelled = [];
     this.editor = options.editor;
     this.runtime = options.runtime;
@@ -1832,17 +2253,19 @@ class InsertPanel {
     (_a = this.onOpenChange) == null ? void 0 : _a.call(this, mode);
   }
   close() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     (_a = this.detachDismiss) == null ? void 0 : _a.call(this);
     this.detachDismiss = null;
-    (_b = this.floating) == null ? void 0 : _b.stop();
+    (_b = this.detachTheme) == null ? void 0 : _b.call(this);
+    this.detachTheme = null;
+    (_c = this.floating) == null ? void 0 : _c.stop();
     this.floating = null;
-    (_c = this.element) == null ? void 0 : _c.remove();
+    (_d = this.element) == null ? void 0 : _d.remove();
     this.element = null;
     this.labelled = [];
     if (this.mode === null) return;
     this.mode = null;
-    (_d = this.onOpenChange) == null ? void 0 : _d.call(this, null);
+    (_e = this.onOpenChange) == null ? void 0 : _e.call(this, null);
   }
   destroy() {
     var _a;
@@ -1937,7 +2360,7 @@ class InsertPanel {
     }
     document.body.appendChild(panel);
     this.element = panel;
-    copyThemeClasses(this.editor.view.dom, panel);
+    this.detachTheme = followThemeClasses(this.editor.view.dom, panel);
     (urlInput ?? altInput ?? browse).focus();
   }
   /**
@@ -1968,6 +2391,232 @@ class InsertPanel {
     this.detachDismiss = listenPanelDismiss(anchor, panel, () => this.close());
   }
 }
+class StyleOptionPanel {
+  constructor(options) {
+    this.element = null;
+    this.floating = null;
+    this.detachDismiss = null;
+    this.detachTheme = null;
+    this.anchor = null;
+    this.currentKey = null;
+    this.rows = [];
+    this.editor = options.editor;
+    this.i18n = options.i18n;
+    this.onOpenChange = options.onOpenChange;
+  }
+  get isOpen() {
+    return this.element !== null;
+  }
+  get openKey() {
+    return this.currentKey;
+  }
+  /** 面板是否正开在某个指定触发器上——工具栏据此决定按钮的按下态给谁 */
+  isOpenFor(anchor) {
+    return this.isOpen && this.anchor === anchor;
+  }
+  toggle(anchor, spec) {
+    if (this.isOpen) {
+      const switching = this.anchor !== anchor;
+      this.close();
+      if (switching) this.open(anchor, spec);
+      return;
+    }
+    this.open(anchor, spec);
+  }
+  close() {
+    var _a, _b, _c, _d;
+    if (!this.element) return;
+    (_a = this.detachDismiss) == null ? void 0 : _a.call(this);
+    this.detachDismiss = null;
+    (_b = this.detachTheme) == null ? void 0 : _b.call(this);
+    this.detachTheme = null;
+    (_c = this.floating) == null ? void 0 : _c.stop();
+    this.floating = null;
+    this.element.remove();
+    this.element = null;
+    this.anchor = null;
+    this.currentKey = null;
+    this.rows = [];
+    (_d = this.onOpenChange) == null ? void 0 : _d.call(this, false);
+  }
+  destroy() {
+    this.close();
+  }
+  open(anchor, spec) {
+    var _a;
+    const panel = this.build(spec);
+    document.body.appendChild(panel);
+    this.detachTheme = followThemeClasses(this.editor.view.dom, panel);
+    this.element = panel;
+    this.anchor = anchor;
+    this.currentKey = spec.key;
+    this.floating = positionPanel(anchor, panel, () => this.element === panel);
+    this.detachDismiss = listenPanelDismiss(anchor, panel, () => this.close());
+    (_a = this.onOpenChange) == null ? void 0 : _a.call(this, true);
+    panel.focus();
+  }
+  labelOf(option) {
+    if (!option.i18nKey) return option.label;
+    return tOrFallback(this.i18n, option.i18nKey, option.label);
+  }
+  build(spec) {
+    const panel = document.createElement("div");
+    panel.className = `atri-style-panel atri-style-panel--${spec.shape}`;
+    panel.setAttribute("role", "menu");
+    panel.setAttribute("aria-label", spec.label);
+    panel.tabIndex = -1;
+    panel.addEventListener("keydown", (event) => this.onKeyDown(event));
+    const body = document.createElement("div");
+    body.className = "atri-style-panel-body";
+    this.rows = [];
+    spec.options.forEach((option) => {
+      body.appendChild(this.makeRow(option, spec));
+    });
+    if (spec.customColorLabel) {
+      body.appendChild(this.makeCustomColorRow(spec));
+    }
+    if (spec.clearLabel) {
+      const clear = {
+        value: "",
+        label: spec.clearLabel,
+        isClear: true
+      };
+      body.appendChild(this.makeRow(clear, spec));
+    }
+    panel.appendChild(body);
+    return panel;
+  }
+  makeRow(option, spec) {
+    const row = document.createElement("button");
+    row.type = "button";
+    row.className = "atri-style-panel-row";
+    row.setAttribute("role", "menuitem");
+    row.dataset.styleValue = option.value;
+    if (option.isClear) row.classList.add("atri-style-panel-row--clear");
+    const label = this.labelOf(option);
+    row.title = label;
+    row.setAttribute("aria-label", label);
+    if (option.swatch) {
+      const swatch = document.createElement("span");
+      swatch.className = "atri-style-panel-swatch";
+      swatch.style.backgroundColor = option.swatch;
+      swatch.setAttribute("aria-hidden", "true");
+      row.appendChild(swatch);
+      if (spec.shape === "grid") row.classList.add("atri-style-panel-row--swatch-only");
+    }
+    if (spec.shape === "list" || !option.swatch) {
+      const text = document.createElement("span");
+      text.className = "atri-style-panel-text";
+      text.textContent = label;
+      if (option.preview) text.style.fontFamily = option.preview;
+      row.appendChild(text);
+    }
+    row.addEventListener("click", () => {
+      if (option.isClear) {
+        spec.onPick("");
+      } else {
+        spec.onPick(option.value);
+      }
+      this.close();
+    });
+    this.rows.push(row);
+    return row;
+  }
+  /**
+   * 原生取色器：不在预设色板里时用它。
+   *
+   * 监听 change 而不是 input——input 在拖动取色器的过程中每移一像素就触发一次，
+   * 每一次都是一条进撤销历史的事务，用户按一次撤销只能退一格，得按上百次才回到起点。
+   */
+  makeCustomColorRow(spec) {
+    const row = document.createElement("label");
+    row.className = "atri-style-panel-custom";
+    const input = document.createElement("input");
+    input.type = "color";
+    input.className = "atri-style-panel-custom-input";
+    input.value = "#1890ff";
+    input.addEventListener("change", () => {
+      spec.onPick(input.value);
+      this.close();
+    });
+    const text = document.createElement("span");
+    text.textContent = spec.customColorLabel ?? "";
+    row.appendChild(input);
+    row.appendChild(text);
+    return row;
+  }
+  onKeyDown(event) {
+    const step = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 }[event.key];
+    if (event.key === "Enter" || event.key === " ") return;
+    if (step === void 0) return;
+    event.preventDefault();
+    if (this.rows.length === 0) return;
+    const focused = document.activeElement;
+    const current = this.rows.indexOf(focused);
+    const next = current < 0 ? step > 0 ? 0 : this.rows.length - 1 : (current + step + this.rows.length) % this.rows.length;
+    this.rows[next].focus();
+  }
+}
+const TEXT_COLORS = [
+  "rgb(31, 31, 31)",
+  "rgb(89, 89, 89)",
+  "rgb(24, 144, 255)",
+  "rgb(82, 196, 26)",
+  "rgb(250, 173, 20)",
+  "rgb(245, 34, 45)",
+  "rgb(114, 46, 209)",
+  "rgb(235, 47, 150)",
+  "rgb(19, 194, 194)",
+  "rgb(47, 84, 235)",
+  "rgb(160, 97, 42)",
+  "rgb(120, 120, 120)"
+].map((value) => ({ value, label: value, swatch: value }));
+const HIGHLIGHT_COLORS = [
+  "rgb(255, 241, 184)",
+  "rgb(200, 250, 170)",
+  "rgb(168, 223, 255)",
+  "rgb(255, 192, 203)",
+  "rgb(223, 190, 255)",
+  "rgb(255, 214, 168)",
+  "rgb(178, 235, 242)",
+  "rgb(230, 230, 230)"
+].map((value) => ({ value, label: value, swatch: value }));
+const FONT_SIZES = [
+  "12px",
+  "14px",
+  "16px",
+  "18px",
+  "20px",
+  "24px",
+  "28px",
+  "32px",
+  "40px",
+  "48px"
+].map((value) => ({ value, label: value }));
+const FONT_FAMILIES = [
+  {
+    value: '-apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif',
+    label: "Sans",
+    i18nKey: "formatting.fontSans",
+    preview: "sans-serif"
+  },
+  {
+    value: 'Georgia, "Times New Roman", "Songti SC", SimSun, serif',
+    label: "Serif",
+    i18nKey: "formatting.fontSerif",
+    preview: "serif"
+  },
+  {
+    value: '"SFMono-Regular", Consolas, Menlo, monospace',
+    label: "Monospace",
+    i18nKey: "formatting.fontMono",
+    preview: "monospace"
+  },
+  { value: '"PingFang SC", "Microsoft YaHei", sans-serif', label: "PingFang / YaHei" },
+  { value: 'SimSun, "Songti SC", serif', label: "SimSun" },
+  { value: 'SimHei, "Heiti SC", sans-serif', label: "SimHei" },
+  { value: 'KaiTi, "Kaiti SC", serif', label: "KaiTi" }
+];
 const MAX_COLS = 8;
 const MAX_ROWS = 6;
 class TableGridPanel {
@@ -1975,6 +2624,7 @@ class TableGridPanel {
     this.element = null;
     this.floating = null;
     this.detachDismiss = null;
+    this.detachTheme = null;
     this.cursorRow = -1;
     this.cursorCol = -1;
     this.cells = [];
@@ -1999,18 +2649,20 @@ class TableGridPanel {
     (_a = this.onOpenChange) == null ? void 0 : _a.call(this, true);
   }
   close() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (!this.element) return;
     (_a = this.detachDismiss) == null ? void 0 : _a.call(this);
     this.detachDismiss = null;
-    (_b = this.floating) == null ? void 0 : _b.stop();
+    (_b = this.detachTheme) == null ? void 0 : _b.call(this);
+    this.detachTheme = null;
+    (_c = this.floating) == null ? void 0 : _c.stop();
     this.floating = null;
     this.element.remove();
     this.element = null;
     this.cells = [];
     this.cursorRow = -1;
     this.cursorCol = -1;
-    (_c = this.onOpenChange) == null ? void 0 : _c.call(this, false);
+    (_d = this.onOpenChange) == null ? void 0 : _d.call(this, false);
   }
   destroy() {
     this.close();
@@ -2048,7 +2700,7 @@ class TableGridPanel {
     panel.appendChild(hint);
     document.body.appendChild(panel);
     this.element = panel;
-    copyThemeClasses(this.editor.view.dom, panel);
+    this.detachTheme = followThemeClasses(this.editor.view.dom, panel);
     panel.focus();
   }
   /**
@@ -2101,6 +2753,127 @@ class TableGridPanel {
     this.highlight(row + 1, col + 1);
   }
 }
+class ToolbarMenuPanel {
+  constructor(options) {
+    this.element = null;
+    this.floating = null;
+    this.detachDismiss = null;
+    this.detachTheme = null;
+    this.anchor = null;
+    this.currentKey = null;
+    this.rows = [];
+    this.editor = options.editor;
+    this.onOpenChange = options.onOpenChange;
+  }
+  get isOpen() {
+    return this.element !== null;
+  }
+  get openKey() {
+    return this.currentKey;
+  }
+  toggle(anchor, spec) {
+    if (this.isOpen) {
+      const switching = this.anchor !== anchor;
+      this.close();
+      if (switching) this.open(anchor, spec);
+      return;
+    }
+    this.open(anchor, spec);
+  }
+  close() {
+    var _a, _b, _c, _d;
+    if (!this.element) return;
+    (_a = this.detachDismiss) == null ? void 0 : _a.call(this);
+    this.detachDismiss = null;
+    (_b = this.detachTheme) == null ? void 0 : _b.call(this);
+    this.detachTheme = null;
+    (_c = this.floating) == null ? void 0 : _c.stop();
+    this.floating = null;
+    this.element.remove();
+    this.element = null;
+    this.anchor = null;
+    this.currentKey = null;
+    this.rows = [];
+    (_d = this.onOpenChange) == null ? void 0 : _d.call(this, false);
+  }
+  destroy() {
+    this.close();
+  }
+  open(anchor, spec) {
+    var _a;
+    const panel = this.build(spec);
+    document.body.appendChild(panel);
+    this.detachTheme = followThemeClasses(this.editorViewDom(anchor), panel);
+    this.element = panel;
+    this.anchor = anchor;
+    this.currentKey = spec.key;
+    this.floating = positionPanel(anchor, panel, () => this.element === panel);
+    this.detachDismiss = listenPanelDismiss(anchor, panel, () => this.close());
+    (_a = this.onOpenChange) == null ? void 0 : _a.call(this, true);
+    panel.focus();
+  }
+  /**
+   * 主题类要从编辑器根上取，而这里只拿得到一个锚在工具栏上的按钮：
+   * 沿 DOM 往上找 .atri-editor 比让调用方再多传一个参数省事，且工具栏就在那个根里面
+   */
+  editorViewDom(anchor) {
+    return anchor.closest(".atri-editor");
+  }
+  build(spec) {
+    const panel = document.createElement("div");
+    panel.className = "atri-toolbar-menu";
+    panel.setAttribute("role", "menu");
+    panel.setAttribute("aria-label", spec.label);
+    panel.tabIndex = -1;
+    panel.addEventListener("keydown", (event) => this.onKeyDown(event));
+    this.rows = [];
+    spec.rows.forEach((row) => panel.appendChild(this.makeRow(row)));
+    return panel;
+  }
+  makeRow(row) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "atri-toolbar-menu-item";
+    button.setAttribute("role", "menuitemradio");
+    button.setAttribute("aria-checked", String(row.active));
+    button.dataset.menuItem = row.id;
+    button.textContent = row.label;
+    button.disabled = row.disabled;
+    if (row.active) button.classList.add("active");
+    button.addEventListener("click", () => {
+      row.run();
+      this.close();
+      this.editor.commands.focus();
+    });
+    this.rows.push(button);
+    return button;
+  }
+  onKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") return;
+    const step = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 }[event.key];
+    if (step === void 0) return;
+    event.preventDefault();
+    if (this.rows.length === 0) return;
+    const current = this.rows.indexOf(document.activeElement);
+    const next = current < 0 ? step > 0 ? 0 : this.rows.length - 1 : (current + step + this.rows.length) % this.rows.length;
+    this.rows[next].focus();
+  }
+}
+const SET_COMMAND = {
+  color: "setColor",
+  backgroundColor: "setBackgroundColor",
+  fontSize: "setFontSize",
+  fontFamily: "setFontFamily"
+};
+function canUseTextStyle(editor, attr) {
+  var _a, _b;
+  const command = editor.commands[SET_COMMAND[attr]];
+  if (typeof command !== "function") return false;
+  return !!((_b = (_a = editor.schema.marks.textStyle) == null ? void 0 : _a.spec.attrs) == null ? void 0 : _b[attr]);
+}
+function hasMark(editor, name) {
+  return !!editor.schema.marks[name];
+}
 const icons = {
   undo: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg>',
   redo: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"/></svg>',
@@ -2139,7 +2912,20 @@ const icons = {
   tableColumnDelete: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="M15 3v18"/><path d="M10.5 12h3"/></svg>',
   tableMergeCells: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M8 12h8"/><path d="m10.5 9.5-2.5 2.5 2.5 2.5"/><path d="m13.5 9.5 2.5 2.5-2.5 2.5"/></svg>',
   tableSplitCell: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M12 3v18"/><path d="M9 12H6"/><path d="M15 12h3"/></svg>',
-  tableHeaderRow: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M7 6h4"/></svg>'
+  tableHeaderRow: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M7 6h4"/></svg>',
+  textColor: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.436-.652-.436-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2Z"/></svg>',
+  highlight: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 11-6 6v3h9l3-3"/><path d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4"/></svg>',
+  highlightColor: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m14 7 3-3a2.12 2.12 0 0 1 3 3l-3 3"/><path d="m13 6 5 5"/><path d="M14.7 8.3 8 15v4h4l6.7-6.7a2 2 0 0 0-4-4"/></svg>',
+  fontSize: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m2 18 4.5-11L11 18"/><path d="M3.6 14h5.8"/><path d="m14 18 3-7 3 7"/><path d="M14.9 15.6h4.2"/></svg>',
+  fontFamily: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg>',
+  subscript: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m4 5 6 8"/><path d="m10 5-6 8"/><path d="M14 14.5c.7-1.4 2.8-1.4 3.4 0 .5 1.2-.5 2-1.7 2.6-1.4.7-2.2 1.4-2.2 2.4h4.5"/></svg>',
+  superscript: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m4 9 6 8"/><path d="m10 9-6 8"/><path d="M14 5.5c.7-1.4 2.8-1.4 3.4 0 .5 1.2-.5 2-1.7 2.6-1.4.7-2.2 1.4-2.2 2.4h4.5"/></svg>',
+  clearFormat: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/></svg>',
+  // 下拉触发器用的通用字形：标题菜单与对齐菜单在"当前没有选中任何一级/一种对齐"时用它，
+  // 有当前值时触发器换成那一项自己的图标，所见即所得
+  heading: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4v16"/><path d="M18 4v16"/><path d="M6 12h12"/></svg>',
+  align: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16"/><path d="M4 10h10"/><path d="M4 14h16"/><path d="M4 18h8"/></svg>',
+  chevronDown: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>'
 };
 const TOOLTIP_KEYS = {
   undo: "editor.undo",
@@ -2147,6 +2933,13 @@ const TOOLTIP_KEYS = {
   heading1: "editor.heading1",
   heading2: "editor.heading2",
   heading3: "editor.heading3",
+  heading4: "editor.heading4",
+  heading5: "editor.heading5",
+  heading6: "editor.heading6",
+  // 两个下拉触发器。'editor.heading' 这条词条躺了很久、背后没有任何功能，
+  // 这批终于有了真正读它的人
+  heading: "editor.heading",
+  align: "editor.align",
   paragraph: "editor.paragraph",
   bold: "editor.bold",
   italic: "editor.italic",
@@ -2168,7 +2961,15 @@ const TOOLTIP_KEYS = {
   attachmentDisplay: "editor.attachmentDisplay",
   insertTable: "editor.table",
   insertLink: "editor.link",
-  delete: "editor.delete"
+  delete: "editor.delete",
+  textColor: "editor.textColor",
+  highlight: "editor.highlight",
+  highlightColor: "editor.highlightColor",
+  fontSize: "editor.fontSize",
+  fontFamily: "editor.fontFamily",
+  subscript: "editor.subscript",
+  superscript: "editor.superscript",
+  clearFormat: "editor.clearFormat"
 };
 class ToolbarManager {
   constructor(editor, container, config, i18n, mediaRuntime, linkPanel) {
@@ -2178,6 +2979,8 @@ class ToolbarManager {
     this.createdElements = [];
     this.panel = null;
     this.tablePanel = null;
+    this.stylePanel = null;
+    this.menuPanel = null;
     this.editor = editor;
     this.container = container;
     this.config = config;
@@ -2256,6 +3059,150 @@ class ToolbarManager {
   get tableExtensionRegistered() {
     return canInsertTable(this.editor);
   }
+  /** 格式面板按需创建：没点开过就不该有一个实例挂在编辑器上 */
+  get styleOptionPanel() {
+    this.stylePanel ?? (this.stylePanel = new StyleOptionPanel({
+      editor: this.editor,
+      i18n: this.i18n,
+      // 开合不改文档，等不到 transaction，得主动刷一次按钮状态
+      onOpenChange: () => this.updateButtonStates()
+    }));
+    return this.stylePanel;
+  }
+  tOr(key, fallback) {
+    var _a;
+    return ((_a = this.i18n) == null ? void 0 : _a.tOr(key, fallback)) ?? fallback;
+  }
+  /** 下拉菜单面板按需创建：没点开过就不该有一个实例挂在编辑器上 */
+  get menu() {
+    this.menuPanel ?? (this.menuPanel = new ToolbarMenuPanel({
+      editor: this.editor,
+      // 开合不改文档，等不到 transaction，得主动刷一次按钮状态
+      onOpenChange: () => this.updateButtonStates()
+    }));
+    return this.menuPanel;
+  }
+  /**
+   * 把一个项做成下拉触发器。
+   * 子项走的仍是同一张 itemDefs 表，所以它们和顶栏项一样受能力门控——
+   * 表格被顶掉时 insertTable 就不会出现在菜单里，而不是摆一行按了没反应的
+   */
+  menuItem(key, icon, children) {
+    const def = {
+      id: key,
+      icon,
+      popup: "menu",
+      children,
+      command: (_editor, button) => {
+        var _a;
+        const live = ((_a = this.itemDefs.get(key)) == null ? void 0 : _a.children) ?? children;
+        this.menu.toggle(button, this.menuSpec(key, live, button));
+      },
+      isActive: () => {
+        var _a;
+        return ((_a = this.menuPanel) == null ? void 0 : _a.openKey) === key;
+      },
+      isDisabled: (editor) => !editor.isEditable
+    };
+    return def;
+  }
+  /** 当前命中的子项：触发器的图标与提示都跟着它走，用户不必点开就知道现在的级别 */
+  activeChild(def) {
+    for (const childId of def.children ?? []) {
+      const child = this.itemDefs.get(childId);
+      if (child && !child.popup && child.isActive(this.editor) && !child.isDisabled(this.editor)) {
+        return child;
+      }
+    }
+    return null;
+  }
+  /** 子项词条 key；没有映射的（宿主的自定义项）退回定义里的兜底文案 */
+  rowLabel(childId, child) {
+    const key = TOOLTIP_KEYS[childId];
+    return key ? this.tOr(key, zhText(key)) : child.tooltip ?? childId;
+  }
+  /**
+   * 菜单里带浮层的子项一律不收：子项被点中后菜单就关了，
+   * 而面板要锚在触发器上——锚一个即将从文档里消失的行没有意义。
+   * 这与 attachBubbleToolbar 拒绝浮层项是同一条理由。
+   */
+  menuSpec(key, children, trigger) {
+    const menuKey = TOOLTIP_KEYS[key];
+    return {
+      key,
+      label: menuKey ? this.tOr(menuKey, zhText(menuKey)) : key,
+      rows: children.reduce((rows, childId) => {
+        const child = this.itemDefs.get(childId);
+        if (!child) {
+          console.warn(`[Atri Editor] Menu "${key}" declares unknown item "${childId}".`);
+          return rows;
+        }
+        if (child.popup) {
+          console.warn(
+            `[Atri Editor] Menu item "${childId}" opens a panel, which menus cannot host.`
+          );
+          return rows;
+        }
+        rows.push({
+          id: childId,
+          label: this.rowLabel(childId, child),
+          active: child.isActive(this.editor),
+          disabled: child.isDisabled(this.editor),
+          // 子项自己不需要触发器元素（只有浮层项会用），传过去是为了共用同一份定义
+          run: () => child.command(this.editor, trigger)
+        });
+        return rows;
+      }, [])
+    };
+  }
+  /**
+   * 面板文案在这里现取，不在建项时算好存下来：
+   * 语言切换后重开面板要拿到新词条，而项定义只在建栏时求值一次
+   */
+  styleSpec(key, parts) {
+    return {
+      key,
+      label: this.tOr(`editor.${key}`, key),
+      shape: parts.shape,
+      options: parts.options,
+      // 色板才有"其他颜色"这一行；字号字体用原生控件选不出任意值
+      customColorLabel: parts.swatch ? this.tOr("formatting.customColor", "其他颜色…") : void 0,
+      // 清除行的措辞按形状分：颜色去掉是"无"，字号字体退回的是"默认"
+      clearLabel: parts.swatch ? this.tOr("formatting.noColor", "无") : this.tOr("formatting.defaultValue", "默认"),
+      onPick: (value) => this.applyStyle(parts.attr, value)
+    };
+  }
+  /**
+   * 空串是"清除"而不是"设成空值"：设成空串会留下一个属性为空串的 mark，
+   * 而 textStyle 的 renderHTML 对空值照样会吐出一个 `<span style="">`，
+   * 那种节点既看不见又会在往返里产噪音（见 extensions/formatting.ts 的发出侧）
+   */
+  applyStyle(attr, value) {
+    const chain = this.editor.chain().focus();
+    if (attr === "highlight") {
+      if (value === "") chain.unsetHighlight().run();
+      else chain.setHighlight({ color: value }).run();
+      return;
+    }
+    switch (attr) {
+      case "color":
+        if (value === "") chain.unsetColor().run();
+        else chain.setColor(value).run();
+        return;
+      case "backgroundColor":
+        if (value === "") chain.unsetBackgroundColor().run();
+        else chain.setBackgroundColor(value).run();
+        return;
+      case "fontSize":
+        if (value === "") chain.unsetFontSize().run();
+        else chain.setFontSize(value).run();
+        return;
+      case "fontFamily":
+        if (value === "") chain.unsetFontFamily().run();
+        else chain.setFontFamily(value).run();
+        return;
+    }
+  }
   /**
    * 创建工具栏 DOM - 直接将按钮插入 container
    */
@@ -2275,18 +3222,23 @@ class ToolbarManager {
     }
     const layout = [
       ["undo", "redo"],
-      ["heading1", "heading2", "heading3", "paragraph"],
+      // 标题收成一下拉：一到六级加正文七个取值平铺要占七格，而一次只用得上一个
+      ["heading"],
       // 链接跟着行内格式走：它也是一段文字上的标记，只是要填地址所以带浮层
       ["bold", "italic", "underline", "strike", "code", "insertLink"],
+      // 颜色与字号字体自成一组：都是"这段文字长什么样"，且除 highlight 外都带浮层
+      ["textColor", "highlight", "highlightColor", "fontSize", "fontFamily"],
       ["bulletList", "orderedList", "taskList", "blockquote", "codeBlock"],
-      ["alignLeft", "alignCenter", "alignRight", "alignJustify"],
-      // 分割线与表格自成一组：都是"往正文里插一块"的动作，没有激活态。
-      // 表格节点没注册时（table:false 或被顶掉）这项不存在，组里只剩分割线，不会吊出空组
-      ["horizontalRule", ...this.itemDefs.has("insertTable") ? ["insertTable"] : []],
-      // 「附件样式」不再常驻：切换形态改由选中附件时的浮动工具栏承接（bubble 默认开）
-      ...this.itemDefs.has("insertImage") ? [["insertImage", "insertAttachment"]] : []
+      // 对齐同样收成一下拉
+      ["align"],
+      // 分割线与表格是一组：都是"往正文里插一块"的动作，没有激活态
+      ["horizontalRule", "insertTable"],
+      // 上下标与清除格式：作用于选区已有的格式，而不是加一种新格式
+      ["subscript", "superscript", "clearFormat"],
+      ["insertImage", "insertAttachment"]
     ];
-    layout.forEach((group, groupIndex) => {
+    const groups = layout.filter((group) => group.some((itemId) => this.itemDefs.has(itemId)));
+    groups.forEach((group, groupIndex) => {
       if (groupIndex > 0) {
         const separator = document.createElement("div");
         separator.className = "atri-editor-toolbar-separator";
@@ -2318,7 +3270,22 @@ class ToolbarManager {
       return { id, def };
     }
     if ((_a = item.children) == null ? void 0 : _a.length) {
-      console.warn(`[Atri Editor] Toolbar item "${id}" declares children, which is not supported.`);
+      if (def.popup !== "menu") {
+        console.warn(
+          `[Atri Editor] Toolbar item "${id}" declares children, but it is not a dropdown; only the built-in dropdown items (heading, align) accept children.`
+        );
+      } else {
+        const nested = item.children.filter((child) => {
+          var _a2;
+          return (_a2 = child.children) == null ? void 0 : _a2.length;
+        });
+        if (nested.length) {
+          console.warn(
+            `[Atri Editor] Nested children on "${nested.map((child) => child.id).join(", ")}" are not supported and were ignored.`
+          );
+        }
+        def.children = item.children.map((child) => child.id);
+      }
     }
     return { id, def, overrides: item };
   }
@@ -2338,9 +3305,14 @@ class ToolbarManager {
       this.customTooltips.set(itemId, overrides.tooltip);
     }
     if (itemDef.popup) {
-      button.setAttribute("aria-haspopup", "dialog");
+      button.setAttribute("aria-haspopup", itemDef.popup === "menu" ? "menu" : "dialog");
       button.setAttribute("aria-expanded", "false");
     }
+    if (itemDef.popup === "menu") {
+      button.classList.add("atri-editor-toolbar-btn--menu");
+      button.dataset.menuIcon = button.innerHTML;
+      button.innerHTML += icons.chevronDown;
+    }
     button.addEventListener("click", (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -2360,12 +3332,9 @@ class ToolbarManager {
    */
   applyTooltips() {
     this.buttons.forEach((buttons, itemId) => {
-      var _a;
       const itemDef = this.itemDefs.get(itemId);
       if (!itemDef) return;
-      const custom = this.customTooltips.get(itemId);
-      const key = TOOLTIP_KEYS[itemId];
-      const title = custom ?? (key ? ((_a = this.i18n) == null ? void 0 : _a.tOr(key, itemDef.tooltip)) ?? itemDef.tooltip : itemDef.tooltip);
+      const title = this.itemTitle(itemId, itemDef);
       buttons.forEach((button) => {
         button.title = title;
       });
@@ -2380,7 +3349,6 @@ class ToolbarManager {
       items.set("insertImage", {
         id: "insertImage",
         icon: icons.image,
-        tooltip: "图片",
         popup: true,
         command: (_editor, button) => this.openInsert("image", button),
         isActive: () => {
@@ -2392,7 +3360,6 @@ class ToolbarManager {
       items.set("insertAttachment", {
         id: "insertAttachment",
         icon: icons.paperclip,
-        tooltip: "附件",
         popup: true,
         command: (_editor, button) => this.openInsert("attachment", button),
         isActive: () => {
@@ -2404,7 +3371,6 @@ class ToolbarManager {
       items.set("attachmentDisplay", {
         id: "attachmentDisplay",
         icon: icons.link,
-        tooltip: "附件样式",
         command: (editor) => editor.chain().focus().toggleAttachmentDisplay().run(),
         isActive: (editor) => editor.isActive("attachment") || editor.isActive("attachmentLink"),
         isDisabled: (editor) => !editor.isActive("attachment") && !editor.isActive("attachmentLink")
@@ -2414,7 +3380,6 @@ class ToolbarManager {
       items.set("insertTable", {
         id: "insertTable",
         icon: icons.table,
-        tooltip: "表格",
         popup: true,
         command: (_editor, button) => {
           var _a;
@@ -2431,7 +3396,6 @@ class ToolbarManager {
       items.set("insertLink", {
         id: "insertLink",
         icon: icons.link,
-        tooltip: "链接",
         popup: true,
         command: (_editor, button) => {
           var _a;
@@ -2445,10 +3409,127 @@ class ToolbarManager {
         isDisabled: (editor) => !editor.isEditable
       });
     }
+    const textStyleReady = (attr) => canUseTextStyle(this.editor, attr);
+    if (textStyleReady("color")) {
+      items.set("textColor", {
+        id: "textColor",
+        icon: icons.textColor,
+        popup: true,
+        command: (_editor, button) => this.styleOptionPanel.toggle(
+          button,
+          this.styleSpec("textColor", {
+            shape: "grid",
+            options: TEXT_COLORS,
+            swatch: true,
+            attr: "color"
+          })
+        ),
+        // 浮层项的按下态只跟浮层走：选区里有没有颜色是文档事实，不是"这个按钮正按着"
+        isActive: () => {
+          var _a;
+          return ((_a = this.stylePanel) == null ? void 0 : _a.openKey) === "textColor";
+        },
+        isDisabled: (editor) => !editor.isEditable
+      });
+    }
+    if (hasMark(this.editor, "highlight")) {
+      items.set("highlight", {
+        id: "highlight",
+        icon: icons.highlight,
+        command: (editor) => editor.chain().focus().toggleHighlight().run(),
+        isActive: (editor) => editor.isActive("highlight"),
+        isDisabled: (editor) => !editor.isEditable
+      });
+      items.set("highlightColor", {
+        id: "highlightColor",
+        icon: icons.highlightColor,
+        popup: true,
+        command: (_editor, button) => this.styleOptionPanel.toggle(
+          button,
+          this.styleSpec("highlightColor", {
+            shape: "grid",
+            options: HIGHLIGHT_COLORS,
+            swatch: true,
+            attr: "highlight"
+          })
+        ),
+        isActive: () => {
+          var _a;
+          return ((_a = this.stylePanel) == null ? void 0 : _a.openKey) === "highlightColor";
+        },
+        isDisabled: (editor) => !editor.isEditable
+      });
+    }
+    if (textStyleReady("fontSize")) {
+      items.set("fontSize", {
+        id: "fontSize",
+        icon: icons.fontSize,
+        popup: true,
+        command: (_editor, button) => this.styleOptionPanel.toggle(
+          button,
+          this.styleSpec("fontSize", {
+            shape: "list",
+            options: FONT_SIZES,
+            swatch: false,
+            attr: "fontSize"
+          })
+        ),
+        isActive: () => {
+          var _a;
+          return ((_a = this.stylePanel) == null ? void 0 : _a.openKey) === "fontSize";
+        },
+        isDisabled: (editor) => !editor.isEditable
+      });
+    }
+    if (textStyleReady("fontFamily")) {
+      items.set("fontFamily", {
+        id: "fontFamily",
+        icon: icons.fontFamily,
+        popup: true,
+        command: (_editor, button) => this.styleOptionPanel.toggle(
+          button,
+          this.styleSpec("fontFamily", {
+            shape: "list",
+            options: FONT_FAMILIES,
+            swatch: false,
+            attr: "fontFamily"
+          })
+        ),
+        isActive: () => {
+          var _a;
+          return ((_a = this.stylePanel) == null ? void 0 : _a.openKey) === "fontFamily";
+        },
+        isDisabled: (editor) => !editor.isEditable
+      });
+    }
+    if (hasMark(this.editor, "subscript")) {
+      items.set("subscript", {
+        id: "subscript",
+        icon: icons.subscript,
+        command: (editor) => editor.chain().focus().toggleSubscript().run(),
+        isActive: (editor) => editor.isActive("subscript"),
+        isDisabled: (editor) => !editor.isEditable
+      });
+    }
+    if (hasMark(this.editor, "superscript")) {
+      items.set("superscript", {
+        id: "superscript",
+        icon: icons.superscript,
+        command: (editor) => editor.chain().focus().toggleSuperscript().run(),
+        isActive: (editor) => editor.isActive("superscript"),
+        isDisabled: (editor) => !editor.isEditable
+      });
+    }
+    items.set("clearFormat", {
+      id: "clearFormat",
+      icon: icons.clearFormat,
+      command: (editor) => editor.chain().focus().unsetAllMarks().clearNodes().run(),
+      isActive: () => false,
+      isDisabled: (editor) => !editor.isEditable
+    });
     items.set("delete", {
       id: "delete",
       icon: icons.trash,
-      tooltip: "删除",
       command: (editor) => editor.chain().deleteSelection().run(),
       isActive: () => false,
       isDisabled: (editor) => !isNodeSelection(editor.state.selection)
@@ -2456,7 +3537,6 @@ class ToolbarManager {
     items.set("undo", {
       id: "undo",
       icon: icons.undo,
-      tooltip: "撤销",
       command: (editor) => editor.chain().undo().run(),
       isActive: () => false,
       isDisabled: (editor) => !editor.can().undo()
@@ -2464,39 +3544,23 @@ class ToolbarManager {
     items.set("redo", {
       id: "redo",
       icon: icons.redo,
-      tooltip: "重做",
       command: (editor) => editor.chain().redo().run(),
       isActive: () => false,
       isDisabled: (editor) => !editor.can().redo()
     });
-    items.set("heading1", {
-      id: "heading1",
-      icon: icons.heading1,
-      tooltip: "标题 1",
-      command: (editor) => editor.chain().toggleHeading({ level: 1 }).run(),
-      isActive: (editor) => editor.isActive("heading", { level: 1 }),
-      isDisabled: (editor) => !editor.can().toggleHeading({ level: 1 })
-    });
-    items.set("heading2", {
-      id: "heading2",
-      icon: icons.heading2,
-      tooltip: "标题 2",
-      command: (editor) => editor.chain().toggleHeading({ level: 2 }).run(),
-      isActive: (editor) => editor.isActive("heading", { level: 2 }),
-      isDisabled: (editor) => !editor.can().toggleHeading({ level: 2 })
-    });
-    items.set("heading3", {
-      id: "heading3",
-      icon: icons.heading3,
-      tooltip: "标题 3",
-      command: (editor) => editor.chain().toggleHeading({ level: 3 }).run(),
-      isActive: (editor) => editor.isActive("heading", { level: 3 }),
-      isDisabled: (editor) => !editor.can().toggleHeading({ level: 3 })
+    [1, 2, 3, 4, 5, 6].forEach((level) => {
+      const id = `heading${level}`;
+      items.set(id, {
+        id,
+        icon: level <= 3 ? icons[id] : icons.heading,
+        command: (editor) => editor.chain().toggleHeading({ level }).run(),
+        isActive: (editor) => editor.isActive("heading", { level }),
+        isDisabled: (editor) => !editor.can().toggleHeading({ level })
+      });
     });
     items.set("paragraph", {
       id: "paragraph",
       icon: icons.paragraph,
-      tooltip: "正文",
       command: (editor) => editor.chain().setParagraph().run(),
       isActive: (editor) => editor.isActive("paragraph"),
       isDisabled: (editor) => !editor.can().setParagraph()
@@ -2504,7 +3568,6 @@ class ToolbarManager {
     items.set("bold", {
       id: "bold",
       icon: icons.bold,
-      tooltip: "加粗",
       command: (editor) => editor.chain().toggleBold().run(),
       isActive: (editor) => editor.isActive("bold"),
       isDisabled: (editor) => !editor.can().toggleBold()
@@ -2512,7 +3575,6 @@ class ToolbarManager {
     items.set("italic", {
       id: "italic",
       icon: icons.italic,
-      tooltip: "斜体",
       command: (editor) => editor.chain().toggleItalic().run(),
       isActive: (editor) => editor.isActive("italic"),
       isDisabled: (editor) => !editor.can().toggleItalic()
@@ -2520,7 +3582,6 @@ class ToolbarManager {
     items.set("underline", {
       id: "underline",
       icon: icons.underline,
-      tooltip: "下划线",
       command: (editor) => editor.chain().toggleUnderline().run(),
       isActive: (editor) => editor.isActive("underline"),
       isDisabled: (editor) => !editor.can().toggleUnderline()
@@ -2528,7 +3589,6 @@ class ToolbarManager {
     items.set("strike", {
       id: "strike",
       icon: icons.strikethrough,
-      tooltip: "删除线",
       command: (editor) => editor.chain().toggleStrike().run(),
       isActive: (editor) => editor.isActive("strike"),
       isDisabled: (editor) => !editor.can().toggleStrike()
@@ -2536,7 +3596,6 @@ class ToolbarManager {
     items.set("code", {
       id: "code",
       icon: icons.code,
-      tooltip: "行内代码",
       command: (editor) => editor.chain().toggleCode().run(),
       isActive: (editor) => editor.isActive("code"),
       isDisabled: (editor) => !editor.can().toggleCode()
@@ -2544,7 +3603,6 @@ class ToolbarManager {
     items.set("bulletList", {
       id: "bulletList",
       icon: icons.list,
-      tooltip: "无序列表",
       command: (editor) => editor.chain().toggleBulletList().run(),
       isActive: (editor) => editor.isActive("bulletList"),
       isDisabled: (editor) => !editor.can().toggleBulletList()
@@ -2552,7 +3610,6 @@ class ToolbarManager {
     items.set("orderedList", {
       id: "orderedList",
       icon: icons.listOrdered,
-      tooltip: "有序列表",
       command: (editor) => editor.chain().toggleOrderedList().run(),
       isActive: (editor) => editor.isActive("orderedList"),
       isDisabled: (editor) => !editor.can().toggleOrderedList()
@@ -2560,7 +3617,6 @@ class ToolbarManager {
     items.set("taskList", {
       id: "taskList",
       icon: icons.listChecks,
-      tooltip: "任务列表",
       command: (editor) => editor.chain().toggleTaskList().run(),
       isActive: (editor) => editor.isActive("taskList"),
       isDisabled: (editor) => !editor.can().toggleTaskList()
@@ -2568,23 +3624,22 @@ class ToolbarManager {
     items.set("blockquote", {
       id: "blockquote",
       icon: icons.quote,
-      tooltip: "引用",
       command: (editor) => editor.chain().toggleBlockquote().run(),
       isActive: (editor) => editor.isActive("blockquote"),
       isDisabled: (editor) => !editor.can().toggleBlockquote()
     });
-    items.set("codeBlock", {
-      id: "codeBlock",
-      icon: icons.codeBlock,
-      tooltip: "代码块",
-      command: (editor) => editor.chain().toggleCodeBlock().run(),
-      isActive: (editor) => editor.isActive("codeBlock"),
-      isDisabled: (editor) => !editor.can().toggleCodeBlock()
-    });
+    if (this.editor.schema.nodes.codeBlock) {
+      items.set("codeBlock", {
+        id: "codeBlock",
+        icon: icons.codeBlock,
+        command: (editor) => editor.chain().toggleCodeBlock().run(),
+        isActive: (editor) => editor.isActive("codeBlock"),
+        isDisabled: (editor) => !editor.can().toggleCodeBlock()
+      });
+    }
     items.set("horizontalRule", {
       id: "horizontalRule",
       icon: icons.horizontalRule,
-      tooltip: "分割线",
       command: (editor) => editor.chain().setHorizontalRule().run(),
       isActive: () => false,
       isDisabled: (editor) => !editor.can().setHorizontalRule()
@@ -2592,7 +3647,6 @@ class ToolbarManager {
     items.set("alignLeft", {
       id: "alignLeft",
       icon: icons.alignLeft,
-      tooltip: "左对齐",
       command: (editor) => editor.chain().setTextAlign("left").run(),
       isActive: (editor) => editor.isActive({ textAlign: "left" }),
       isDisabled: (editor) => !editor.can().setTextAlign("left")
@@ -2600,7 +3654,6 @@ class ToolbarManager {
     items.set("alignCenter", {
       id: "alignCenter",
       icon: icons.alignCenter,
-      tooltip: "居中",
       command: (editor) => editor.chain().setTextAlign("center").run(),
       isActive: (editor) => editor.isActive({ textAlign: "center" }),
       isDisabled: (editor) => !editor.can().setTextAlign("center")
@@ -2608,7 +3661,6 @@ class ToolbarManager {
     items.set("alignRight", {
       id: "alignRight",
       icon: icons.alignRight,
-      tooltip: "右对齐",
       command: (editor) => editor.chain().setTextAlign("right").run(),
       isActive: (editor) => editor.isActive({ textAlign: "right" }),
       isDisabled: (editor) => !editor.can().setTextAlign("right")
@@ -2616,23 +3668,44 @@ class ToolbarManager {
     items.set("alignJustify", {
       id: "alignJustify",
       icon: icons.alignJustify,
-      tooltip: "两端对齐",
       command: (editor) => editor.chain().setTextAlign("justify").run(),
       isActive: (editor) => editor.isActive({ textAlign: "justify" }),
       isDisabled: (editor) => !editor.can().setTextAlign("justify")
     });
+    items.set(
+      "heading",
+      this.menuItem("heading", icons.heading, [
+        "heading1",
+        "heading2",
+        "heading3",
+        "heading4",
+        "heading5",
+        "heading6",
+        "paragraph"
+      ])
+    );
+    items.set(
+      "align",
+      this.menuItem("align", icons.align, [
+        "alignLeft",
+        "alignCenter",
+        "alignRight",
+        "alignJustify"
+      ])
+    );
     return items;
   }
   /**
    * 绑定编辑器事件，更新按钮状态
    */
   bindEditorEvents() {
-    this.editor.on("transaction", () => {
-      this.updateButtonStates();
-    });
-    this.editor.on("selectionUpdate", () => {
-      this.updateButtonStates();
-    });
+    const refresh = () => this.updateButtonStates();
+    this.editor.on("transaction", refresh);
+    this.editor.on("selectionUpdate", refresh);
+    this.unsubscribeEditor = () => {
+      this.editor.off("transaction", refresh);
+      this.editor.off("selectionUpdate", refresh);
+    };
     this.updateButtonStates();
   }
   /**
@@ -2651,20 +3724,57 @@ class ToolbarManager {
         button.classList.toggle("active", active);
         if (itemDef.popup) button.setAttribute("aria-expanded", String(active));
         button.disabled = disabled;
+        if (itemDef.popup === "menu") this.refreshMenuTrigger(itemDef, button);
       });
     });
   }
+  /**
+   * 一项当前该显示的文字。下拉触发器跟着命中的子项走（现在是三级标题就写「标题 3」），
+   * 宿主显式写的 tooltip 优先级最高。
+   * 抽出来是因为图标与提示必须由同一份判定得出：只换其中一个就会出现
+   * "按钮画着 H3、悬停写标题"这种一半新一半旧的界面
+   */
+  itemTitle(itemId, def) {
+    var _a;
+    const custom = this.customTooltips.get(itemId);
+    if (custom) return custom;
+    let key = TOOLTIP_KEYS[itemId];
+    if (def.popup === "menu") {
+      const activeKey = TOOLTIP_KEYS[((_a = this.activeChild(def)) == null ? void 0 : _a.id) ?? ""];
+      if (activeKey) key = activeKey;
+    }
+    const fallback = key ? zhText(key) : def.tooltip ?? "";
+    return key ? this.tOr(key, fallback) : fallback;
+  }
+  /**
+   * 下拉触发器的图标与提示跟着当前值走：现在是二级标题就显示 H2，
+   * 一个都不匹配才退回通用图标。只有菜单项会走到这里，不是每次刷新对所有按钮都做一遍
+   */
+  refreshMenuTrigger(def, button) {
+    var _a;
+    const base = button.dataset.menuIcon ?? def.icon;
+    const next = `${((_a = this.activeChild(def)) == null ? void 0 : _a.icon) ?? base}${icons.chevronDown}`;
+    if (button.innerHTML !== next) button.innerHTML = next;
+    const title = this.itemTitle(def.id, def);
+    if (button.title !== title) button.title = title;
+  }
   /**
    * 销毁工具栏
    */
   destroy() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     (_a = this.unsubscribeLanguage) == null ? void 0 : _a.call(this);
     this.unsubscribeLanguage = void 0;
-    (_b = this.panel) == null ? void 0 : _b.destroy();
+    (_b = this.unsubscribeEditor) == null ? void 0 : _b.call(this);
+    this.unsubscribeEditor = void 0;
+    (_c = this.panel) == null ? void 0 : _c.destroy();
     this.panel = null;
-    (_c = this.tablePanel) == null ? void 0 : _c.destroy();
+    (_d = this.tablePanel) == null ? void 0 : _d.destroy();
     this.tablePanel = null;
+    (_e = this.stylePanel) == null ? void 0 : _e.destroy();
+    this.stylePanel = null;
+    (_f = this.menuPanel) == null ? void 0 : _f.destroy();
+    this.menuPanel = null;
     this.buttons.clear();
     this.customTooltips.clear();
     this.createdElements.forEach((el) => el.remove());
@@ -2683,6 +3793,7 @@ class LinkPanel {
     this.element = null;
     this.floating = null;
     this.detachDismiss = null;
+    this.detachTheme = null;
     this.labelled = [];
     this.urlInput = null;
     this.targetInput = null;
@@ -2728,19 +3839,21 @@ class LinkPanel {
     (_a = this.onOpenChange) == null ? void 0 : _a.call(this, true);
   }
   close() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const wasOpen = this.element !== null;
     (_a = this.detachDismiss) == null ? void 0 : _a.call(this);
     this.detachDismiss = null;
-    (_b = this.floating) == null ? void 0 : _b.stop();
+    (_b = this.detachTheme) == null ? void 0 : _b.call(this);
+    this.detachTheme = null;
+    (_c = this.floating) == null ? void 0 : _c.stop();
     this.floating = null;
-    (_c = this.element) == null ? void 0 : _c.remove();
+    (_d = this.element) == null ? void 0 : _d.remove();
     this.element = null;
     this.urlInput = null;
     this.targetInput = null;
     this.labelled = [];
     this.editing = false;
-    if (wasOpen) (_d = this.onOpenChange) == null ? void 0 : _d.call(this, false);
+    if (wasOpen) (_e = this.onOpenChange) == null ? void 0 : _e.call(this, false);
   }
   destroy() {
     var _a;
@@ -2812,7 +3925,7 @@ class LinkPanel {
     panel.appendChild(actions);
     document.body.appendChild(panel);
     this.element = panel;
-    copyThemeClasses(this.root, panel);
+    this.detachTheme = followThemeClasses(this.root, panel);
     url.focus();
     url.select();
   }
@@ -2859,7 +3972,6 @@ function buildItems() {
       id: "addRowBefore",
       icon: icons.tableRowBefore,
       labelKey: "table.rowBefore",
-      label: "上方插入行",
       group: 0,
       command: (editor) => editor.chain().focus().addRowBefore().run()
     },
@@ -2867,7 +3979,6 @@ function buildItems() {
       id: "addRowAfter",
       icon: icons.tableRowAfter,
       labelKey: "table.rowAfter",
-      label: "下方插入行",
       group: 0,
       command: (editor) => editor.chain().focus().addRowAfter().run()
     },
@@ -2875,7 +3986,6 @@ function buildItems() {
       id: "deleteRow",
       icon: icons.tableRowDelete,
       labelKey: "table.deleteRow",
-      label: "删除行",
       group: 0,
       command: (editor) => editor.chain().focus().deleteRow().run()
     },
@@ -2883,7 +3993,6 @@ function buildItems() {
       id: "addColumnBefore",
       icon: icons.tableColumnBefore,
       labelKey: "table.columnBefore",
-      label: "左侧插入列",
       group: 1,
       command: (editor) => editor.chain().focus().addColumnBefore().run()
     },
@@ -2891,7 +4000,6 @@ function buildItems() {
       id: "addColumnAfter",
       icon: icons.tableColumnAfter,
       labelKey: "table.columnAfter",
-      label: "右侧插入列",
       group: 1,
       command: (editor) => editor.chain().focus().addColumnAfter().run()
     },
@@ -2899,7 +4007,6 @@ function buildItems() {
       id: "deleteColumn",
       icon: icons.tableColumnDelete,
       labelKey: "table.deleteColumn",
-      label: "删除列",
       group: 1,
       command: (editor) => editor.chain().focus().deleteColumn().run()
     },
@@ -2908,7 +4015,6 @@ function buildItems() {
       id: "mergeCells",
       icon: icons.tableMergeCells,
       labelKey: "table.mergeCells",
-      label: "合并单元格",
       group: 2,
       command: (editor) => editor.chain().focus().mergeCells().run(),
       isDisabled: (editor) => !editor.can().mergeCells()
@@ -2917,7 +4023,6 @@ function buildItems() {
       id: "splitCell",
       icon: icons.tableSplitCell,
       labelKey: "table.splitCell",
-      label: "拆分单元格",
       group: 2,
       command: (editor) => editor.chain().focus().splitCell().run(),
       isDisabled: (editor) => !editor.can().splitCell()
@@ -2926,24 +4031,22 @@ function buildItems() {
       id: "toggleHeaderRow",
       icon: icons.tableHeaderRow,
       labelKey: "table.toggleHeaderRow",
-      label: "切换表头行",
       group: 2,
       command: (editor) => editor.chain().focus().toggleHeaderRow().run(),
       isActive: (editor) => editor.isActive("tableHeader")
     }
   ];
   const alignments = [
-    ["left", "table.alignLeft", "单元格左对齐"],
-    ["center", "table.alignCenter", "单元格居中"],
-    ["right", "table.alignRight", "单元格右对齐"]
+    ["left", "table.alignLeft"],
+    ["center", "table.alignCenter"],
+    ["right", "table.alignRight"]
   ];
-  alignments.forEach(([align, labelKey, label]) => {
+  alignments.forEach(([align, labelKey]) => {
     const suffix = `${align[0].toUpperCase()}${align.slice(1)}`;
     items.push({
       id: `cellAlign${suffix}`,
       icon: icons[`align${suffix}`],
       labelKey,
-      label,
       group: 3,
       command: (editor) => editor.chain().focus().setCellAttribute("align", align).run(),
       isActive: cellAlignmentActive(align)
@@ -2953,7 +4056,6 @@ function buildItems() {
     id: "deleteTable",
     icon: icons.trash,
     labelKey: "table.deleteTable",
-    label: "删除表格",
     group: 4,
     command: (editor) => editor.chain().focus().deleteTable().run()
   });
@@ -3013,8 +4115,8 @@ class TableMenu {
     this.unsubscribeLanguage = void 0;
     this.hide();
   }
-  t(key, fallback) {
-    return tOrFallback(this.i18n, key, fallback);
+  t(key) {
+    return tOrFallback(this.i18n, key, zhText(key));
   }
   show() {
     if (!this.element) this.build();
@@ -3022,9 +4124,11 @@ class TableMenu {
     void this.position();
   }
   hide() {
-    var _a;
+    var _a, _b;
     (_a = this.detachEscape) == null ? void 0 : _a.call(this);
     this.detachEscape = void 0;
+    (_b = this.detachTheme) == null ? void 0 : _b.call(this);
+    this.detachTheme = void 0;
     if (!this.element) return;
     this.element.remove();
     this.element = null;
@@ -3047,7 +4151,7 @@ class TableMenu {
     const panel = document.createElement("div");
     panel.className = "atri-table-menu";
     panel.setAttribute("role", "toolbar");
-    panel.setAttribute("aria-label", this.t("table.menuLabel", "表格操作"));
+    panel.setAttribute("aria-label", this.t("table.menuLabel"));
     panel.addEventListener("mousedown", (event) => event.preventDefault());
     let lastGroup = null;
     this.items.forEach((item) => {
@@ -3061,7 +4165,7 @@ class TableMenu {
       button.type = "button";
       button.className = "atri-editor-toolbar-btn";
       button.setAttribute("data-table-item", item.id);
-      button.title = this.t(item.labelKey, item.label);
+      button.title = this.t(item.labelKey);
       button.innerHTML = item.icon;
       button.addEventListener("click", (event) => {
         event.preventDefault();
@@ -3072,16 +4176,16 @@ class TableMenu {
     });
     document.body.appendChild(panel);
     this.element = panel;
-    copyThemeClasses(this.root, panel);
+    this.detachTheme = followThemeClasses(this.root, panel);
     this.detachEscape = this.listenEscape();
   }
   applyLabels() {
     const panel = this.element;
     if (!panel) return;
-    panel.setAttribute("aria-label", this.t("table.menuLabel", "表格操作"));
+    panel.setAttribute("aria-label", this.t("table.menuLabel"));
     this.items.forEach((item) => {
       const button = panel.querySelector(`[data-table-item="${item.id}"]`);
-      if (button) button.title = this.t(item.labelKey, item.label);
+      if (button) button.title = this.t(item.labelKey);
     });
   }
   updateStates() {
@@ -3133,15 +4237,13 @@ class TableMenu {
       ({ x, y } = await computePosition(reference, panel, {
         // 贴在单元格上沿：菜单跟着当前格走，长表格里也不会跑到视口外
         placement: "top-start",
-        middleware: [offset(6), flip(), shift({ padding: 8 })]
+        middleware: panelMiddleware()
       }));
     } catch {
       return;
     }
     if (this.element !== panel) return;
-    panel.style.position = "fixed";
-    panel.style.left = `${x}px`;
-    panel.style.top = `${y}px`;
+    placePanel(panel, x, y);
   }
 }
 class MediaStatusStrip {
@@ -3163,7 +4265,11 @@ class MediaStatusStrip {
     this.retry.type = "button";
     this.retry.className = "atri-media-status-retry";
     this.retry.hidden = true;
-    this.retry.addEventListener("click", () => void runtime.retryFailed());
+    this.retry.addEventListener("click", () => {
+      runtime.retryFailed().catch((error) => {
+        console.error("[Atri Editor] Retrying the failed uploads did not work:", error);
+      });
+    });
     this.element.append(this.text, this.retry);
     container.appendChild(this.element);
     this.unsubscribe = runtime.subscribe((state) => this.render(state));
@@ -3195,6 +4301,15 @@ class MediaStatusStrip {
     this.retry.textContent = this.labels.retry();
   }
 }
+function requireResponse(response, stage) {
+  if (!response || typeof response !== "object") {
+    throw new TypeError(`AI ${stage} must resolve to an AIResponse object.`);
+  }
+  if (typeof response.content !== "string") {
+    throw new TypeError(`AI ${stage} resolved with a non-string content.`);
+  }
+  return response;
+}
 class AIInterceptor {
   constructor(interceptors = {}, markdownService = null, autoTranslateMarkdown = true) {
     this.interceptors = interceptors;
@@ -3265,8 +4380,11 @@ class AIInterceptor {
     if (processedContext === false) {
       return;
     }
-    let response = await requestEndpoint(processedContext);
-    response = await this.runAfterPost(response, processedContext);
+    let response = requireResponse(
+      await requestEndpoint(processedContext),
+      `requestEndpoint("${processedContext.functionId}")`
+    );
+    response = requireResponse(await this.runAfterPost(response, processedContext), "afterPost");
     let content = await this.runBeforeRender(response.content, processedContext);
     content = await this.runAutoTranslateMarkdown(content, response);
     insertCallback(content);
@@ -3353,22 +4471,42 @@ class AIService {
    * 执行 AI 功能
    */
   async execute(functionId) {
-    var _a, _b;
     const func = this.getFunction(functionId);
     if (!func) {
       console.error(`AI function "${functionId}" not found.`);
       return;
     }
     const context = this.buildContext(func);
+    const timeout = this.config.timeout ?? 0;
+    let timedOut = false;
+    let timer;
+    const chain = this.interceptor.executeChain(context, this.config.requestEndpoint, (content) => {
+      if (timedOut) return;
+      this.insertContent(content, func.outputMode || "insert");
+    });
     try {
-      await this.interceptor.executeChain(
-        context,
-        this.config.requestEndpoint,
-        (content) => this.insertContent(content, func.outputMode || "insert")
-      );
+      if (timeout > 0) {
+        await Promise.race([
+          chain,
+          new Promise((_resolve, reject) => {
+            timer = setTimeout(() => {
+              timedOut = true;
+              reject(new Error(`AI function "${functionId}" timed out after ${timeout}ms.`));
+            }, timeout);
+          })
+        ]);
+      } else {
+        await chain;
+      }
     } catch (error) {
       const err = error instanceof Error ? error : new Error(String(error));
-      (_b = (_a = this.config).onError) == null ? void 0 : _b.call(_a, err, context);
+      if (this.config.onError) {
+        runSafely(this.config.onError, "ai.onError", [err, context]);
+      } else {
+        console.error(`[Atri Editor] AI function "${functionId}" failed:`, err);
+      }
+    } finally {
+      if (timer !== void 0) clearTimeout(timer);
     }
   }
   /**
@@ -3443,14 +4581,16 @@ class AICommandMenuManager {
     this.detachKeyListener = () => document.removeEventListener("keydown", handler, true);
   }
   setupKeyboardListener() {
-    this.editor.on("transaction", ({ transaction }) => {
+    const handler = ({ transaction }) => {
       if (transaction.docChanged) {
         const lastChar = this.getLastTypedChar();
         if (lastChar === this.triggerChar && !this.isVisible) {
           this.show();
         }
       }
-    });
+    };
+    this.editor.on("transaction", handler);
+    this.detachTransactionListener = () => this.editor.off("transaction", handler);
   }
   getLastTypedChar() {
     const { doc, selection } = this.editor.state;
@@ -3461,7 +4601,7 @@ class AICommandMenuManager {
    * 显示菜单
    */
   show() {
-    if (this.isVisible) return;
+    if (this.isVisible || !this.functions.length) return;
     this.isVisible = true;
     this.selectedIndex = 0;
     this.createMenuElement();
@@ -3525,15 +4665,13 @@ class AICommandMenuManager {
       };
       ({ x, y } = await computePosition(virtualReference, menuElement, {
         placement: "bottom-start",
-        middleware: [offset(8), flip(), shift()]
+        middleware: panelMiddleware()
       }));
     } catch {
       return;
     }
     if (this.menuElement !== menuElement) return;
-    menuElement.style.position = "fixed";
-    menuElement.style.left = `${x}px`;
-    menuElement.style.top = `${y}px`;
+    placePanel(menuElement, x, y);
   }
   selectItem(index) {
     const func = this.functions[index];
@@ -3598,9 +4736,11 @@ class AICommandMenuManager {
    * 销毁
    */
   destroy() {
-    var _a;
+    var _a, _b;
     (_a = this.detachKeyListener) == null ? void 0 : _a.call(this);
     this.detachKeyListener = void 0;
+    (_b = this.detachTransactionListener) == null ? void 0 : _b.call(this);
+    this.detachTransactionListener = void 0;
     this.hide();
   }
 }
@@ -3615,6 +4755,7 @@ class AtriEditor {
     this.mediaStatus = null;
     this.pendingViewState = null;
     this.bubbleElement = null;
+    this.destroyed = false;
     this.options = options;
     const rootElement = resolveElement(options.element);
     this.container = createContainer("atri-editor");
@@ -3647,7 +4788,7 @@ class AtriEditor {
     return this.bubbleElement;
   }
   onEditorCreated() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (this.pendingViewState) {
       const { from, to } = this.pendingViewState;
       this.pendingViewState = null;
@@ -3657,7 +4798,7 @@ class AtriEditor {
         to: Math.min(to, limit)
       });
     }
-    if ((_a = this.options.ai) == null ? void 0 : _a.functions) {
+    if ((_b = (_a = this.options.ai) == null ? void 0 : _a.functions) == null ? void 0 : _b.length) {
       this.aiMenuManager = new AICommandMenuManager(
         this.editor,
         this.options.ai.functions,
@@ -3668,7 +4809,7 @@ class AtriEditor {
         }
       );
     }
-    (_c = (_b = this.options).onCreate) == null ? void 0 : _c.call(_b, this);
+    (_d = (_c = this.options).onCreate) == null ? void 0 : _d.call(_c, this);
   }
   initAI(config) {
     this.aiService = new AIService(this.editor, config, this.markdownService);
@@ -3690,6 +4831,8 @@ class AtriEditor {
       media: this.options.media,
       table: this.options.table,
       link: this.options.link,
+      formatting: this.options.formatting,
+      codeBlock: this.options.codeBlock,
       mediaRuntime: this.mediaRuntime ?? void 0,
       bubbleElement: this.ensureBubbleElement(this.options.toolbar),
       onCreate: () => {
@@ -4023,6 +5166,7 @@ class AtriEditor {
    * 连续注册多个组件请改用 registerNodeViews，只需重建一次
    */
   registerNodeView(config) {
+    if (this.refuseAfterDestroy("registerNodeView")) return;
     this.extensionManager.registerNodeView(config);
     if (this.coreEditor) {
       this.recreateEditor();
@@ -4033,11 +5177,21 @@ class AtriEditor {
    * 注意：如果编辑器已创建，会重新创建编辑器以更新 schema
    */
   registerNodeViews(configs) {
+    if (this.refuseAfterDestroy("registerNodeViews")) return;
     this.extensionManager.registerNodeViews(configs);
     if (this.coreEditor) {
       this.recreateEditor();
     }
   }
+  /**
+   * 销毁后重建类 API 的统一守卫：判在改状态之前，
+   * 否则配置进了 extensionManager 却没有对应的编辑器，看起来就像"注册了但没生效"
+   */
+  refuseAfterDestroy(api) {
+    if (!this.destroyed) return false;
+    console.warn(`[Atri Editor] ${api}() was called on a destroyed editor and did nothing.`);
+    return true;
+  }
   /**
    * 获取所有已注册的 NodeView
    */
@@ -4049,6 +5203,8 @@ class AtriEditor {
    */
   destroy() {
     var _a, _b, _c, _d, _e, _f;
+    if (this.destroyed) return;
+    this.destroyed = true;
     (_a = this.toolbarManager) == null ? void 0 : _a.destroy();
     (_b = this.tableMenu) == null ? void 0 : _b.destroy();
     (_c = this.linkPanel) == null ? void 0 : _c.destroy();
@@ -4077,15 +5233,41 @@ class AtriEditorElement extends AtriEditorBase {
     super();
     this.editor = null;
     this._options = {};
+    this.teardownToken = 0;
+    this.detachedContent = null;
+    this.destroyed = false;
   }
   static get observedAttributes() {
     return ["theme", "editable", "lang", "placeholder"];
   }
   connectedCallback() {
+    this.teardownToken += 1;
+    if (this.destroyed) return;
     this.initEditor();
   }
   disconnectedCallback() {
-    this.destroyEditor();
+    const token = this.teardownToken;
+    queueMicrotask(() => {
+      if (token === this.teardownToken && !this.isConnected) this.teardownEditor();
+    });
+  }
+  /**
+   * 显式销毁：之后重挂不再自动重建，内容快照也一并丢掉
+   *
+   * 框架里对应 unmount 钩子（Vue 的 unmounted、React effect 的 cleanup）。
+   * 断连本身已经会延迟拆除，这个方法的意义在于"别接回去了"
+   */
+  destroy() {
+    this.destroyed = true;
+    this.teardownToken += 1;
+    this.detachedContent = null;
+    this.teardownEditor();
+  }
+  teardownEditor() {
+    if (!this.editor) return;
+    if (!this.destroyed) this.detachedContent = this.editor.getHTML();
+    this.editor.destroy();
+    this.editor = null;
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue) return;
@@ -4117,6 +5299,7 @@ class AtriEditorElement extends AtriEditorBase {
    */
   setOptions(options) {
     this._options = { ...this._options, ...options };
+    if ("content" in options) this.detachedContent = null;
   }
   initEditor() {
     if (this.editor) return;
@@ -4136,6 +5319,11 @@ class AtriEditorElement extends AtriEditorBase {
     if (content) options.content = content;
     const contentFormat = this.getAttribute("data-content-format");
     if (contentFormat) options.contentFormat = contentFormat;
+    if (this.detachedContent !== null) {
+      options.content = this.detachedContent;
+      options.contentFormat = "html";
+      this.detachedContent = null;
+    }
     this.editor = new AtriEditor(options);
     this.dispatchEvent(
       new CustomEvent("editor-created", {
@@ -4144,12 +5332,6 @@ class AtriEditorElement extends AtriEditorBase {
       })
     );
   }
-  destroyEditor() {
-    if (this.editor) {
-      this.editor.destroy();
-      this.editor = null;
-    }
-  }
   /**
    * 获取编辑器实例
    */
@@ -4258,6 +5440,7 @@ export {
   ThemeManager,
   ToolbarManager,
   createContainer,
+  createFormattingExtensions,
   createMediaExtensions,
   getCursorContext,
   getDocumentText,