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 (

); });

export default WysiwygEditor;`

[misha-kravtsov]

Same behaviour as on gif https://github.com/jpuri/react-draft-wysiwyg/issues/652#issue-319204568

[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