React-draft-wysiwyg contents not editable

47 Views Asked by At

I'm new here. I'm currently building an editor using React-draft-wysiwyg editor. I was able to send my data to the backend and call it back. However, when I bring it back onto the Editor, I can't make any changes or edit the data. Below is my code :

let html = sendDescription.toString();
    let contentBlock = htmlToDraft(html);
    let contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
    let editorState1 = EditorState.createWithContent(contentState)
    let editorState = EditorState.moveFocusToEnd(editorState1);


  let [description, setDescription] = useState(editorState);
  const onEditorStateChange = (editorState) => {
    setDescription(editorState);
  }

Note: Above,the "sendDescription" is my html data that I called from the backend

<Editor             editorState={editorState}         
                    onEditorStateChange={onEditorStateChange}
                    toolbarClassName="toolbarClassName"
                    wrapperClassName="wrapperClassName"
                    editorClassName="editorClassName"
                    onContentStateChange={onContentStateChangeJSon}
                    
                  />

Note: Above is My Editor

Can someone help me ?

I did Method 1:

<Editor> editorState={editorState} </ Editor >

Instead of Method 2.:

<Editor> editorState={description} </ Editor >

Because only method 1 was able to make the data displayed in the editor. When I did method 2, it was only showing an empty editor. If I needed to show more codes pls tell I'm really stuck.

0

There are 0 best solutions below