Merge branch 'develop'

frontend/admin-panel/src/components/ui/RichTextEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect } from 'react';
 import {
   Bold,
   Italic,
@@ -41,6 +41,25 @@ export default function RichTextEditor({
   className = '',
 }: RichTextEditorProps) {
   const editorRef = useRef<HTMLDivElement>(null);
+  const isTypingRef = useRef(false);
+  const isMountedRef = useRef(false);
+
+  // Sync value from props on initial mount or when external change occurs (not while active)
+  useEffect(() => {
+    if (!editorRef.current) return;
+    if (!isMountedRef.current) {
+      editorRef.current.innerHTML = value || '';
+      isMountedRef.current = true;
+      return;
+    }
+
+    // Only update innerHTML if it's different and not currently focused/typing
+    if (editorRef.current.innerHTML !== (value || '')) {
+      if (!isTypingRef.current && document.activeElement !== editorRef.current) {
+        editorRef.current.innerHTML = value || '';
+      }
+    }
+  }, [value]);
 
   const isMountedRef = useRef(false);
 
@@ -71,7 +90,11 @@ export default function RichTextEditor({
 
   const handleInput = () => {
     if (editorRef.current) {
+      isTypingRef.current = true;
       onChange(editorRef.current.innerHTML);
+      setTimeout(() => {
+        isTypingRef.current = false;
+      }, 50);
     }
   };
 
@@ -241,6 +264,7 @@ export default function RichTextEditor({
       <div
         ref={editorRef}
         contentEditable
+        suppressContentEditableWarning
         onInput={handleInput}
         data-placeholder={placeholder}
         className="p-4 min-h-[140px] max-h-[350px] overflow-y-auto outline-none text-xs leading-relaxed text-gray-800 font-vazir empty:before:content-[attr(data-placeholder)] empty:before:text-gray-400"