dmitrika/Draftjs webview

## Draftjs webview
<WebView
  onMessage={this.updateDescription}
  injectedJavaScript={this.injectScript}
  source={{ html: this.html }}
  startInLoadingState
  style={{
    height: 100,
    width
  }}
/>;

html = `
      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="utf-8">
          <link rel="stylesheet" href="https://draftjs.org/lib/Draft.css">
          <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.6/immutable.js"></script>
          <script src="https://draftjs.org/lib/Draft.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
        </head>
        <body>
          <div
            id="hello"
            style="width: ${width}px; height: ${150}px;"
          >
          </div>
        </body>
        <script type="text/babel">
        class RichEditorExample extends React.Component {
          constructor(props) {
            super(props);
            this.state = {editorState: Draft.EditorState.createEmpty()};
            this.focus = () => this.editor.focus();
            this.onChange = (editorState) => {
              this.setState({editorState});
              window.postMessage(JSON.stringify(editorState))
            }
          }

          _onBoldClick() {
            this.onChange(Draft.RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD'));
          }

          render() {
            const {editorState} = this.state;

            return (
              <div>
                <div onClick={this.focus}>
                  <Draft.Editor
                    editorState={editorState}
                    onChange={this.onChange}
                    placeholder="Tell a story..."
                    autoComplete="off"
                    autoCorrect="off"
                    autoCapitalize="none"
                    spellCheck={false}
                  />
                </div>
                <br />
                <br />
                <button onClick={this._onBoldClick.bind(this)}>Bold</button>
              </div>
            );
          }
        }

        ReactDOM.render(
          <div><RichEditorExample /></div>,
          document.getElementById('hello')
        );
        </script>
      </html>
    `;

updateDescription = e => {
  console.log("updateDescription", e.nativeEvent.data);
};
	<WebView
	onMessage={this.updateDescription}
	injectedJavaScript={this.injectScript}
	source={{ html: this.html }}
	startInLoadingState
	style={{
	height: 100,
	width
	}}
	/>;

	html = `
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://draftjs.org/lib/Draft.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.6/immutable.js"></script>
	<script src="https://draftjs.org/lib/Draft.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
	</head>
	<body>
	<div
	id="hello"
	style="width: ${width}px; height: ${150}px;"
	>
	</div>
	</body>
	<script type="text/babel">
	class RichEditorExample extends React.Component {
	constructor(props) {
	super(props);
	this.state = {editorState: Draft.EditorState.createEmpty()};
	this.focus = () => this.editor.focus();
	this.onChange = (editorState) => {
	this.setState({editorState});
	window.postMessage(JSON.stringify(editorState))
	}
	}

	_onBoldClick() {
	this.onChange(Draft.RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD'));
	}

	render() {
	const {editorState} = this.state;

	return (
	<div>
	<div onClick={this.focus}>
	<Draft.Editor
	editorState={editorState}
	onChange={this.onChange}
	placeholder="Tell a story..."
	autoComplete="off"
	autoCorrect="off"
	autoCapitalize="none"
	spellCheck={false}
	/>
	</div>
	<br />
	<br />
	<button onClick={this._onBoldClick.bind(this)}>Bold</button>
	</div>
	);
	}
	}

	ReactDOM.render(
	<div><RichEditorExample /></div>,
	document.getElementById('hello')
	);
	</script>
	</html>
	`;

	updateDescription = e => {
	console.log("updateDescription", e.nativeEvent.data);
	};