From cef6b555551a91efc8bd38dd7e8fe7bbba573d06 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 13 Nov 2025 00:33:15 +0700
Subject: [PATCH] fix: Force RichTextEditor to update with template data
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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!
---
 admin-spa/src/components/ui/rich-text-editor.tsx         | 9 +++++++--
 .../src/routes/Settings/Notifications/EditTemplate.tsx   | 1 +
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/admin-spa/src/components/ui/rich-text-editor.tsx b/admin-spa/src/components/ui/rich-text-editor.tsx
index b4c145b..1405178 100644
--- a/admin-spa/src/components/ui/rich-text-editor.tsx
+++ b/admin-spa/src/components/ui/rich-text-editor.tsx
@@ -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]);
 
diff --git a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
index f54768f..1f13d7b 100644
--- a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
+++ b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
@@ -298,6 +298,7 @@ export default function EditTemplate() {
                 />
               ) : (
                 <RichTextEditor
+                  key={`editor-${eventId}-${channelId}`}
                   content={body}
                   onChange={setBody}
                   placeholder={__('Enter notification message')}