JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/immutable.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/Draft.min.js"></script>
<div id="app"></div>

CSS

.line {
  position: relative;
}

.line::before {
  content: attr(data-line-number);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.5;
}

.line-text {
  margin-left: 2em;
}

Babel + JSX

const { Editor, EditorBlock, EditorState } = Draft;

class Line extends React.Component {
  render() {
    const { block, contentState } = this.props;
    const lineNumber =
      contentState
        .getBlockMap()
        .toList()
        .findIndex(item => item.key === block.key) + 1;
    return (
      <div className="line" data-line-number={lineNumber}>
        <div className="line-text">
          <EditorBlock {...this.props} />
        </div>
      </div>
    );
  }
}

const blockRendererFn = () => ({
  component: Line,
});

class App extends React.Component {
  state = {
    editorState: EditorState.createEmpty(),
  };

  handleChange = editorState => {
    this.setState({ editorState });
  };

  render() {
    return (
      <Editor
        editorState={this.state.editorState}
        onChange={this.handleChange}
        blockRendererFn={blockRendererFn}
      />
    );
  }
}

ReactDOM.render(<App />, document.querySelector("#app"));