JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<h2>Title</h2>

<div class="editable">Editable element</div>

<div>Lipsum</div>

<div class="editable">Another editable element</div>

CSS

#styling {
    display: none;
    position: fixed;
    bottom: 0px;
    right: 0px;
    background: #111;
    color: #fff;
    font-size: 13px;
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
}

#styling li { 
    float: left; 
    padding: 5px;
}

.editable.active {
    box-shadow: 0 0 10px red;
}


#styling li,
.editable {
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

JavaScript

// Generate styling box.
$(
    '<ul id="styling">' +
        '<li class="bold">Bold</li>' +
        '<li class="underline">Underline</li>' +
        '<li class="close">Close</li>' +
    '</ul>'
).appendTo( 'body' );

var styling = $('#styling'),
    editable = $('.editable');

// Click event for .editable
$('.close').on("click", function() {

    styling.hide();
    editable.removeClass('active');
    
});

// Click event for closing styling 
editable.on("dblclick", function() {
    
    var obj = $(this);
    
    styling.show();
    
    obj.addClass('active');
    
});


styling.find('li').on("click", function() {
    
    var obj = $(this);
    
    
    var eActive = $('.editable.active');
    
    if ( obj.hasClass('bold') ) {
        eActive.css({ fontWeight: 'bold' })
    }
    else if ( obj.hasClass('underline') ) {
        eActive.css({ textDecoration: 'underline' })
    }
    
});