From c2d1876a5ea526fb1d5577c000bf6263d62a6c2f Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Fri, 28 Nov 2025 17:46:51 +0800
Subject: [PATCH] =?UTF-8?q?fix(EditorSection):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E5=86=85=E5=AE=B9=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E5=92=8C=E5=8F=AF=E8=A7=81=E6=80=A7=E6=8E=A7=E5=88=B6=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EditorSection/index.tsx         | 18 +++++++++++++-----
 .../componentList/addComponentModal.tsx        |  3 +--
 .../componentMarket/copyComponentModal.tsx     |  3 +--
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/EditorSection/index.tsx b/src/components/EditorSection/index.tsx
index 9c00b94..6bbb027 100644
--- a/src/components/EditorSection/index.tsx
+++ b/src/components/EditorSection/index.tsx
@@ -6,6 +6,7 @@ import { isSSR } from '@/utils/is';
 
 interface EditorSectionProps {
   initialContent?: string;
+  visible: boolean;
   onChange?: (content: string) => void;
 }
 
@@ -34,9 +35,11 @@ const EditorViewer: React.FC<{ content: string }> = ({ content }) => {
   return <div ref={viewerRef} dangerouslySetInnerHTML={{ __html: content || '' }} />;
 };
 
-export default function EditorSection({ initialContent, onChange }: EditorSectionProps) {
+export default function EditorSection({ initialContent, visible, onChange }: EditorSectionProps) {
   const [isClient, setIsClient] = useState(false);
+  const [currentContent, setCurrentContent] = useState(initialContent || '');
   const editorRef = useRef<any>(null);
+  const editorInstanceRef = useRef<ToastEditor | null>(null);
 
   useEffect(() => {
     if (!isSSR) {
@@ -49,13 +52,16 @@ export default function EditorSection({ initialContent, onChange }: EditorSectio
         console.error('Failed to load Toast UI Editor:', error);
       });
     }
-  }, []);
+    
+    // 更新当前内容当初始内容变化时
+    setCurrentContent(initialContent || '');
+  }, [initialContent, visible]);
 
   // 在服务端或组件未加载完成时，使用 Viewer 模式显示内容
-  if (!isClient || !editorRef.current) {
+  if (!isClient || !editorRef.current || !visible) {
     return (
       <div className="mt-8">
-        <EditorViewer content={initialContent || ''} />
+        <EditorViewer content={currentContent || ''} />
       </div>
     );
   }
@@ -65,13 +71,15 @@ export default function EditorSection({ initialContent, onChange }: EditorSectio
   return (
     <div className="mt-8">
       <DynamicEditor
-        initialValue={initialContent}
+        key={visible ? 'editor-visible' : 'editor-hidden'} // 强制重新创建组件
+        initialValue={currentContent}
         initialEditType="markdown"
         onChange={() => {
           // 获取编辑器实例并读取内容
           const editorInstance = editorRef.current?.getInstance?.();
           if (editorInstance && onChange) {
             const content = editorInstance.getMarkdown();
+            setCurrentContent(content);
             onChange(content);
           }
         }}
diff --git a/src/pages/componentDevelopment/componentList/addComponentModal.tsx b/src/pages/componentDevelopment/componentList/addComponentModal.tsx
index fd2226c..6e90c80 100644
--- a/src/pages/componentDevelopment/componentList/addComponentModal.tsx
+++ b/src/pages/componentDevelopment/componentList/addComponentModal.tsx
@@ -696,9 +696,8 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
             <div className={styles['markdown-editor']}>
               <div className={styles['markdown-label']}>描述：</div>
               <EditorSection
-                key={visible ? description : 'closed'}
+                visible={visible}
                 initialContent={description}
-                onChange={(content) => setDescription(content)}
               />
             </div>
           </div>
diff --git a/src/pages/componentMarket/copyComponentModal.tsx b/src/pages/componentMarket/copyComponentModal.tsx
index 7c497ce..536c46e 100644
--- a/src/pages/componentMarket/copyComponentModal.tsx
+++ b/src/pages/componentMarket/copyComponentModal.tsx
@@ -259,9 +259,8 @@ const CopyComponentModal: React.FC<CopyComponentModalProps> = ({
 
         <FormItem label="描述">
           <EditorSection
-            key={visible ? description : 'closed'}
+            visible={visible}
             initialContent={description}
-            onChange={(content) => setDescription(content)}
           />
         </FormItem>
       </Form>