JSFiddle - React, Tailwind, and code Playground

by SpacePineapple

HTML

<div id="editor" style="width:300px;padding:10px;" contenteditable="true">test test test test</div>
    <input type="text" />
    <input id="btn" type="button" onclick="restoreSelection(tinyRange); ">

JavaScript

var tinyRange;
function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}
    
    function restoreSelection(range) {
        if (range) {
            if (window.getSelection) {
                sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            } else if (document.selection && range.select) {
                range.select();
            }
        }
    }
document.getElementById("editor").onmouseup = function () {
    tinyRange = saveSelection();
}
document.getElementById("btn").onclick = function(){
    restoreSelection(tinyRange); 
    document.getElementById("editor").focus();
}