JSFiddle - React, Tailwind, and code Playground

by Michael Barros

HTML

Here is some text.
<p>
<div id="source" tabindex="1" >
     Hello world!
</div>
</p>
Here is some more text.

CSS

#source {
    border: 1px solid Black;
    padding: 1em;
    background-color: #f0f0f0;
}

JavaScript

(() => {
    console.clear();

    const DEBUG = false;

    function getSelectionRange() {
        let sel;

        if (window.getSelection) {
            sel = window.getSelection();
            
            if (sel.rangeCount) {
                return sel.getRangeAt(0);
            }
        } else if (document.selection) {
            return document.selection.createRange();
        }

        return null;
    }

    jQuery.extend(jQuery.expr[':'], {
        focus: function(e) {
            try {
                return e == document.activeElement;
            } catch (err) {
                return false;
            }
        }
    });
    
    function selectText(elem) {
        // let elem = document.getElementById(containerid);
        let currentRange = getSelectionRange();
    
        if (document.selection) {    
            let range = document.body.createTextRange();
    
            range.moveToElementText(elem);
    
            range.select();
        } else if (window.getSelection) {
            let range = document.createRange();

            window.getSelection().removeAllRanges();
    
            range.selectNode(elem);

            if (DEBUG) {
                console.debug('currentRange:', currentRange);
                console.debug('range:       ', range);
                console.debug('');
            }
    
            window.getSelection().addRange(range);
        }
    }

    function debugEvent(ev, elem) {
        if (DEBUG) {
            console.debug(`ev.keyCode:        ${ev.keyCode}
ev.ctrlKey:        ${ev.ctrlKey}
elem.is(':focus'): ${elem.is(':focus')}
elem:`, elem[0]);
            // console.debug('activeElement:', document.activeElement);
            console.debug('');
        }
    }

    function documentKeyDownEvent(elem) {
        function _documentKeyDownEvent(ev) {
            debugEvent(ev, elem);
    
            // if (elem.is(":hover")) {
            if (elem.is(':focus')) {
                if (ev.keyCode == 65 &&...