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 ponent to be able to make changes and update. It would be great if I can use the same ponent 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 ponent 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.

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 ponent to be able to make changes and update. It would be great if I can use the same ponent 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 ponent 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.

• javascript
• mongodb
• reactjs
• draftjs

1 Answer 1

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:

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