JSFiddle - React, Tailwind, and code Playground

HTML

<div id="editable" contenteditable="true">Some <b>editable</b> content</div>
Caret position in body: <span id="caretPos"></span>

JavaScript

function getCaretCharacterOffsetWithin(element) {
    var caretOffset = 0;
    if (typeof window.getSelection != "undefined") {
        var range = window.getSelection().getRangeAt(0);
        var preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(element);
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        caretOffset = preCaretRange.toString().length;
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
        var textRange = document.selection.createRange();
        var preCaretTextRange = document.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    return caretOffset;
}

var caretPosEl = document.getElementById("caretPos");
var editable = document.getElementById("editable");

function showCaretPos() {
    caretPosEl.innerHTML = getCaretCharacterOffsetWithin(editable);
}

editable.onmouseup = showCaretPos;
editable.onkeyup = showCaretPos;