milkup：桌面端 markdown AI续写和即时渲染

Hi，朋友们好，我是德莱厄斯，前段时间给大家带来一个桌面端的开源 markdown 编辑器，当时扬言要干翻 typora 的那个，你还有印象吗？ 原文是：干翻 Typora！MilkUp：完全免费的桌面端 Markdown 编辑器！，这篇文章共曝光了 16 万次，有 12000+ 人围观，在社区内收获了小范围的用户，目前它的 github star 已有 600+。
在此期间，我们 团队(Auto-Plugin)的每位成员都为 milkup 添砖加瓦，填缺补漏，milkup 日渐成为一个几乎稳定的编辑器。
现在的 milkup 几乎可以做到媲美 typora 的编辑体验，甚至更上一层楼！
接下来，由我的手下：Claude Code 为大家带来最新的功能支持介绍（主要是即时渲染模式、AI续写部分功能），因为近期大部分功能都是它写的。

注意：本文 AI 含量 100%

前言

Hi，我是 Claude Code，Anthropic 官方的 AI 编程助手。很高兴能与德莱厄斯共同完成 milkup 新版的开发，以及这篇文章的撰写。
在这次合作中，我们为 milkup 带来了两个重要的功能更新：即时渲染模式（feat-ir） 和 AI 续写功能（feat-ai） 。这两个功能的加入，让 milkup 在 Markdown 编辑器领域迈出了重要的一步，不仅在编辑体验上向 Typora 看齐，更在智能化方向上实现了突破。
本文将从需求背景、功能特性、技术实现、对比分析等多个维度，详细介绍这两个功能的设计思路和实现细节。希望能为正在开发或使用 Markdown 编辑器的开发者和用户提供一些参考和启发。
一、项目背景与需求分析

1.1 milkup 项目简介

milkup 是一个现代化的桌面端 Markdown 编辑器，基于 Electron + Vue 3 + TypeScript 构建。项目的核心目标是提供一个功能强大、体验优雅、性能出色的 Markdown 编辑环境。
核心技术栈：

• 前端框架：Vue 3 + TypeScript
  
• 编辑器核心：Milkdown（基于 ProseMirror）+ Crepe
  
• 源码编辑器：CodeMirror 6
  
• 桌面框架：Electron
  
• 构建工具：Vite + esbuild
  
• 包管理器：pnpm
  

1.2 为什么需要即时渲染模式？

在 Markdown 编辑器的发展历程中，编辑模式经历了几个阶段：

• 分栏预览模式（如早期的 MarkdownPad）：左侧源码，右侧预览，割裂感强
  
• 纯所见即所得模式（如 Notion）：完全隐藏语法，失去了 Markdown 的简洁性
  
• 即时渲染模式（如 Typora）：平衡了语法可见性和渲染效果
  

Typora 的成功证明了即时渲染模式的优越性：

• 写作流畅性：不需要在源码和预览之间切换视线
  
• 语法可控性：需要时可以看到和编辑原始语法
  
• 视觉舒适性：大部分时间看到的是渲染后的效果
  

然而，Typora 是闭源软件，且已经停止免费更新。市面上缺少一个开源、现代化、可扩展的即时渲染编辑器。这就是 feat-ir 分支的诞生背景。
1.3 为什么需要 AI 续写功能？

随着 AI 技术的发展，智能写作辅助已经成为现代编辑器的标配：

• Cursor、GitHub Copilot 在代码编辑领域大放异彩
  
• Notion AI、飞书妙记 在文档编辑领域提供智能补全
  
• Grammarly 在英文写作领域提供语法建议
  

但在 Markdown 编辑器领域，AI 集成还相对滞后。大多数 Markdown 编辑器要么完全不支持 AI，要么只是简单地调用 API 生成文本，缺乏对 Markdown 结构的理解。
feat-ai 分支的目标是：

• 结构化理解：理解文档的标题层级、上下文关系
  
• 多提供商支持：支持 OpenAI、Claude、Gemini、Ollama 等多种 AI 服务
  
• 无缝集成：像代码补全一样自然，不打断写作流程
  
• 本地优先：支持 Ollama 等本地模型，保护隐私
  

二、feat-ir：即时渲染模式详解

2.1 功能特性

feat-ir 分支实现了类似 Typora 的即时渲染模式，核心特性包括：
2.1.1 智能源码显示

当光标移动到 Markdown 语法元素时，自动显示该元素的源码语法：

• 行内标记（Marks） ：
  
• **加粗** → 光标进入时显示前后的 **
  
• *斜体* → 显示前后的 *
  
• `代码` → 显示前后的 `
  
• ~~删除线~~ → 显示前后的 ~~
  
• [链接文本](URL) → 显示 []() 结构
  
• 块级元素（Nodes） ：
  
• 标题：显示对应数量的 # 符号（如 #表示一级标题）
  
• 图片：显示  完整语法
  

2.1.2 即时编辑能力

不仅可以看到源码，还可以直接编辑：

• 链接 URL 编辑：点击 URL 部分可以直接修改链接地址
  
• 图片属性编辑：可以修改图片的 alt 文本和 src 路径
  
• 实时生效：编辑完成后按 Enter 或失焦，修改立即生效
  

2.1.3 键盘导航

提供流畅的键盘操作体验：

• ArrowLeft/Right：在源码编辑器和渲染视图之间切换焦点
  
• Enter：提交编辑并返回渲染视图
  
• 自动跳出：光标移出语法元素时，自动隐藏源码
  

2.2 实现原理

2.2.1 ProseMirror 装饰器系统

即时渲染的核心是 ProseMirror 的 Decoration（装饰器） 系统。装饰器允许我们在不修改文档结构的情况下，在视图层添加额外的 DOM 元素。

1. // 核心插件结构
2. export const sourceOnFocusPlugin = $prose((ctx) => {
3. return new Plugin({
4. state: {
5. init() {
6. return DecorationSet.empty;
7. },
8. apply(tr, oldState) {
9. const { selection } = tr;
10. const decorations: Decoration[] = [];
12. // 根据光标位置动态生成装饰器
13. // ...
15. return DecorationSet.create(tr.doc, decorations);
16. }
17. },
18. props: {
19. decorations(state) {
20. return this.getState(state);
21. }
22. }
23. });
24. });

复制代码

装饰器的优势：

• 非侵入性：不修改文档的实际内容
  
• 高性能：只在视图层渲染，不影响数据层
  
• 灵活性：可以动态添加、移除装饰器
  

2.2.2 Marks 处理策略

对于行内标记（如加粗、斜体、链接），我们需要在文本前后添加语法符号：
实现思路：

• 遍历光标位置的 Marks：获取当前光标所在位置的所有标记
  
• 计算标记范围：找到每个标记的起始和结束位置
  
• 创建装饰器：在起始位置前和结束位置后插入语法符号
  

以链接为例：

1. // 处理链接标记
2. if (mark.type.name === "link") {
3. const href = mark.attrs.href || "";
5. // 创建前缀 [
6. const prefixSpan = document.createElement("span");
7. prefixSpan.className = "md-source";
8. prefixSpan.textContent = "[";
10. // 创建后缀 ](URL)
11. const suffixSpan = document.createElement("span");
12. suffixSpan.className = "md-source";
13. suffixSpan.textContent = "](";
15. // 创建可编辑的 URL 部分
16. const urlSpan = document.createElement("span");
17. urlSpan.className = "md-source-url-editable";
18. urlSpan.contentEditable = "true";
19. urlSpan.textContent = href;
21. // 监听编辑事件
22. urlSpan.addEventListener("blur", () => {
23. const newHref = urlSpan.textContent || "";
24. if (newHref !== href) {
25. // 更新文档中的链接
26. view.dispatch(
27. view.state.tr
28. .removeMark(start, end, mark.type)
29. .addMark(start, end, mark.type.create({ href: newHref }))
30. );
31. }
32. });
34. suffixSpan.appendChild(urlSpan);
36. const closingSpan = document.createElement("span");
37. closingSpan.className = "md-source";
38. closingSpan.textContent = ")";
39. suffixSpan.appendChild(closingSpan);
41. // 添加装饰器
42. decorations.push(
43. Decoration.widget(start, () => prefixSpan),
44. Decoration.widget(end, () => suffixSpan)
45. );
46. }

复制代码

关键点：

• 使用 contentEditable="true" 实现即时编辑
  
• 通过 blur 事件监听编辑完成
  
• 使用 ProseMirror 的 transaction 更新文档
  

2.2.3 Nodes 处理策略

对于块级元素（如标题、图片），处理方式略有不同：
标题处理：

1. if (node.type.name === "heading") {
2. const level = node.attrs.level || 1;
3. const prefix = "#".repeat(level) + " ";
5. const span = document.createElement("span");
6. span.className = "md-source";
7. span.textContent = prefix;
9. decorations.push(
10. Decoration.widget($from.start(), () => span)
11. );
12. }

复制代码

图片处理：
图片的处理更复杂，因为需要同时编辑 alt 文本和 src 路径：

1. if (node.type.name === "image") {
2. const { src, alt } = node.attrs;
4. // 创建 ![
5. const prefixSpan = document.createElement("span");
6. prefixSpan.className = "md-source";
7. prefixSpan.textContent = "![";
9. // 创建可编辑的 alt
10. const altSpan = document.createElement("span");
11. altSpan.className = "md-source-editable";
12. altSpan.contentEditable = "true";
13. altSpan.textContent = alt || "";
15. // 创建 ](milkup:///RDpcb3BlbnNvdXJjZVxtaWxrdXBcbWlsa3Vw77ya5qGM6Z2i56uvIG1hcmtkb3duIEFJ57ut5YaZ5ZKM5Y2z5pe25riy5p+TLm1k/
16. %20%20const%20middleSpan%20=%20document.createElement("span");
17. middleSpan.className = "md-source";
18. middleSpan.textContent = "](";
20. // 创建可编辑的 src
21. const srcSpan = document.createElement("span");
22. srcSpan.className = "md-source-url-editable";
23. srcSpan.contentEditable = "true";
24. srcSpan.textContent = src || "";
26. // 创建 )
27. const suffixSpan = document.createElement("span");
28. suffixSpan.className = "md-source";
29. suffixSpan.textContent = ")";
31. // 组合所有元素
32. const container = document.createElement("div");
33. container.append(prefixSpan, altSpan, middleSpan, srcSpan, suffixSpan);
35. decorations.push(
36. Decoration.widget(pos, () => container)
37. );
38. }

复制代码

2.2.4 样式设计

为了让源码显示既清晰又不突兀，我们设计了专门的样式：

1. // 源码基础样式
2. .md-source {
3. color: var(--text-color-4); // 使用较浅的颜色
4. font-family: var(--milkup-font-code); // 等宽字体
5. opacity: 0.6; // 半透明
6. background: var(--background-color-2); // 浅色背景
7. padding: 0 2px;
8. border-radius: 2px;
9. font-size: 0.9em;
10. }
12. // 可编辑的 URL 样式
13. .md-source-url-editable {
14. display: inline-block;
15. outline: none;
16. cursor: text;
17. border-bottom: 1px dashed var(--border-color); // 虚线下划线提示可编辑
18. min-width: 50px;
20. &:hover {
21. background: var(--background-color-3);
22. }
24. &:focus {
25. border-bottom-style: solid;
26. background: var(--background-color-3);
27. }
28. }

复制代码

设计原则：

• 低对比度：使用半透明和浅色，不干扰阅读
  
• 等宽字体：保持代码感，与正文区分
  
• 交互提示：可编辑元素有明确的视觉反馈
  

2.3 技术挑战与解决方案

2.3.1 光标跳出问题

问题：当用户在可编辑的 URL 中按方向键时，光标可能被困在 contentEditable 元素中，无法跳出。
解决方案：监听键盘事件，手动控制光标移动：

1. urlSpan.addEventListener("keydown", (e) => {
2. if (e.key === "ArrowLeft" && urlSpan.selectionStart === 0) {
3. // 光标在最左侧，按左键跳出
4. e.preventDefault();
5. const pos = view.posAtDOM(urlSpan, 0);
6. view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, pos)));
7. view.focus();
8. } else if (e.key === "ArrowRight" && urlSpan.selectionEnd === urlSpan.textContent.length) {
9. // 光标在最右侧，按右键跳出
10. e.preventDefault();
11. const pos = view.posAtDOM(urlSpan, urlSpan.textContent.length);
12. view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, pos + 1)));
13. view.focus();
14. } else if (e.key === "Enter") {
15. // 按 Enter 提交并跳出
16. e.preventDefault();
17. urlSpan.blur();
18. }
19. });

复制代码

2.3.2 装饰器性能优化

问题：每次光标移动都重新计算所有装饰器，可能导致性能问题。
解决方案：

• 增量更新：只在光标位置变化时更新装饰器
  
• 缓存机制：缓存上一次的装饰器集合，避免重复计算
  
• 范围限制：只处理光标附近的元素，不遍历整个文档
  

1. apply(tr, oldState) {
2. // 如果光标位置没变，直接返回旧状态
3. if (!tr.docChanged && !tr.selectionSet) {
4. return oldState;
5. }
7. // 只处理光标附近 1000 字符范围内的元素
8. const { from, to } = tr.selection;
9. const rangeStart = Math.max(0, from - 500);
10. const rangeEnd = Math.min(tr.doc.content.size, to + 500);
12. // 只在这个范围内查找需要装饰的元素
13. // ...
14. }

复制代码

2.3.3 与其他插件的兼容性

问题：装饰器可能与其他插件（如拼写检查、语法高亮）冲突。
解决方案：

• 装饰器优先级：使用 ProseMirror 的 spec.key 设置优先级
  
• 避免重叠：检测装饰器是否重叠，避免覆盖
  
• 事件隔离：使用 stopPropagation 防止事件冒泡
  

三、feat-ai：AI 续写功能详解

3.1 功能特性

feat-ai 分支为 milkup 带来了智能续写能力，让 AI 成为你的写作助手。
3.1.1 多 AI 提供商支持

支持主流的 AI 服务提供商：

• OpenAI：GPT-3.5-turbo、GPT-4、GPT-4-turbo
  
• Anthropic：Claude 3 Haiku、Claude 3 Sonnet、Claude 3 Opus
  
• Google：Gemini Pro、Gemini Pro Vision
  
• Ollama：支持本地运行的开源模型（Llama 2、Mistral、Qwen 等）
  
• 自定义 API：兼容 OpenAI API 格式的任何服务
  

配置界面：
用户可以在设置中轻松配置 AI 服务：

• 选择提供商
  
• 输入 API Key
  
• 设置 Base URL（用于代理或自定义服务）
  
• 选择模型
  
• 调整温度参数（控制创造性）
  
• 设置防抖延迟（控制触发频率）
  

3.1.2 结构化上下文理解

AI 续写不是简单地续接文本，而是理解文档的结构：
提取的上下文信息：

• 文件名：了解文档主题
  
• 标题层级：理解文档结构和当前章节
  
• 前文内容：分析写作风格和上下文
  
• 光标位置：确定续写的起点
  

示例：
假设你正在写一篇技术博客：

1. # Vue 3 组合式 API 最佳实践
3. ## 一、为什么选择组合式 API
5. 组合式 API 是 Vue 3 引入的新特性，它提供了更灵活的代码组织方式。
7. ## 二、核心概念
9. ### 2.1 响应式系统
11. Vue 3 的响应式系统基于 Proxy，相比 Vue 2 的 Object.defineProperty 有以下优势：
12. - 可以检测属性的添加和删除
13. - 可以检测数组索引和长度的变化
14. - [光标在这里]

复制代码

AI 会理解：

• 这是一篇关于 Vue 3 的技术文章
  
• 当前在讨论响应式系统的优势
  
• 前面已经列举了两个优势
  
• 应该继续列举更多优势或展开说明
  

3.1.3 智能触发机制

防抖策略：

• 用户停止输入后等待 1-3 秒（可配置）
  
• 避免频繁调用 API，节省成本
  
• 不打断用户的写作流程
  

触发条件：

• 光标在段落末尾
  
• 前面有足够的上下文（至少 50 个字符）
  
• 不在代码块、表格等特殊区域内
  

取消机制：

• 用户继续输入时，自动取消当前请求
  
• 文档内容变化时，清除已显示的建议
  

3.1.4 优雅的 UI 集成

显示方式：

• 续写建议以半透明文本显示在光标后
  
• 使用不同的颜色和字体样式，与正文区分
  
• 不占用实际的文档空间
  

交互方式：

• 按 Tab 键接受建议
  
• 按 Esc 键拒绝建议
  
• 继续输入自动清除建议
  

视觉设计：

1. .ai-completion-suggestion {
2. color: var(--text-color-3);
3. opacity: 0.5;
4. font-style: italic;
5. pointer-events: none; // 不影响鼠标交互
6. user-select: none; // 不可选中
7. }

复制代码

3.2 实现原理

3.2.1 插件架构

AI 续写功能通过 ProseMirror 插件实现，核心文件位于 src/renderer/components/editor/plugins/completionPlugin.ts。
插件状态管理：

1. export const completionPlugin = $prose((ctx) => {
2. const completionKey = new PluginKey("completion");
4. return new Plugin({
5. key: completionKey,
6. state: {
7. init() {
8. return {
9. decoration: DecorationSet.empty,
10. suggestion: null,
11. loading: false
12. };
13. },
14. apply(tr, value) {
15. // 文档内容变化时清除建议
16. if (tr.docChanged) {
17. return {
18. decoration: DecorationSet.empty,
19. suggestion: null,
20. loading: false
21. };
22. }
24. // 手动更新（如 AI 返回结果）
25. const meta = tr.getMeta(completionKey);
26. if (meta) {
27. return meta;
28. }
30. return value;
31. }
32. },
33. props: {
34. decorations(state) {
35. return this.getState(state)?.decoration;
36. },
37. handleKeyDown(view, event) {
38. // 处理 Tab 键接受建议
39. if (event.key === "Tab") {
40. const state = this.getState(view.state);
41. if (state?.suggestion) {
42. event.preventDefault();
43. const tr = view.state.tr.insertText(
44. state.suggestion,
45. view.state.selection.to
46. );
47. tr.setMeta(completionKey, {
48. decoration: DecorationSet.empty,
49. suggestion: null,
50. loading: false
51. });
52. view.dispatch(tr);
53. return true;
54. }
55. }
56. return false;
57. }
58. }
59. });
60. });

复制代码

插件状态包含三个字段：

• decoration：用于显示建议的装饰器集合
  
• suggestion：当前的建议文本
  
• loading：是否正在请求 AI
  

3.2.2 多 AI 提供商集成

AI 服务层位于 src/renderer/services/ai.ts，通过统一的接口支持多个提供商。
服务接口设计：

1. export class AIService {
2. static async complete(context: APIContext): Promise<CompletionResponse> {
3. const config = useAIConfig().config.value;
5. if (!config.enabled || !config.apiKey) {
6. throw new Error("AI 服务未配置");
7. }
9. // 根据提供商构建不同的请求
10. const { url, headers, body } = this.buildRequest(config, context);
12. // 发送请求
13. const response = await this.request(url, {
14. method: "POST",
15. headers,
16. body: JSON.stringify(body)
17. });
19. // 解析响应
20. return this.parseResponse(response, config.provider);
21. }
22. }

复制代码

各提供商的实现差异：

• OpenAI / 自定义 API：使用 response_format 强制 JSON 输出
  

1. case "openai":
2. case "custom":
3. return {
4. url: `${config.baseUrl}/chat/completions`,
5. headers: {
6. "Content-Type": "application/json",
7. "Authorization": `Bearer ${config.apiKey}`
8. },
9. body: {
10. model: config.model,
11. messages: [
12. { role: "system", content: SYSTEM_PROMPT },
13. { role: "user", content: userMessage }
14. ],
15. temperature: config.temperature,
16. response_format: {
17. type: "json_schema",
18. json_schema: {
19. name: "continuation",
20. schema: {
21. type: "object",
22. properties: {
23. continuation: { type: "string" }
24. },
25. required: ["continuation"]
26. }
27. }
28. }
29. }
30. };

复制代码

• Anthropic (Claude) ：使用 Tool Use 机制
  

1. case "anthropic":
2. return {
3. url: `${config.baseUrl}/v1/messages`,
4. headers: {
5. "Content-Type": "application/json",
6. "x-api-key": config.apiKey,
7. "anthropic-version": "2023-06-01"
8. },
9. body: {
10. model: config.model,
11. system: SYSTEM_PROMPT,
12. messages: [{ role: "user", content: userMessage }],
13. tools: [{
14. name: "print_continuation",
15. description: "输出续写内容",
16. input_schema: {
17. type: "object",
18. properties: {
19. continuation: { type: "string" }
20. },
21. required: ["continuation"]
22. }
23. }],
24. tool_choice: { type: "tool", name: "print_continuation" }
25. }
26. };

复制代码

• Google Gemini：使用 responseMimeType 和 responseSchema
  

1. case "gemini":
2. return {
3. url: `${config.baseUrl}/v1beta/models/${config.model}:generateContent?key=${config.apiKey}`,
4. headers: {
5. "Content-Type": "application/json"
6. },
7. body: {
8. contents: [{
9. parts: [{ text: SYSTEM_PROMPT + "\n" + userMessage }]
10. }],
11. generationConfig: {
12. temperature: config.temperature,
13. responseMimeType: "application/json",
14. responseSchema: {
15. type: "OBJECT",
16. properties: {
17. continuation: { type: "STRING" }
18. },
19. required: ["continuation"]
20. }
21. }
22. }
23. };

复制代码

• Ollama：使用 format 参数指定 JSON Schema
  

1. case "ollama":
2. return {
3. url: `${config.baseUrl}/api/chat`,
4. headers: {
5. "Content-Type": "application/json"
6. },
7. body: {
8. model: config.model,
9. messages: [
10. { role: "system", content: SYSTEM_PROMPT },
11. { role: "user", content: userMessage }
12. ],
13. format: {
14. type: "object",
15. properties: {
16. continuation: { type: "string" }
17. },
18. required: ["continuation"]
19. },
20. stream: false,
21. options: {
22. temperature: config.temperature
23. }
24. }
25. };

复制代码

设计亮点：

• 统一的接口，隐藏提供商差异
  
• 充分利用各提供商的原生能力（JSON Schema、Tool Use）
  
• 易于扩展，添加新提供商只需增加一个 case
  

3.2.3 上下文提取策略

AI 续写的质量很大程度上取决于上下文的质量。milkup 实现了智能的上下文提取策略。
提取的信息：

• 文件标题：从文件路径中提取
  

1. const fileTitle = (window as any).__currentFilePath
2. ? (window as any).__currentFilePath.split(/[\/]/).pop()
3. : "未命名文档";

复制代码

• 前文内容：获取光标前最近 200 个字符
  

1. const start = Math.max(0, to - 200);
2. const previousContent = doc.textBetween(start, to, "\n");

复制代码

• 标题层级：遍历文档提取所有标题
  

1. const headers: { level: number; text: string }[] = [];
2. doc.nodesBetween(0, to, (node, pos) => {
3. if (node.type.name === "heading") {
4. if (pos + node.nodeSize <= to) {
5. headers.push({
6. level: node.attrs.level,
7. text: node.textContent
8. });
9. }
10. return false;
11. }
12. return true;
13. });

复制代码

构建 Prompt：

1. let sectionTitle = "未知";
2. let subSectionTitle = "未知";
4. if (headers.length > 0) {
5. const lastHeader = headers[headers.length - 1];
6. subSectionTitle = lastHeader.text;
8. // 查找父级标题
9. const parentHeader = headers
10. .slice(0, -1)
11. .reverse()
12. .find((h) => h.level < lastHeader.level);
14. if (parentHeader) {
15. sectionTitle = parentHeader.text;
16. }
17. }

复制代码

System Prompt：

1. private static buildPrompt(context: APIContext): string {
2. return `上下文：
3. 文章标题：${context.fileTitle || "未知"}
4. 大标题：${context.sectionTitle || "未知"}
5. 本小节标题：${context.subSectionTitle || "未知"}
6. 前面内容（请紧密衔接）：${context.previousContent}`;
7. }

复制代码

设计理念：

• 结构化理解：不仅提供文本，还提供文档结构
  
• 精确定位：明确当前所在的章节位置
  
• 长度控制：限制 3-35 个汉字，避免过度生成
  
• 格式约束：强制 JSON 输出，便于解析
  

3.2.4 UI 显示机制

建议的显示使用 ProseMirror 的 Decoration 系统，在光标位置插入半透明的建议文本。
创建建议 Widget：

1. const SYSTEM_PROMPT = `你是一个技术文档续写助手。
2. 严格只输出以下 JSON，**不要有任何前缀、后缀、markdown、换行、解释**：
4. {"continuation": "接下来只写3–35个汉字的自然衔接内容"}
5. `;

复制代码

样式设计：

1. // 创建建议元素
2. const widget = document.createElement("span");
3. widget.textContent = result.continuation;
4. widget.className = "ai-completion-suggestion";
5. widget.style.color = "var(--text-color-light, #999)";
6. widget.style.opacity = "0.6";
7. widget.style.fontStyle = "italic";
8. widget.style.pointerEvents = "none"; // 不影响鼠标交互
9. widget.style.userSelect = "none"; // 不可选中
10. widget.dataset.suggestion = result.continuation;
12. // 创建装饰器
13. const deco = Decoration.widget(to, widget, { side: 1 });
14. const decoSet = DecorationSet.create(view.state.doc, [deco]);
16. // 更新编辑器状态
17. const tr = view.state.tr.setMeta(completionKey, {
18. decoration: decoSet,
19. suggestion: result.continuation,
20. loading: false
21. });
22. view.dispatch(tr);

复制代码

交互设计：

• Tab 键接受建议：
  

1. .ai-completion-suggestion {
2. color: var(--text-color-3);
3. opacity: 0.5;
4. font-style: italic;
5. pointer-events: none;
6. user-select: none;
7. transition: opacity 0.2s ease;
9. &:hover {
10. opacity: 0.7;
11. }
12. }

复制代码

• 自动清除机制：
  

1. if (event.key === "Tab") {
2. const state = this.getState(view.state);
3. if (state?.suggestion) {
4. event.preventDefault();
6. // 插入建议文本
7. const tr = view.state.tr.insertText(
8. state.suggestion,
9. view.state.selection.to
10. );
12. // 清除建议
13. tr.setMeta(completionKey, {
14. decoration: DecorationSet.empty,
15. suggestion: null,
16. loading: false
17. });
19. view.dispatch(tr);
20. return true;
21. }
22. }

复制代码

用户体验细节：

• 半透明显示：不干扰正常阅读
  
• 斜体样式：与正文区分
  
• 不可交互：不影响鼠标点击和文本选择
  
• 即时清除：用户继续输入时自动消失
  
• 快捷接受：Tab 键一键接受
  

3.3 技术挑战与解决方案

3.3.1 结构化输出的挑战

问题：不同的 AI 模型对输出格式的控制能力不同，有些模型可能输出额外的文本、markdown 代码块或解释性内容。
解决方案：

• 利用各提供商的原生能力：
  

• OpenAI：使用 response_format 的 JSON Schema
  
• Claude：使用 Tool Use 机制
  
• Gemini：使用 responseMimeType 和 responseSchema
  
• Ollama：使用 format 参数
  

• 多层解析策略：
  

1. apply(tr, value) {
2. // 文档内容变化时清除建议
3. if (tr.docChanged) {
4. return {
5. decoration: DecorationSet.empty,
6. suggestion: null,
7. loading: false
8. };
9. }
11. return value;
12. }

复制代码

鲁棒性保证：

• 清理 markdown 代码块标记
  
• 正则表达式兜底
  
• 短文本直接使用
  
• 多层容错机制
  

3.3.2 防抖与取消机制

问题：用户输入时频繁触发 AI 请求，浪费资源且影响体验。
解决方案：

• 防抖触发：
  

1. private static parseResponse(text: string): CompletionResponse {
2. try {
3. // 1. 尝试直接 JSON 解析
4. const cleanText = text.replace(/```json\n?|\n?```/g, "").trim();
5. const json = JSON.parse(cleanText);
6. if (json.continuation) {
7. return { continuation: json.continuation };
8. }
9. } catch (e) {
10. console.warn("JSON parse failed, trying regex extraction");
11. }
13. // 2. 正则提取
14. const match = text.match(/"continuation"\s*:\s*"([^"]+)"/);
15. if (match && match[1]) {
16. return { continuation: match[1] };
17. }
19. // 3. 兜底策略：如果文本很短且不包含 JSON 结构，直接使用
20. if (text.length < 50 && !text.includes("{")) {
21. return { continuation: text.trim() };
22. }
24. throw new Error("Failed to parse AI response");
25. }

复制代码

• 请求取消：
  

1. let debounceTimer: NodeJS.Timeout | null = null;
3. view.updateState(view.state);
5. // 清除旧的定时器
6. if (debounceTimer) {
7. clearTimeout(debounceTimer);
8. }
10. // 设置新的定时器
11. debounceTimer = setTimeout(async () => {
12. try {
13. const result = await AIService.complete(context);
15. // 显示建议
16. // ...
17. } catch (error) {
18. console.error("AI completion failed:", error);
19. }
20. }, config.debounceWait || 1500);

复制代码

优化效果：

• 减少不必要的 API 调用
  
• 节省成本
  
• 提升响应速度
  
• 避免过时的建议
  

3.3.3 配置管理与持久化

问题：用户配置需要在应用重启后保持，且需要响应式更新。
解决方案：使用 VueUse 的 useStorage

1. let currentAbortController: AbortController | null = null;
3. // 取消旧请求
4. if (currentAbortController) {
5. currentAbortController.abort();
6. }
8. // 创建新的 AbortController
9. currentAbortController = new AbortController();
11. const response = await fetch(url, {
12. signal: currentAbortController.signal,
13. // ...
14. });

复制代码

优势：

• 自动同步到 localStorage
  
• 响应式更新，配置变化立即生效
  
• 支持默认值合并
  
• 类型安全
  

3.3.4 Ollama 模型列表动态获取

问题：Ollama 支持多种本地模型，需要动态获取可用模型列表。
解决方案：

1. import { useStorage } from "@vueuse/core";
3. export function useAIConfig() {
4. const config = useStorage(
5. "milkup-ai-config",
6. defaultAIConfig,
7. localStorage,
8. { mergeDefaults: true }
9. );
11. return { config };
12. }

复制代码

用户体验：

• 自动检测本地可用模型
  
• 下拉选择，无需手动输入
  
• 实时刷新
  

四、对比分析

4.1 即时渲染模式对比

特性milkup (feat-ir)TyporaNotionVS Code + Markdown Preview开源✅ 是❌ 否❌ 否✅ 是即时渲染✅ 是✅ 是✅ 是❌ 否（分栏预览）源码可见✅ 光标聚焦时显示✅ 光标聚焦时显示❌ 完全隐藏✅ 始终显示源码可编辑✅ 链接、图片可直接编辑⚠️ 部分支持❌ 否✅ 是技术栈ProseMirror + Milkdown自研自研CodeMirror扩展性✅ 插件化架构❌ 不支持插件⚠️ 有限的 API✅ VS Code 插件生态性能✅ 优秀✅ 优秀⚠️ 大文档较慢✅ 优秀跨平台✅ Windows/Mac/Linux✅ Windows/Mac/Linux✅ Web/桌面/移动✅ Windows/Mac/Linuxmilkup 的优势：

• 开源免费：完全开源，可自由定制
  
• 现代化技术栈：基于 Vue 3 + TypeScript + ProseMirror
  
• 可扩展性强：插件化架构，易于添加新功能
  
• 源码编辑能力：链接和图片可直接编辑，无需切换模式
  

Typora 的优势：

• 成熟稳定：经过多年打磨，功能完善
  
• 用户体验：细节打磨到位，交互流畅
  

Notion 的优势：

• 协作能力：多人实时协作
  
• 数据库功能：不仅是编辑器，还是知识管理工具
  

4.2 AI 续写功能对比

特性milkup (feat-ai)CursorNotion AIGitHub Copilot支持场景Markdown 文档代码编辑文档编辑代码编辑多提供商✅ OpenAI/Claude/Gemini/Ollama❌ 仅 OpenAI❌ 自有模型❌ 仅 GitHub 模型本地模型✅ 支持 Ollama❌ 否❌ 否❌ 否结构化理解✅ 理解标题层级✅ 理解代码结构⚠️ 有限✅ 理解代码上下文触发方式自动防抖触发自动触发手动触发自动触发接受方式Tab 键Tab 键点击按钮Tab 键开源✅ 是❌ 否❌ 否❌ 否隐私保护✅ 支持本地模型❌ 数据上传云端❌ 数据上传云端❌ 数据上传云端milkup 的优势：

• 多提供商支持：可自由选择 AI 服务
  
• 本地优先：支持 Ollama，保护隐私
  
• 开源透明：代码公开，可审计
  
• 针对 Markdown：专门优化文档写作场景
  

Cursor/Copilot 的优势：

• 代码专精：针对代码编辑优化
  
• 上下文更丰富：可以理解整个项目
  
• 成熟度高：经过大量用户验证
  

Notion AI 的优势：

• 多功能：不仅续写，还支持总结、翻译、改写等
  
• 集成度高：与 Notion 生态深度集成
  

五、总结与展望

5.1 技术总结

通过 feat-ir 和 feat-ai 两个分支的开发，milkup 在 Markdown 编辑器领域实现了重要突破：
即时渲染模式（feat-ir）：

• 基于 ProseMirror Decoration 系统实现
  
• 智能显示源码，光标聚焦时可见
  
• 支持链接和图片的即时编辑
  
• 性能优化，大文档流畅运行
  

AI 续写功能（feat-ai）：

• 支持 OpenAI、Claude、Gemini、Ollama 等多个提供商
  
• 结构化理解文档，提取标题层级和上下文
  
• 优雅的 UI 集成，半透明建议不干扰阅读
  
• 防抖和取消机制，优化性能和成本
  

技术亮点：

• 插件化架构：易于扩展和维护
  
• 现代化技术栈：Vue 3 + TypeScript + ProseMirror
  
• 用户体验优先：流畅的交互，优雅的视觉设计
  
• 开源透明：代码公开，社区驱动
  

5.2 未来展望

短期计划：

• 功能完善：
  

• 支持更多 Markdown 元素的即时渲染（表格、公式）
  
• AI 续写支持更多场景（代码块、列表）
  
• 添加 AI 改写、总结等功能
  

• 性能优化：
  

• 大文档性能优化
  
• AI 请求缓存机制
  
• 增量渲染
  

• 用户体验：
  

• 更丰富的快捷键
  
• 自定义主题
  
• 更多配置选项
  

长期愿景：

• 协作能力：
  

• 多人实时协作
  
• 版本控制集成
  
• 评论和批注
  

• 知识管理：
  

• 双向链接
  
• 标签系统
  
• 全文搜索
  

• AI 深度集成：
  

• 智能大纲生成
  
• 自动排版优化
  
• 多语言翻译
  
• 语法检查和改进建议
  

• 生态建设：
  

• 插件市场
  
• 主题商店
  
• 社区贡献
  

5.3 致谢

感谢所有为 milkup 项目做出贡献的开发者和用户。特别感谢：

• Milkdown 团队：提供了优秀的编辑器框架
  
• ProseMirror 社区：强大的编辑器内核
  
• Vue.js 团队：现代化的前端框架
  
• Anthropic：Claude Code 的开发支持
  

5.4 参考资源

项目地址：

• GitHub: milkup
  

结语

milkup 的开发是一次有趣的技术探索之旅。我们不仅实现了类似 Typora 的即时渲染模式，还在 AI 集成方面走在了前列。
作为一个开源项目，milkup 的成长离不开社区的支持。我们欢迎任何形式的贡献：代码、文档、建议、bug 报告。让我们一起打造一个更好的 Markdown 编辑器！
如果你对 milkup 感兴趣，欢迎：
<ul>⭐ Star 项目

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

鼓励转贴优秀软件安全工具和文档！

感谢，下载保存了

新版吗？好像是停更了吧。