react-draft-wysiwyg - render saved content to update

Question

I'm using react-draft-wysiwyg in a project and I'm having a 'big' problem.

After hours of trying, I can't make an render my database's content.

First, I tried and succeed saving in MongoDB an "overview" (contentState) with the following code:

 <Editor initialContentState={person.overview}
         toolbarClassName="rdw-storybook-toolbar"
         wrapperClassName="rdw-storybook-wrapper"
         editorClassName="editor" onContentStateChange={this.onContentStateChange}
         toolbar={{ options: [
                         'inline',
                         'blockType',
                         'fontSize',
                         'fontFamily',
                         'list',
                         'textAlign',
                         'colorPicker',
                         'link',
                         'embedded',
                         'emoji',
                         'remove',
                         'history'], 
                        }}

My Component constructor:

this.state = { person: { isEdit: false, } };

As you can see, I don't set in the constructor person: { overview: {} }, because if I do it I get the following error:

invalid RawDraftContentState ▶ 24 stack frames were collapsed. ./src/index.js src/index.js:19 16 | ); 17 | 18 | 19 | ReactDOM.render( 20 | 21 | 22 | ,

So I just don't set overview: {} in the constructor and the saving process is working correctly.

After that, I'm trying to render the saved content in an component to be able to make changes and update. It would be great if I can use the same component to edit and save to make it reusable, but it's not a must.

The thing is that although I set this.setState({person: overview: contentFromDatabase}) (checked, it's being seted), the component shows blank, nothing. You can write from zero but it's not loading the content.

I have to say that right now after hours and hours I'm a bit confused with the editorState and contentState stuff, but I think that my DB's content is a RawDraftContent, right?

Here is my DB's document:

    "_id": ObjectId("5b3d2897589a5e2fa4ba60ea"),
    "overview": {
      "blocks": [
        {
          "key": "ekrl0",
          "text": "this is the CONTENT",
          "type": "unstyled",
          "depth": 0,
          "inlineStyleRanges": [
            {
              "offset": 14,
              "length": 2,
              "style": "BOLD"
            }
          ],
          "entityRanges": []
        }
      ]
    },
    "createdAt": ISODate("2018-07-04T20:05:43.129Z"),
    "__v": 0
  }

Any help would be gratefully received.

Piyush Zalani Piyush Zalani · Accepted Answer · 2018-07-04T20:47:03

Instead of saving content in DB as editor state you can do something like this:

import {
  Editor,
  EditorState,
  ContentState,
  convertFromHTML,
  CompositeDecorator,
  convertToRaw,
  getDefaultKeyBinding,
} from 'draft-js';

const blocks = convertToRaw(editorState.getCurrentContent()).blocks;
    const value = blocks.map(block => (!block.text.trim() && '\n') || block.text).join('\n');

and for retrieving the data you can do:

componentWillMount() { 
      const { value } = this.props
      const blocksFromHTML = convertFromHTML(value));
      const state = ContentState.createFromBlockArray(
        blocksFromHTML.contentBlocks,
        blocksFromHTML.entityMap,
      );
      this.state = {
        editorState: EditorState.createWithContent(
          state,
          compositeDecorator,
        ),
      };
}

react-draft-wysiwyg - render saved content to update

1 Answers