import { useEffect , useRef } from 'react' ; import { Editor , EditorChange , EditorConfiguration } from 'codemirror' ; import { Annotation , Linter } from 'codemirror/addon/lint/lint' ; import { Controlled as CodeMirror } from 'react-codemirror2' ; import { normalize } from '../../utils' ; import 'codemirror/addon/display/autorefresh' ; import 'codemirror/addon/lint/lint' ; import 'codemirror/mode/sieve/sieve' ; import 'codemirror/lib/codemirror.css' ; import 'codemirror/addon/lint/lint.css' ; import 'codemirror/theme/base16-dark.css' ; import './SieveEditor.scss' ; interface Props { value : string ; issues ? : Annotation [ ] ; onChange : ( editor : Editor , data : EditorChange , value : string ) => void ; theme ? : string ; } let uglyGlobalLintRef ; const clean = normalize ( ) ; const customLint = ( content = '' ) => { const lint = uglyGlobalLintRef ; return lint ? lint ( clean ( content ) ) : [ ] ; } ; const SieveEditor = ( { value , issues = [ ] , onChange , theme } ) => { const editorRef = useRef < Editor > ( ) ; const options = { mode : 'sieve' , lineNumbers : true , lineWrapping : true , readOnly : false , fixedGutter : false , gutters : [ 'CodeMirror-lint-markers' ] , lint : { getAnnotations : customLint , } , ... ( theme ? { theme } : { } ) , } ; useEffect ( ( ) => { uglyGlobalLintRef = ( ) => issues ; return ( ) => { uglyGlobalLintRef = undefined ; } ; } , [ issues ] ) ; return ( < CodeMirror className = "bordered" value = { value } options = { options } onBeforeChange = { onChange } editorDidMount = { ( editor ) => { editorRef . current = editor ; } } />); } ; export default SieveEditor ;