Skip to content

Instantly share code, notes, and snippets.

@dmitrika
Created January 25, 2018 15:52
Show Gist options
  • Save dmitrika/0488775628cc6810d981d98d3540d3fd to your computer and use it in GitHub Desktop.
Save dmitrika/0488775628cc6810d981d98d3540d3fd to your computer and use it in GitHub Desktop.
<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);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment