fix: 修复 Mermaid 容器语法换行符丢失问题 ## 问题描述 用户提供的 AI 评论审核流程 Mermaid 图表渲染失败,错误信息显示: - `flowchart TDStart` - `TD` 和 `Start` 之间缺少换行符 - 箭头符号被转换成全角 `–>` 而不是 `-->` ## 根本原因 WP-Markdown 插件将容器语法 `::: mermaid ... :::` 转换为 HTML 时: 1. 每一行代码都被包裹在 `

` 标签中 2. 行内的换行使用 `
` 标签表示 3. 使用 `textContent` 或 `innerText` 提取时,`
` 标签被忽略或转换为空格 4. 导致多行代码被合并成一行,Mermaid 语法解析失败 ## 修复方案 ### 1. 新增 `htmlToText()` 辅助函数 ```javascript htmlToText(html) { // 将

转换为换行符 let text = html.replace(//gi, '\n'); // 移除其他 HTML 标签 text = text.replace(/<[^>]+>/g, ''); // 解码 HTML 实体 text = text .replace(/ /g, ' ') .replace(/</g, '<') .replace(/>/g, '>') .replace(/&/g, '&') .replace(/"/g, '"') .replace(/'/g, "'"); return text; } ``` ### 2. 改进 `extractContainerContent()` 函数 - 使用 `innerHTML` 而不是 `textContent` 或 `innerText` - 调用 `htmlToText()` 将 `
` 标签转换为换行符 - 保留所有换行符和空行 - 添加详细的调试日志 ### 3. 处理流程 ``` 1. 检测到 ::: mermaid 开始标记 2. 提取 innerHTML(包含
标签) 3. 使用 htmlToText() 转换: -
→ \n - 移除其他 HTML 标签 - 解码 HTML 实体 4. 收集所有行内容 5. 使用 \n 连接所有行 6. 创建容器元素存储完整代码 ``` ## 测试验证 ### 测试用例 1:简单流程图 ```markdown ::: mermaid flowchart TD A[开始] --> B[处理] B --> C[结束] ::: ``` ### 测试用例 2:复杂流程图(AI 评论审核) - 包含 100+ 个节点 - 包含多行文本(`
` 标签) - 包含箭头符号(`-->`, `-->`) - 包含样式定义(`style` 语句) ### 预期结果 - ✅ 所有换行符正确保留 - ✅ 箭头符号不被转换 - ✅ 多行文本正确显示 - ✅ 样式定义正确应用 ## 影响范围 - 仅影响 Markdown 容器语法(`::: mermaid ... :::`) - 不影响其他格式(`

`, `
` 等)
- 向后兼容,不影响现有功能

## 相关文件

- `argontheme.js` - 修改 `extractContainerContent()` 和新增 `htmlToText()`
- `tests/test-ai-comment-flow.md` - 测试文档
- `docs/mermaid-usage-guide.md` - 使用指南

## 技术细节

### HTML 结构示例

WP-Markdown 生成的 HTML:
```html

::: mermaid
flowchart TD
Start([用户提交评论]) --> PreProcess[预处理]
:::

``` ### 提取过程 1. **原始 HTML**: `::: mermaid
flowchart TD
Start --> End
:::` 2. **htmlToText()**: `::: mermaid\nflowchart TD\nStart --> End\n:::` 3. **移除标记**: `flowchart TD\nStart --> End` 4. **最终代码**: ``` flowchart TD Start --> End ``` ## 注意事项 1. **性能影响**:使用 `innerHTML` 和正则替换,性能影响可忽略 2. **安全性**:只处理 Mermaid 代码块,不执行任何脚本 3. **兼容性**:支持所有现代浏览器 4. **调试**:添加详细日志,便于排查问题 ## 后续优化 1. 考虑支持更多 Markdown 容器语法(如 `::: warning`, `::: tip` 等) 2. 优化正则表达式性能 3. 添加单元测试