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