JSFiddle - React, Tailwind, and code Playground

by r043v

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<section class="section" id="main">
    <nav id="menu">
        menu
    </nav>
    <section class="section" id="content">
        <section class="section">
            <article data-content="text">adfgdfgdfgdf</article>
            <article data-content="img">b</article>
            <article data-content="text">c</article>
        </section>
        <section class="section">
            <article data-content="text">A</article>
            <article data-content="text">B</article>
            <article data-content="text">C</article>        
        </section>
        <section class="section">
            <article data-content="text">1</article>
            <article data-content="text">2</article>
            <article data-content="text">3</article>        
        </section>
    </section>
</section>
<div id="log"></div>

CSS

.section {
    display:-webkit-flex;
    background:pink;
    -webkit-flex-direction:row;
    -webkit-flex-wrap:wrap;
    -webkit-justify-content:space-between;
}

.section > *:not(.section) {
    background:blue;
}

.section .section { background:green; }

#main { margin-top:30px; -webkit-flex-wrap:wrap; }

#menu { margin:auto; -webkit-flex:1; max-width:200px; min-width:100px; background:purple; }
#content { -webkit-flex:1; -webkit-flex-direction:column; }
#content > .section { width:100%; -webkit-flex:1; }
#content .section > *:not(.section) {
    padding:1%; min-width:100px; width:30%;
}

[data-content]:hover:not(.hilight) {
    box-shadow: inset 1px 1px 6px 3px #cbcefb;
}

#main { -webkit-flex-wrap:wrap; }
#toolbar {
    border-radius:2px; background:white; padding:2px;
}

#toolbar input {
    min-width:16px; min-height:16px; padding:2px; margin-right:2px; background:purple;
}

JavaScript

/*$("section").sortable().disableSelection();
$("article").resizable({
      grid: 50
    });*/

var $current = $();
var $ov = $("<div/>");
$ov.css({position:"absolute",top:0,left:0,width:"100%",height:"100%",margin:0,zIndex:9998,background:"rgba(255,255,255,0.3)",opacity:0.01}).lock = false;
$ov.on('close',function(){
    if($ov.lock) return;
    $ov.fadeTo(500,0.01,function(){
        $ov.detach();
        $current.removeClass('hilight').css({zIndex:""}).trigger("dselect");
        $current = $();
    });
}).on('click',function(){
    $ov.trigger('close');
}).on('lock',function(){
    $ov.lock = true;
}).on('dlock',function(){
    $ov.lock = false;
});

var $tb = $("<div/>",{id:"toolbar"}).css({position:"absolute"}).appendTo($ov);

$tb.on('click','input',function(e){
    var $t = $(this);
    var d = $t.data();
    if(d.command !== undefined)
        document.execCommand(d.command,false,'');
    e.stopPropagation();
    e.preventDefault();
    return false;
}).on('addInput',function(e,o){
    console.log(o);
    $i = $('<input/>',{type:'button',value:o.label}).css(o.css);
        //$( (o.label === undefined)?'<div/>':o.label ).css( (o.css === undefined)?{}:o.css)
    if(o.data !== undefined) $i.data(o.data);
    $i.appendTo($tb);
}).on('define',function(e,o){
    console.log(o);
    $.each(o,function(){ 
        $tb.trigger('addInput',this);
    });
}).trigger('define',[
    [{
        label:'B',
        css:{fontWeight:'bold'},
        data:{command:'bold'}
    },{
        label:'i',
        css:{fontStyle:'italic'},
        data:{command:'italic'}
    },{
        label:'u',
        css:{textDecoration:'underline'},
        data:{command:'underline'}
    },{
        label:'',
        css:{background:"red"},
        data:{}
    }]
]);

$(document).on("select","[data-content=text]",function(){
    $(this).attr({contenteditable:true}).focus();
}).on("dselect","[data-content=text]",function(){
   ...