Draft.js Fiddle
A fiddle to repro issues in Draft.js
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.7.0/Draft.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.7.0/Draft.css">
<div id="react-root"></div>
CSS
body {
font-family: Helvetica, sans-serif;
}
.container-root {
border: 1px solid black;
padding: 5px;
margin: 5px;
overflow-x: auto;
}
.public-DraftStyleDefault-block {
}
Babel + JSX
const {Editor, EditorState} = Draft;
class Container extends React.Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty()
};
}
render() {
return (
<div className="container-root">
<Editor
placeholder="Type away :)"
editorState={this.state.editorState}
onChange={this._handleChange}
handleReturn={() => 'handled'}
/>
</div>
);
}
_handleChange = (editorState) => {
this.setState({editorState});
}
}
ReactDOM.render(<Container />, document.getElementById('react-root'))