import SvelteJSONEditor from './SvelteJSONEditor';
import { JSONEditorPropsOptional } from 'vanilla-jsoneditor';

interface CustomJsonEditorProps {
  /**
   *  @description value
   */
  value?: any;
  /**
   * onChange
   */
  onChange?: (val: { val?: any }) => void;
  /**
   *  @ description JsonEditor只读
   */
  readOnly?: boolean;
  /**
   *  @ description JsonEditor的高度，默认是500px
   */
  height?: number;
  /**
   *  @ description JsonEditor的配置
   */
  options?: JSONEditorPropsOptional;
}
const CustomJsonEditor = ({
  value = {},
  onChange,
  readOnly = false,
  height = 500,
  options,
}: CustomJsonEditorProps) => {
  return (
    <SvelteJSONEditor
      content={value}
      onChange={(val) => onChange?.(val)}
      readOnly={readOnly}
      height={height}
      options={options}
    />
  );
};

export default CustomJsonEditor;