Switch to using the monaco editor as the code editor

enclave-manager/web/src/components/CodeEditor.tsx

@@ -1,7 +1,7 @@
 import { Box } from "@chakra-ui/react";
 import { Editor, OnChange, OnMount } from "@monaco-editor/react";
 import { editor } from "monaco-editor";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { isDefined } from "../utils";
 
 type CodeEditorProps = {
@@ -14,8 +14,12 @@ export const CodeEditor = ({ text, onTextChange, showLineNumbers }: CodeEditorPr
   const isReadOnly = !isDefined(onTextChange);
   const [editor, setEditor] = useState<editor.IStandaloneCodeEditor>();
 
-  const handleContentSizeChange = (e: editor.IContentSizeChangedEvent) => {
-    editor?.layout({ width: 500, height: e.contentHeight });
+  const resizeEditorBasedOnContent = () => {
+    if (isDefined(editor)) {
+      const contentHeight = Math.min(750, editor.getContentHeight() || 10);
+      editor.layout({ width: 500, height: contentHeight });
+      editor.layout();
+    }
   };
 
   const handleMount: OnMount = (editor, monaco) => {
@@ -27,19 +31,19 @@ export const CodeEditor = ({ text, onTextChange, showLineNumbers }: CodeEditorPr
       colors: {},
     });
     monaco.editor.setTheme("kurtosis-theme");
-    if (!isReadOnly) {
-      editor.onDidContentSizeChange(handleContentSizeChange);
-    }
   };
 
+  useEffect(() => resizeEditorBasedOnContent(), [editor]);
+
   const handleChange: OnChange = (value, ev) => {
     if (isDefined(value) && onTextChange) {
       onTextChange(value);
+      resizeEditorBasedOnContent();
     }
   };
 
   return (
-    <Box width={"100%"} minHeight={`${editor?.getContentHeight() || 10}px`}>
+    <Box width={"100%"} minHeight={`${editor?.getLayoutInfo().height || 10}px`}>
       <Editor
         onMount={handleMount}
         value={text}

enclave-manager/web/src/components/enclaves/configuration/inputs/JSONArgumentInput.tsx

@@ -1,25 +1,28 @@
-import { Textarea } from "@chakra-ui/react";
+import { Controller } from "react-hook-form";
 import { stringifyError } from "../../../../utils";
+import { CodeEditor } from "../../../CodeEditor";
 import { useEnclaveConfigurationFormContext } from "../EnclaveConfigurationForm";
 import { KurtosisArgumentTypeInputProps } from "./KurtosisArgumentTypeInput";
 
 export const JSONArgumentInput = (props: Omit<KurtosisArgumentTypeInputProps, "type">) => {
-  const { register } = useEnclaveConfigurationFormContext();
+  const { control } = useEnclaveConfigurationFormContext();
 
   return (
-    <Textarea
-      {...register(props.name, {
-        disabled: props.disabled,
+    <Controller
+      render={({ field }) => <CodeEditor text={field.value} onTextChange={field.onChange} />}
+      name={props.name}
+      defaultValue={"{}"}
+      rules={{
         required: props.isRequired,
-        value: "{}",
         validate: (value: string) => {
           try {
             JSON.parse(value);
           } catch (err: any) {
             return `This is not valid JSON. ${stringifyError(err)}`;
           }
         },
-      })}
+      }}
+      disabled={props.disabled}
     />
   );
 };