From cd9fce74b51a43622a8ed2c23fb0de9fb1bbe777 Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Fri, 7 Nov 2025 17:34:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=B7=BB=E5=8A=A0=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E6=9C=8D=E5=8A=A1=E7=AB=AF=E6=B8=B2=E6=9F=93=E7=9A=84?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EditorSection/index.tsx | 69 ++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 src/components/EditorSection/index.tsx

diff --git a/src/components/EditorSection/index.tsx b/src/components/EditorSection/index.tsx
new file mode 100644
index 0000000..a465c7b
--- /dev/null
+++ b/src/components/EditorSection/index.tsx
@@ -0,0 +1,69 @@
+'use client';
+import React, { useEffect, useRef, useState } from 'react';
+import type { Editor as ToastEditor } from '@toast-ui/react-editor';
+import '@toast-ui/editor/dist/toastui-editor.css';
+import { isSSR } from '@/utils/is';
+
+interface EditorSectionProps {
+  initialContent?: string;
+}
+
+// 创建一个 Viewer 组件用于服务端渲染
+const EditorViewer: React.FC<{ content: string }> = ({ content }) => {
+  const viewerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isSSR && viewerRef.current) {
+      // 在客户端激活时，动态加载 Viewer 并渲染内容
+      import('@toast-ui/editor/dist/toastui-editor-viewer').then((module) => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const { Viewer } = module;
+        new Viewer({
+          el: viewerRef.current!,
+          initialValue: content || ''
+        });
+      }).catch((error) => {
+        console.error('Failed to load Toast UI Viewer:', error);
+      });
+    }
+  }, [content]);
+
+  // 服务端直接渲染 HTML 内容
+  return <div ref={viewerRef} dangerouslySetInnerHTML={{ __html: content || '' }} />;
+};
+
+export default function EditorSection({ initialContent }: EditorSectionProps) {
+  const [isClient, setIsClient] = useState(false);
+  const editorRef = useRef<typeof ToastEditor | null>(null);
+
+  useEffect(() => {
+    if (!isSSR) {
+      setIsClient(true);
+
+      // 动态导入编辑器组件
+      import('@toast-ui/react-editor').then((module) => {
+        editorRef.current = module.Editor;
+      }).catch((error) => {
+        console.error('Failed to load Toast UI Editor:', error);
+      });
+    }
+  }, []);
+
+  // 在服务端或组件未加载完成时，使用 Viewer 模式显示内容
+  if (!isClient || !editorRef.current) {
+    return (
+      <div className="mt-8">
+        <EditorViewer content={initialContent || ''} />
+      </div>
+    );
+  }
+
+  const DynamicEditor = editorRef.current;
+
+  return (
+    <div className="mt-8">
+      <DynamicEditor initialValue={initialContent} initialEditType="markdown" />
+    </div>
+  );
+}
\ No newline at end of file