JSFiddle - React, Tailwind, and code Playground

by blowsie

HTML

<div contenteditable="true">This selection thing when using execCommand doesnt work!</div>
<button id="btn">Uppercase Selection!</button>

CSS

#btn {padding:5px; background:#ccc; font-size:10px; display:inline}

JavaScript

function gettext() {
    var txt = '';
    if (window.getSelection) {
        txt = window.getSelection();
    }
    else if (document.getSelection) {
        txt = document.getSelection();
    }
    else if (document.selection) {
        txt = document.selection.createRange().text;
    }
    var tt = txt.focusNode.parentNode;
    return txt
}

var saveSelection, restoreSelection;
if (window.getSelection) {
    // IE 9 and non-IE
    saveSelection = function() {
        var sel = window.getSelection(),
            ranges = [];
        if (sel.rangeCount) {
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                ranges.push(sel.getRangeAt(i));
            }
        }
        return ranges;
    };

    restoreSelection = function(savedSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
        for (var i = 0, len = savedSelection.length; i < len; ++i) {
            sel.addRange(savedSelection[i]);
        }
    };
} else if (document.selection && document.selection.createRange) {
    // IE <= 8
    saveSelection = function() {
        var sel = document.selection;
        return (sel.type != "None") ? sel.createRange() : null;
    };

    restoreSelection = function(savedSelection) {
        if (savedSelection) {
            savedSelection.select();
        }
    };
}
$("#btn").click(function(e) {

    var savedSel = saveSelection();
    console.log("before exec", savedSel[0].startOffset, savedSel[0].endOffset);
    var str = String(gettext()).toUpperCase()
    document.execCommand("insertHTML", true, str)
    console.log("after exec", savedSel[0].startOffset, savedSel[0].endOffset);
    restoreSelection(savedSel);
    return false;
    
    
});