fix(ui): Make all usage of CustomEditor dynamic

TracecatHQ · Dec 3, 2024 · 2dc85dc · 2dc85dc
1 parent f2d99e9
commit 2dc85dc
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 59 deletions.
diff --git a/frontend/src/app/registry/actions/edit/page.tsx b/frontend/src/app/registry/actions/edit/page.tsx
@@ -1,15 +1,13 @@
 "use client"
 
 import React from "react"
-import dynamic from "next/dynamic"
 import { useRouter, useSearchParams } from "next/navigation"
 import {
   RegistryActionUpdate,
   TemplateAction_Output,
   TemplateActionDefinition,
 } from "@/client"
 import { zodResolver } from "@hookform/resolvers/zod"
-import { type EditorProps } from "@monaco-editor/react"
 import { AlertTriangleIcon, ArrowLeftIcon, Loader2 } from "lucide-react"
 import { Controller, useForm } from "react-hook-form"
 import YAML from "yaml"
@@ -30,15 +28,9 @@ import { Button } from "@/components/ui/button"
 import { Form, FormMessage } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { DynamicCustomEditor } from "@/components/editor/dynamic"
 import { CenteredSpinner } from "@/components/loading/spinner"
 
-let CustomEditor: React.ComponentType<EditorProps> | undefined
-if (typeof window !== "undefined") {
-  CustomEditor = dynamic(() => import("@/components/editor/editor"), {
-    ssr: false,
-  })
-}
-
 export default function EditActionPage() {
   const searchParams = useSearchParams()
   const origin = searchParams.get("origin")
@@ -224,14 +216,12 @@ function EditTemplateActionForm({
                     Edit the action template in YAML. Changes will be reflected
                     in workflows immediately.
                   </span>
-                  {CustomEditor && (
-                    <CustomEditor
-                      className="h-96 w-full"
-                      defaultLanguage="yaml"
-                      value={field.value}
-                      onChange={field.onChange}
-                    />
-                  )}
+                  <DynamicCustomEditor
+                    className="h-96 w-full"
+                    defaultLanguage="yaml"
+                    value={field.value}
+                    onChange={field.onChange}
+                  />
                   {error && (
                     <FormMessage className="flex items-center space-x-1">
                       <AlertTriangleIcon className="size-4 fill-red-500 stroke-white" />

diff --git a/frontend/src/app/registry/actions/new/page.tsx b/frontend/src/app/registry/actions/new/page.tsx
@@ -1,11 +1,9 @@
 "use client"
 
 import React from "react"
-import dynamic from "next/dynamic"
 import { useRouter, useSearchParams } from "next/navigation"
 import { TemplateAction_Output, TemplateActionDefinition } from "@/client"
 import { zodResolver } from "@hookform/resolvers/zod"
-import { type EditorProps } from "@monaco-editor/react"
 import { AlertTriangleIcon, ArrowLeftIcon, Loader2 } from "lucide-react"
 import { Controller, useForm } from "react-hook-form"
 import YAML from "yaml"
@@ -30,15 +28,9 @@ import { Button } from "@/components/ui/button"
 import { Form, FormMessage } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { DynamicCustomEditor } from "@/components/editor/dynamic"
 import { CenteredSpinner } from "@/components/loading/spinner"
 
-let CustomEditor: React.ComponentType<EditorProps> | undefined
-if (typeof window !== "undefined") {
-  CustomEditor = dynamic(() => import("@/components/editor/editor"), {
-    ssr: false,
-  })
-}
-
 export default function NewActionPage() {
   const searchParams = useSearchParams()
   const origin = searchParams.get("origin")
@@ -214,20 +206,18 @@ function NewTemplateActionForm({
             <span className="text-xs text-muted-foreground">
               Edit the action template in YAML.
             </span>
-            {CustomEditor && (
-              <Controller
-                name="definition"
-                control={methods.control}
-                render={({ field }) => (
-                  <CustomEditor
-                    className="h-96 w-full"
-                    defaultLanguage="yaml"
-                    value={field.value}
-                    onChange={field.onChange}
-                  />
-                )}
-              />
-            )}
+            <Controller
+              name="definition"
+              control={methods.control}
+              render={({ field }) => (
+                <DynamicCustomEditor
+                  className="h-96 w-full"
+                  defaultLanguage="yaml"
+                  value={field.value}
+                  onChange={field.onChange}
+                />
+              )}
+            />
             {error && (
               <FormMessage className="flex items-center space-x-1">
                 <AlertTriangleIcon className="size-4 fill-red-500 stroke-white" />

diff --git a/frontend/src/components/editor/dynamic.tsx b/frontend/src/components/editor/dynamic.tsx
@@ -0,0 +1,20 @@
+"use client"
+
+import dynamic from "next/dynamic"
+
+import { type CustomEditorProps } from "@/components/editor/editor"
+import { CenteredSpinner } from "@/components/loading/spinner"
+
+let DynamicCustomEditor: React.ComponentType<CustomEditorProps>
+if (typeof window !== "undefined") {
+  DynamicCustomEditor = dynamic(() => import("@/components/editor/editor"), {
+    ssr: false,
+    loading: () => <CenteredSpinner />,
+  })
+} else {
+  const EmptyEditor = (props: CustomEditorProps) => <></>
+  EmptyEditor.displayName = "EmptyEditor"
+  DynamicCustomEditor = EmptyEditor
+}
+
+export { DynamicCustomEditor }
diff --git a/frontend/src/components/editor/editor.tsx b/frontend/src/components/editor/editor.tsx
@@ -125,18 +125,20 @@ interface ISuggestController {
   }
 }
 
+export interface CustomEditorProps extends EditorProps {
+  className?: string
+  onKeyDown?: () => void
+  workspaceId?: string
+  workflowId?: string | null
+}
+
 export function CustomEditor({
   className,
   onKeyDown,
   workspaceId,
   workflowId,
   ...props
-}: EditorProps & {
-  className?: string
-  onKeyDown?: () => void
-  workspaceId?: string
-  workflowId?: string | null
-}) {
+}: CustomEditorProps) {
   const completionDisposableRef = useRef<IDisposable | null>(null)
   const hoverDisposableRef = useRef<IDisposable | null>(null)
   const tokenizerDisposableRef = useRef<IDisposable | null>(null)

diff --git a/frontend/src/components/nav/workbench-nav.tsx b/frontend/src/components/nav/workbench-nav.tsx
@@ -85,7 +85,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip"
 import { toast } from "@/components/ui/use-toast"
-import { CustomEditor } from "@/components/editor"
+import { DynamicCustomEditor } from "@/components/editor/dynamic"
 
 export function WorkbenchNav() {
   const {
@@ -469,7 +469,7 @@ function WorkflowManualTrigger({
                       render={({ field }) => (
                         <FormItem>
                           <FormControl>
-                            <CustomEditor
+                            <DynamicCustomEditor
                               className="size-full h-36"
                               defaultLanguage="yaml"
                               value={field.value}

diff --git a/frontend/src/components/workbench/panel/action-panel.tsx b/frontend/src/components/workbench/panel/action-panel.tsx
@@ -71,7 +71,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip"
 import { CopyButton } from "@/components/copy-button"
-import { CustomEditor } from "@/components/editor"
+import { DynamicCustomEditor } from "@/components/editor/dynamic"
 import { getIcon } from "@/components/icons"
 import { JSONSchemaTable } from "@/components/jsonschema-table"
 import { CenteredSpinner } from "@/components/loading/spinner"
@@ -536,7 +536,7 @@ export function ActionPanel({
                         name="inputs"
                         control={methods.control}
                         render={({ field }) => (
-                          <CustomEditor
+                          <DynamicCustomEditor
                             className="h-72 w-full"
                             value={field.value}
                             onChange={field.onChange}
@@ -609,7 +609,7 @@ export function ActionPanel({
                         name="control_flow.run_if"
                         control={methods.control}
                         render={({ field }) => (
-                          <CustomEditor
+                          <DynamicCustomEditor
                             className="h-24 w-full"
                             defaultLanguage="yaml"
                             value={field.value}
@@ -652,7 +652,7 @@ export function ActionPanel({
                         name="control_flow.for_each"
                         control={methods.control}
                         render={({ field }) => (
-                          <CustomEditor
+                          <DynamicCustomEditor
                             className="h-24 w-full"
                             defaultLanguage="yaml"
                             value={field.value}
@@ -693,7 +693,7 @@ export function ActionPanel({
                         name="control_flow.options"
                         control={methods.control}
                         render={({ field }) => (
-                          <CustomEditor
+                          <DynamicCustomEditor
                             className="h-24 w-full"
                             defaultLanguage="yaml"
                             value={field.value}
@@ -752,7 +752,7 @@ export function ActionPanel({
                         name="control_flow.retry_policy"
                         control={methods.control}
                         render={({ field }) => (
-                          <CustomEditor
+                          <DynamicCustomEditor
                             className="h-24 w-full"
                             defaultLanguage="yaml"
                             value={field.value}

diff --git a/frontend/src/components/workbench/panel/workflow-panel.tsx b/frontend/src/components/workbench/panel/workflow-panel.tsx
@@ -48,7 +48,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Textarea } from "@/components/ui/textarea"
 import { toast } from "@/components/ui/use-toast"
 import { CopyButton } from "@/components/copy-button"
-import { CustomEditor } from "@/components/editor"
+import { DynamicCustomEditor } from "@/components/editor/dynamic"
 
 const workflowConfigFormSchema = z.object({
   title: z.string(),
@@ -348,7 +348,7 @@ export function WorkflowPanel({
                         name="config"
                         control={methods.control}
                         render={({ field }) => (
-                          <CustomEditor
+                          <DynamicCustomEditor
                             className="h-48 w-full"
                             defaultLanguage="yaml"
                             value={field.value}
@@ -405,7 +405,7 @@ export function WorkflowPanel({
                         name="expects"
                         control={methods.control}
                         render={({ field }) => (
-                          <CustomEditor
+                          <DynamicCustomEditor
                             className="h-48 w-full"
                             defaultLanguage="yaml"
                             value={field.value}
@@ -455,7 +455,7 @@ export function WorkflowPanel({
                         name="returns"
                         control={methods.control}
                         render={({ field }) => (
-                          <CustomEditor
+                          <DynamicCustomEditor
                             className="h-48 w-full"
                             defaultLanguage="yaml"
                             value={field.value}
@@ -508,7 +508,7 @@ export function WorkflowPanel({
                         name="static_inputs"
                         control={methods.control}
                         render={({ field }) => (
-                          <CustomEditor
+                          <DynamicCustomEditor
                             className="h-48 w-full"
                             defaultLanguage="yaml"
                             value={field.value}