Upgrade CodeMirror to 3.21.0 (with accessibility changes from

http://bgrins.github.io/codemirror-accessible/)
LMS-1802

CHANGELOG.rst

@@ -5,6 +5,9 @@ These are notable changes in edx-platform.  This is a rolling list of changes,
 in roughly chronological order, most recent first.  Add your entries at or near
 the top.  Include a label indicating the component affected.
 
+Common: Upgraded CodeMirror to 3.21.0 with an accessibility patch applied.
+  LMS-1802
+
 Studio: Add new container page that can display nested xblocks. STUD-1244.
 
 Blades: Allow multiple transcripts with video. BLD-642.

cms/djangoapps/contentstore/features/advanced_settings.py

@@ -3,10 +3,9 @@
 
 from lettuce import world, step
 from nose.tools import assert_false, assert_equal, assert_regexp_matches  # pylint: disable=E0611
-from common import type_in_codemirror, press_the_notification_button
+from common import type_in_codemirror, press_the_notification_button, get_codemirror_value
 
 KEY_CSS = '.key input.policy-key'
-VALUE_CSS = 'textarea.json'
 DISPLAY_NAME_KEY = "display_name"
 DISPLAY_NAME_VALUE = '"Robot Super Course"'
 
@@ -101,7 +100,7 @@ def assert_policy_entries(expected_keys, expected_values):
     for key, value in zip(expected_keys, expected_values):
         index = get_index_of(key)
         assert_false(index == -1, "Could not find key: {key}".format(key=key))
-        found_value = world.css_find(VALUE_CSS)[index].value
+        found_value = get_codemirror_value(index)
         assert_equal(
             value, found_value,
             "Expected {} to have value {} but found {}".format(key, value, found_value)
@@ -120,15 +119,13 @@ def get_index_of(expected_key):
 
 def get_display_name_value():
     index = get_index_of(DISPLAY_NAME_KEY)
-    return world.css_value(VALUE_CSS, index=index)
-
+    return get_codemirror_value(index)
 
 def change_display_name_value(step, new_value):
     change_value(step, DISPLAY_NAME_KEY, new_value)
 
-
 def change_value(step, key, new_value):
-    type_in_codemirror(get_index_of(key), new_value)
-    world.wait(0.5)
+    index = get_index_of(key)
+    type_in_codemirror(index, new_value)
     press_the_notification_button(step, "Save")
     world.wait_for_ajax_complete()

cms/djangoapps/contentstore/features/common.py

@@ -319,20 +319,18 @@ def i_am_shown_a_notification(step):
 
 
 def type_in_codemirror(index, text):
-    world.wait(1)  # For now, slow this down so that it works. TODO: fix it.
-    world.css_click("div.CodeMirror-lines", index=index)
-    world.browser.execute_script("$('div.CodeMirror.CodeMirror-focused > div').css('overflow', '')")
-    g = world.css_find("div.CodeMirror.CodeMirror-focused > div > textarea")
-    if world.is_mac():
-        g._element.send_keys(Keys.COMMAND + 'a')
-    else:
-        g._element.send_keys(Keys.CONTROL + 'a')
-    g._element.send_keys(Keys.DELETE)
-    g._element.send_keys(text)
-    if world.is_firefox():
-        world.trigger_event('div.CodeMirror', index=index, event='blur')
+    script = """
+    var cm = $('div.CodeMirror:eq({})').get(0).CodeMirror;
+    cm.getInputField().focus();
+    cm.setValue(arguments[0]);
+    cm.getInputField().blur();""".format(index)
+    world.browser.driver.execute_script(script, str(text))
     world.wait_for_ajax_complete()
 
+def get_codemirror_value(index=0):
+    return world.browser.driver.execute_script("""
+        return $('div.CodeMirror:eq({})').get(0).CodeMirror.getValue();
+        """.format(index))
 
 def upload_file(filename):
     path = os.path.join(TEST_ROOT, filename)

cms/djangoapps/contentstore/features/course-updates.py

@@ -3,7 +3,7 @@
 
 from lettuce import world, step
 from selenium.webdriver.common.keys import Keys
-from common import type_in_codemirror
+from common import type_in_codemirror, get_codemirror_value
 from nose.tools import assert_in  # pylint: disable=E0611
 
 
@@ -74,7 +74,7 @@ def change_date(_step, new_date):
 @step(u'I should see the date "([^"]*)"$')
 def check_date(_step, date):
     date_css = 'span.date-display'
-    assert date == world.css_html(date_css)
+    assert_in(date, world.css_html(date_css))
 
 
 @step(u'I modify the handout to "([^"]*)"$')
@@ -87,7 +87,7 @@ def edit_handouts(_step, text):
 @step(u'I see the handout "([^"]*)"$')
 def check_handout(_step, handout):
     handout_css = 'div.handouts-content'
-    assert handout in world.css_html(handout_css)
+    assert_in(handout, world.css_html(handout_css))
 
 
 @step(u'I see the handout error text')
@@ -127,6 +127,6 @@ def change_text(text):
 
 def verify_text_in_editor_and_update(button_css, before, after):
     world.css_click(button_css)
-    text = world.css_find(".cm-string").html
-    assert before in text
+    text = get_codemirror_value()
+    assert_in(before, text)
     change_text(after)

cms/djangoapps/contentstore/features/problem-editor.py

@@ -173,7 +173,7 @@ def cancel_does_not_save_changes(step):
 def enable_latex_compiler(step):
     url = world.browser.url
     step.given("I select the Advanced Settings")
-    change_value(step, 'use_latex_compiler', True)
+    change_value(step, 'use_latex_compiler', 'true')
     world.visit(url)
     world.wait_for_xmodule()
 

cms/envs/common.py

@@ -292,7 +292,7 @@ PIPELINE_CSS = {
             'css/vendor/normalize.css',
             'css/vendor/font-awesome.css',
             'css/vendor/html5-input-polyfills/number-polyfill.css',
-            'js/vendor/CodeMirror/codemirror.css',
+            'js/vendor/CodeMirror/codemirror-3.21.0.css',
             'css/vendor/ui-lightness/jquery-ui-1.8.22.custom.css',
             'css/vendor/jquery.qtip.min.css',
             'js/vendor/markitup/skins/simple/style.css',

cms/static/js/views/course_info_helper.js

@@ -7,9 +7,10 @@ define(["codemirror", 'js/utils/handle_iframe_binding', "utility"],
                 mode: "text/html",
                 lineNumbers: true,
                 lineWrapping: true,
-                onChange: function () {
+                autoCloseTags: true
+            });
+            $codeMirror.on('change', function () {
                     $('.save-button').removeClass('is-disabled');
-                }
             });
             $codeMirror.setValue(content);
             $codeMirror.clearHistory();

cms/static/js/views/settings/advanced.js

@@ -47,9 +47,11 @@ var AdvancedView = ValidatingView.extend({
 
         var self = this;
         var oldValue = $(textarea).val();
-        CodeMirror.fromTextArea(textarea, {
-            mode: "application/json", lineNumbers: false, lineWrapping: false,
-            onChange: function(instance, changeobj) {
+        var cm = CodeMirror.fromTextArea(textarea, {
+            mode: "application/json", 
+            lineNumbers: false, 
+            lineWrapping: false});
+        cm.on('change', function(instance, changeobj) {
                 instance.save();
                 // this event's being called even when there's no change :-(
                 if (instance.getValue() !== oldValue) {
@@ -58,11 +60,11 @@ var AdvancedView = ValidatingView.extend({
                                              _.bind(self.saveView, self),
                                              _.bind(self.revertView, self));
                 }
-            },
-            onFocus : function(mirror) {
+            });
+        cm.on('focus', function(mirror) {
               $(textarea).parent().children('label').addClass("is-focused");
-            },
-            onBlur: function (mirror) {
+            });
+        cm.on('blur', function (mirror) {
                 $(textarea).parent().children('label').removeClass("is-focused");
                 var key = $(mirror.getWrapperElement()).closest('.field-group').children('.key').attr('id');
                 var stringValue = $.trim(mirror.getValue());
@@ -91,8 +93,7 @@ var AdvancedView = ValidatingView.extend({
                 if (JSONValue !== undefined) {
                     self.model.set(key, JSONValue);
                 }
-            }
-        });
+            });
     },
     saveView : function() {
         // TODO one last verification scan:

cms/static/js/views/settings/main.js

@@ -206,15 +206,14 @@ var DetailsView = ValidatingView.extend({
             var cachethis = this;
             var field = this.selectorToField[thisTarget.id];
             this.codeMirrors[thisTarget.id] = CodeMirror.fromTextArea(thisTarget, {
-                mode: "text/html", lineNumbers: true, lineWrapping: true,
-                onChange: function (mirror) {
+                mode: "text/html", lineNumbers: true, lineWrapping: true});
+            this.codeMirrors[thisTarget.id].on('change', function (mirror) {
                     mirror.save();
                     cachethis.clearValidationErrors();
                     var newVal = mirror.getValue();
                     if (cachethis.model.get(field) != newVal) {
                         cachethis.setAndValidate(field, newVal);
                     }
-                }
             });
         }
     },

cms/static/sass/views/_settings.scss

@@ -831,19 +831,15 @@
         font-family: 'Open Sans', sans-serif;
         color: $baseFontColor;
         outline: 0;
+        height: auto;
+        min-height: ($baseline*2.25);
+        max-height: ($baseline*10);
 
         &.CodeMirror-focused {
           @include linear-gradient($paleYellow, tint($paleYellow, 90%));
           outline: 0;
         }
 
-        .CodeMirror-scroll {
-          overflow: hidden;
-          height: auto;
-          min-height: ($baseline*1.5);
-          max-height: ($baseline*10);
-        }
-
         // editor color changes just for JSON
         .CodeMirror-lines {
 

cms/templates/widgets/source-edit.html

@@ -97,7 +97,7 @@ require(["jquery", "jquery.leanModal", "codemirror/stex"], function($) {
       });
       // resize the codemirror box
       var h = el.height();
-      el.find('.CodeMirror-scroll').height(h - 100);
+      el.find('.CodeMirror').height(h - 160);
   }
 
   // compile & save button

common/lib/capa/capa/templates/codeinput.html

+<%! from django.utils.translation import ugettext as _ %>
 <section id="textbox_${id}" class="textbox">
-  <textarea rows="${rows}" cols="${cols}" name="input_${id}" aria-describedby="answer_${id}" id="input_${id}"
+  <textarea rows="${rows}" cols="${cols}" name="input_${id}" 
+            aria-label="${_("{programming_language} editor").format(programming_language=mode)}" 
+            aria-describedby="answer_${id}" 
+            id="input_${id}" 
+            tabindex="0"
        % if hidden:
       	    style="display:none;"
        % endif
   >${value|h}</textarea>
 
-  <div class="grader-status">
+  <div class="grader-status" tabindex="1">
     % if status == 'unsubmitted':
       <span class="unanswered" style="display:inline-block;" id="status_${id}" aria-describedby="input_${id}"><span class="sr">Status: </span>Unanswered</span>
     % elif status == 'correct':
@@ -44,13 +49,16 @@
         tabSize: "${tabsize}",
         indentWithTabs: false,
         extraKeys: {
+            "Esc": function(cm) {
+                $('.grader-status').focus();
+                return false;
+            },
             "Tab": function(cm) {
                 cm.replaceSelection("${' '*tabsize}", "end");
             }
         },
         smartIndent: false
       });
-      $("#textbox_${id}").find('.CodeMirror-scroll').height(${int(13.5*eval(rows))});
     });
   </script>
 </section>

common/static/js/vendor/CodeMirror/accessible.diff

+diff --git a/codemirror-accessible.js b/codemirror-accessible.js
+index 1d0d996..bd37cfb 100644
+--- a/codemirror-accessible.js
++++ b/codemirror-accessible.js
+@@ -1443,7 +1443,7 @@ window.CodeMirror = (function() {
+   // supported or compatible enough yet to rely on.)
+   function readInput(cm) {
+     var input = cm.display.input, prevInput = cm.display.prevInput, doc = cm.doc, sel = doc.sel;
+-    if (!cm.state.focused || hasSelection(input) || isReadOnly(cm) || cm.options.disableInput) return false;
++    if (!cm.state.focused || hasSelection(input) || isReadOnly(cm) || cm.options.disableInput || cm.state.accessibleTextareaWaiting) return false;
+     var text = input.value;
+     if (text == prevInput && posEq(sel.from, sel.to)) return false;
+     if (ie && !ie_lt9 && cm.display.inputHasSelection === text) {
+@@ -1480,13 +1480,13 @@ window.CodeMirror = (function() {
+     var minimal, selected, doc = cm.doc;
+     if (!posEq(doc.sel.from, doc.sel.to)) {
+       cm.display.prevInput = "";
+-      minimal = hasCopyEvent &&
++      minimal = false && hasCopyEvent &&
+         (doc.sel.to.line - doc.sel.from.line > 100 || (selected = cm.getSelection()).length > 1000);
+       var content = minimal ? "-" : selected || cm.getSelection();
+       cm.display.input.value = content;
+       if (cm.state.focused) selectInput(cm.display.input);
+       if (ie && !ie_lt9) cm.display.inputHasSelection = content;
+-    } else if (user) {
++    } else if (user && !cm.state.accessibleTextareaWaiting) {
+       cm.display.prevInput = cm.display.input.value = "";
+       if (ie && !ie_lt9) cm.display.inputHasSelection = null;
+     }
+@@ -2069,6 +2069,12 @@ window.CodeMirror = (function() {
+     cm.doc.sel.shift = code == 16 || e.shiftKey;
+     // First give onKeyEvent option a chance to handle this.
+     var handled = handleKeyBinding(cm, e);
++
++    // On text input if value was temporaritly set for a screenreader, clear it out.
++    if (!handled && cm.state.accessibleTextareaWaiting) {
++      clearAccessibleTextarea(cm);
++    }
++
+     if (opera) {
+       lastStoppedKey = handled ? code : null;
+       // Opera has no cut event... we try to at least catch the key combo
+@@ -2473,6 +2479,29 @@ window.CodeMirror = (function() {
+       setSelection(doc, pos, other || pos, bias);
+     }
+     if (doc.cm) doc.cm.curOp.userSelChange = true;
++
++    if (doc.cm) {
++      var from = doc.sel.from;
++      var to = doc.sel.to;
++
++      if (posEq(from, to) && doc.cm.display.input.setSelectionRange) {
++        clearTimeout(doc.cm.state.accessibleTextareaTimeout);
++        doc.cm.state.accessibleTextareaWaiting = true;
++
++        doc.cm.display.input.value = doc.getLine(from.line) + "\n";
++        doc.cm.display.input.setSelectionRange(from.ch, from.ch);
++
++        doc.cm.state.accessibleTextareaTimeout = setTimeout(function() {
++          clearAccessibleTextarea(doc.cm);
++        }, 80);
++      }
++    }
++  }
++
++  function clearAccessibleTextarea(cm) {
++    clearTimeout(cm.state.accessibleTextareaTimeout);
++    cm.state.accessibleTextareaWaiting = false;
++    resetInput(cm, true);
+   }
+ 
+   function filterSelectionChange(doc, anchor, head) {

common/static/js/vendor/CodeMirror/addons/closetag.js

+/**
+ * Tag-closer extension for CodeMirror.
+ *
+ * This extension adds an "autoCloseTags" option that can be set to
+ * either true to get the default behavior, or an object to further
+ * configure its behavior.
+ *
+ * These are supported options:
+ *
+ * `whenClosing` (default true)
+ *   Whether to autoclose when the '/' of a closing tag is typed.
+ * `whenOpening` (default true)
+ *   Whether to autoclose the tag when the final '>' of an opening
+ *   tag is typed.
+ * `dontCloseTags` (default is empty tags for HTML, none for XML)
+ *   An array of tag names that should not be autoclosed.
+ * `indentTags` (default is block tags for HTML, none for XML)
+ *   An array of tag names that should, when opened, cause a
+ *   blank line to be added inside the tag, and the blank line and
+ *   closing line to be indented.
+ *
+ * See demos/closetag.html for a usage example.
+ */
+
+(function() {
+  CodeMirror.defineOption("autoCloseTags", false, function(cm, val, old) {
+    if (old != CodeMirror.Init && old)
+      cm.removeKeyMap("autoCloseTags");
+    if (!val) return;
+    var map = {name: "autoCloseTags"};
+    if (typeof val != "object" || val.whenClosing)
+      map["'/'"] = function(cm) { return autoCloseSlash(cm); };
+    if (typeof val != "object" || val.whenOpening)
+      map["'>'"] = function(cm) { return autoCloseGT(cm); };
+    cm.addKeyMap(map);
+  });
+
+  var htmlDontClose = ["area", "base", "br", "col", "command", "embed", "hr", "img", "input", "keygen", "link", "meta", "param",
+                       "source", "track", "wbr"];
+  var htmlIndent = ["applet", "blockquote", "body", "button", "div", "dl", "fieldset", "form", "frameset", "h1", "h2", "h3", "h4",
+                    "h5", "h6", "head", "html", "iframe", "layer", "legend", "object", "ol", "p", "select", "table", "ul"];
+
+  function autoCloseGT(cm) {
+    var pos = cm.getCursor(), tok = cm.getTokenAt(pos);
+    var inner = CodeMirror.innerMode(cm.getMode(), tok.state), state = inner.state;
+    if (inner.mode.name != "xml" || !state.tagName || cm.getOption("disableInput")) return CodeMirror.Pass;
+
+    var opt = cm.getOption("autoCloseTags"), html = inner.mode.configuration == "html";
+    var dontCloseTags = (typeof opt == "object" && opt.dontCloseTags) || (html && htmlDontClose);
+    var indentTags = (typeof opt == "object" && opt.indentTags) || (html && htmlIndent);
+
+    var tagName = state.tagName;
+    if (tok.end > pos.ch) tagName = tagName.slice(0, tagName.length - tok.end + pos.ch);
+    var lowerTagName = tagName.toLowerCase();
+    // Don't process the '>' at the end of an end-tag or self-closing tag
+    if (!tagName ||
+        tok.type == "string" && (tok.end != pos.ch || !/[\"\']/.test(tok.string.charAt(tok.string.length - 1)) || tok.string.length == 1) ||
+        tok.type == "tag" && state.type == "closeTag" ||
+        tok.string.indexOf("/") == (tok.string.length - 1) || // match something like <someTagName />
+        dontCloseTags && indexOf(dontCloseTags, lowerTagName) > -1 ||
+        CodeMirror.scanForClosingTag && CodeMirror.scanForClosingTag(cm, pos, tagName,
+                                                                     Math.min(cm.lastLine() + 1, pos.line + 50)))
+      return CodeMirror.Pass;
+
+    var doIndent = indentTags && indexOf(indentTags, lowerTagName) > -1;
+    var curPos = doIndent ? CodeMirror.Pos(pos.line + 1, 0) : CodeMirror.Pos(pos.line, pos.ch + 1);
+    cm.replaceSelection(">" + (doIndent ? "\n\n" : "") + "</" + tagName + ">",
+                        {head: curPos, anchor: curPos});
+    if (doIndent) {
+      cm.indentLine(pos.line + 1, null, true);
+      cm.indentLine(pos.line + 2, null);
+    }
+  }
+
+  function autoCloseSlash(cm) {
+    var pos = cm.getCursor(), tok = cm.getTokenAt(pos);
+    var inner = CodeMirror.innerMode(cm.getMode(), tok.state), state = inner.state;
+    if (tok.type == "string" || tok.string.charAt(0) != "<" ||
+        tok.start != pos.ch - 1 || inner.mode.name != "xml" ||
+        cm.getOption("disableInput"))
+      return CodeMirror.Pass;
+
+    var tagName = state.context && state.context.tagName;
+    if (tagName) cm.replaceSelection("/" + tagName + ">", "end");
+  }
+
+  function indexOf(collection, elt) {
+    if (collection.indexOf) return collection.indexOf(elt);
+    for (var i = 0, e = collection.length; i < e; ++i)
+      if (collection[i] == elt) return i;
+    return -1;
+  }
+})();

common/static/js/vendor/CodeMirror/addons/comment.js

+(function() {
+  "use strict";
+
+  var noOptions = {};
+  var nonWS = /[^\s\u00a0]/;
+  var Pos = CodeMirror.Pos;
+
+  function firstNonWS(str) {
+    var found = str.search(nonWS);
+    return found == -1 ? 0 : found;
+  }
+
+  CodeMirror.commands.toggleComment = function(cm) {
+    var from = cm.getCursor("start"), to = cm.getCursor("end");
+    cm.uncomment(from, to) || cm.lineComment(from, to);
+  };
+
+  CodeMirror.defineExtension("lineComment", function(from, to, options) {
+    if (!options) options = noOptions;
+    var self = this, mode = self.getModeAt(from);
+    var commentString = options.lineComment || mode.lineComment;
+    if (!commentString) {
+      if (options.blockCommentStart || mode.blockCommentStart) {
+        options.fullLines = true;
+        self.blockComment(from, to, options);
+      }
+      return;
+    }
+    var firstLine = self.getLine(from.line);
+    if (firstLine == null) return;
+    var end = Math.min(to.ch != 0 || to.line == from.line ? to.line + 1 : to.line, self.lastLine() + 1);
+    var pad = options.padding == null ? " " : options.padding;
+    var blankLines = options.commentBlankLines || from.line == to.line;
+
+    self.operation(function() {
+      if (options.indent) {
+        var baseString = firstLine.slice(0, firstNonWS(firstLine));
+        for (var i = from.line; i < end; ++i) {
+          var line = self.getLine(i), cut = baseString.length;
+          if (!blankLines && !nonWS.test(line)) continue;
+          if (line.slice(0, cut) != baseString) cut = firstNonWS(line);
+          self.replaceRange(baseString + commentString + pad, Pos(i, 0), Pos(i, cut));
+        }
+      } else {
+        for (var i = from.line; i < end; ++i) {
+          if (blankLines || nonWS.test(self.getLine(i)))
+            self.replaceRange(commentString + pad, Pos(i, 0));
+        }
+      }
+    });
+  });
+
+  CodeMirror.defineExtension("blockComment", function(from, to, options) {
+    if (!options) options = noOptions;
+    var self = this, mode = self.getModeAt(from);
+    var startString = options.blockCommentStart || mode.blockCommentStart;
+    var endString = options.blockCommentEnd || mode.blockCommentEnd;
+    if (!startString || !endString) {
+      if ((options.lineComment || mode.lineComment) && options.fullLines != false)
+        self.lineComment(from, to, options);
+      return;
+    }
+
+    var end = Math.min(to.line, self.lastLine());
+    if (end != from.line && to.ch == 0 && nonWS.test(self.getLine(end))) --end;
+
+    var pad = options.padding == null ? " " : options.padding;
+    if (from.line > end) return;
+
+    self.operation(function() {
+      if (options.fullLines != false) {
+        var lastLineHasText = nonWS.test(self.getLine(end));
+        self.replaceRange(pad + endString, Pos(end));
+        self.replaceRange(startString + pad, Pos(from.line, 0));
+        var lead = options.blockCommentLead || mode.blockCommentLead;
+        if (lead != null) for (var i = from.line + 1; i <= end; ++i)
+          if (i != end || lastLineHasText)
+            self.replaceRange(lead + pad, Pos(i, 0));
+      } else {
+        self.replaceRange(endString, to);
+        self.replaceRange(startString, from);
+      }
+    });
+  });
+
+  CodeMirror.defineExtension("uncomment", function(from, to, options) {
+    if (!options) options = noOptions;
+    var self = this, mode = self.getModeAt(from);
+    var end = Math.min(to.line, self.lastLine()), start = Math.min(from.line, end);
+
+    // Try finding line comments
+    var lineString = options.lineComment || mode.lineComment, lines = [];
+    var pad = options.padding == null ? " " : options.padding, didSomething;
+    lineComment: {
+      if (!lineString) break lineComment;
+      for (var i = start; i <= end; ++i) {
+        var line = self.getLine(i);
+        var found = line.indexOf(lineString);
+        if (found > -1 && !/comment/.test(self.getTokenTypeAt(Pos(i, found + 1)))) found = -1;
+        if (found == -1 && (i != end || i == start) && nonWS.test(line)) break lineComment;
+        if (found > -1 && nonWS.test(line.slice(0, found))) break lineComment;
+        lines.push(line);
+      }
+      self.operation(function() {
+        for (var i = start; i <= end; ++i) {
+          var line = lines[i - start];
+          var pos = line.indexOf(lineString), endPos = pos + lineString.length;
+          if (pos < 0) continue;
+          if (line.slice(endPos, endPos + pad.length) == pad) endPos += pad.length;
+          didSomething = true;
+          self.replaceRange("", Pos(i, pos), Pos(i, endPos));
+        }
+      });
+      if (didSomething) return true;
+    }
+
+    // Try block comments
+    var startString = options.blockCommentStart || mode.blockCommentStart;
+    var endString = options.blockCommentEnd || mode.blockCommentEnd;
+    if (!startString || !endString) return false;
+    var lead = options.blockCommentLead || mode.blockCommentLead;
+    var startLine = self.getLine(start), endLine = end == start ? startLine : self.getLine(end);
+    var open = startLine.indexOf(startString), close = endLine.lastIndexOf(endString);
+    if (close == -1 && start != end) {
+      endLine = self.getLine(--end);
+      close = endLine.lastIndexOf(endString);
+    }
+    if (open == -1 || close == -1 ||
+        !/comment/.test(self.getTokenTypeAt(Pos(start, open + 1))) ||
+        !/comment/.test(self.getTokenTypeAt(Pos(end, close + 1))))
+      return false;
+
+    self.operation(function() {
+      self.replaceRange("", Pos(end, close - (pad && endLine.slice(close - pad.length, close) == pad ? pad.length : 0)),
+                        Pos(end, close + endString.length));
+      var openEnd = open + startString.length;
+      if (pad && startLine.slice(openEnd, openEnd + pad.length) == pad) openEnd += pad.length;
+      self.replaceRange("", Pos(start, open), Pos(start, openEnd));
+      if (lead) for (var i = start + 1; i <= end; ++i) {
+        var line = self.getLine(i), found = line.indexOf(lead);
+        if (found == -1 || nonWS.test(line.slice(0, found))) continue;
+        var foundEnd = found + lead.length;
+        if (pad && line.slice(foundEnd, foundEnd + pad.length) == pad) foundEnd += pad.length;
+        self.replaceRange("", Pos(i, found), Pos(i, foundEnd));
+      }
+    });
+    return true;
+  });
+})();

common/static/js/vendor/CodeMirror/addons/diff.js

+CodeMirror.defineMode("diff", function() {
+
+  var TOKEN_NAMES = {
+    '+': 'positive',
+    '-': 'negative',
+    '@': 'meta'
+  };
+
+  return {
+    token: function(stream) {
+      var tw_pos = stream.string.search(/[\t ]+?$/);
+
+      if (!stream.sol() || tw_pos === 0) {
+        stream.skipToEnd();
+        return ("error " + (
+          TOKEN_NAMES[stream.string.charAt(0)] || '')).replace(/ $/, '');
+      }
+
+      var token_name = TOKEN_NAMES[stream.peek()] || stream.skipToEnd();
+
+      if (tw_pos === -1) {
+        stream.skipToEnd();
+      } else {
+        stream.pos = tw_pos;
+      }
+
+      return token_name;
+    }
+  };
+});
+
+CodeMirror.defineMIME("text/x-diff", "diff");

common/static/js/vendor/CodeMirror/addons/formatting.js

+(function() {
+
+  CodeMirror.extendMode("css", {
+    commentStart: "/*",
+    commentEnd: "*/",
+    newlineAfterToken: function(_type, content) {
+      return /^[;{}]$/.test(content);
+    }
+  });
+
+  CodeMirror.extendMode("javascript", {
+    commentStart: "/*",
+    commentEnd: "*/",
+    // FIXME semicolons inside of for
+    newlineAfterToken: function(_type, content, textAfter, state) {
+      if (this.jsonMode) {
+        return /^[\[,{]$/.test(content) || /^}/.test(textAfter);
+      } else {
+        if (content == ";" && state.lexical && state.lexical.type == ")") return false;
+        return /^[;{}]$/.test(content) && !/^;/.test(textAfter);
+      }
+    }
+  });
+
+  var inlineElements = /^(a|abbr|acronym|area|base|bdo|big|br|button|caption|cite|code|col|colgroup|dd|del|dfn|em|frame|hr|iframe|img|input|ins|kbd|label|legend|link|map|object|optgroup|option|param|q|samp|script|select|small|span|strong|sub|sup|textarea|tt|var)$/;
+
+  CodeMirror.extendMode("xml", {
+    commentStart: "<!--",
+    commentEnd: "-->",
+    newlineAfterToken: function(type, content, textAfter, state) {
+      var inline = false;
+      if (this.configuration == "html")
+        inline = state.context ? inlineElements.test(state.context.tagName) : false;
+      return !inline && ((type == "tag" && />$/.test(content) && state.context) ||
+                         /^</.test(textAfter));
+    }
+  });
+
+  // Comment/uncomment the specified range
+  CodeMirror.defineExtension("commentRange", function (isComment, from, to) {
+    var cm = this, curMode = CodeMirror.innerMode(cm.getMode(), cm.getTokenAt(from).state).mode;
+    cm.operation(function() {
+      if (isComment) { // Comment range
+        cm.replaceRange(curMode.commentEnd, to);
+        cm.replaceRange(curMode.commentStart, from);
+        if (from.line == to.line && from.ch == to.ch) // An empty comment inserted - put cursor inside
+          cm.setCursor(from.line, from.ch + curMode.commentStart.length);
+      } else { // Uncomment range
+        var selText = cm.getRange(from, to);
+        var startIndex = selText.indexOf(curMode.commentStart);
+        var endIndex = selText.lastIndexOf(curMode.commentEnd);
+        if (startIndex > -1 && endIndex > -1 && endIndex > startIndex) {
+          // Take string till comment start
+          selText = selText.substr(0, startIndex)
+          // From comment start till comment end
+            + selText.substring(startIndex + curMode.commentStart.length, endIndex)
+          // From comment end till string end
+            + selText.substr(endIndex + curMode.commentEnd.length);
+        }
+        cm.replaceRange(selText, from, to);
+      }
+    });
+  });
+
+  // Applies automatic mode-aware indentation to the specified range
+  CodeMirror.defineExtension("autoIndentRange", function (from, to) {
+    var cmInstance = this;
+    this.operation(function () {
+      for (var i = from.line; i <= to.line; i++) {
+        cmInstance.indentLine(i, "smart");
+      }
+    });
+  });
+
+  // Applies automatic formatting to the specified range
+  CodeMirror.defineExtension("autoFormatRange", function (from, to) {
+    var cm = this;
+    var outer = cm.getMode(), text = cm.getRange(from, to).split("\n");
+    var state = CodeMirror.copyState(outer, cm.getTokenAt(from).state);
+    var tabSize = cm.getOption("tabSize");
+
+    var out = "", lines = 0, atSol = from.ch == 0;
+    function newline() {
+      out += "\n";
+      atSol = true;
+      ++lines;
+    }
+
+    for (var i = 0; i < text.length; ++i) {
+      var stream = new CodeMirror.StringStream(text[i], tabSize);
+      while (!stream.eol()) {
+        var inner = CodeMirror.innerMode(outer, state);
+        var style = outer.token(stream, state), cur = stream.current();
+        stream.start = stream.pos;
+        if (!atSol || /\S/.test(cur)) {
+          out += cur;
+          atSol = false;
+        }
+        if (!atSol && inner.mode.newlineAfterToken &&
+            inner.mode.newlineAfterToken(style, cur, stream.string.slice(stream.pos) || text[i+1] || "", inner.state))
+          newline();
+      }
+      if (!stream.pos && outer.blankLine) outer.blankLine(state);
+      if (!atSol && i < text.length - 1) newline();
+    }
+
+    cm.operation(function () {
+      cm.replaceRange(out, from, to);
+      for (var cur = from.line + 1, end = from.line + lines; cur <= end; ++cur)
+        cm.indentLine(cur, "smart");
+      cm.setSelection(from, cm.getCursor(false));
+    });
+  });
+})();

common/static/js/vendor/CodeMirror/addons/htmlembedded.js

+CodeMirror.defineMode("htmlembedded", function(config, parserConfig) {
+
+  //config settings
+  var scriptStartRegex = parserConfig.scriptStartRegex || /^<%/i,
+      scriptEndRegex = parserConfig.scriptEndRegex || /^%>/i;
+
+  //inner modes
+  var scriptingMode, htmlMixedMode;
+
+  //tokenizer when in html mode
+  function htmlDispatch(stream, state) {
+      if (stream.match(scriptStartRegex, false)) {
+          state.token=scriptingDispatch;
+          return scriptingMode.token(stream, state.scriptState);
+          }
+      else
+          return htmlMixedMode.token(stream, state.htmlState);
+    }
+
+  //tokenizer when in scripting mode
+  function scriptingDispatch(stream, state) {
+      if (stream.match(scriptEndRegex, false))  {
+          state.token=htmlDispatch;
+          return htmlMixedMode.token(stream, state.htmlState);
+         }
+      else
+          return scriptingMode.token(stream, state.scriptState);
+         }
+
+
+  return {
+    startState: function() {
+      scriptingMode = scriptingMode || CodeMirror.getMode(config, parserConfig.scriptingModeSpec);
+      htmlMixedMode = htmlMixedMode || CodeMirror.getMode(config, "htmlmixed");
+      return {
+          token :  parserConfig.startOpen ? scriptingDispatch : htmlDispatch,
+          htmlState : CodeMirror.startState(htmlMixedMode),
+          scriptState : CodeMirror.startState(scriptingMode)
+      };
+    },
+
+    token: function(stream, state) {
+      return state.token(stream, state);
+    },
+
+    indent: function(state, textAfter) {
+      if (state.token == htmlDispatch)
+        return htmlMixedMode.indent(state.htmlState, textAfter);
+      else if (scriptingMode.indent)
+        return scriptingMode.indent(state.scriptState, textAfter);
+    },
+
+    copyState: function(state) {
+      return {
+       token : state.token,
+       htmlState : CodeMirror.copyState(htmlMixedMode, state.htmlState),
+       scriptState : CodeMirror.copyState(scriptingMode, state.scriptState)
+      };
+    },
+
+    innerMode: function(state) {
+      if (state.token == scriptingDispatch) return {state: state.scriptState, mode: scriptingMode};
+      else return {state: state.htmlState, mode: htmlMixedMode};
+    }
+  };
+}, "htmlmixed");
+
+CodeMirror.defineMIME("application/x-ejs", { name: "htmlembedded", scriptingModeSpec:"javascript"});
+CodeMirror.defineMIME("application/x-aspx", { name: "htmlembedded", scriptingModeSpec:"text/x-csharp"});
+CodeMirror.defineMIME("application/x-jsp", { name: "htmlembedded", scriptingModeSpec:"text/x-java"});
+CodeMirror.defineMIME("application/x-erb", { name: "htmlembedded", scriptingModeSpec:"ruby"});

common/static/js/vendor/CodeMirror/addons/htmlmixed.js

+CodeMirror.defineMode("htmlmixed", function(config, parserConfig) {
+  var htmlMode = CodeMirror.getMode(config, {name: "xml", htmlMode: true});
+  var cssMode = CodeMirror.getMode(config, "css");
+
+  var scriptTypes = [], scriptTypesConf = parserConfig && parserConfig.scriptTypes;
+  scriptTypes.push({matches: /^(?:text|application)\/(?:x-)?(?:java|ecma)script$|^$/i,
+                    mode: CodeMirror.getMode(config, "javascript")});
+  if (scriptTypesConf) for (var i = 0; i < scriptTypesConf.length; ++i) {
+    var conf = scriptTypesConf[i];
+    scriptTypes.push({matches: conf.matches, mode: conf.mode && CodeMirror.getMode(config, conf.mode)});
+  }
+  scriptTypes.push({matches: /./,
+                    mode: CodeMirror.getMode(config, "text/plain")});
+
+  function html(stream, state) {
+    var tagName = state.htmlState.tagName;
+    var style = htmlMode.token(stream, state.htmlState);
+    if (tagName == "script" && /\btag\b/.test(style) && stream.current() == ">") {
+      // Script block: mode to change to depends on type attribute
+      var scriptType = stream.string.slice(Math.max(0, stream.pos - 100), stream.pos).match(/\btype\s*=\s*("[^"]+"|'[^']+'|\S+)[^<]*$/i);
+      scriptType = scriptType ? scriptType[1] : "";
+      if (scriptType && /[\"\']/.test(scriptType.charAt(0))) scriptType = scriptType.slice(1, scriptType.length - 1);
+      for (var i = 0; i < scriptTypes.length; ++i) {
+        var tp = scriptTypes[i];
+        if (typeof tp.matches == "string" ? scriptType == tp.matches : tp.matches.test(scriptType)) {
+          if (tp.mode) {
+            state.token = script;
+            state.localMode = tp.mode;
+            state.localState = tp.mode.startState && tp.mode.startState(htmlMode.indent(state.htmlState, ""));
+          }
+          break;
+        }
+      }
+    } else if (tagName == "style" && /\btag\b/.test(style) && stream.current() == ">") {
+      state.token = css;
+      state.localMode = cssMode;
+      state.localState = cssMode.startState(htmlMode.indent(state.htmlState, ""));
+    }
+    return style;
+  }
+  function maybeBackup(stream, pat, style) {
+    var cur = stream.current();
+    var close = cur.search(pat), m;
+    if (close > -1) stream.backUp(cur.length - close);
+    else if (m = cur.match(/<\/?$/)) {
+      stream.backUp(cur.length);
+      if (!stream.match(pat, false)) stream.match(cur);
+    }
+    return style;
+  }
+  function script(stream, state) {
+    if (stream.match(/^<\/\s*script\s*>/i, false)) {
+      state.token = html;
+      state.localState = state.localMode = null;
+      return html(stream, state);
+    }
+    return maybeBackup(stream, /<\/\s*script\s*>/,
+                       state.localMode.token(stream, state.localState));
+  }
+  function css(stream, state) {
+    if (stream.match(/^<\/\s*style\s*>/i, false)) {
+      state.token = html;
+      state.localState = state.localMode = null;
+      return html(stream, state);
+    }
+    return maybeBackup(stream, /<\/\s*style\s*>/,
+                       cssMode.token(stream, state.localState));
+  }
+
+  return {
+    startState: function() {
+      var state = htmlMode.startState();
+      return {token: html, localMode: null, localState: null, htmlState: state};
+    },
+
+    copyState: function(state) {
+      if (state.localState)
+        var local = CodeMirror.copyState(state.localMode, state.localState);
+      return {token: state.token, localMode: state.localMode, localState: local,
+              htmlState: CodeMirror.copyState(htmlMode, state.htmlState)};
+    },
+
+    token: function(stream, state) {
+      return state.token(stream, state);
+    },
+
+    indent: function(state, textAfter) {
+      if (!state.localMode || /^\s*<\//.test(textAfter))
+        return htmlMode.indent(state.htmlState, textAfter);
+      else if (state.localMode.indent)
+        return state.localMode.indent(state.localState, textAfter);
+      else
+        return CodeMirror.Pass;
+    },
+
+    innerMode: function(state) {
+      return {state: state.localState || state.htmlState, mode: state.localMode || htmlMode};
+    }
+  };
+}, "xml", "javascript", "css");
+
+CodeMirror.defineMIME("text/html", "htmlmixed");