JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<body>
</body>

CSS

body{
    color: black;
}

JavaScript

var iframe = document.createElement('iframe');
var style = document.createElement('style');

iframe.onload = function()
{
    this.contentWindow.document.getElementsByTagName('head')[0].appendChild(style);
    this.contentWindow.document.designMode = 'on';
    var sheet = style.sheet;
    sheet.addRule('html', 'color: #ccc; background: #333; font-family: vrinda;', 0);
    sheet.addRule('.quote', 'border: 1px solid white; padding: 10px;', 1);
    iframe.contentWindow.document.body.innerHTML = '<div class="quote"><p>whatever</p></div>';
    iframe.designMode = 'on';
    
    this.contentWindow.onkeydownx = function(event)
    {
        if (!event) event = this.event;
        var range, sel, cont = null, doc = this.document;
        var sel = this.getSelection();
        if (sel.rangeCount > 0)
        {
            range = sel.getRangeAt(0);
            cont = range.startContainer;
            if (cont.nodeType === 3) cont = cont.parentNode;
        }
        if (!cont) return;
        var className = cont.className;
        
        var insetBR = function()
        {
            sel.removeAllRanges();
            range.deleteContents();
            var pos = range.startOffset;
            var container = range.startContainer;
            range = doc.createRange();
            
            var insertNode = doc.createElement('br');
            insertNode.innerHTML = ' ';
            var afterNode;
            if (container.nodeType == 3)
            {
                var textNode = container;
                container = textNode.parentNode;
                var text = textNode.nodeValue;
                var textBefore = text.substr(0,pos);
                var textAfter = text.substr(pos);
                
                var beforeNode = doc.createTextNode(textBefore);
                afterNode = doc.createTextNode(textAfter);
                
                container.insertBefore(afterNode, textNode);
                container.insertBefore(insertNode, afterNode);
 ...