Files

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

- handleAIGenerate中获取currentHtml前增加溢出段落合并逻辑
- 遍历.ai-content之后的兄弟<p>节点，移回.ai-content内
- 合并后同步更新contentRef和saveDraftToStorage
- 确保diff弹窗左侧能显示AI可编辑区域内的全部段落

2026-04-19 18:10:40 +08:00

1.7 KiB

Raw Blame History

需求分析

时间戳

2026-04-19 18:05

需求来源

用户发现 AI 修改确认弹窗的「原始版本」左侧只显示了一段内容，而编辑器中的 AI 可编辑区域实际上有 2-5 段内容。

现象

从用户提供的 DOM 源码可以清楚看到：

<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。这样：

currentHtml 就能包含所有段落
左侧 diff 弹窗显示全部内容
confirmAiInjection 注入时替换 .ai-content，此时 .ai-content 已包含所有段落

约束条件

只移动 .ai-content 之后的 <p> 节点，不移动 .ai-region-label 或其他元素
移动后要同步更新 contentRef.current 和 saveDraftToStorage()
不改变现有 diff 弹窗和注入逻辑

1.7 KiB Raw Blame History Unescape Escape