Updates

components/lib/mdx/markdown/MarkdownEditor.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps } from "react";
+import React, { ComponentProps, useRef } from "react";
 import { twMerge } from "tailwind-merge";
 import MarkdownEditorPreviewComponent from "./MarkdownEditorPreviewComponent";
 import MarkdownEditorComponent from "./MarkdownEditorComponent";
@@ -6,6 +6,7 @@ import MarkdownEditorSelectorButtons from "./MarkdownEditorSelectorButtons";
 import Row from "../../layout/Row";
 import Stack from "../../layout/Stack";
 import AceEditor from "../../editors/AceEditor";
+import useStatus from "../../hooks/useStatus";
 
 type Props = {
     value?: string;
@@ -29,17 +30,30 @@ export default function MarkdownEditor({
     const [value, setValue] = React.useState<any>(existingValue || ``);
 
     const [sideBySide, setSideBySide] = React.useState(
-        defaultSideBySide || false
+        defaultSideBySide || false,
     );
     const [preview, setPreview] = React.useState(false);
+    const { refresh, setRefresh } = useStatus();
+    const updatingFromExtValueRef = useRef(false);
 
     const maxHeight = existingMaxHeight || "600px";
 
     React.useEffect(() => {
+        if (updatingFromExtValueRef.current) return;
         setExistingValue?.(value);
         changeHandler?.(value);
     }, [value]);
 
+    React.useEffect(() => {
+        if (!existingValue) return;
+        updatingFromExtValueRef.current = true;
+        setValue(existingValue);
+        setTimeout(() => {
+            updatingFromExtValueRef.current = false;
+            setRefresh((prev) => prev + 1);
+        }, 500);
+    }, [existingValue]);
+
     return (
         <Stack className="w-full items-stretch">
             {!noToggleButtons && (
@@ -52,13 +66,14 @@ export default function MarkdownEditor({
                 <Row
                     className={twMerge(
                         `w-full grid xl:grid-cols-2 gap-6 max-h-[${maxHeight}]`,
-                        "overflow-auto"
+                        "overflow-auto",
                     )}
                 >
                     <MarkdownEditorComponent
                         setValue={setValue}
                         value={value}
                         maxHeight={maxHeight}
+                        refreshDepArr={[refresh]}
                         {...editorProps}
                     />
                     <MarkdownEditorPreviewComponent
@@ -80,6 +95,7 @@ export default function MarkdownEditor({
                             setValue={setValue}
                             value={value}
                             maxHeight={maxHeight}
+                            refreshDepArr={[refresh]}
                             {...editorProps}
                         />
                     )}