argon-theme/commit-msg-container-fixes.txt

fix: 修复容器语法和 WP-Markdown 的两个关键问题

## 问题描述

根据用户反馈，发现两个严重问题：

### 问题 1: WP-Markdown document.write 重复输出

**错误信息**：
```
No diagram type detected matching given configuration for text: 
document.write("flowchart TD ...")flowchart TD ...
```

**原因分析**：
- WP-Markdown 生成的 HTML 结构：`<div class="mermaid"><script>document.write("...")</script>flowchart TD ...</div>`
- script 标签后面还有一份重复的代码
- 当前代码只提取了 script 内容，但没有移除 script 标签
- 导致后续的 `element.textContent` 包含了重复内容

### 问题 2: 容器语法空行导致内容截断

**错误信息**：
```
Parse error on line 1: flowchart TD Sta
Expecting 'NEWLINE', 'SPACE', 'GRAPH', got 'ALPHA'
```

**原因分析**：
- 使用 `::: mermaid ... :::` 语法时，WP-Markdown 遇到空行会分割内容
- 空行后的内容被识别为新的段落或代码块
- 原有的单元素检测逻辑无法处理跨多个元素的情况
- 导致只提取到第一个元素的内容（"flowchart TD Sta"）

## 修复方案

### 修复 1: 移除 script 标签避免重复（argontheme.js:4575-4578）

在 `extractMermaidCode()` 函数中，提取完 script 内容后立即移除标签：

```javascript
// 重要：移除 script 标签，避免重复渲染
// WP-Markdown 会在 script 后面再输出一次代码
scriptTag.remove();
```

**效果**：
- ✅ 避免 document.write 内容和后续文本重复
- ✅ 确保只提取一次完整代码
- ✅ 不影响其他格式的提取

### 修复 2: 跨元素收集容器语法内容（argontheme.js:4468-4570）

完全重写 `detectContainerBlocks()` 和 `extractContainerContent()` 函数：

**新的检测逻辑**：
1. 查找所有可能包含 `::: mermaid` 的元素（p, pre, code, div）
2. 找到开始标记后，收集所有后续兄弟元素
3. 直到遇到 `:::` 结束标记
4. 合并所有内容，保留空行

**关键代码**：
```javascript
// 收集所有内容直到结束标记
while (currentElement) {
    processedElements.add(currentElement);
    let text = currentElement.textContent.trim();
    
    // 检查是否是结束标记
    if (text === ':::' || text.endsWith(':::')) {
        foundEnd = true;
        break;
    }
    
    // 添加当前元素的内容
    if (text) {
        codeLines.push(text);
    } else {
        // 空元素，添加空行
        codeLines.push('');
    }
    
    currentElement = currentElement.nextElementSibling;
}

// 合并所有行
let code = codeLines.join('\n').trim();
```

**效果**：
- ✅ 支持跨多个元素收集内容
- ✅ 正确处理空行（保留为空字符串）
- ✅ 完整提取所有 mermaid 代码
- ✅ 避免内容截断

## 测试场景

### 场景 1: WP-Markdown 格式
```html
<div class="mermaid">
    <script>document.write("flowchart TD\n    A --> B")</script>
    flowchart TD
        A --> B
</div>
```
**预期**：只提取 script 中的内容，忽略后面的重复文本

### 场景 2: 容器语法（无空行）
```
::: mermaid
flowchart TD
    A --> B
:::
```
**预期**：正常提取完整代码

### 场景 3: 容器语法（有空行）
```
::: mermaid
flowchart TD
    A[开始]
    
    B[处理]
    
    C[结束]
    
    A --> B --> C
:::
```
**预期**：保留所有空行，完整提取代码

### 场景 4: 容器语法（被分割成多个元素）
```html
<p>::: mermaid</p>
<p>flowchart TD</p>
<p>    A[开始]</p>
<p></p>
<p>    B[处理]</p>
<p>:::</p>
```
**预期**：跨元素收集，合并为完整代码

## 影响范围

- ✅ 修复了两个严重的渲染错误
- ✅ 不影响其他标记格式
- ✅ 向后兼容
- ✅ 提升容器语法的鲁棒性

## 相关文件

- `argontheme.js` - 核心修复
- `docs/mermaid-usage-guide.md` - 更新文档

## 提交信息

```
fix: 修复容器语法和 WP-Markdown 的两个关键问题

- 修复 WP-Markdown document.write 重复输出问题
- 改进容器语法检测，支持跨多个元素收集内容
- 解决空行导致内容被分割成多个元素的问题
```

Commit: b6d9f8c

## 后续建议

1. **测试验证**：在实际文章中测试包含空行的复杂 mermaid 图表
2. **性能优化**：如果页面有大量元素，可以考虑优化查找算法
3. **错误处理**：添加更详细的日志，帮助调试边缘情况