JSFiddle - React, Tailwind, and code Playground

by holf

HTML

<div id="editable" contenteditable="true"> <span contenteditable="false" style='font-weight:bold'>Bold</span>

    <span
    contenteditable="false" style='text-decoration:underline;'>Underline</span>
</div>

JavaScript

$(document).ready(function () {

    $('div').keyup(function () {
        var range;

        if (document.selection) range = document.selection.createRange().parentElement();
        else if (window.getSelection) {
            range = window.getSelection().getRangeAt(0);
            var container = range.commonAncestorContainer.parentNode;
            var previousSibling = container.previousSibling;
        }

        console.log(range);
        console.log(range.startOffset);
        console.log(container);
        console.log(previousSibling);
    });
});