From e1ddd94200f336fe2e284703f60fc85806614d13 Mon Sep 17 00:00:00 2001
From: "web@ppanel" <web@ppanel.dev>
Date: Thu, 21 Nov 2024 21:06:00 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(ui):=20Fix=20json=20formatti?=
 =?UTF-8?q?ng?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/src/editor/json.tsx | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/editor/json.tsx b/packages/ui/src/editor/json.tsx
index f4c233e..ad703d8 100644
--- a/packages/ui/src/editor/json.tsx
+++ b/packages/ui/src/editor/json.tsx
@@ -3,9 +3,11 @@
 import { useMemo } from 'react';
 import { MonacoEditor, MonacoEditorProps } from './monaco-editor';
 
-interface JSONEditorProps extends Omit<MonacoEditorProps, 'placeholder'> {
+interface JSONEditorProps extends Omit<MonacoEditorProps, 'placeholder' | 'value' | 'onChange'> {
   schema?: Record<string, unknown>;
   placeholder?: Record<string, unknown>;
+  value?: Record<string, unknown> | string;
+  onChange?: (value: Record<string, unknown> | string | undefined) => void;
 }
 
 export function JSONEditor(props: JSONEditorProps) {
@@ -18,7 +20,25 @@ export function JSONEditor(props: JSONEditorProps) {
       key={editorKey}
       title='Edit JSON'
       {...rest}
-      placeholder={JSON.stringify(placeholder, null, 2)}
+      value={
+        typeof props.value === 'string'
+          ? props.value
+          : props.value
+            ? JSON.stringify(props.value, null, 2)
+            : ''
+      }
+      onChange={(value) => {
+        if (props.onChange && typeof value === 'string') {
+          try {
+            props.onChange(
+              props.value && typeof props.value === 'string' ? value : JSON.parse(value),
+            );
+          } catch (e) {
+            console.error('Invalid JSON input:', e);
+          }
+        }
+      }}
+      placeholder={placeholder ? JSON.stringify(placeholder, null, 2) : ''}
       language='json'
       onMount={(editor, monaco) => {
         if (props.onMount) props.onMount(editor, monaco);