feat(web): 富文本编辑器换成 Vditor，不再自研轮子

上一版我自己写了 textarea + 正则工具栏，看着能用，一到粘贴图片、
中文输入法、撤销栈就露馅——这几样正是成熟组件积累的部分。按要求改成品。

- 编辑器开关 def: RichTextEditor = Vditor 4.0.1（MIT，ir 模式）
  * 运行时资源自托管：web/scripts/vendor-vditor.mjs 把 lute/i18n/icons
    同步到 public/vditor，predev/prebuild 自动执行，不走 unpkg CDN
    （内网会一直卡在加载）
- 只读渲染换 markdown-it + dompurify，删掉自写的正则渲染器
- 附件直链的令牌只在内存里存在：落库前 stripAttachmentTokens，
  渲染/装载前补回（<img> 带不了 Authorization 头，raw?token= 是必要折中）
- Vditor 不会替我们插入 upload.handler 的返回值（只当提示语 tip.show），
  所以上传完自己 insertMD

验证：pytest 70 passed；e2e richtext 13 项、smoke 7、tickets 8、
knowledge 7 全绿；tsc 0 错；主包 299 kB/gzip 75 kB，Vditor 独立
chunk 385 kB 按需加载。

web/src/components/RichTextEditor.tsx

@@ -1,8 +1,9 @@
-import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
+import type { IVditorInstance } from "vditor/dist/index.js";
+
+import { stripAttachmentTokens, tokenizeAttachmentUrls } from "../lib/attachmentUrls";
 import { attachmentUrl, uploadFile } from "../lib/client";
