# 新编辑器集成快速参考

## 🎯 核心原则

> **保留聊天面板,完全重写EditorPanel**

```
❌ 不要改: ChatPanel、ResizableLayout、App.tsx
✅ 完全重写: EditorPanel (删除旧代码,直接集成BlockEditor)
```

---

## 📁 文件变更速查

### ✅ 完全不变的文件

```
src/
├── App.tsx                        ✅ 不动
├── components/
│   ├── ChatPanel/                ✅ 整个目录不动
│   │   ├── ChatPanel.tsx
│   │   ├── MessageList.tsx
│   │   ├── MessageItem.tsx
│   │   └── MessageInput.tsx
│   ├── Layout/
│   │   └── ResizableLayout.tsx   ✅ 不动
│   └── ExportRecordList/         ✅ 不动
└── stores/
    ├── uiStore.ts                ✅ 不动
    └── chatStore.ts              ✅ 不动
```

### ⭐ 新增的文件

```
src/
├── components/
│   └── Editor/                   ⭐ 新增整个目录
│       ├── BlockEditor.tsx
│       ├── BlockCanvas.tsx
│       ├── BlockRenderer.tsx
│       ├── blocks/
│       └── toolbar/
├── stores/
│   └── editorStore.ts            ⭐ 新增
├── services/
│   └── blockService.ts           ⭐ 新增
├── types/
│   └── editor.ts                 ⭐ 新增
└── utils/
    ├── blockOperations.ts        ⭐ 新增
    ├── richTextConverter.ts      ⭐ 新增
    └── styleResolver.ts          ⭐ 新增
```

### 🔧 需要重写的文件

```
src/components/EditorPanel/
├── EditorPanel.tsx               🔧 完全重写(删除旧代码)
└── EditorPanel.css               🔧 新增
```

### ❌ 需要删除的文件

```
src/components/EditorPanel/
├── WYSIWYGEditor.tsx             ❌ 删除
├── WYSIWYGEditor.css             ❌ 删除
└── 其他MDXEditor相关文件          ❌ 删除

# MDXEditor依赖
package.json:
  - @mdxeditor/editor              ❌ 删除依赖
```

---

## 📝 EditorPanel重写示例

### 新的EditorPanel.tsx

```tsx
// src/components/EditorPanel/EditorPanel.tsx
import React from 'react';
import { BlockEditor } from '../Editor/BlockEditor';
import './EditorPanel.css';

interface EditorPanelProps {
  documentId: string;
  initialDocumentName?: string;
  onClose?: () => void;
}

/**
 * EditorPanel - 文档编辑面板
 * 极简外壳,直接集成BlockEditor
 */
export const EditorPanel: React.FC<EditorPanelProps> = ({
  documentId,
  initialDocumentName,
  onClose
}) => {
  return (
    <div className="editor-panel">
      <BlockEditor 
        documentId={documentId}
        onClose={onClose}
      />
    </div>
  );
};

export default EditorPanel;
```

### Props接口保持兼容

```typescript
// ✅ App.tsx传递的Props保持不变
<EditorPanel 
  documentId={previewDocumentId}
  initialDocumentName={previewDocumentName}
  onClose={handleCloseEditor}
/>

// EditorPanel接收后传递给BlockEditor
// initialDocumentName在BlockEditor内部使用
```

---

## 🧪 测试检查清单

### 基础功能

- [ ] 左侧聊天面板正常显示消息
- [ ] 发送消息功能正常
- [ ] 点击"预览"按钮打开右侧编辑器
- [ ] BlockEditor正确加载blocks数据
- [ ] 编辑并保存文档
- [ ] 关闭编辑器返回导出记录列表
- [ ] ResizableLayout拖拽调整正常

### 集成测试

```bash
# 1. 安装依赖(新增的packages)
npm install

# 2. 运行开发服务器
npm run dev

# 3. 测试流程
# - 发送聊天消息
# - 点击"预览"按钮
# - 验证BlockEditor显示
# - 编辑文档并保存
# - 关闭编辑器
# - 验证聊天面板功能未受影响
```

---

## 🚀 开发流程

### 第1步: 创建feature分支 (Week 1)

```bash
git checkout -b feature/new-block-editor
```

### 第2步: 独立开发BlockEditor (Week 1-6)

```bash
# 在新目录开发,不影响主分支
src/components/Editor/
```

### 第3步: 重写EditorPanel (Week 7)

```bash
# 1. 备份旧文件
git mv src/components/EditorPanel src/components/EditorPanel.backup

# 2. 创建新EditorPanel
mkdir src/components/EditorPanel
# 创建新的EditorPanel.tsx(极简外壳)

# 3. 删除MDXEditor依赖
npm uninstall @mdxeditor/editor
```

### 第4步: 本地测试 (Week 7)

```bash
npm run dev

# 测试:
# - 聊天功能
# - 打开编辑器
# - 编辑和保存
# - 关闭编辑器
# - 布局拖拽
```

### 第5步: 合并到主分支 (Week 8)

```bash
git checkout main
git merge feature/new-block-editor

# 部署到测试环境
npm run build
# 部署...

# 团队测试1-2周
```

### 第6步: 清理旧代码 (Week 9-10)

```bash
# 确认稳定后删除备份
rm -rf src/components/EditorPanel.backup

# 提交清理
git add .
git commit -m "chore: remove old editor backup"
```

---

## ⚠️ 注意事项

### DO ✅

- ✅ 创建feature分支独立开发
- ✅ 备份旧EditorPanel(git mv到.backup)
- ✅ 完全重写EditorPanel(极简外壳)
- ✅ 保持Props接口不变
- ✅ 完整测试聊天功能
- ✅ 确认稳定后删除备份和旧依赖

### DON'T ❌

- ❌ 不要修改App.tsx
- ❌ 不要修改ChatPanel任何文件
- ❌ 不要修改ResizableLayout
- ❌ 不要修改uiStore、chatStore
- ❌ 不要保留WYSIWYGEditor代码(除非在.backup中)

---

## 🔗 相关文档

- **集成详细方案**: [新编辑器与聊天面板集成方案.md](./新编辑器与聊天面板集成方案.md)
- **架构设计**: [新编辑器架构设计.md](./新编辑器架构设计.md)
- **开发手册**: [新编辑器开发手册.md](./新编辑器开发手册.md)
- **实现路线图**: [新编辑器实现路线图.md](./新编辑器实现路线图.md)

---

## 💡 快速问答

**Q: 聊天功能会受影响吗?**  
A: 不会,ChatPanel完全独立,EditorPanel只是右侧面板的一部分。

**Q: 需要修改多少文件?**  
A: 需要重写1个文件(EditorPanel.tsx),新增约20个文件在新目录。

**Q: 如何快速回滚?**  
A: 从Git历史恢复或使用备份目录(.backup)恢复。

**Q: 开发期间如何不影响其他人?**  
A: 在feature分支开发,主分支功能不受影响。合并前充分测试。

**Q: 旧的WYSIWYGEditor代码还保留吗?**  
A: 建议备份1-2周后删除,确保新编辑器稳定运行。

---

**版本**: v1.0  
**更新**: 2026-07-03