JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<pre  contenteditable="true" id="editor">
line 1
line 2
line 3
line 4
line 5
</pre>
<br/>
<input id="addBtn" type="button" value="Add Line"/>

CSS

pre {
  border: 2px solid black;
}

JavaScript

$('#editor').on("mouseup", function getPos() {
    var sel = document.getSelection(),
        nd = sel.anchorNode,
        text = nd.textContent.slice(0, sel.focusOffset);

    var lineNum=text.split("\n").length;
    //alert(lineNum);
});






$('#addBtn').click(function(){
  elem = document.getElementById("editor");
  elem.innerHTML =  elem.innerHTML +"\n";   
});