Using draft js with html in and html out

Question

I would think this is a very very common request but yet, I can't find anything to help me solve it. I've tried various plugins like draft-js-import-html and variations but they never seem to fully work, specially when you add an image or embed a video.

Here's a sample HTML That I would like to use in the editor:

var sampleMarkup = '<h1>Hello there</h1>' +
    '<b>Bold text</b>, <i>Italic text</i>, <u>Underline text</u><br/ ><br />' +
    '<a href="http://www.facebook.com">Example link</a>' +
    '<img src="http://vignette1.wikia.nocookie.net/elderscrolls/images/6/64/Imga.jpg/revision/latest?cb=20110501053300" />' +
    '<p>Hello there</p>' +
    '<div class="responsive"><iframe width="560" height="315" src="https://www.youtube.com/embed/POrFPyHGKyw" frameborder="0" allowfullscreen></iframe></div>';

It has some basic h1, bold, ... as well as an image and an iframe and an iframe with a wrapper to make the video responsive.

What I would like is to have a draft-js editor where I can put HTML in (like above) and on change gives me back HTML.

So if I start with this, how can I give it HTML and get HTML back?

import React, { PropTypes, Component } from 'react'
import ReactDOM from 'react-dom'
import {Editor, EditorState} from 'draft-js'

var sampleMarkup = '<h1>Hello there</h1>' +
    '<b>Bold text</b>, <i>Italic text</i>, <u>Underline text</u><br/ ><br />' +
    '<a href="http://www.facebook.com">Example link</a>' +
    '<img src="./someImg.png" />' +
    '<p>Hello there</p>' +
    '<div class="responsive"><iframe width="560" height="315" src="youtube/link/here" frameborder="0" allowfullscreen></iframe></div>';

class MyEditor extends Component {
    static propTypes = {
        html: PropTypes.string,
        onChange: PropTypes.func
    }
    constructor(props){
        super(props);
        // TODO: Convert HTML to state somehow using props.html
        this.state = {
            editorState: EditorState.createWithContent(html);
        }
    }
    render(){
        return (
            <Editor 
                editorState={this.state.editor}
                onChange={this._onChange.bind(this)}
                     />
        );
    }    
    _onChange(editorState){
        this.setState({editorState: editorState});
        // Convert state to html somehow here
        this.props.onChange(html);
    }
}

Answer 1

I believe you can use draftjs-to-html.

import { convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';

const rawContentState = convertToRaw(editorState.getCurrentContent());

const markup = draftToHtml(
  contentState, 
  hashtagConfig, 
  directional, 
  customEntityTransform
);

Answer 2

For different versions of the draft.js is different, here is the option for draft.js 0.10.0. For normal output, for example images need to describe to the editor in each case. This is done using CompositeDecorator. Here is an example of github draft.js

https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/convertFromHTML/convert.html