feat: add copy JSON value

Author: fveiraswww

client/src/components/DynamicJsonForm.tsx

@@ -5,6 +5,8 @@ import JsonEditor from "./JsonEditor";
 import { updateValueAtPath } from "@/utils/jsonUtils";
 import { generateDefaultValue } from "@/utils/schemaUtils";
 import type { JsonValue, JsonSchemaType } from "@/utils/jsonUtils";
+import { useToast } from "@/lib/hooks/useToast";
+import { CheckCheck, Copy } from "lucide-react";
 
 interface DynamicJsonFormProps {
   schema: JsonSchemaType;
@@ -31,6 +33,9 @@ const DynamicJsonForm = ({
   const isOnlyJSON = !isSimpleObject(schema);
   const [isJsonMode, setIsJsonMode] = useState(isOnlyJSON);
   const [jsonError, setJsonError] = useState<string>();
+  const [copiedJson, setCopiedJson] = useState<boolean>(false);
+  const { toast } = useToast();
+
   // Store the raw JSON string to allow immediate feedback during typing
   // while deferring parsing until the user stops typing
   const [rawJsonValue, setRawJsonValue] = useState<string>(
@@ -246,19 +251,55 @@ const DynamicJsonForm = ({
     }
   }, [shouldUseJsonMode, isJsonMode]);
 
+  const handleCopyJson = useCallback(() => {
+    try {
+      navigator.clipboard
+        .writeText(JSON.stringify(value, null, 2) ?? "[]")
+        .then(() => {
+          setCopiedJson(true);
+
+          toast({
+            title: "JSON copied",
+            description:
+              "The JSON data has been successfully copied to your clipboard.",
+          });
+
+          setTimeout(() => {
+            setCopiedJson(false);
+          }, 2000);
+        })
+        .catch((error) => {
+          reportError(error);
+        });
+    } catch (error) {
+      reportError(error);
+    }
+  }, [toast, value]);
+
   return (
     <div className="space-y-4">
       <div className="flex justify-end space-x-2">
         {isJsonMode && (
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={formatJson}
-          >
-            Format JSON
-          </Button>
+          <>
+            <Button variant="outline" size="sm" onClick={handleCopyJson}>
+              {copiedJson ? (
+                <CheckCheck className="h-4 w-4 mr-2" />
+              ) : (
+                <Copy className="h-4 w-4 mr-2" />
+              )}
+              Copy JSON
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={formatJson}
+            >
+              Format JSON
+            </Button>
+          </>
         )}
+
         {!isOnlyJSON && (
           <Button variant="outline" size="sm" onClick={handleSwitchToFormMode}>
             {isJsonMode ? "Switch to Form" : "Switch to JSON"}