Merge pull request #713 from gadget-inc/improveAutoRichTextInputLoading

Updated AutoRichTextInput to eager-load dependencies instead of in a useEffect
gadget-inc · Jan 3, 2025 · 6e0bf9f · 6e0bf9f
2 parents 3c80cbc + 45ef066
commit 6e0bf9f
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 49 deletions.
diff --git 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
@@ -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
@@ -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
@@ -1,64 +1,46 @@
-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";
 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}
     />
   );