-import { Markdown } from "./Markdown";
-import { Bold, Code, Eye, Image as ImageIcon, Italic, Link2, ListIcon, Pencil, Quote } from "./icons";
 
 interface Attachment {
   id: string;
@@ -10,6 +11,7 @@ interface Attachment {
 }
 
 interface Props {
+  /** 进出的都是"干净"的 Markdown：不含附件令牌，令牌只在编辑器内部临时存在 */
   value: string;
   onChange: (next: string) => void;
   /** 图片要落到具体条目下，所以这两个是必填 */
@@ -17,230 +19,184 @@ interface Props {
   itemId: string;
   placeholder?: string;
   disabled?: boolean;
-  rows?: number;
+  /** 编辑器初始高度（px） */
+  minHeight?: number;
   ariaLabel: string;
   onError?: (message: string) => void;
 }
 
 /**
- * 富文本编辑器。
+ * 富文本编辑器：Vditor（MIT，中文优先，Markdown 原生进出）。
  *
- * 存储格式是 Markdown——为什么不做 contenteditable 的富文本：
- * 那样存进去的是 HTML，导出、检索、喂给 LLM 都要再清洗一遍；而 Markdown 天生
- * 既是纯文本又能表达排版，模型读得懂、git diff 也看得懂。
+ * 为什么不是自研：我上一版用 textarea + 正则做工具栏，看着能用，但一到
+ * 粘贴图片、中文输入法、撤销栈、表格就露馅——这些正是"成熟组件"积累的部分。
  *
- * 写作时不用记语法：工具栏按钮、Ctrl+B/I、粘贴/拖拽图片，都会就地改写文本。
+ * 为什么存储仍用 Markdown：Vditor 的 `ir` 模式给出"边写边看"的观感，
+ * 但它落盘的是 Markdown 而不是 HTML，导出、检索、喂给 LLM 都还是纯文本。
  */
 export function RichTextEditor({
   value,
   onChange,
   wsId,
   itemId,
-  placeholder = "写点什么…支持 Markdown：**粗体**、- 列表、```代码```",
+  placeholder = "写点什么…支持粘贴/拖入图片，也可以用工具栏排版",
   disabled = false,
-  rows = 6,
+  minHeight = 240,
   ariaLabel,
   onError,
 }: Props) {
-  const ref = useRef<HTMLTextAreaElement>(null);
-  const fileRef = useRef<HTMLInputElement>(null);
-  const [preview, setPreview] = useState(false);
-  const [dragging, setDragging] = useState(false);
+  const hostRef = useRef<HTMLDivElement | null>(null);
+  const instRef = useRef<IVditorInstance | null>(null);
+  /** 外部最新值（已剥令牌），用来判断"这次变化是不是自己打出来的" */
+  const valueRef = useRef(value);
+  const onChangeRef = useRef(onChange);
+  const onErrorRef = useRef(onError);
+  const [ready, setReady] = useState(false);
   const [uploading, setUploading] = useState(false);
-  const helpId = useId();
 
-  /** 在光标处插入文本；有选区就包裹它，插完把光标放到合适位置。 */
-  const surround = useCallback(
-    (before: string, after = "", placeholderText = "") => {
-      const el = ref.current;
-      if (!el) return;
-      const { selectionStart: start, selectionEnd: end } = el;
-      const picked = value.slice(start, end);
-      const selected = picked || placeholderText;
-      const next = value.slice(0, start) + before + selected + after + value.slice(end);
+  valueRef.current = value;
+  onChangeRef.current = onChange;
+  onErrorRef.current = onError;
+  const disabledRef = useRef(disabled);
+  disabledRef.current = disabled;
 
-      onChange(next);
-      // 等 React 把新值写回 textarea 再摆光标，否则会被旧值覆盖
-      requestAnimationFrame(() => {
-        el.focus();
-        if (picked) {
-          // 有选区：保持包裹后的内容仍被选中，方便继续加别的样式
-          el.setSelectionRange(start + before.length, start + before.length + selected.length);
-        } else {
-          const cursor = start + before.length + selected.length;
-          el.setSelectionRange(cursor, cursor);
-        }
-      });
-    },
-    [onChange, value],
-  );
-
-  const prefixLines = useCallback(
-    (prefix: string) => {
-      const el = ref.current;
-      if (!el) return;
-      const start = value.lastIndexOf("\n", el.selectionStart - 1) + 1;
-      const endIdx = value.indexOf("\n", el.selectionEnd);
-      const end = endIdx === -1 ? value.length : endIdx;
-      const block = value.slice(start, end) || "列表项";
-      const nextBlock = block
-        .split("\n")
-        .map((line) => `${prefix}${line.replace(/^(\s*)([-*+]|\d+[.)])\s+/, "$1")}`)
-        .join("\n");
-      onChange(value.slice(0, start) + nextBlock + value.slice(end));
-      requestAnimationFrame(() => el.focus());
-    },
-    [onChange, value],
-  );
-
-  const insertImages = useCallback(
-    async (files: File[]) => {
-      const images = files.filter((file) => file.type.startsWith("image/"));
-      if (images.length === 0) return;
-
-      setUploading(true);
-      try {
-        let next = value;
-        for (const file of images) {
-          const created = await uploadFile<Attachment>(
-            `/workspaces/${wsId}/items/${itemId}/attachments`,
-            file,
-          );
-          const snippet = `\n![${created.filename}](${attachmentUrl(wsId, created.id)})\n`;
-          next += snippet;
-        }
-        onChange(next);
-      } catch (err) {
-        onError?.(err instanceof Error ? err.message : "图片上传失败");
-      } finally {
-        setUploading(false);
-      }
-    },
-    [itemId, onError, onChange, value, wsId],
-  );
-
-  // 用 document 级别的粘贴监听兜住"焦点在 textarea 但剪贴板里是图片"的情况
+  // 每个条目一个编辑器实例：切条目必须重建，否则撤销栈、高度、图片上传路径都会串
   useEffect(() => {
-    const el = ref.current;
-    if (!el || disabled) return;
+    const host = hostRef.current;
+    if (!host) return;
+    let disposed = false;
 
-    const onPaste = (event: ClipboardEvent) => {
-      const files = Array.from(event.clipboardData?.files ?? []);
-      if (files.some((file) => file.type.startsWith("image/"))) {
-        event.preventDefault();
-        void insertImages(files);
+    void (async () => {
+      const [{ default: Vditor }] = await Promise.all([
+        import("vditor/dist/index.js"),
+        import("vditor/dist/index.css"),
+      ]);
+      if (disposed) return;
+
+      const instance = new Vditor(host, {
+        cdn: "/vditor", // 本地托管 lute/i18n/icon，不走公网 CDN（见 web/public/vditor）
+        mode: "ir",
+        value: tokenizeAttachmentUrls(valueRef.current),
+        height: minHeight,
+        placeholder,
+        theme: "classic",
+        icon: "ant",
+        lang: "zh_CN",
+        cache: { enable: false }, // 草稿由我们自己的「保存」按钮负责，不用它的 localStorage
+        counter: { enable: false },
+        outline: { enable: false },
+        toolbarConfig: { pin: true },
+        toolbar: [
+          "headings",
+          "bold",
+          "italic",
+          "strike",
+          "link",
+          "|",
+          "list",
+          "ordered-list",
+          "check",
+          "quote",
+          "line",
+          "code",
+          "inline-code",
+          "upload",
+          "table",
+          "|",
+          "undo",
+          "redo",
+          "fullscreen",
+        ],
+        preview: {
+          // 关掉代码高亮与公式：它们要额外从 CDN 拉三端脚本，内网/离线会白等
+          hljs: { enable: false, lineNumber: false },
+          math: { engine: "" },
+          markdown: { toc: false, mark: false, footnotes: false },
+        },
+        upload: {
+          accept: "image/*",
+          multiple: true,
+          handler: async (files: File[]) => {
+            const images = files.filter((file) => file.type.startsWith("image/"));
+            if (images.length === 0) {
+              onErrorRef.current?.("只能插入图片");
+              return null;
+            }
+
+            setUploading(true);
+            try {
+              for (const file of images) {
+                const created = await uploadFile<Attachment>(
+                  `/workspaces/${wsId}/items/${itemId}/attachments`,
+                  file,
+                );
+                // 自己插入，不用 Vditor 代劳：它对 handler 的返回值只会
+                // tip.show(字符串) 当成提示语显示，并不会把内容插进正文。
+                instRef.current?.insertMD(`\n![](${attachmentUrl(wsId, created.id)})\n`);
+              }
+              return null;
+            } catch (error) {
+              onErrorRef.current?.(error instanceof Error ? error.message : "图片上传失败");
+              return null;
+            } finally {
+              setUploading(false);
+            }
+          },
+        },
+        input: (next: string) => {
+          // 往外吐干净版本；比较用同一口径，避免 setValue/sync 互相打架
+          onChangeRef.current(stripAttachmentTokens(next));
+        },
+        after: () => {
+          if (disposed) return;
+          // 让屏幕阅读器和 e2e 都能按名字找到这块编辑区
+          host.querySelector(".vditor-ir [contenteditable]")?.setAttribute("aria-label", ariaLabel);
+          if (disabledRef.current) instRef.current?.disabled();
+          setReady(true);
+        },
+      });
+
+      instRef.current = instance as unknown as IVditorInstance;
+    })();
+
+    return () => {
+      disposed = true;
+      setReady(false);
+      try {
+        instRef.current?.destroy();
+      } catch {
+        // 销毁失败不该影响切页面
       }
+      instRef.current = null;
     };
-    el.addEventListener("paste", onPaste);
-    return () => el.removeEventListener("paste", onPaste);
-  }, [disabled, insertImages]);
+    // 只跟条目走；其余参数通过 ref 读最新值，避免重建丢焦点
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [itemId, wsId]);
 
-  const tools = [
-    { label: "粗体", icon: <Bold size={15} />, run: () => surround("**", "**", "粗体") },
-    { label: "斜体", icon: <Italic size={15} />, run: () => surround("*", "*", "斜体") },
-    { label: "标题", icon: <span className="text-[13px] font-semibold">H</span>, run: () => prefixLines("## ") },
-    { label: "列表", icon: <ListIcon size={15} />, run: () => prefixLines("- ") },
-    { label: "引用", icon: <Quote size={15} />, run: () => prefixLines("> ") },
-    { label: "代码", icon: <Code size={15} />, run: () => surround("`", "`", "code") },
-    { label: "链接", icon: <Link2 size={15} />, run: () => surround("[", "](https://)", "链接文字") },
-  ];
+  // 外部值变化（例如抽屉刚 hydrate 完）→ 写回编辑器，但别打断正在输入的人
+  useEffect(() => {
+    const inst = instRef.current;
+    if (!inst) return;
+    const current = stripAttachmentTokens(inst.getValue());
+    if (current !== value) {
+      inst.setValue(tokenizeAttachmentUrls(value), true);
+    }
+  }, [value, ready]);
+
+  useEffect(() => {
+    const inst = instRef.current;
+    if (!inst) return;
+    if (disabled) inst.disabled();
+    else inst.enable();
+  }, [disabled, ready]);
 
   return (
-    <div className={dragging ? "rounded-xl ring-2 ring-primary-500/40" : ""}>
-      <div className="flex flex-wrap items-center gap-0.5 border-b border-line-100 pb-1.5">
-        {tools.map((tool) => (
-          <button
-            key={tool.label}
-            type="button"
-            title={tool.label}
-            aria-label={tool.label}
-            disabled={disabled || preview}
-            onClick={tool.run}
-            className="grid h-7 w-7 place-items-center rounded-md text-ink-500 transition hover:bg-paper-200 hover:text-ink-800 disabled:opacity-40"
-          >
-            {tool.icon}
-          </button>
-        ))}
-        <button
-          type="button"
-          title="插入图片"
-          aria-label="插入图片"
-          disabled={disabled || preview || uploading}
-          onClick={() => fileRef.current?.click()}
-          className="grid h-7 w-7 place-items-center rounded-md text-ink-500 transition hover:bg-paper-200 hover:text-ink-800 disabled:opacity-40"
-        >
-          <ImageIcon size={15} />
-        </button>
-        <span className="mx-1 h-4 w-px bg-line-100" />
-        <button
-          type="button"
-          onClick={() => setPreview((prev) => !prev)}
-          className="ml-auto inline-flex items-center gap-1 rounded-md px-2 py-1 text-2xs font-medium text-ink-500 transition hover:bg-paper-200 hover:text-ink-800"
-          aria-pressed={preview}
-        >
-          {preview ? <Pencil size={13} /> : <Eye size={13} />}
-          {preview ? "继续编辑" : "预览"}
-        </button>
-      </div>
-
-      <input
-        ref={fileRef}
-        type="file"
-        accept="image/*"
-        multiple
-        className="hidden"
-        onChange={(event) => {
-          void insertImages(Array.from(event.target.files ?? []));
-          event.target.value = "";
-        }}
-      />
-
-      {preview ? (
-        <div className="min-h-[96px] rounded-lg border border-line-100 bg-paper-50 px-3 py-2.5">
-          {value.trim() ? <Markdown source={value} /> : <p className="text-sm text-ink-400">还没有内容。</p>}
-        </div>
-      ) : (
-        <textarea
-          ref={ref}
-          aria-label={ariaLabel}
-          aria-describedby={helpId}
-          className="input min-h-[96px] resize-y border-0 bg-transparent px-0 py-2 font-mono text-[13px] leading-6 focus:ring-0"
-          rows={rows}
-          value={value}
-          placeholder={placeholder}
-          disabled={disabled}
-          onChange={(event) => onChange(event.target.value)}
-          onDragOver={(event) => {
-            if (event.dataTransfer.types.includes("Files")) {
-              event.preventDefault();
-              setDragging(true);
-            }
-          }}
-          onDragLeave={() => setDragging(false)}
-          onDrop={(event) => {
-            const files = Array.from(event.dataTransfer.files ?? []);
-            if (files.length > 0) {
-              event.preventDefault();
-              setDragging(false);
-              void insertImages(files);
-            }
-          }}
-          onKeyDown={(event) => {
-            if (!(event.ctrlKey || event.metaKey)) return;
-            const key = event.key.toLowerCase();
-            if (key === "b") {
-              event.preventDefault();
-              surround("**", "**", "粗体");
-            } else if (key === "i") {
-              event.preventDefault();
-              surround("*", "*", "斜体");
-            }
-          }}
-        />
-      )}
-
-      <p id={helpId} className="mt-1 text-2xs text-ink-400">
-        {uploading ? "正在上传图片…" : "可直接粘贴或拖入图片；Ctrl+B 粗体、Ctrl+I 斜体"}
+    <div className="rich-text">
+      <div ref={hostRef} />
+      <p className="mt-1 text-2xs text-ink-400">
+        {uploading
+          ? "正在上传图片…"
+          : "支持直接粘贴或拖入图片；内容按 Markdown 保存，模型和导出都读得懂"}
       </p>
     </div>
   );