fix(editor): contentEditable回车导致段落溢出.ai-content
- handleAIGenerate中获取currentHtml前增加溢出段落合并逻辑 - 遍历.ai-content之后的兄弟<p>节点,移回.ai-content内 - 合并后同步更新contentRef和saveDraftToStorage - 确保diff弹窗左侧能显示AI可编辑区域内的全部段落
This commit is contained in:
40
工程分析/20260419_1805/需求分析.md
Normal file
40
工程分析/20260419_1805/需求分析.md
Normal 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 弹窗和注入逻辑
|
||||
Reference in New Issue
Block a user