JSFiddle - React, Tailwind, and code Playground

by Wentz Wu

HTML

<header>
     <h1>Super HTML Editor</h1>

</header>
<section id="list">
     <h1>File Browser</h1>

    <details open id="filedrop">
        <summary>Create File</summary>
        <form name="create">
            <div>
                 <h2>Create an empty file</h2>

                <input type="text" name="name" placeholder=" e.g. index.html" />
                <input type="submit" value="Create" />
            </div>
        </form>
        <div class="spacer">OR</div>
        <form name="import">
            <div>
                 <h2>Import existing file(s)</h2>

                <input type="file" name="files" multiple accept="text/html" />
                <input type="submit" value="Import" />
            </div>
        </form>
        <div class="note"> <strong>Note</strong>: You can drag files from your computer and drop them anywhere in this box to import them into the application.</div>
    </details>
    <details open>
        <summary>My Files</summary>
        <div class="note top">You currently have <span id="file_count">0</span> file(s):</div>
        <ul id="files"></ul>
        <div class="note"> <strong>Note</strong>: You can drag any of the files in the list above to your computer to export them from the application.</div>
    </details>
</section>
<section id="editor">
     <h1>Editing <span id="file_name"></span><a href="#list">Back to File Browser</a></h1>

    <div class="mode-toolbar">
        <div class="left">
            <div>Edit Mode:</div>
            <button id="edit_visual" class="split_left active">Visual</button>
            <button id="edit_html" class="split_right">HTML</button>
        </div>
        <div class="right">
            <button id="file_save" class="green">Save File</button>
            <button id="file_preview">Save &amp; Preview</button>
        </div>
    </div>
    <details open>
        <summary>File Contents</summary>
        <div id="file_contents">
            <div id="file_contents_visual">
               ...

JavaScript

(function () {
    var SuperEditor = function () {};

    var init = function () {
        new SuperEditor();
    };

    window.addEventListener('load', init, false);


    var view, fileName, isDirty = false,
        unsavedMsg = 'Unsaved changes will be lost. Are you sure?',
        unsavedTitle = 'Discard changes';

    var markDirty = function () {
        isDirty = true;
    };

    var markClean = function () {
        isDirty = false;
    };

    var checkDirty = function () {
        if (isDirty) {
            return unsavedMsg;
        }
    };

    window.addEventListener('beforeunload', checkDirty, false);







})();