Files
Mdeical_Sur_Report/工程分析/20260419_1805/实现方案.md
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.9 KiB
Raw Blame History

实现方案

修改文件

  • src/pages/ReportEditor.tsx

修改位置:handleAIGenerate 函数内,获取 currentHtml 之前(约 line 885

原代码

      const targetRegionEl = editorRef.current?.querySelector(`.ai-region[data-ai-id="${actualTargetId}"] .ai-content`) as HTMLElement | null;
      const currentHtml = targetRegionEl ? targetRegionEl.innerHTML.replace(/&#8203;/g, '').trim() : '';

新代码

      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(/&#8203;/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 内造成重复