after endless searching and scouring the internet for how to use draft.js for a blog we are building, i thought I would share what I learnt. Draft.js is AMAZING but its not very clear how to render the data after saving since there is no official render solution.

Here is an abstract demo on how one could do this.

Plugins user were draft-js, draft-convert, react-render-html. Database used was mongo

create post:

import React, {Component} from 'react';
import {
    Block,
    Editor,
    createEditorState
} from 'medium-draft';
import { convertToHTML } from 'draft-convert';

class PostEditor extends Component {
    constructor(props) {
        super(props);

        this.state = {
            stateEditor: createEditorState()
        }

        this.onChange = (editorState) => {
            this.setState({ editorState });
        };

        this.publishPost = this.publishPost.bind(this);
    }
    publishPost() {
        // turn the state to html
        const html = convertToHTML(this.state.editorState.getCurrentContent());

        const post = {
            content: html,
            createdAt: new Date()
            // more stuff...
        }

        // post the data to you mongo storage.
    }
    render() {
        // get the editorState from the component State
        const { editorState } = this.state;
        return (
            <div>
                <Editor
                    ref="editor"
                    editorState={editorState}
                    placeholder="Write your blog post..."
                    onChange={this.onChange} />
                <div>
                    <button onClick={this.publishPost} type="button">Submit</button>
                </div>
            </div>
        )
    }
}

render the post:

import React, { Component } from 'react';
import renderHTML from 'react-render-html';

class PostArticle extends Component {
    constructor(props) {
        super(props);

        this.state = {
            text: null
        }
    }
    componentWillMount() {
        // get the data from the database
        const post = getMyBlogPostFunction(); // replace getMyBlogPostFunction with own logic to fetch data
        this.setState({ text: post.content })
    }
    render() {
        return (
            <div className='article-container'>
                {renderHTML(this.state.text)}
            </div>
        )
    }
}

Note: Html script tags have been escaped.

While the solution above might not be perfect for every use case, I hope someone can find it useful for basic usage.

Disclaimer: I am not liable for any damage, or harm caused through the use of the above code.

There is a great example in the documentation demonstrating this process. Here is a link to the source code on Github.

Essentially the code snippet you're looking for is this:

const sampleMarkup =
  '<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
  '<a href="http://www.facebook.com">Example link</a>';

const blocksFromHTML = convertFromHTML(sampleMarkup);
const state = ContentState.createFromBlockArray(blocksFromHTML);

this.state = {
  editorState: EditorState.createWithContent(state),
};

The utility function is called convertFromHTML