codekingpro/portable-devtools

1/////////////////////////////////////////////////////////////2//3// pgAdmin 4 - PostgreSQL Tools4//5// Copyright (C) 2013 - 2024, The pgAdmin Development Team6// This software is released under the PostgreSQL Licence7//8//////////////////////////////////////////////////////////////9 10import React, { useEffect, useMemo, useRef } from 'react';11import {default as OrigJsonEditor} from 'jsoneditor.min';12import PropTypes from 'prop-types';13import CustomPropTypes from '../custom_prop_types';14 15/* React wrapper for JsonEditor */16export default function JsonEditor({getEditor, value, options, className}) {17  const eleRef = useRef();18  const editor = useRef();19  const defaultOptions = {20    modes: ['code', 'form', 'tree','preview'],21  };22 23  useEffect(()=>{24    const editorResizeObserver = new ResizeObserver(()=>{25      editor.current.resize();26    });27    editorResizeObserver.observe(eleRef.current);28  }, []);29 30  useEffect(()=>{31    /* Create the object only once on mount */32    editor.current = new OrigJsonEditor(eleRef.current, {33      ...defaultOptions,34      ...options,35      onChange: ()=>{36        let currVal = editor.current.getText();37        if(currVal == '') {38          currVal = null;39        }40        options.onChange(currVal);41      }42    });43    editor.current.setText(value);44    getEditor?.(editor.current);45    editor.current.focus();46    /* Required by json editor */47    eleRef.current.style.height = eleRef.current.offsetHeight + 'px';48  }, []);49 50  useMemo(() => {51    if(editor.current) {52      if(value != editor.current.getText()) {53        editor.current.setText(value ?? '');54      }55    }56  }, [value]);57 58  return (59    <div ref={eleRef} className={className}></div>60  );61}62 63JsonEditor.propTypes = {64  getEditor: PropTypes.func,65  value: PropTypes.string,66  options: PropTypes.object,67  className: CustomPropTypes.className,68};69