import classnames from 'classnames' ; import React from 'react' ; import { Value } from 'slate' ; import { react , typeCheck } from '../../slate-editor-utils/src' ; import initialEditorState from './initialEditorState' ; interface SlateEditorProperties { initialState ? : any ; style ? : any ; className ? : string ; plugins : any [ ] ; onChange ? : any ; } interface SlateEditorState { value : any ; readOnly : boolean ; uid : any ; } class SlateEditor extends React . Component < SlateEditorProperties , SlateEditorState > { constructor ( properties ) { super ( properties ) ; this . state = { value : this . migrateStateVersion ( properties . initialState || initialEditorState ) , readOnly : false , uid : new Date ( ) . getUTCMilliseconds ( ) } ; } migrateStateVersion ( value ) { let updatedValue = value ; if ( value . kind !== 'value' ) { updatedValue = JSON . parse ( JSON . stringify ( value ) . replaceAll ( '"kind":"state"' , '"kind":"value"' ) . replaceAll ( '"ranges":[' , '"leaves":[' ) . replaceAll ( '"kind":"range"' , '"kind":"leaf"' ) ) ; } updatedValue = JSON . parse ( JSON . stringify ( updatedValue ) . replaceAll ( '"kind":' , '"object":' ) ) ; return Value . fromJSON ( updatedValue ) ; } onChange ( change ) { const { value } = change ; this . setState ( { value } ) ; const { onChange } = this . props ; if ( typeCheck . isFunction ( onChange ) ) onChange ( value ) ; } changeState ( state ) { this . setState ( state ) ; } render ( ) { const { children , style , className , plugins } = this . props ; const childProperties = { plugins , value : this . state . value , outerState : this . state , onChange : this . onChange . bind ( this ) , changeState : this . changeState . bind ( this ) } ; return ( < div className = { classnames ( 'editor--root' , className ) } style = { style } > { react . cloneElement ( children , childProperties ) } < /div>); } } export default SlateEditor ;