JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<textarea id="t"></textarea>
<div id="textTools" class="_text_tools">
    <b id="b">B</b>
    <i id="i">i</i>
    <span id="h1">h1</span>
</div>
<iframe id="d" contenteditable></iframe>

CSS

#d{
    display: block;
    width: 300px;
    margin: 0 auto;
    word-break: break-all;
}

._text_tools{
    background: #34383e;
    color: white;
    width: 30px;
    border-radius: 5px 0 0 5px;
    position: absolute;
}

._text_tools > *{
    width: 30px;
    display: block;
    text-align: center;
}

JavaScript

var TextEditor = (function(){
    var d = document.getElementById('d');
    var t = document.getElementById('t');
    var b = document.getElementById('b');
    var i = document.getElementById('i');
    var h1 = document.getElementById('h1');
    var tools = document.getElementById('textTools');
    
    tools.style.left = (d.offsetLeft - 30) + 'px';
    
    d.contentWindow.document.designMode="on";
    d.contentWindow.document.close();
    
    window.frames[0].document.body.style.wordBreak = 'break-all';
    
    function setValue(){
        t.value = window.frames[0].document.body.innerHTML ;
    };
    
    function cmd(cmd, val){
        if(cmd){
           var edit = d.contentWindow;
           var value = val || '';
           edit.focus(); 
           edit.document.execCommand(cmd, false, value); 
           edit.focus();  
           setValue();
        }
    }
    
    b.onclick = function(){
       cmd('bold');
    }
    
    i.onclick = function(){
        cmd('italic');
    }
    
    h1.onclick = function(){
        cmd('formatBlock','<H1>');
    }
    
    window.frames[0].onkeyup = function(){
        setValue();
    }
    
    t.style.display = 'none';

}());