JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" value="Save current selection/caret position" onclick="save()">
<input type="button" value="Insert HTML at save selection/caret position" onclick="insert(); return false">

<div contenteditable="true" id="test">Here is some nice text</div>

JavaScript

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();
        }
    };
}

var savedSel;

function save() {
    savedSel = saveSelection();
}

function insert() {
    restoreSelection(savedSel);
    document.getElementById("test").focus();
    try {
        document.execCommand("InsertHTML", false, "<b>INSERTED</b>");
    } catch (ex) {
        if (document.selection && document.selection.createRange) {
            var range = document.selection.createRange();
            if (range.pasteHTML) {
                range.pasteHTML("<b>INSERTED</b>");
            }
        }
    }
}