JSFiddle - React, Tailwind, and code Playground

by naryad

HTML

<body>
    <h1>Title</h1>
    <p>Blah xyz.</p>
    <ul>Press:
        <li>E to extend selection;</li>
        <li>D to delete selection from document;</li>
        <li>B to make selection bold.</li>
    </ul>
</body>

CSS

li { list-style: disc; margin-left: 20px }

JavaScript

Selection.prototype.coverAll = function() {
    var ranges = [];
    for(var i=0; i<this.rangeCount; i++) {
        var range = this.getRangeAt(i);
        while(range.startContainer.nodeType == 3
              || range.startContainer.childNodes.length == 1)
            range.setStartBefore(range.startContainer);
        while(range.endContainer.nodeType == 3
              || range.endContainer.childNodes.length == 1)
            range.setEndAfter(range.endContainer);
        ranges.push(range);
    }
    this.removeAllRanges();
    for(var i=0; i<ranges.length; i++) {
        this.addRange(ranges[i]);
    }
    return;
};

Selection.prototype.boldinize = function() {
    this.coverAll();
    for(var i=0; i<this.rangeCount; i++) {
        var range = this.getRangeAt(i);
        var parent = range.commonAncestorContainer;
        var b = document.createElement('b');
        if(parent.nodeType == 3) {
            range.surroundContents(b);
        } else {
            var content = range.extractContents();
            b.appendChild(content);
            range.insertNode(b);
        }
    }
};

Event.observe(document, "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();
    }
});