JSFiddle - React, Tailwind, and code Playground

by Adrià Vilanova Martínez

HTML

<div id="__top_header"><div class="gb_cb"></div></div>
<div id="p-b-0" class="GBDQCSWCDMB editable" g_editable="true" role="textbox" contenteditable="true" aria-multiline="true" aria-live="polite" aria-label="Compose a message"><div>¡Hola a los 3!</div><div>Si hacéis clic en el menú de Chrome () &gt;&nbsp;</div></div>
<div><button onclick="htmleditor.open()">Open HTML editor</button></div>

JavaScript

var post, post_html, overlay_el, overlay2_el, textarea_el, save_el, cancel_el, owntoolbar_el, owntoolbar_content, final_post_html, header, header2, headerzindexdefault, header2zindexdefault, toolbar, toolbarbutton_el;

var htmleditor = {
    init: function() {
        toolbar = document.getElementsByClassName("goog-toolbar")[0];
        toolbarbutton_el = document.createElement('div');
        toolbarbutton_el.setAttribute('id','edithtmlcode');
        toolbarbutton_el.setAttribute('class','goog-inline-block goog-toolbar-button');
        toolbarbutton_el.setAttribute('title','Edit HTML code');
        toolbarbutton_el.setAttribute('role','button');
        toolbarbutton_el.setAttribute('style', '-webkit-user-select: none;');
        toolbar.appendChild(toolbarbutton_el);
        toolbarbutton_el.innerHTML = '<div class="goog-inline-block goog-toolbar-button-outer-box" style="-webkit-user-select: none;"><div class="goog-inline-block goog-toolbar-button-inner-box" style="-webkit-user-select: none;"><div class="tr-icon" style="-webkit-user-select: none;-webkit-user-select: none; background-position:-336px;"></div></div></div>';
        toolbarbutton_el.onclick = function() { htmleditor.open() };
        toolbarbutton_el.onmouseover = function() { toolbarbutton_el.setAttribute('class', 'goog-inline-block goog-toolbar-button goog-toolbar-button-hover') };
        toolbarbutton_el.onmouseout = function() { toolbarbutton_el.setAttribute('class', 'goog-inline-block goog-toolbar-button') };
        toolbarbutton_el.onmousedown = function() { toolbarbutton_el.setAttribute('class', 'goog-inline-block goog-toolbar-button goog-toolbar-button-hover goog-toolbar-button-active') };
        toolbarbutton_el.onmouseup = function() { toolbarbutton_el.setAttribute('class', 'goog-inline-block goog-toolbar-button') };
    },
    open: function() {
        header = document.getElementById("__top_header");
        header2 = document.getElementsByClassName("gb_cb")[0];
        post =...