nanhaoluo b4ba37a6c5 fix: 修复 Mermaid 容器语法换行符丢失问题 ...

## 问题描述

用户提供的 AI 评论审核流程 Mermaid 图表渲染失败，错误信息显示：
- `flowchart TDStart` - `TD` 和 `Start` 之间缺少换行符
- 箭头符号被转换成全角 `–>` 而不是 `-->`

## 根本原因

WP-Markdown 插件将容器语法 `::: mermaid ... :::` 转换为 HTML 时：
1. 每一行代码都被包裹在 `<p>` 标签中
2. 行内的换行使用 `<br>` 标签表示
3. 使用 `textContent` 或 `innerText` 提取时，`<br>` 标签被忽略或转换为空格
4. 导致多行代码被合并成一行，Mermaid 语法解析失败

## 修复方案

### 1. 新增 `htmlToText()` 辅助函数

```javascript
htmlToText(html) {
	// 将 <br> 和 <br/> 转换为换行符
	let text = html.replace(/<br\s*\/?>/gi, '\n');
	// 移除其他 HTML 标签
	text = text.replace(/<[^>]+>/g, '');
	// 解码 HTML 实体
	text = text
		.replace(/&nbsp;/g, ' ')
		.replace(/&lt;/g, '<')
		.replace(/&gt;/g, '>')
		.replace(/&amp;/g, '&')
		.replace(/&quot;/g, '"')
		.replace(/&#039;/g, "'");
	return text;
}
```

### 2. 改进 `extractContainerContent()` 函数

- 使用 `innerHTML` 而不是 `textContent` 或 `innerText`
- 调用 `htmlToText()` 将 `<br>` 标签转换为换行符
- 保留所有换行符和空行
- 添加详细的调试日志

### 3. 处理流程

```
1. 检测到 ::: mermaid 开始标记
2. 提取 innerHTML（包含 <br> 标签）
3. 使用 htmlToText() 转换：
   - <br> → \n
   - 移除其他 HTML 标签
   - 解码 HTML 实体
4. 收集所有行内容
5. 使用 \n 连接所有行
6. 创建容器元素存储完整代码
```

## 测试验证

### 测试用例 1：简单流程图
```markdown
::: mermaid
flowchart TD
    A[开始] --> B[处理]
    B --> C[结束]
:::
```

### 测试用例 2：复杂流程图（AI 评论审核）
- 包含 100+ 个节点
- 包含多行文本（`<br/>` 标签）
- 包含箭头符号（`-->`, `-->`）
- 包含样式定义（`style` 语句）

### 预期结果
- ✅ 所有换行符正确保留
- ✅ 箭头符号不被转换
- ✅ 多行文本正确显示
- ✅ 样式定义正确应用

## 影响范围

- 仅影响 Markdown 容器语法（`::: mermaid ... :::`）
- 不影响其他格式（`<div class="mermaid">`, `<pre><code>` 等）
- 向后兼容，不影响现有功能

## 相关文件

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

## 技术细节

### HTML 结构示例

WP-Markdown 生成的 HTML：
```html
<p>::: mermaid<br>
flowchart TD<br>
    Start([用户提交评论]) --> PreProcess[预处理]<br>
:::</p>
```

### 提取过程

1. **原始 HTML**: `::: mermaid<br>flowchart TD<br>Start --> End<br>:::`
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. 添加单元测试

2026-01-24 20:49:32 +08:00

3.3 KiB

Raw Blame History

View Raw