JSFiddle - React, Tailwind, and code Playground

by Shree Khanal

HTML

<div id="result" contenteditable="true">
            </div>

CSS

#result {
            position: absolute;
            top: 8px;
            left: 8px;
            background: transparent;
            color: #000;
            font: normal 14px Arial;
            width: 213px;
            height: 60px;
            border: solid 1px #1c94c4;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 10px;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
        }
        #result a {
            display: inline-block;
            color: #000;
            text-decoration: none;
            font: normal 14px Arial;
            background: #d8dfea;
            background: -webkit-gradient(linear, center top, center bottom, from(#dce6f8), to(#bdcff1));
            background: -webkit-linear-gradient(#dce6f8, #bdcff1);
            -webkit-border-radius: 2px;
            -webkit-box-shadow: 0 0 0 1px #a3bcea;
            font-weight: normal;
        }

JavaScript

var saveSelection, restoreSelection;

if (window.getSelection && document.createRange) {
    saveSelection = function(containerEl) {
        var range = window.getSelection().getRangeAt(0);
        var preSelectionRange = range.cloneRange();
        preSelectionRange.selectNodeContents(containerEl);
        preSelectionRange.setEnd(range.startContainer, range.startOffset);
        var start = preSelectionRange.toString().length;

        return {
            start: start,
            end: start + range.toString().length
        };
    };

    restoreSelection = function(containerEl, savedSel) {
        var charIndex = 0, range = document.createRange();
        range.setStart(containerEl, 0);
        range.collapse(true);
        var nodeStack = [containerEl], node, foundStart = false, stop = false;

        while (!stop && (node = nodeStack.pop())) {
            if (node.nodeType == 3) {
                var nextCharIndex = charIndex + node.length;
                if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
                    range.setStart(node, savedSel.start - charIndex);
                    foundStart = true;
                }
                if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
                    range.setEnd(node, savedSel.end - charIndex);
                    stop = true;
                }
                charIndex = nextCharIndex;
            } else {
                var i = node.childNodes.length;
                while (i--) {
                    nodeStack.push(node.childNodes[i]);
                }
            }
        }

        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
} else if (document.selection) {
    saveSelection = function(containerEl) {
        var selectedTextRange = document.selection.createRange();
        var preSelectionTextRange = document.body.createTextRange();
       ...