fix: Force RichTextEditor to update with template data
## Issue: - API returns data ✅ - Console shows template data ✅ - But form inputs remain empty ❌ ## Root Cause: RichTextEditor not re-rendering when template data loads ## Fixes: ### 1. Add Key Prop to Force Re-render ✅ ```tsx <RichTextEditor key={`editor-${eventId}-${channelId}`} // Force new instance content={body} onChange={setBody} variables={variableKeys} /> ``` - Key changes when route params change - Forces React to create new editor instance - Ensures fresh state with new template data ### 2. Improve RichTextEditor Sync Logic ✅ ```tsx useEffect(() => { if (editor && content) { const currentContent = editor.getHTML(); if (content !== currentContent) { console.log("RichTextEditor: Updating content"); editor.commands.setContent(content); } } }, [content, editor]); ``` - Check if content actually changed - Add logging for debugging - Prevent unnecessary updates ## Expected Result: 1. Template data loads from API ✅ 2. Subject input fills with default ✅ 3. Body editor fills with default ✅ 4. Variables populate dropdown ✅ Test by refreshing the page!
This commit is contained in:
@@ -57,9 +57,14 @@ export function RichTextEditor({
|
|||||||
|
|
||||||
// Update editor content when prop changes (fix for default value not showing)
|
// Update editor content when prop changes (fix for default value not showing)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (editor && content !== editor.getHTML()) {
|
if (editor && content) {
|
||||||
|
const currentContent = editor.getHTML();
|
||||||
|
// Only update if content is different (avoid infinite loops)
|
||||||
|
if (content !== currentContent) {
|
||||||
|
console.log('RichTextEditor: Updating content', { content, currentContent });
|
||||||
editor.commands.setContent(content);
|
editor.commands.setContent(content);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}, [content, editor]);
|
}, [content, editor]);
|
||||||
|
|
||||||
if (!editor) {
|
if (!editor) {
|
||||||
|
|||||||
@@ -298,6 +298,7 @@ export default function EditTemplate() {
|
|||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<RichTextEditor
|
<RichTextEditor
|
||||||
|
key={`editor-${eventId}-${channelId}`}
|
||||||
content={body}
|
content={body}
|
||||||
onChange={setBody}
|
onChange={setBody}
|
||||||
placeholder={__('Enter notification message')}
|
placeholder={__('Enter notification message')}
|
||||||
|
|||||||
Reference in New Issue
Block a user