fix json field

app/src/ui/components/code/JsonEditor.tsx

@@ -1,4 +1,4 @@
-import { Suspense, lazy, useState } from "react";
+import { Suspense, lazy, useEffect, useState } from "react";
 import { twMerge } from "tailwind-merge";
 import type { CodeEditorProps } from "./CodeEditor";
 import { useDebouncedCallback } from "@mantine/hooks";
@@ -7,7 +7,8 @@ const CodeEditor = lazy(() => import("./CodeEditor"));
 export type JsonEditorProps = Omit<CodeEditorProps, "value" | "onChange"> & {
    value?: object;
    onChange?: (value: object) => void;
-   emptyAs?: "null" | "undefined";
+   emptyAs?: any;
+   onInvalid?: (error: Error) => void;
 };
 
 export function JsonEditor({
@@ -16,29 +17,45 @@ export function JsonEditor({
    value,
    onChange,
    onBlur,
-   emptyAs = "undefined",
+   emptyAs = undefined,
+   onInvalid,
    ...props
 }: JsonEditorProps) {
    const [editorValue, setEditorValue] = useState<string | null | undefined>(
-      JSON.stringify(value, null, 2),
+      value ? JSON.stringify(value, null, 2) : emptyAs,
    );
+   const [error, setError] = useState<boolean>(false);
    const handleChange = useDebouncedCallback((given: string) => {
-      const value = given === "" ? (emptyAs === "null" ? null : undefined) : given;
       try {
-         setEditorValue(value);
-         onChange?.(value ? JSON.parse(value) : value);
-      } catch (e) {}
-   }, 500);
+         setError(false);
+         onChange?.(given ? JSON.parse(given) : emptyAs);
+      } catch (e) {
+         onInvalid?.(e as Error);
+         setError(true);
+      }
+   }, 250);
    const handleBlur = (e) => {
-      setEditorValue(JSON.stringify(value, null, 2));
+      try {
+         const formatted = JSON.stringify(value, null, 2);
+         setEditorValue(formatted);
+      } catch (e) {}
+
       onBlur?.(e);
    };
+
+   useEffect(() => {
+      if (!editorValue) {
+         setEditorValue(value ? JSON.stringify(value, null, 2) : emptyAs);
+      }
+   }, [value]);
+
    return (
       <Suspense fallback={null}>
          <CodeEditor
             className={twMerge(
                "flex w-full border border-muted",
                !editable && "opacity-70",
+               error && "border-red-500",
                className,
             )}
             editable={editable}