EditorPanel.tsx 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. /**
  2. * EditorPanel.tsx - 文档编辑面板(新版)
  3. *
  4. * 完全重写版本,直接集成BlockEditor替代旧的MDXEditor
  5. * 保持Props接口兼容,确保与App.tsx的集成不需要修改
  6. *
  7. * @module components/EditorPanel
  8. */
  9. import React from 'react';
  10. import { EditorWithOutline } from '../Editor/EditorWithOutline';
  11. import './EditorPanel.css';
  12. // ══════════════════════════════════════════════════════════════════════════════
  13. // Component Props
  14. // ══════════════════════════════════════════════════════════════════════════════
  15. export interface EditorPanelProps {
  16. /** 文档ID */
  17. documentId: string;
  18. /** 初始文档名称(可选,从聊天消息传递) */
  19. initialDocumentName?: string | null;
  20. /** 关闭回调 */
  21. onClose: () => void;
  22. }
  23. // ══════════════════════════════════════════════════════════════════════════════
  24. // Component
  25. // ══════════════════════════════════════════════════════════════════════════════
  26. /**
  27. * EditorPanel - 文档编辑面板
  28. *
  29. * 新版本:极简外壳,直接集成BlockEditor
  30. *
  31. * 变更说明:
  32. * - ✅ Props接口保持不变,与旧版本完全兼容
  33. * - ✅ 删除了WYSIWYGEditor(MDXEditor)
  34. * - ✅ 直接使用BlockEditor作为编辑器内核
  35. * - ✅ 保留文档大纲功能(由BlockEditor内部处理)
  36. *
  37. * @example
  38. * ```tsx
  39. * <EditorPanel
  40. * documentId="doc-123"
  41. * initialDocumentName="地质报告.docx"
  42. * onClose={() => closePreview()}
  43. * />
  44. * ```
  45. */
  46. export const EditorPanel: React.FC<EditorPanelProps> = ({
  47. documentId,
  48. initialDocumentName,
  49. onClose,
  50. }) => {
  51. return (
  52. <div className="editor-panel" data-testid="editor-panel">
  53. {/* 集成带大纲的编辑器 */}
  54. <EditorWithOutline
  55. documentId={documentId}
  56. documentName={initialDocumentName}
  57. defaultShowOutline={true}
  58. onClose={onClose}
  59. />
  60. </div>
  61. );
  62. };
  63. export default EditorPanel;