Cursor selector jump on start on each update of content if try to make component controlled

[misha-kravtsov]

`import { memo, useEffect, useState, FC } from 'react';
import { ContentState, convertToRaw, EditorState } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import './WysiwygEditor.scss';

// helper function
const createEditorState = (html: string) => {
const { contentBlocks, entityMap } = htmlToDraft(html);
return EditorState.createWithContent(ContentState.createFromBlockArray(contentBlocks, entityMap));
};

export interface WysiwygEditorProps {
value: string;
onValueChange: (value: string) => void;
fieldTags?: Array;
}

const WysiwygEditor: FC = memo(({ value, onValueChange, fieldTags }) => {
const [editorState, setEditorState] = useState(createEditorState(value));

const onEditorStateChange = (state: EditorState) => {
setEditorState(state);
onValueChange(draftToHtml(convertToRaw(state.getCurrentContent())));
};

useEffect(() => {
if (value === '') {
setEditorState(EditorState.createEmpty());
} else {
setEditorState(createEditorState(value));
}
}, [value]);

return (

<Editor
editorState={editorState}
// contentState={}
toolbarClassName='draft-toolbar'
wrapperClassName='draft-wrapper'
editorClassName='draft-editor'
toolbar={{
options: [
'inline',
'blockType',
'fontSize',
'list',
'textAlign',
'colorPicker',
'link',
'embedded',
'emoji',
'remove',
'history',
],
inline: {
options: ['bold', 'italic', 'underline', 'strikethrough'],
},
}}
onEditorStateChange={onEditorStateChange}
/>

);
});

export default WysiwygEditor;`

[misha-kravtsov]

Same behaviour as on gif #652 (comment)

[misha-kravtsov]

uncontrolled component works as well because in need to be sync once at the moment when it mounts, but for example if I want to change source (state), that store value? Only one proper solution that I found is change key when value from props change to re-sync component, could you add some interface that allow more easier mutate value in editor, I saw that there is state.getSelection() but it also wasn't work for me when I tried to change editor state with useEffect that reacts to new value from props