add server upload buttons and Ctrl-S bindings to mode_editor

in combination with PUT support in ./static.py (or whatever other web server)
this allows people to save both the highlighting rules and the demo documents right
from the mode editor for a better workflow.

demo/kitchen-sink/doclist.js

@@ -169,13 +169,30 @@ function loadDoc(name, callback) {
     });
 }
 
+// callback is called with the error message from PUT (if any)
+function saveDoc(name, callback) {
+    var doc = fileCache[name];
+    if (!doc || !doc.session)
+        return callback("Unknown document: " + name);
+
+    var path = doc.path;
+    var parts = path.split("/");
+    if (parts[0] == "docs")
+        path = "demo/kitchen-sink/" + path;
+    else if (parts[0] == "ace")
+        path = "lib/" + path;
+
+    net.put(path, doc.session.getValue(), callback);
+}
+
 module.exports = {
     fileCache: fileCache,
     docs: sort(prepareDocList(docs)),
     ownSource: prepareDocList(ownSource),
     hugeDocs: prepareDocList(hugeDocs),
     initDoc: initDoc,
-    loadDoc: loadDoc
+    loadDoc: loadDoc,
+    saveDoc: saveDoc,
 };
 module.exports.all = {
     "Mode Examples": module.exports.docs,

lib/ace/lib/net.js

@@ -22,6 +22,19 @@ exports.get = function (url, callback) {
     xhr.send(null);
 };
 
+exports.put = function (url, data, callback) {
+    var xhr = new XMLHttpRequest();
+    xhr.open('PUT', url, true);
+    xhr.onreadystatechange = function () {
+        //Do not explicitly handle errors, those should be
+        //visible via console output in the browser.
+        if (xhr.readyState === 4) {
+            callback(xhr.responseText);
+        }
+    };
+    xhr.send(data);
+};
+
 exports.loadScript = function(path, callback) {
     var head = dom.getDocumentHead();
     var s = document.createElement('script');

tool/mode_creator.html

@@ -19,7 +19,7 @@
             border-bottom: solid 1px;
         }
         .separator-h {
-            padding: 0 20px;
+            padding: 0 10px;
         }
         #closeBtn {
             background: rgba(245, 146, 146, 0.5);
@@ -59,6 +59,7 @@
     <select id="modeEl" size="1"></select>
     <input type="button" value="&#10227;" title="sync" id="syncToMode"></select>
     <span id="tablist"></span>
+    <input type="button" value="Upload" id="uploadToServer1"></select>
     <span class="separator-h"></span>
     <label for="autorunEl">live preview</label>
     <input type="checkbox" label="autorun" id="autorunEl" checked>
@@ -70,6 +71,7 @@
         <label for="themeEl">Theme</label>
         <select id="themeEl" size="1" value="textmate"></select>
         <span class="separator-h"></span>
+        <input type="button" value="Upload" id="uploadToServer2"></select>
         <label for="doc">Document</label>
         <select id="doc" size="1"></select>
     </div>

tool/mode_creator.js

@@ -53,6 +53,7 @@ util.bindDropdown("doc", function(value) {
     doclist.loadDoc(value, function(session) {
         if (session) {
             editor2.setSession(session);
+            uploadEl2.disabled = session.getUndoManager().isClean();
         }
     });
 });
@@ -60,6 +61,7 @@ util.bindDropdown("doc", function(value) {
 var modeEl = document.getElementById("modeEl");
 util.fillDropdown(modeEl, modelist.modes);
 var modeSessions = {};
+var savedLeadingComments = "";
 util.bindDropdown(modeEl, function(value) {
     if (modeSessions[value]) {
         editor1.setSession(modeSessions[value]);
@@ -68,7 +70,10 @@ util.bindDropdown(modeEl, function(value) {
     }
     var hp = "./lib/ace/mode/" + value + "_highlight_rules.js";
     net.get(hp, function(text) {
+        uploadEl1.disabled = true;
+        savedLeadingComments = text;
         text = util.stripLeadingComments(text);
+        savedLeadingComments = savedLeadingComments.substr(0, savedLeadingComments.length - text.length);
 
         var session = new EditSession(text);
         session.setUndoManager(new UndoManager());
@@ -85,6 +90,40 @@ document.getElementById("syncToMode").onclick = function() {
     docEl.onchange();
     run();
 };
+
+var uploadEl1 = document.getElementById("uploadToServer1");
+var uploadEl2 = document.getElementById("uploadToServer2");
+uploadEl1.onclick = function() {
+    var text = savedLeadingComments + editor1.getValue();
+    var url = "./lib/ace/mode/" + modeEl.value + "_highlight_rules.js";
+    net.put(url, text, function(text) {
+        if (text.trim().length > 0)
+            log(text);
+        else {
+            uploadEl1.disabled = true;
+            editor1.getSession().getUndoManager().markClean();
+        }
+    });
+};
+editor1.commands.bindKey("Ctrl-S", uploadEl1.onclick);
+uploadEl2.onclick = function() {
+    doclist.saveDoc(docEl.value, function(text) {
+        if (text.trim().length > 0)
+            log(text);
+        else {
+            uploadEl2.disabled = true;
+            editor2.getSession().getUndoManager().markClean();
+        }
+    });
+};
+editor2.commands.bindKey("Ctrl-S", uploadEl2.onclick);
+editor1.on('change', function() {
+    uploadEl1.disabled = false;
+});
+editor2.on('change', function() {
+    uploadEl2.disabled = false;
+});
+
 document.getElementById("perfTest").onclick = function() {
     var lines = editor2.session.doc.getAllLines();
     if (!lines.length)