JSFiddle - React, Tailwind, and code Playground

by Jithin Raj P R

HTML

var Editor = function() {
    var $froala_editor = $('#froala_editor'),
        $cusStyle =` <style class="custome_for_tieit">
                .body-tr.selected_par>td,.footer-tr.selected_par>td{position: relative;display:table-cell!important}td>div{min-height: 0;transition:.3s ease-in-out}.body-tr.selected_par>td:after,.footer-tr.selected_par>td:after{content: '';position:absolute;left:-2px;right:-2px;top:-2px;bottom:-2px;border:3px solid #7C4DFF;pointer-events:none;z-index: 99;}.body-tr:first-child .par-put-up,.body-tr:last-child .par-put-down{display: none!important}td.fr-selected-cell>div.empty{min-height: 15px;cursor:default;font-size: 12px;}td.fr-selected-cell>div.empty:after{position: absolute;content:'<-- spacer -->';color:#ad4fbd;left:50%;top:50%;transform:translate(-50%,-52%);font-weight:700;font-size:12px}.right_option_custome{display: inline-block;position:absolute;right:1px;top:1px;z-index:9999}.right_option_custome a{width: 25px;height:25px;background:#fff;float:left;cursor:pointer}.right_option_custome a:hover{background: #FF766E}.right_option_custome a.par-duplicate:hover,.right_option_custome a.par-edit:hover{background: #2FAEFB}.right_option_custome a i{background: url(../../../../../assets/campaign/image/trash.png);display:inline-block;width:100%;height:100%;float:left;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px 1px rgba(0,0,0,.16);background-size:20px 20px!important;background-position:center!important;background-repeat:no-repeat!important}.right_option_custome a:hover i{background: url(../../../../../assets/campaign/image/trash_active.png)}.right_option_custome a.par-duplicate i{background: url(../../../../../assets/campaign/image/duplicate.png)}.right_option_custome a.par-duplicate:hover i{background: url(../../../../../assets/campaign/image/duplicate_active.png)}.right_option_custome a.par-edit i{background: url(../../../../../assets/campaign/image/pencil_edit.png);background-size: 23px 23px!important;}.right_option_custome...

JavaScript

var Editor = function() {
    var $froala_editor = $('#froala_editor'),
        $cusStyle =` <style class="custome_for_tieit">
                .body-tr.selected_par>td,.footer-tr.selected_par>td{position: relative;display:table-cell!important}td>div{min-height: 0;transition:.3s ease-in-out}.body-tr.selected_par>td:after,.footer-tr.selected_par>td:after{content: '';position:absolute;left:-2px;right:-2px;top:-2px;bottom:-2px;border:3px solid #7C4DFF;pointer-events:none;z-index: 99;}.body-tr:first-child .par-put-up,.body-tr:last-child .par-put-down{display: none!important}td.fr-selected-cell>div.empty{min-height: 15px;cursor:default;font-size: 12px;}td.fr-selected-cell>div.empty:after{position: absolute;content:'<-- spacer -->';color:#ad4fbd;left:50%;top:50%;transform:translate(-50%,-52%);font-weight:700;font-size:12px}.right_option_custome{display: inline-block;position:absolute;right:1px;top:1px;z-index:9999}.right_option_custome a{width: 25px;height:25px;background:#fff;float:left;cursor:pointer}.right_option_custome a:hover{background: #FF766E}.right_option_custome a.par-duplicate:hover,.right_option_custome a.par-edit:hover{background: #2FAEFB}.right_option_custome a i{background: url(../../../../../assets/campaign/image/trash.png);display:inline-block;width:100%;height:100%;float:left;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px 1px rgba(0,0,0,.16);background-size:20px 20px!important;background-position:center!important;background-repeat:no-repeat!important}.right_option_custome a:hover i{background: url(../../../../../assets/campaign/image/trash_active.png)}.right_option_custome a.par-duplicate i{background: url(../../../../../assets/campaign/image/duplicate.png)}.right_option_custome a.par-duplicate:hover i{background: url(../../../../../assets/campaign/image/duplicate_active.png)}.right_option_custome a.par-edit i{background: url(../../../../../assets/campaign/image/pencil_edit.png);background-size: 23px 23px!important;}.right_option_custome...