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:
@@ -298,6 +298,7 @@ export default function EditTemplate() {
|
||||
/>
|
||||
) : (
|
||||
<RichTextEditor
|
||||
key={`editor-${eventId}-${channelId}`}
|
||||
content={body}
|
||||
onChange={setBody}
|
||||
placeholder={__('Enter notification message')}
|
||||
|
||||
Reference in New Issue
Block a user