Applying Draft Wysiwyg in React Hooks Project

Question

I try to integrate react draft wysiwyg in my React Hooks project.

I initialize description this way:

var editorState = EditorState.createEmpty()
const [description, setDescription] = React.useState(editorState);

...and I apply editor this way:

<Editor
    editorState={description}
    toolbarClassName="toolbarClassName"
    wrapperClassName="wrapperClassName"
    editorClassName="editorClassName"
    onEditorStateChange={setEditorState}
/>

This is setEditorState:

const setEditorState = (editorState) => {
  console.log('editorState', editorState)
  setDescription(editorState)
}

As I type on the editor, description is not what I type, but instead an object like this:

_immutable: {allowUndo: true,…}

UPDATE 1 I also found that current content is what I type. Is it proper way to access data like this?

_immutable.currentContent.text

UPDATE 2 I also tried to set editor state directly like this, but didn't help:

onEditorStateChange={setDescription}

What am I missing? Thanks

score 4 · Accepted Answer · answered Jan 22 '20 at 13:27

OK, I solved this by converting to/from html.

This is enough to convert editor state to html.

import {stateToHTML} from 'draft-js-export-html';
....

let html = stateToHTML(editorState.getCurrentContent());

and when I convert html back to editor state, I apply as in the documentation.

const html = props.content;
const contentBlock = htmlToDraft(html);
if (contentBlock) {
  const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
  editorStateInitial = EditorState.createWithContent(contentState);
}

const [editorState, setEditorState] = React.useState(editorStateInitial);

This conversion circle solves the problems.

Applying Draft Wysiwyg in React Hooks Project

1 Answers1