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;
}
Babel + JSX
const {Editor, EditorState} = Draft;
class Container extends React.Component {
constructor(props) {
super(props)
this.state = {
editorState: EditorState.createEmpty()
}
}
render() {
const { editorState } = this.state
const currentBlockKey = editorState.getSelection().getStartKey()
const currentBlockIndex = editorState.getCurrentContent().getBlockMap()
.keySeq().findIndex(k => k === currentBlockKey)
return (
<div className="container-root">
Current line number: {currentBlockIndex + 1}
<hr />
<Editor
placeholder="Write something"
editorState={this.state.editorState}
onChange={this._handleChange}
/>
</div>
);
}
_handleChange = (editorState) => {
this.setState({ editorState })
}
}
ReactDOM.render(<Container />, document.getElementById('react-root'))