(function ($) {
    $.fn.sidebar = function (options) {
        var settings = $.extend({
            // defaults
        }, options);

        var $self = this;

        $self.on("sidebar.hide", function () {
            $self.animate({"top": - $self.height() - 10});
        });

        $self.on("sidebar.show", function () {
            $self.animate({"top": 0});
        });
    };
})($);

(function (window) {
    CodeMirror.commands.autocomplete = function(cm) {
        CodeMirror.showHint(cm, CodeMirror.hint.html);
    };

    $(".controls").sidebar();

    var mixedMode = {
        name: "htmlmixed",
        scriptTypes: [
            {
                matches: /\/x-handlebars-template|\/x-mustache/i,
                mode: null
            },
            {
                matches: /(text|application)\/(x-)?vb(a|script)/i,
                mode: "vbscript"
            }
        ]
    };

    var editor = CodeMirror.fromTextArea($(".htmlDocument")[0], {
        mode: mixedMode,
        tabMode: "indent",
        autoCloseBrackets: true,
        lineNumbers: true,
        extraKeys: {
          "Ctrl-Space": "autocomplete"
        },
        value: "<!doctype html>\n<html>\n  " + document.documentElement.innerHTML + "\n</html>"
    });

    // click on the start button
    $(".controls .run").on("click", function () {
        updateResult();
    });

    // click on the open button
    $(".controls .open").on("click", function () {
        $("#openFileModal").modal("show");
    });

    // close modal and open file
    $("#openFileModal .ok-button").on("click", function () {
        console.debug("Not implemented.");
        $("#openFileModal").modal("close");
    });

    $(window).on("keydown", function (e) {
        if (e.ctrlKey && e.which === 13) { updateResult(); }
        if (e.ctrlKey && e.which === 38) {
            $(".controls").trigger("sidebar.hide");
        }
        if (e.ctrlKey && e.which === 40) {
            $(".controls").trigger("sidebar.show");
        }
    });

    // editor.on("change", updateResult);

    function updateResult () {
        var ifrm = $(".result:first")[0];
        ifrm.contentDocument.body.textContent = "";
        var htmlDocumentStr = editor.getValue()
        ifrm.contentDocument.open();
        ifrm.contentDocument.write(htmlDocumentStr);
        ifrm.contentDocument.close();
    }

    updateResult();
})(window);

@@ -1494,32 +1494,167 @@
 how%22);%0A    %7D);%0A%0A
+    // click on the save button%0A    $(%22.controls .save%22).on(%22click%22, function () %7B%0A        $(%22#saveFileModal%22).modal(%22show%22);%0A    %7D);%0A%0A
     // close mod
@@ -1823,24 +1823,285 @@
 );%0A    %7D);%0A%0A
+    // close modal and open file%0A    $(%22#saveFileModal .ok-button%22).on(%22click%22, function () %7B%0A        var filePath = $(%22#saveFileModal .file-path%22).val();%0A        $API.writeFile(filePath, editor.getValue());%0A        $(%22#saveFileModal%22).modal(%22close%22);%0A    %7D);%0A%0A
     $(window

Save editor content in file.