fix(component): 修复组件模态框编辑器内容同步问题

master
钟良源 6 days ago
parent 7fb4ce5ff8
commit b5f2584e0f

@ -39,9 +39,11 @@ const EditorViewer: React.FC<{ content: string }> = ({ content }) => {
export default function EditorSection({ initialContent, visible, onChange }: EditorSectionProps) { export default function EditorSection({ initialContent, visible, onChange }: EditorSectionProps) {
const [isClient, setIsClient] = useState(false); const [isClient, setIsClient] = useState(false);
const [editorLoaded, setEditorLoaded] = useState(false); const [editorLoaded, setEditorLoaded] = useState(false);
const [currentContent, setCurrentContent] = useState(initialContent || ''); const [editorKey, setEditorKey] = useState(0); // 用于强制重新创建编辑器
const editorRef = useRef<any>(null); const editorRef = useRef<any>(null);
const editorInstanceRef = useRef<ToastEditor | null>(null); const editorInstanceRef = useRef<ToastEditor | null>(null);
const initialContentRef = useRef(initialContent); // 记录上一次的 initialContent
const isUserEditingRef = useRef(false); // 标记用户是否正在编辑
useEffect(() => { useEffect(() => {
if (!isSSR && visible && !editorRef.current) { if (!isSSR && visible && !editorRef.current) {
@ -56,15 +58,30 @@ export default function EditorSection({ initialContent, visible, onChange }: Edi
}); });
} }
// 更新当前内容当初始内容变化时 // 当 visible 从 false 变为 true 时,重置编辑标记
setCurrentContent(initialContent || ''); if (visible) {
}, [initialContent, visible]); isUserEditingRef.current = false;
}
}, [visible]);
// 只在 initialContent 从外部变化时重新创建编辑器(排除用户输入导致的变化)
useEffect(() => {
// 如果用户正在编辑,不要重新创建编辑器
if (isUserEditingRef.current) {
return;
}
if (initialContent !== initialContentRef.current) {
initialContentRef.current = initialContent;
setEditorKey(prev => prev + 1); // 改变 key 强制重新创建
}
}, [initialContent]);
// 在服务端或组件未加载完成时,使用 Viewer 模式显示内容 // 在服务端或组件未加载完成时,使用 Viewer 模式显示内容
if (!isClient || !editorLoaded || !visible) { if (!isClient || !editorLoaded || !visible) {
return ( return (
<div className="mt-8"> <div className="mt-8">
<EditorViewer content={currentContent || ''} /> <EditorViewer content={initialContent || ''} />
</div> </div>
); );
} }
@ -74,15 +91,17 @@ export default function EditorSection({ initialContent, visible, onChange }: Edi
return ( return (
<div className="mt-8"> <div className="mt-8">
<DynamicEditor <DynamicEditor
key={visible ? 'editor-visible' : 'editor-hidden'} // 强制重新创建组件 ref={editorInstanceRef}
initialValue={currentContent} key={`editor-${editorKey}`} // 只在 initialContent 外部变化时改变 key
initialValue={initialContent || ''}
initialEditType="markdown" initialEditType="markdown"
onChange={() => { onChange={() => {
// 标记用户正在编辑
isUserEditingRef.current = true;
// 获取编辑器实例并读取内容 // 获取编辑器实例并读取内容
const editorInstance = editorRef.current?.getInstance?.(); if (editorInstanceRef.current && onChange) {
if (editorInstance && onChange) { const content = editorInstanceRef.current.getInstance().getMarkdown();
const content = editorInstance.getMarkdown();
setCurrentContent(content);
onChange(content); onChange(content);
} }
}} }}

@ -437,6 +437,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
}); });
// 设置其他状态 // 设置其他状态
console.log('baseInfo', baseInfo);
setSelectedImage(baseInfo.logoUrl || ''); setSelectedImage(baseInfo.logoUrl || '');
setDescription(baseInfo.desc || ''); setDescription(baseInfo.desc || '');
setShowSaveBtn(true); setShowSaveBtn(true);
@ -738,6 +739,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
visible={visible} visible={visible}
initialContent={description} initialContent={description}
disabled={isReadOnly} disabled={isReadOnly}
onChange={(value) => setDescription(value)}
/> />
</div> </div>
</div> </div>

Loading…
Cancel
Save