From 45ef06643b6808337b5120dd471f3158f337cefe Mon Sep 17 00:00:00 2001
From: MillanWangGadget <millan@gadget.dev>
Date: Fri, 3 Jan 2025 13:53:18 -0500
Subject: [PATCH] Updated AutoRichTextInput to eager-load dependencies instead
 of in a useEffect

---
 .../react/spec/auto/PolarisAutoForm.spec.tsx  |  2 +-
 .../react/spec/auto/support/widgetModel.ts    |  2 +-
 .../spec/useActionFormRichFields.spec.tsx     |  4 +-
 .../src/auto/shared/AutoRichTextInput.tsx     | 72 +++++++------------
 4 files changed, 31 insertions(+), 49 deletions(-)

diff --git a/packages/react/spec/auto/PolarisAutoForm.spec.tsx b/packages/react/spec/auto/PolarisAutoForm.spec.tsx
index c2609f388..c4ccc0906 100644
--- a/packages/react/spec/auto/PolarisAutoForm.spec.tsx
+++ b/packages/react/spec/auto/PolarisAutoForm.spec.tsx
@@ -301,7 +301,7 @@ describe("PolarisAutoForm", () => {
         category: [],
         color: null,
         description: {
-          markdown: "example _rich_ **text**",
+          markdown: "example *rich* **text**",
         },
         embedding: null,
         inventoryCount: 1234,
diff --git a/packages/react/spec/auto/support/widgetModel.ts b/packages/react/spec/auto/support/widgetModel.ts
index f50c38e98..f0787f3a2 100644
--- a/packages/react/spec/auto/support/widgetModel.ts
+++ b/packages/react/spec/auto/support/widgetModel.ts
@@ -405,7 +405,7 @@ export const getWidgetRecord = (overrides?: {
       color: null,
       createdAt: "2024-06-25T13:39:19.645Z",
       description: {
-        markdown: "example _rich_ **text**",
+        markdown: "example *rich* **text**",
         truncatedHTML: "<p>example <em>rich</em> <strong>text</strong></p> ",
         __typename: "RichText",
       },
diff --git a/packages/react/spec/useActionFormRichFields.spec.tsx b/packages/react/spec/useActionFormRichFields.spec.tsx
index 3225c46fc..ff0a7a9e2 100644
--- a/packages/react/spec/useActionFormRichFields.spec.tsx
+++ b/packages/react/spec/useActionFormRichFields.spec.tsx
@@ -291,7 +291,7 @@ describe("useActionFormNFiles", () => {
             __typename: "StoredFile",
           },
           body: {
-            markdown: "example _rich_ **text**",
+            markdown: "example *rich* **text**",
             truncatedHTML: "<p>example <em>rich</em> <strong>text</strong></p> ",
             __typename: "RichText",
           },
@@ -314,7 +314,7 @@ describe("useActionFormNFiles", () => {
     });
 
     expect(result.current.getValues("post.title")).toBe("example value for title");
-    expect(result.current.getValues("post.body.markdown")).toBe("example _rich_ **text**");
+    expect(result.current.getValues("post.body.markdown")).toBe("example *rich* **text**");
 
     let submitPromise: Promise<any>;
 
diff --git a/packages/react/src/auto/shared/AutoRichTextInput.tsx b/packages/react/src/auto/shared/AutoRichTextInput.tsx
index 81c8ef76b..7c171a7d7 100644
--- a/packages/react/src/auto/shared/AutoRichTextInput.tsx
+++ b/packages/react/src/auto/shared/AutoRichTextInput.tsx
@@ -1,4 +1,6 @@
-import React, { useEffect, useRef, useState } from "react";
+import * as mdxModule from "@mdxeditor/editor";
+import "@mdxeditor/editor/style.css";
+import React, { useEffect, useRef } from "react";
 import { useFormContext } from "../../useActionForm.js";
 import { get } from "../../utils.js";
 import { autoInput } from "../AutoInput.js";
@@ -6,59 +8,39 @@ import { useStringInputController } from "../hooks/useStringInputController.js";
 import { multiref } from "../hooks/utils.js";
 import type { AutoRichTextInputProps, MDXEditorMethods } from "./AutoRichTextInputProps.js";
 
+const {
+  MDXEditor,
+  BoldItalicUnderlineToggles,
+  ListsToggle,
+  CodeToggle,
+  CreateLink,
+  headingsPlugin,
+  listsPlugin,
+  quotePlugin,
+  thematicBreakPlugin,
+  markdownShortcutPlugin,
+  linkDialogPlugin,
+  diffSourcePlugin,
+  toolbarPlugin,
+  DiffSourceToggleWrapper,
+  UndoRedo,
+  BlockTypeSelect,
+  Separator,
+} = mdxModule;
+
 const AutoRichTextInput = autoInput<AutoRichTextInputProps>((props) => {
   const { formState } = useFormContext();
   const { field, control, editorRef, ...rest } = props;
   const controller = useStringInputController({ field, control });
   const innerRef = useRef<MDXEditorMethods>(null);
-  const [isEditorLoaded, setIsEditorLoaded] = useState(false);
-  const [mdxModule, setMdxModule] = useState<any>(null);
-
-  useEffect(() => {
-    const loadEditor = async () => {
-      try {
-        const module = await import("@mdxeditor/editor");
-        await import("@mdxeditor/editor/style.css");
-        setMdxModule(module);
-        setIsEditorLoaded(true);
-      } catch (error) {
-        console.warn("Optional dependency not found, some features may not be available.");
-      }
-    };
-
-    void loadEditor();
-  }, []);
 
   useEffect(() => {
-    if (innerRef.current && isEditorLoaded) {
+    if (innerRef.current) {
       innerRef.current.setMarkdown(controller.value?.markdown ?? "");
     }
-  }, [controller.value, isEditorLoaded]);
-
-  if (!isEditorLoaded || !mdxModule) {
-    return <div>Loading editor...</div>;
-  }
-
-  const {
-    MDXEditor,
-    BoldItalicUnderlineToggles,
-    ListsToggle,
-    CodeToggle,
-    CreateLink,
-    headingsPlugin,
-    listsPlugin,
-    quotePlugin,
-    thematicBreakPlugin,
-    markdownShortcutPlugin,
-    linkDialogPlugin,
-    diffSourcePlugin,
-    toolbarPlugin,
-    DiffSourceToggleWrapper,
-    UndoRedo,
-    BlockTypeSelect,
-    Separator,
-  } = mdxModule;
+  }, [controller.value]);
 
+  const refs = multiref(innerRef, editorRef) as any;
   return (
     <MDXEditor
       plugins={[
@@ -90,7 +72,7 @@ const AutoRichTextInput = autoInput<AutoRichTextInputProps>((props) => {
       contentEditableClassName="autoform-prose"
       markdown={controller.value?.markdown ?? ""}
       onChange={(markdown: any) => controller.onChange({ markdown })}
-      ref={multiref(innerRef, editorRef)}
+      {...(refs && { ref: refs })}
       {...rest}
     />
   );