完善编辑功能

doc/markdown-editor-design.md

@@ -172,9 +172,38 @@ MarkdownEditor.vue
 - **parseBlocks** 每次 modelValue 变化时调用，包含 N 次 `processSync`（N = 块数）
   - 典型文档（50 块）约需 50-100ms，在可接受范围内
   - 后续可优化为增量更新（只重新渲染变化的块）
-- **textarea auto-resize** 通过 `scrollHeight` 动态调整高度，无额外 DOM 操作
+- **CodeMirror 实例数** 完整编辑模式保持一个实例；混合模式只为当前活动块创建实例
 - **双栏滚动同步** 使用比例计算，避免频繁的绝对位置计算
 
+## 代码编辑体验
+
+Markdown 源码编辑由 CodeMirror 6 提供，完整编辑模式与混合模式的活动块复用
+`MarkdownCodeEditor.vue`。组件继续通过 `update:modelValue` 传递纯 Markdown 字符串，
+不会改变外层的保存和文件切换数据流。
+
+### 编辑能力
+
+- Markdown 语法着色，以及围栏代码块内部的语言着色
+- 括号、引号自动闭合，列表续行，Tab/Shift+Tab 缩进
+- 输入三个反引号或波浪号后自动打开语言提示
+- 语言提示支持继续输入筛选、方向键选择、Enter 确认和 Ctrl+Space 手动触发
+- 围栏语言确认后按 Enter 自动补齐结束围栏，并将光标放在代码区域
+- 最近使用的五种语言通过 localStorage 排在提示列表前面
+
+语言名称、别名和 Shiki 映射集中定义在 `src/lib/markdownLanguages.ts`。
+无法识别的围栏语言按纯文本处理，不阻断 Markdown 渲染或编辑。
+
+### 预览高亮
+
+预览仍先经过 unified 和 rehype-sanitize。安全过滤完成后，可信的 Shiki 高亮器
+替换 `<pre><code>` 节点，因此不会放宽 Markdown 原始 HTML 的安全策略。
+
+Shiki 核心和语言语法均按需加载：只有文档包含代码块时才初始化高亮器，只有某种
+语言第一次出现在预览中时才加载对应语法。高亮器和已加载语言会在应用生命周期内
+复用。Shiki 与 CodeMirror 共用 `--code-*` 语义色变量，每套应用主题同时定义界面色
+和代码色；CodeMirror 围栏内容还复用 Shiki 的 token 划分，确保混合模式点击前后逐词
+颜色一致。切换主题时预览与活动编辑器会即时使用新颜色，无需重新解析文档。
+
 ## 样式体系
 
 | 层级 | 设计 |
@@ -284,8 +313,8 @@ MarkdownEditor.vue
 
 paste 事件同时绑定在两种模式的 textarea 上：
 
-- **edit 模式**：`@paste="onEditorPaste"` — 操作 `props.modelValue` + `editorTextareaRef`
-- **mixed 模式**：`@paste="onBlockPaste"` — 操作 `editingSource` + `blockTextareaRef`（包含空文档和 block 编辑两种场景）
+- **edit 模式**：`@paste="onEditorPaste"` — 按 CodeMirror 当前选区替换 `modelValue`
+- **mixed 模式**：`@paste="onBlockPaste"` — 按活动块 CodeMirror 选区替换 `editingSource`
 
 粘贴后的 markdown 语法统一为：
 ```markdown