Modify paths for location of CodeMirror files.

common/lib/xmodule/xmodule/js/src/html/edit.coffee

@@ -32,28 +32,31 @@ class @HTMLEditingDescriptor
       # TODO: we should share this CSS with studio (and LMS)
       content_css : "#{baseUrl}/css/tiny-mce.css",
       formats : {
-        # Disable h4, h5, and h6 styles as we don't have CSS for them.
-        # TODO: this doesn't seem to be working with the upgrade.
+      # Disable h4, h5, and h6 styles as we don't have CSS for them.
+      # TODO: this doesn't seem to be working with the upgrade.
         h4: {},
         h5: {},
         h6: {},
-        # tinyMCE does block level for code by default
+      # tinyMCE does block level for code by default
         code: {inline: 'code'}
       },
       # Disable visual aid on borderless table.
-      visual:false,
-      plugins: "textcolor, link, image",
+      visual: false,
+      plugins: "textcolor, link, image, codemirror",
+      codemirror: {
+        path: "#{baseUrl}/js/vendor/CodeMirror"
+      },
       # We may want to add "styleselect" when we collect all styles used throughout the LMS
       # Can have a single toolbar by just specifying "toolbar". Splitting for now so all are visible.
-      toolbar1 : "formatselect | fontselect | bold italic underline forecolor | bullist numlist outdent indent",
-      toolbar2 : "link unlink image | blockquote wrapAsCode ",
+      toolbar1: "formatselect | fontselect | bold italic underline forecolor | bullist numlist outdent indent",
+      toolbar2: "link unlink image | blockquote wrapAsCode code",
       # TODO: i18n
-      block_formats : "Paragraph=p;Preformatted=pre;Heading 1=h1;Heading 2=h2;Heading 3=h3",
+      block_formats: "Paragraph=p;Preformatted=pre;Heading 1=h1;Heading 2=h2;Heading 3=h3",
       width: '100%',
       height: '400px',
       menubar: false,
       statusbar: false,
-      setup : @setupTinyMCE,
+      setup: @setupTinyMCE,
       # Cannot get access to tinyMCE Editor instance (for focusing) until after it is rendered.
       # The tinyMCE callback passes in the editor as a paramter.
       init_instance_callback: @initInstanceCallback

common/static/js/vendor/CodeMirror/addons/dialog/dialog.css

+.CodeMirror-dialog {
+  position: absolute;
+  left: 0; right: 0;
+  background: white;
+  z-index: 15;
+  padding: .1em .8em;
+  overflow: hidden;
+  color: #333;
+}
+
+.CodeMirror-dialog-top {
+  border-bottom: 1px solid #eee;
+  top: 0;
+}
+
+.CodeMirror-dialog-bottom {
+  border-top: 1px solid #eee;
+  bottom: 0;
+}
+
+.CodeMirror-dialog input {
+  border: none;
+  outline: none;
+  background: transparent;
+  width: 20em;
+  color: inherit;
+  font-family: monospace;
+}
+
+.CodeMirror-dialog button {
+  font-size: 70%;
+}

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

