JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="url" size="30" value="http://stackoverflow.com/">
<input type="button" value="Link" onclick="createLink()">

<div contenteditable="true">Select some of this content and click the link button</div>

JavaScript

function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            var ranges = [];
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                ranges.push(sel.getRangeAt(i));
            }
            return ranges;
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(savedSel) {
    if (savedSel) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            for (var i = 0, len = savedSel.length; i < len; ++i) {
                sel.addRange(savedSel[i]);
            }
        } else if (document.selection && savedSel.select) {
            savedSel.select();
        }
    }
}

function createLink() {
    // There's actually no need to save and restore the selection here. This is just an example.
    var savedSel = saveSelection();
    var url = document.getElementById("url").value;
    restoreSelection(savedSel);
    document.execCommand("CreateLink", false, url);
}