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:
dwindown
2025-11-13 00:33:15 +07:00
parent 0fda7f7d36
commit cef6b55555
2 changed files with 8 additions and 2 deletions

View File

@@ -57,8 +57,13 @@ export function RichTextEditor({
// Update editor content when prop changes (fix for default value not showing)
useEffect(() => {
if (editor && content !== editor.getHTML()) {
editor.commands.setContent(content);
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);
}
}
}, [content, editor]);

View File

@@ -298,6 +298,7 @@ export default function EditTemplate() {
/>
) : (
<RichTextEditor
key={`editor-${eventId}-${channelId}`}
content={body}
onChange={setBody}
placeholder={__('Enter notification message')}