add html mode with mixed XML and JS highlighting

src/Editor.js

@@ -344,7 +344,8 @@ ace.Editor.prototype.toggleCommentLines = function() {
     if (this.selection.isEmpty()) return;
 
     var range = this.getSelectionRange();
-    var addedColumns = this.mode.toggleCommentLines(this.doc, range);
+    var state = this.bgTokenizer.getState(this.getCursorPosition().row);
+    var addedColumns = this.mode.toggleCommentLines(this.doc, range, state);
 
     this.selection.shiftSelection(addedColumns);
 };

src/Tokenizer.js

@@ -39,7 +39,7 @@ ace.Tokenizer.prototype.getLineTokens = function(line, startState) {
         if (re.lastIndex == lastIndex) { throw new Error("tokenizer error"); }
         lastIndex = re.lastIndex;
 
-//        window.LOG && console.log(match);
+//        window.LOG && jstestdriver.console.log(currentState, match);
 
         for ( var i = 0; i < state.length; i++) {
             if (match[i + 1]) {
@@ -79,7 +79,7 @@ ace.Tokenizer.prototype.getLineTokens = function(line, startState) {
         tokens.push(token);
     }
 
-//    window.LOG && console.log(tokens, currentState);
+//    window.LOG && jstestdriver.console.log(tokens, currentState);
 
     return {
         tokens : tokens,

src/mode/Html.js

@@ -0,0 +1,26 @@
+ace.provide("ace.mode.Html");
+
+ace.mode.Html = function() {
+    this.$tokenizer = new ace.Tokenizer(new ace.mode.HtmlHighlightRules().getRules());
+
+    this._js = new ace.mode.JavaScript();
+};
+ace.inherits(ace.mode.Html, ace.mode.Text);
+
+ace.mode.Html.prototype.toggleCommentLines = function(doc, range, state) {
+    var split = state.split("js-");
+    if (!split[0] && split[1]) {
+        return this._js.toggleCommentLines(doc, range, state);
+    }
+
+    return 0;
+};
+
+ace.mode.Html.prototype.getNextLineIndent = function(line, state, tab) {
+    var split = state.split("js-");
+    if (!split[0] && split[1]) {
+        return this._js.getNextLineIndent(line, split[1], tab);
+    }
+
+    return "";
+};

src/mode/HtmlHighlightRules.js

@@ -0,0 +1,119 @@
+ace.provide("ace.mode.HtmlHighlightRules");
+
+ace.mode.HtmlHighlightRules = function() {
+
+    // regexp must not have capturing parentheses
+    // regexps are ordered -> the first match is used
+
+    this._rules = {
+        start : [ {
+            token : "text",
+            regex : "<\\!\\[CDATA\\[",
+            next : "cdata"
+        }, {
+            token : "xml_pe",
+            regex : "<\\?.*?\\?>"
+        }, {
+            token : "comment",
+            regex : "<\\!--",
+            next : "comment"
+        }, {
+            token : "text",
+            regex : "<(?=\s*script)",
+            next : "script"
+        }, {
+            token : "text", // opening tag
+            regex : "<\\/?",
+            next : "tag"
+        }, {
+            token : "text",
+            regex : "\\s+"
+        }, {
+            token : "text",
+            regex : "[^<]+"
+        } ],
+
+        script : [ {
+            token : "text",
+            regex : ">",
+            next : "js-start"
+        }, {
+            token : "keyword",
+            regex : "[-_a-zA-Z0-9:]+"
+        }, {
+            token : "text",
+            regex : "\\s+"
+        }, {
+            token : "string",
+            regex : '".*?"'
+        }, {
+            token : "string",
+            regex : "'.*?'"
+        } ],
+
+        tag : [ {
+            token : "text",
+            regex : ">",
+            next : "start"
+        }, {
+            token : "keyword",
+            regex : "[-_a-zA-Z0-9:]+"
+        }, {
+            token : "text",
+            regex : "\\s+"
+        }, {
+            token : "string",
+            regex : '".*?"'
+        }, {
+            token : "string",
+            regex : "'.*?'"
+        } ],
+
+        cdata : [ {
+            token : "text",
+            regex : "\\]\\]>",
+            next : "start"
+        }, {
+            token : "text",
+            regex : "\\s+"
+        }, {
+            token : "text",
+            regex : ".+"
+        } ],
+
+        comment : [ {
+            token : "comment",
+            regex : ".*?-->",
+            next : "start"
+        }, {
+            token : "comment",
+            regex : ".+"
+        } ]
+    };
+
+    var jsRules = new ace.mode.JavaScriptHighlightRules().getRules();
+    this._addRules(jsRules, "js-");
+    this._rules["js-start"].unshift({
+        token: "text",
+        regex: "<\\/(?=script)",
+        next: "tag"
+    });
+};
+
+
+ace.mode.HtmlHighlightRules.prototype._addRules = function(rules, prefix) {
+    for (var key in rules) {
+        var state = rules[key];
+        for (var i=0; i<state.length; i++) {
+            var rule = state[i];
+            if (rule.next) {
+                rule.next = prefix + rule.next;
+            }
+        }
+        this._rules[prefix + key] = state;
+    }
+};
+
+ace.mode.HtmlHighlightRules.prototype.getRules = function() {
+    return this._rules;
+};

src/mode/JavaScript.js

@@ -5,7 +5,7 @@ ace.mode.JavaScript = function() {
 };
 ace.inherits(ace.mode.JavaScript, ace.mode.Text);
 
-ace.mode.JavaScript.prototype.toggleCommentLines = function(doc, range) {
+ace.mode.JavaScript.prototype.toggleCommentLines = function(doc, range, state) {
     var addedRows = doc.outdentRows(range, "//");
     if (addedRows == 0) {
         var addedRows = doc.indentRows(range, "//");

src/mode/Text.js

@@ -14,7 +14,7 @@ ace.mode.Text.prototype.getTokenizer = function() {
     return this.$tokenizer;
 };
 
-ace.mode.Text.prototype.toggleCommentLines = function(doc, range) {
+ace.mode.Text.prototype.toggleCommentLines = function(doc, range, state) {
     return 0;
 };