fix(editor): contentEditable回车导致段落溢出.ai-content

- handleAIGenerate中获取currentHtml前增加溢出段落合并逻辑
- 遍历.ai-content之后的兄弟<p>节点,移回.ai-content内
- 合并后同步更新contentRef和saveDraftToStorage
- 确保diff弹窗左侧能显示AI可编辑区域内的全部段落
This commit is contained in:
2026-04-19 18:10:40 +08:00
parent a3cafcb672
commit 6abd7d1e3a
5 changed files with 191 additions and 0 deletions

View File

@@ -0,0 +1,40 @@
# 需求分析
## 时间戳
2026-04-19 18:05
## 需求来源
用户发现 AI 修改确认弹窗的「原始版本」左侧只显示了一段内容,而编辑器中的 AI 可编辑区域实际上有 2-5 段内容。
## 现象
从用户提供的 DOM 源码可以清楚看到:
```html
<div class="ai-content">
<p><span>2腹腔镜探查...</span></p>
</div>
<p>3.切除胆囊:...</p>
<p>4.检查腹腔内无活动性出血及漏胆后:...</p>
<p>5.手术顺利,麻醉满意:...</p>
```
- `.ai-content` 内只有第 2 段
- 第 3、4、5 段变成了 `.ai-content` 的**兄弟节点**(在 `.ai-region` 内但在 `.ai-content` 外)
- 左侧 diff 弹窗只显示 `.ai-content.innerHTML`,所以只有第 2 段
## 根因分析
**浏览器 contentEditable 机制的锅**
当用户在 `.ai-content`(一个 contentEditable 的 div内按回车换行或粘贴包含多个段落的外部文本时浏览器的默认行为会截断当前的 `div`,在同级生成新的 `<p>` 标签。这导致后续的段落脱离了 `.ai-content` 父容器,变成了 `.ai-region` 的直接子节点。
## 解决方向
**代码层面修复**:在 `handleAIGenerate` 获取 `currentHtml` 之前,自动把 `.ai-region``.ai-content` 之外的 `<p>` 节点移回 `.ai-content`。这样:
1. `currentHtml` 就能包含所有段落
2. 左侧 diff 弹窗显示全部内容
3. `confirmAiInjection` 注入时替换 `.ai-content`,此时 `.ai-content` 已包含所有段落
## 约束条件
- 只移动 `.ai-content` 之后的 `<p>` 节点,不移动 `.ai-region-label` 或其他元素
- 移动后要同步更新 `contentRef.current``saveDraftToStorage()`
- 不改变现有 diff 弹窗和注入逻辑