JSFiddle - React, Tailwind, and code Playground

by Martin Parenteau

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="main-input" contenteditable="true">Hello world!</div>
<button type="button" class="icon-bold">Bold</button>

JavaScript

var range = null;

document.addEventListener('selectionchange', function(event) {
    var taget = event.target;
    if (taget.activeElement.id == 'main-input') {
        range = getSelectionRange();
    }
});

function isIE() {
    return document.all || (!!window.MSInputMethodContext && !!document.documentMode);
}

function execBoldCommand() {
    if (document.getSelection() != "") {
        document.execCommand('bold');
    } else {
        var s = null;
        if (window.getSelection) {
            s = window.getSelection();
        } else {
            s = document.getSelection();
        }

        if (isIE()) {
            var selRange = s.getRangeAt(0);

            //Insert node with dummy text 'd'
            var newNode = document.createTextNode('d');
            selRange.insertNode(newNode);
            s.removeAllRanges();
            s.addRange(selRange);

            //Execute command on dummy
            document.execCommand('bold');

            //Delete dummy from range
            selRange.setStart(newNode, 0);
            selRange.setEnd(newNode, 1);
            selRange.deleteContents();

            s.removeAllRanges();
            s.addRange(selRange);
        } else {
            if (range == null) {
                range = document.createRange();
            }
            s.removeAllRanges();
            s.addRange(range);
            document.execCommand('bold');
        }
    }
}

function getSelectionRange() {
    var sel;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection) {
        return document.createRange();
    }

    return null;
}

$(document).on('click', '.icon-bold', function() {
    $('#main-input').focus();
    execBoldCommand();
});