import React , { useEffect , useState } from 'react' ; import useDebounce from 'react-use/lib/useDebounce' ; import 'brace/theme/tomorrow' ; import { EuiCodeEditor } from '../shared_imports' ; import './osquery_mode.ts' ; const EDITOR_SET_OPTIONS = { enableBasicAutocompletion : true , enableLiveAutocompletion : true , } ; const EDITOR_PROPS = { $blockScrolling : true , } ; interface OsqueryEditorProps { defaultValue : string ; onChange : ( newValue : string ) => void ; } const OsqueryEditorComponent = ( { defaultValue , onChange } ) => { const [ editorValue , setEditorValue ] = useState ( defaultValue ?? '' ) ; useDebounce ( ( ) => onChange ( editorValue . replaceAll ( '\n' , ' ' ) . replaceAll ( '  ' , ' ' ) ) , 500 , [ editorValue , ] ) ; useEffect ( ( ) => setEditorValue ( defaultValue ) , [ defaultValue ] ) ; return ( < EuiCodeEditor value = { editorValue } mode = "osquery" onChange = { setEditorValue } theme = "tomorrow" name = "osquery_editor" setOptions = { EDITOR_SET_OPTIONS } editorProps = { EDITOR_PROPS } height = "100px" width = "100%" / > ) ; } ; export const OsqueryEditor = React . memo ( OsqueryEditorComponent ) ;