+// Open simple dialogs on top of an editor. Relies on dialog.css.
+
+(function() {
+  function dialogDiv(cm, template, bottom) {
+    var wrap = cm.getWrapperElement();
+    var dialog;
+    dialog = wrap.appendChild(document.createElement("div"));
+    if (bottom) {
+      dialog.className = "CodeMirror-dialog CodeMirror-dialog-bottom";
+    } else {
+      dialog.className = "CodeMirror-dialog CodeMirror-dialog-top";
+    }
+    if (typeof template == "string") {
+      dialog.innerHTML = template;
+    } else { // Assuming it's a detached DOM element.
+      dialog.appendChild(template);
+    }
+    return dialog;
+  }
+
+  function closeNotification(cm, newVal) {
+    if (cm.state.currentNotificationClose)
+      cm.state.currentNotificationClose();
+    cm.state.currentNotificationClose = newVal;
+  }
+
+  CodeMirror.defineExtension("openDialog", function(template, callback, options) {
+    closeNotification(this, null);
+    var dialog = dialogDiv(this, template, options && options.bottom);
+    var closed = false, me = this;
+    function close() {
+      if (closed) return;
+      closed = true;
+      dialog.parentNode.removeChild(dialog);
+    }
+    var inp = dialog.getElementsByTagName("input")[0], button;
+    if (inp) {
+      if (options && options.value) inp.value = options.value;
+      CodeMirror.on(inp, "keydown", function(e) {
+        if (options && options.onKeyDown && options.onKeyDown(e, inp.value, close)) { return; }
+        if (e.keyCode == 13 || e.keyCode == 27) {
+          CodeMirror.e_stop(e);
+          close();
+          me.focus();
+          if (e.keyCode == 13) callback(inp.value);
+        }
+      });
+      if (options && options.onKeyUp) {
+        CodeMirror.on(inp, "keyup", function(e) {options.onKeyUp(e, inp.value, close);});
+      }
+      if (options && options.value) inp.value = options.value;
+      inp.focus();
+      CodeMirror.on(inp, "blur", close);
+    } else if (button = dialog.getElementsByTagName("button")[0]) {
+      CodeMirror.on(button, "click", function() {
+        close();
+        me.focus();
+      });
+      button.focus();
+      CodeMirror.on(button, "blur", close);
+    }
+    return close;
+  });
+
+  CodeMirror.defineExtension("openConfirm", function(template, callbacks, options) {
+    closeNotification(this, null);
+    var dialog = dialogDiv(this, template, options && options.bottom);
+    var buttons = dialog.getElementsByTagName("button");
+    var closed = false, me = this, blurring = 1;
+    function close() {
+      if (closed) return;
+      closed = true;
+      dialog.parentNode.removeChild(dialog);
+      me.focus();
+    }
+    buttons[0].focus();
+    for (var i = 0; i < buttons.length; ++i) {
+      var b = buttons[i];
+      (function(callback) {
+        CodeMirror.on(b, "click", function(e) {
+          CodeMirror.e_preventDefault(e);
+          close();
+          if (callback) callback(me);
+        });
+      })(callbacks[i]);
+      CodeMirror.on(b, "blur", function() {
+        --blurring;
+        setTimeout(function() { if (blurring <= 0) close(); }, 200);
+      });
+      CodeMirror.on(b, "focus", function() { ++blurring; });
+    }
+  });
+
+  /*
+   * openNotification
+   * Opens a notification, that can be closed with an optional timer
+   * (default 5000ms timer) and always closes on click.
+   *
+   * If a notification is opened while another is opened, it will close the
+   * currently opened one and open the new one immediately.
+   */
+  CodeMirror.defineExtension("openNotification", function(template, options) {
+    closeNotification(this, close);
+    var dialog = dialogDiv(this, template, options && options.bottom);
+    var duration = options && (options.duration === undefined ? 5000 : options.duration);
+    var closed = false, doneTimer;
+
+    function close() {
+      if (closed) return;
+      closed = true;
+      clearTimeout(doneTimer);
+      dialog.parentNode.removeChild(dialog);
+    }
+
+    CodeMirror.on(dialog, 'click', function(e) {
+      CodeMirror.e_preventDefault(e);
+      close();
+    });
+    if (duration)
+      doneTimer = setTimeout(close, options.duration);
+  });
+})();

common/static/js/vendor/tiny_mce/plugins/codemirror/source.html

@@ -45,20 +45,21 @@ function inArray(key, arr)
 			styleActiveLine: true
 		},
 		jsFiles: [// Default JS files
-			'lib/codemirror.js',
-			'addon/edit/matchbrackets.js',
-			'mode/xml/xml.js',
-			'mode/javascript/javascript.js',
-			'mode/css/css.js',
-			'mode/htmlmixed/htmlmixed.js',
-			'addon/dialog/dialog.js',
-			'addon/search/searchcursor.js',
-			'addon/search/search.js',
-			'addon/selection/active-line.js'
+// MODIFIED FOR EDX VENDOR FILE LOCATIONS.
+			'codemirror.js',
+//			'addon/edit/matchbrackets.js',
+			'xml.js',
+			'javascript.js',
+			'addons/css.js',
+			'addons/htmlmixed.js',
+			'addons/dialog/dialog.js',
+			'addons/searchcursor.js',
+			'addons/search.js'
+//			'addon/selection/active-line.js'
 		],
-		cssFiles: [// Default CSS files
-			'lib/codemirror.css',
-			'addon/dialog/dialog.css'
+		cssFiles: [
+			'codemirror.css',
+			'addons/dialog/dialog.css'
 		]
 	};