import * as React from 'react' ; import { EditorState } from 'prosemirror-state' ; import { EditorView } from 'prosemirror-view' ; import { useView , useScrolling } from '../utils/hooks' ; const { useRef , useEffect } = React ; type EditorProps = { onChange ( state , dispatch ) : any ; attributes ? : any ; nodeViews ? : any ; autoFocus ? : boolean ; options : any ; render ? ( { editor : EditorState , view : EditorView , scrolling : boolean } ) : React . ReactElement ; } ; export default ( props ) => { const editorRef = useRef < HTMLDivElement > ( null ) ; const view = useView ( props ) ; useEffect ( ( ) => { if ( editorRef . current ) { editorRef . current . appendChild ( view . dom ) ; } if ( props . autoFocus ) { view . focus ( ) ; } } , [ ] ) ; const scrolling = useScrolling ( editorRef , 300 ) ; const editor = < div ref = { editorRef } />; return props . render ( { editor , view , scrolling } ) ; } ;