JSFiddle - React, Tailwind, and code Playground

by timdown

HTML

<p>You can select this stuff with the right mouse button.</p>
<p>Give it a try</p>

JavaScript

function getMouseEventCaretRange(evt) {
    var range, x = evt.clientX, y = evt.clientY;
    
    // Try the simple IE way first
    if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToPoint(x, y);
    } else if (typeof document.createRange != "undefined") {
        // Try Mozilla's rangeOffset and rangeParent properties, which are exactly what we want
        
        if (typeof evt.rangeParent != "undefined") {
            range = document.createRange();
            range.setStart(evt.rangeParent, evt.rangeOffset);
            range.collapse(true);
        }
    
        // Try the standards-based way next
        else if (document.caretPositionFromPoint) {
            var pos = document.caretPositionFromPoint(x, y);
            range = document.createRange();
            range.setStart(pos.offsetNode, pos.offset);
            range.collapse(true);
        }
    
        // Next, the WebKit way
        else if (document.caretRangeFromPoint) {
            range = document.caretRangeFromPoint(x, y);
        }
    }
    
    return range;
}

function selectRange(range) {
    if (range) {
        if (typeof range.select != "undefined") {
            range.select();
        } else if (typeof window.getSelection != "undefined") {
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
}

var anchorRange;

function mouseMove(evt) {
    evt = evt || window.event;
    var range = getMouseEventCaretRange(evt), sel, selRange;
    if (typeof range.setEndPoint != "undefined") {
        // Old IE
        selRange = anchorRange.duplicate();
        selRange.setEndPoint("EndToEnd", range);
        if (selRange.text == "") {
            // Try the other way round
            selRange = anchorRange.duplicate();
            selRange.setEndPoint("StartToStart", range);
        }
        selRange.select();
    } else if (window.getSelection) {
        sel =...