fix(EditorSection): 修复编辑器内容更新和可见性控制问题

master
钟良源 2 months ago
parent bd62b6350e
commit c2d1876a5e

@ -6,6 +6,7 @@ import { isSSR } from '@/utils/is';
interface EditorSectionProps { interface EditorSectionProps {
initialContent?: string; initialContent?: string;
visible: boolean;
onChange?: (content: string) => void; onChange?: (content: string) => void;
} }
@ -34,9 +35,11 @@ const EditorViewer: React.FC<{ content: string }> = ({ content }) => {
return <div ref={viewerRef} dangerouslySetInnerHTML={{ __html: 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 [isClient, setIsClient] = useState(false);
const [currentContent, setCurrentContent] = useState(initialContent || '');
const editorRef = useRef<any>(null); const editorRef = useRef<any>(null);
const editorInstanceRef = useRef<ToastEditor | null>(null);
useEffect(() => { useEffect(() => {
if (!isSSR) { if (!isSSR) {
@ -49,13 +52,16 @@ export default function EditorSection({ initialContent, onChange }: EditorSectio
console.error('Failed to load Toast UI Editor:', error); console.error('Failed to load Toast UI Editor:', error);
}); });
} }
}, []);
// 更新当前内容当初始内容变化时
setCurrentContent(initialContent || '');
}, [initialContent, visible]);
// 在服务端或组件未加载完成时,使用 Viewer 模式显示内容 // 在服务端或组件未加载完成时,使用 Viewer 模式显示内容
if (!isClient || !editorRef.current) { if (!isClient || !editorRef.current || !visible) {
return ( return (
<div className="mt-8"> <div className="mt-8">
<EditorViewer content={initialContent || ''} /> <EditorViewer content={currentContent || ''} />
</div> </div>
); );
} }
@ -65,13 +71,15 @@ export default function EditorSection({ initialContent, onChange }: EditorSectio
return ( return (
<div className="mt-8"> <div className="mt-8">
<DynamicEditor <DynamicEditor
initialValue={initialContent} key={visible ? 'editor-visible' : 'editor-hidden'} // 强制重新创建组件
initialValue={currentContent}
initialEditType="markdown" initialEditType="markdown"
onChange={() => { onChange={() => {
// 获取编辑器实例并读取内容 // 获取编辑器实例并读取内容
const editorInstance = editorRef.current?.getInstance?.(); const editorInstance = editorRef.current?.getInstance?.();
if (editorInstance && onChange) { if (editorInstance && onChange) {
const content = editorInstance.getMarkdown(); const content = editorInstance.getMarkdown();
setCurrentContent(content);
onChange(content); onChange(content);
} }
}} }}

@ -696,9 +696,8 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
<div className={styles['markdown-editor']}> <div className={styles['markdown-editor']}>
<div className={styles['markdown-label']}></div> <div className={styles['markdown-label']}></div>
<EditorSection <EditorSection
key={visible ? description : 'closed'} visible={visible}
initialContent={description} initialContent={description}
onChange={(content) => setDescription(content)}
/> />
</div> </div>
</div> </div>

@ -259,9 +259,8 @@ const CopyComponentModal: React.FC<CopyComponentModalProps> = ({
<FormItem label="描述"> <FormItem label="描述">
<EditorSection <EditorSection
key={visible ? description : 'closed'} visible={visible}
initialContent={description} initialContent={description}
onChange={(content) => setDescription(content)}
/> />
</FormItem> </FormItem>
</Form> </Form>

Loading…
Cancel
Save