How to add line numbers in css and React JS for a content editable div

JavaScript
1

I want to add line numbers to a content editable div when the enter key is pressed in react js. Someone, please help me in doing so.
Here is the ReactJS Code and css.

class App extends Component {

  getMarkdownText() {
    var rawMarkup = marked(placeholder, {sanitize: true});
    return { __html: rawMarkup };
  }
  render() {
    return (
      <div className="MAPP">
        <div className="App">
          <h1 class="text-heading">MARKDOWN EDITOR</h1>
          <div className="editor" id="editor" contenteditable="true">
            <pre >{placeholder}</pre>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

.editor{
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 10px;
  background-color: #edeff2;
  width:50%;
  height:inherit;
  display:inline-block;
  position: inherit;

  overflow-y: scroll;
}
.editor pre{
  counter-reset: line;
  counter-increment: line;
}
.editor:before {
  -webkit-user-select: none;
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  position: absolute;
  border-right: 1px solid #ddd;
  margin-left: -20px;
  padding-left: 2px;
  color: #888;
}

.preview{
  box-sizing: border-box;
  padding-left: 30px;
  background-color: white;
  width:49.9%;
  height:inherit;
  display:inline-block;
  position: absolute;
  z-index: 9;
  left:50%;
  overflow-y: scroll;
}

Thank you