Feat: fix readonly value change

src/components/TextEditorReadOnly.tsx

@@ -9,18 +9,16 @@ import { useTextEditor } from "../hooks/useTextEditor";
 type TextEditorProps = {
   className?: string;
   value?: string;
-  tab?: 'editor' | 'preview';
 };
 
 const TextEditorReadOnly = ({
   value,
   className,
-  tab = 'preview',
   ...editorOptions
 }: TextEditorProps) => {
   const editor = useTextEditor({
     value,
-    tab,
+    tab: 'preview',
     editable: false,
     ...editorOptions
   })

src/hooks/useTextEditor.ts

@@ -147,14 +147,32 @@ export const useTextEditor = ({
     ...editorOptions,
   });
 
-  // set initial value for edition even if it's already set (below)
+  /**
+   * EDITABLE = true
+   * this updates the editor content on every value change
+   * set initial value for edition even if it's already set (below)
+   */
   useEffect(() => {
     if (!editor) return;
     // if (editor.isDestroyed) return;
     if (!(value && editor.isEmpty)) return;
+
     editor.commands.setContent(value);
   }, [editor, value]);
 
+  /**
+   * EDITABLE = false
+   * this updates the editor content on every value change for readonly mode
+   * it's useful for content that changed externally
+   * @example tab change
+   */
+  useEffect(() => {
+    if (!editor) return;
+    if (value && !editable && tab === 'preview') {
+      editor.commands.setContent(value);
+    }
+  }, [editor, value]);
+
 
   // useEffect(() => {
   //   editor?.off("selectionUpdate");