JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rangy.googlecode.com/svn/tags/1_2/currentrelease/rangy-core.js"></script>
<div id="test">
    <p>This is some text</p>
</div>

<div id="startpos"></div>

JavaScript

$(function(){
    Highlight.watch($("#test")[0], function(){
        var pos = Highlight.getStartPosition();
        $("#startpos").text("Top: "+pos.top+", Left: "+pos.left);
    }, function(){});
});
var Highlight = {

    selection: false,
    backwards: false,

    watch: function(container, onSelect, onDeselect){
        
        $(window).bind("mouseup keyup", function(e){  

            //Deselect gets called even if there is a new selection.
            onDeselect.call(container, e);

            //Sometimes this fails while the page is loading, catch and return
            //prevents it from throwing on error
            try {
                var sel = rangy.getSelection().getRangeAt(0);
            } catch(err){
                return;
            }

            //Is the highlight within the container?
            var startContainer = $(sel.startContainer).closest(container);
            var endContainer = $(sel.endContainer).closest(container);
            if(startContainer.length==0 || endContainer.length==0){
                return;
            }
            
            //Call onSelect if something is actually highlighted (not just cursor)
            if(sel.startOffset!=sel.endOffset || sel.startContainer != sel.endContainer){
                Highlight.selection = sel;
                Highlight.backwards = rangy.getSelection().isBackwards();
                onSelect.call(container, e);
            }
        });
    },

    set: function(startContainer, startOffset, endContainer, endOffset, backwards){
        if(arguments.length==4){
            backwards = false;
        }
        var range = rangy.createRange();
        range.setStart(startContainer, startOffset)
        range.setEnd(endContainer, endOffset);
        var selection = rangy.getSelection()
        selection.removeAllRanges()
        selection.addRange(range, backwards);
        Highlight.selection = range;
        Highlight.backwards = backwards;
    },

    getStartPosition:...