refactor: JsonEditor

Author: cgoinglove

client/src/components/DynamicJsonForm.tsx

@@ -108,6 +108,21 @@ const DynamicJsonForm = ({
     }
   };
 
+  const formatJson = () => {
+    try {
+      const jsonStr = rawJsonValue.trim();
+      if (!jsonStr) {
+        return;
+      }
+      const formatted = JSON.stringify(JSON.parse(jsonStr), null, 2);
+      setRawJsonValue(formatted);
+      debouncedUpdateParent(formatted);
+      setJsonError(undefined);
+    } catch (err) {
+      setJsonError(err instanceof Error ? err.message : "Invalid JSON");
+    }
+  };
+
   const renderFormFields = (
     propSchema: JsonSchemaType,
     currentValue: JsonValue,
@@ -353,7 +368,12 @@ const DynamicJsonForm = ({
 
   return (
     <div className="space-y-4">
-      <div className="flex justify-end">
+      <div className="flex justify-end space-x-2">
+        {isJsonMode && (
+          <Button variant="outline" size="sm" onClick={formatJson}>
+            Format JSON
+          </Button>
+        )}
         <Button variant="outline" size="sm" onClick={handleSwitchToFormMode}>
           {isJsonMode ? "Switch to Form" : "Switch to JSON"}
         </Button>

client/src/components/JsonEditor.tsx

@@ -3,7 +3,6 @@ import Editor from "react-simple-code-editor";
 import Prism from "prismjs";
 import "prismjs/components/prism-json";
 import "prismjs/themes/prism.css";
-import { Button } from "@/components/ui/button";
 
 interface JsonEditorProps {
   value: string;
@@ -16,49 +15,25 @@ const JsonEditor = ({
   onChange,
   error: externalError,
 }: JsonEditorProps) => {
-  const [editorContent, setEditorContent] = useState(value);
+  const [editorContent, setEditorContent] = useState(value || "");
   const [internalError, setInternalError] = useState<string | undefined>(
     undefined,
   );
 
   useEffect(() => {
-    setEditorContent(value);
+    setEditorContent(value || "");
   }, [value]);
 
-  const formatJson = (json: string): string => {
-    try {
-      return JSON.stringify(JSON.parse(json), null, 2);
-    } catch {
-      return json;
-    }
-  };
-
   const handleEditorChange = (newContent: string) => {
     setEditorContent(newContent);
     setInternalError(undefined);
     onChange(newContent);
   };
 
-  const handleFormatJson = () => {
-    try {
-      const formatted = formatJson(editorContent);
-      setEditorContent(formatted);
-      onChange(formatted);
-      setInternalError(undefined);
-    } catch (err) {
-      setInternalError(err instanceof Error ? err.message : "Invalid JSON");
-    }
-  };
-
   const displayError = internalError || externalError;
 
   return (
-    <div className="relative space-y-2">
-      <div className="flex justify-end">
-        <Button variant="outline" size="sm" onClick={handleFormatJson}>
-          Format JSON
-        </Button>
-      </div>
+    <div className="relative">
       <div
         className={`border rounded-md ${
           displayError