admin
6abd7d1e3a
- handleAIGenerate中获取currentHtml前增加溢出段落合并逻辑 - 遍历.ai-content之后的兄弟<p>节点，移回.ai-content内 - 合并后同步更新contentRef和saveDraftToStorage - 确保diff弹窗左侧能显示AI可编辑区域内的全部段落
47 lines
1.9 KiB
Markdown
47 lines
1.9 KiB
Markdown
# 实现方案
|
||
|
||
## 修改文件
|
||
- `src/pages/ReportEditor.tsx`
|
||
|
||
## 修改位置：`handleAIGenerate` 函数内，获取 `currentHtml` 之前（约 line 885）
|
||
|
||
**原代码**：
|
||
```tsx
|
||
const targetRegionEl = editorRef.current?.querySelector(`.ai-region[data-ai-id="${actualTargetId}"] .ai-content`) as HTMLElement | null;
|
||
const currentHtml = targetRegionEl ? targetRegionEl.innerHTML.replace(/​/g, '').trim() : '';
|
||
```
|
||
|
||
**新代码**：
|
||
```tsx
|
||
const targetRegionEl = editorRef.current?.querySelector(`.ai-region[data-ai-id="${actualTargetId}"] .ai-content`) as HTMLElement | null;
|
||
// 合并溢出的段落：浏览器 contentEditable 可能在回车时把 <p> 生成到 .ai-content 之外
|
||
const aiRegion = editorRef.current?.querySelector(`.ai-region[data-ai-id="${actualTargetId}"]`);
|
||
if (aiRegion && targetRegionEl) {
|
||
let nextSibling = targetRegionEl.nextElementSibling;
|
||
while (nextSibling) {
|
||
const toMove = nextSibling;
|
||
nextSibling = nextSibling.nextElementSibling;
|
||
if (toMove.tagName === 'P') {
|
||
targetRegionEl.appendChild(toMove);
|
||
}
|
||
}
|
||
// 同步更新 contentRef 和草稿
|
||
if (editorRef.current) {
|
||
contentRef.current = editorRef.current.innerHTML;
|
||
saveDraftToStorage();
|
||
}
|
||
}
|
||
const currentHtml = targetRegionEl ? targetRegionEl.innerHTML.replace(/​/g, '').trim() : '';
|
||
```
|
||
|
||
**变更点**：
|
||
1. 新增 `aiRegion` 查询，获取 `.ai-region` 容器
|
||
2. 遍历 `targetRegionEl.nextElementSibling`，把所有 `<p>` 标签移回 `targetRegionEl`
|
||
3. 移动完成后同步更新 `contentRef.current` 和调用 `saveDraftToStorage()`
|
||
4. 然后才获取 `currentHtml`
|
||
|
||
**为什么这样可行**：
|
||
- `confirmAiInjection` 只替换 `.ai-content` 的 innerHTML
|
||
- 修复后 `.ai-content` 已包含所有段落，注入时自然替换全部
|
||
- 溢出的段落不会再留在 `.ai-region` 内造成重复
|