Client/ppanel-web
5
0
Fork 0
mirror of https://github.com/perfect-panel/ppanel-web.git synced 2026-02-06 03:30:25 -05:00
Code Issues Packages Projects Releases Wiki Activity

🐛 fix(ui): Fix json formatting

Browse Source
This commit is contained in:
web@ppanel 2024-11-21 21:06:00 +07:00
parent 7e1eb9084c
commit e1ddd94200
1 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/ui/src/editor/json.tsx
View File

@ -3,9 +3,11 @@
import { useMemo } from 'react'; import { useMemo } from 'react';
import { MonacoEditor, MonacoEditorProps } from './monaco-editor'; import { MonacoEditor, MonacoEditorProps } from './monaco-editor';
interface JSONEditorProps extends Omit<MonacoEditorProps, 'placeholder'> { interface JSONEditorProps extends Omit<MonacoEditorProps, 'placeholder' | 'value' | 'onChange'> {
schema?: Record<string, unknown>; schema?: Record<string, unknown>;
placeholder?: 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) { export function JSONEditor(props: JSONEditorProps) {
@ -18,7 +20,25 @@ export function JSONEditor(props: JSONEditorProps) {
key={editorKey} key={editorKey}
title='Edit JSON' title='Edit JSON'
{...rest} {...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' language='json'
onMount={(editor, monaco) => { onMount={(editor, monaco) => {
if (props.onMount) props.onMount(editor, monaco); if (props.onMount) props.onMount(editor, monaco);