JSFiddle - React, Tailwind, and code Playground

Caret position

by Dave

HTML

<div id=zbEz contenteditable=true>
<div>vvv</div>
<div>zzz</div>
<div>trtr</div>
<div>rey</div>
</div>
<br><button id=zsave>save position</button>
<button id=zrestore>restore position</button>

CSS

div{
    display:inline-block;
}

JavaScript

zsave.addEventListener("click",do_Save);
zrestore.addEventListener("click",do_restore);
//
function do_Save(){
zbE=zbEz
var range=window.getSelection().getRangeAt(0);
var sC=range.startContainer,eC=range.endContainer;
A=[];while(sC!==zbE){A.push(getNodeIndex(sC));sC=sC.parentNode}
B=[];while(eC!==zbE){B.push(getNodeIndex(eC));eC=eC.parentNode}
window.rp={"sC":A,"sO":range.startOffset,"eC":B,"eO":range.endOffset};
//range is the selected text
//
//alert()
}
function do_restore(){
    zbE=zbEz
zbE.focus();
var sel=window.getSelection(),range=sel.getRangeAt(0);
var x,C,sC=zbE,eC=zbE;
C=rp.sC;x=C.length;while(x--)sC=sC.childNodes[C[x]];
C=rp.eC;x=C.length;while(x--)eC=eC.childNodes[C[x]];
    //alert(sC)
range.setStart(sC,rp.sO);
range.setEnd(eC,rp.eO);
sel.removeAllRanges();
sel.addRange(range);
//////////////////////////////////
// create an <a> element
var newElement = document.createElement('a');
linker='123'
newElement.innerHTML = '&nbsp;'+linker+'&nbsp;';
// delete whatever is on the range
range.deleteContents();
// insert the <a> element
range.insertNode(newElement);
}
//
function getNodeIndex(n){var i=0;while(n=n.previousSibling)i++;return i}
//////////////////////////////////