Display line numbers is Draft-JS Editor

DraftLineNumbers.js

// Required Draf-js version: 0.10.
// Live example: https://jsfiddle.net/schabluk/gh2gt22n/

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

class Line extends React.Component {
  render () {
    const blockMap = this.props.contentState.getBlockMap().toArray()
    const blockKey = this.props.block.key
    const lineNumber = blockMap.findIndex(block => blockKey === block.key) + 1
    return <div style={{display: 'flex'}}>
      <span style={{marginRight: '5px'}}>{lineNumber}</span>
      <div style={{flex: '1'}}><EditorBlock {...this.props} /></div>
    </div>
  }
}

const blockRendererFn = function(contentBlock) {
  const type = contentBlock.getType()
  switch (type) {
    default:
      return {component: Line, editable: true}
  }
}

class App extends React.Component {
  constructor (props) {
    super(props)
    const editorState = EditorState.createEmpty()
    this.state = {editorState}
    this.onChange = this.onChange.bind(this)
  }

  onChange (editorState) {
    this.setState({editorState})
  }

  render () {
    return <div style={{backgroundColor: '#fff'}}>
      <Editor
        editorState={this.state.editorState}
        onChange={this.onChange}
        blockRendererFn={blockRendererFn}
        />
    </div>
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('react-root')
)