Draft.js with line number.

README.md

Online Demo: https://jsfiddle.net/72subv99/1/.

Special Thanks: https://gist.github.com/schabluk/0e5e938bc30a7833201b605cee4efb4a.

app.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;
}

app.js

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

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"));

This is very neat! Thanks!

Thanks