Updates

components/lib/editors/TinyMCE/index.tsx

@@ -24,6 +24,7 @@ export type TinyMCEEditorProps<KeyType extends string> = {
     showLabel?: boolean;
     useParentCSS?: boolean;
     placeholder?: string;
+    refreshDependencyArray?: any[];
 };
 
 /**
@@ -32,7 +33,7 @@ export type TinyMCEEditorProps<KeyType extends string> = {
  */
 export default function TinyMCEEditor<KeyType extends string>({
     options,
-    editorRef,
+    editorRef: passedEditorRef,
     setEditor: passedSetEditor,
     wrapperProps,
     defaultValue,
@@ -43,10 +44,12 @@ export default function TinyMCEEditor<KeyType extends string>({
     showLabel,
     useParentCSS,
     placeholder,
+    refreshDependencyArray,
 }: TinyMCEEditorProps<KeyType>) {
     const { tinyMCE } = useTinyMCE();
 
     const editorComponentRef = React.useRef<HTMLDivElement>(null);
+    const editorRef = passedEditorRef || React.useRef<Editor>(null);
 
     const EDITOR_VALUE_CHANGE_TIMEOUT = 500;
 
@@ -97,7 +100,10 @@ export default function TinyMCEEditor<KeyType extends string>({
                 "body { font-family:Helvetica,Arial,sans-serif; font-size:14px; background-color: transparent }",
             init_instance_callback: (editor) => {
                 setEditor(editor as any);
-                if (editorRef) editorRef.current = editor as any;
+                if (editorRef) {
+                    editorRef.current = editor;
+                    passedSetEditor?.(editor);
+                }
                 if (defaultValue) editor.setContent(defaultValue);
                 setReady(true);
 
@@ -140,7 +146,15 @@ export default function TinyMCEEditor<KeyType extends string>({
                 : undefined;
             instance?.remove();
         };
-    }, [tinyMCE, themeReady, refresh]);
+    }, [tinyMCE, themeReady, refresh, ...(refreshDependencyArray || [])]);
+
+    React.useEffect(() => {
+        const instance = editorRef.current;
+
+        if (instance) {
+            instance.setContent(defaultValue || "");
+        }
+    }, [defaultValue]);
 
     return (
         <div
@@ -148,7 +162,7 @@ export default function TinyMCEEditor<KeyType extends string>({
             className={twMerge(
                 "relative w-full [&_.tox-tinymce]:!border-none",
                 "bg-background-light dark:bg-background-dark",
-                wrapperWrapperProps?.className
+                wrapperWrapperProps?.className,
             )}
             onInput={(e) => {
                 console.log(`Input Detected`);
@@ -159,7 +173,7 @@ export default function TinyMCEEditor<KeyType extends string>({
                     className={twMerge(
                         "absolute z-10 -top-[7px] left-[10px] px-2 text-xs",
                         "bg-background-light dark:bg-background-dark text-gray-500",
-                        "dark:text-white/80 rounded"
+                        "dark:text-white/80 rounded",
                     )}
                     htmlFor={id}
                 >
@@ -170,7 +184,7 @@ export default function TinyMCEEditor<KeyType extends string>({
                 {...borderProps}
                 className={twMerge(
                     "dark:border-white/30 p-0 pt-2",
-                    borderProps?.className
+                    borderProps?.className,
                 )}
             >
                 <div
@@ -183,7 +197,7 @@ export default function TinyMCEEditor<KeyType extends string>({
                     }}
                     className={twMerge(
                         "bg-slate-200 dark:bg-slate-700 rounded-sm w-full",
-                        "twui-rte-wrapper"
+                        "twui-rte-wrapper",
                     )}
                     id={id}
                 ></div>