JSFiddle - React, Tailwind, and code Playground

by adelura

HTML

<div contenteditable="true">
    <div contenteditable="false">
        <div contenteditable="true">
            <p>... and then click here.</p>
        </div>
    </div>
    <p >At first click here...</p>
</div>

<div id="result"></div>

<!-- When switching between editable elements, caret is reset to very beginning, but should be set where user clicked. -->

JavaScript

window.addEventListener('click', function () {
    var rng = window.getSelection().getRangeAt(0);
    console.log( rng.startContainer, rng.startOffset, rng.endOffset );
});