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 { +interface JSONEditorProps extends Omit { schema?: Record; placeholder?: Record; + value?: Record | string; + onChange?: (value: Record | 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);