JSFiddle - React, Tailwind, and code Playground

HTML

<BODY>
    <H1>Title</H1><P>Blah xyz.</P><P>Press Enter to extend selection.</P><P>Press Esc to delete selection from document and alert document.innerHTML.</P>

    Some more text after the first paragraph
    <ul>Press:
      <li>E to extend selection;</li> 
      This is not part of a list
      <li>D to delete selection from document;</li> 
      And this isn't either
      <li>B to make selection bold.</li>
    </ul>
</body>

JavaScript

Selection.prototype.coverAll = function() {
    var ranges = [];   
    for(var i=0; i<this.rangeCount; i++) {
        var range = this.getRangeAt(i);
        var ancestor = range.commonAncestorContainer;
        if (ancestor.nodeType == 1) {            
            if (range.startContainer.parentNode != ancestor &&                this.containsNode(range.startContainer.parentNode, true)) {
                range.setStartBefore(range.startContainer.parentNode);
            }
            if (range.endContainer.parentNode != ancestor && this.containsNode(range.endContainer.parentNode, true)) {
                    range.setEndAfter(range.endContainer.parentNode);
            }
        }
        ranges.push(range);
    }
    this.removeAllRanges();
    for(var i=0; i<ranges.length; i++) {
        this.addRange(ranges[i]);
    }
    return;
};

Selection.prototype.boldinize = function() {
    for(var i=0; i<this.rangeCount; i++) {        
        var range = this.getRangeAt(i);
        var b = document.createElement('b');
        try {
            range.surroundContents(b);
        } catch (e) {
            alert(e);
        }
    }
};

$(document).bind("keydown", function(e) {
    if(e.keyCode == 69) {
        window.getSelection().coverAll();
    }

    if(e.keyCode == 68) {
        window.getSelection().deleteFromDocument();
        alert(document.body.innerHTML);
    }
        
    if(e.keyCode == 66) {
        window.getSelection().boldinize();
    }
});