codemirror mode lazy loading

public/javascripts/note_editor.js

@@ -70,8 +70,6 @@ const noteEditor = (function() {
         }
         else if (note.detail.type === 'code') {
             note.detail.note_text = codeEditor.getValue();
-
-            codeEditor.setOption("mode", note.detail.mime);
         }
         else {
             throwError("Unrecognized type: " + note.detail.type);
@@ -149,6 +147,16 @@ const noteEditor = (function() {
 
             // this needs to happen after the element is shown, otherwise the editor won't be refresheds
             codeEditor.setValue(currentNote.detail.note_text);
+
+            const info = CodeMirror.findModeByMIME(currentNote.detail.mime);
+            let mode = null;
+            if (info) {
+                mode = info.mode;
+            }
+
+            CodeMirror.autoLoadMode(codeEditor, mode);
+
+            codeEditor.setOption("mode", mode);
         }
         else {
             throwError("Unrecognized type " + currentNote.detail.type);
@@ -209,6 +217,8 @@ const noteEditor = (function() {
         CodeMirror.keyMap.default["Shift-Tab"] = "indentLess";
         CodeMirror.keyMap.default["Tab"] = "indentMore";
 
+        CodeMirror.modeURL = 'libraries/codemirror/mode/%N/%N.js';
+
         codeEditor = CodeMirror($("#note-detail-code")[0], {
             value: "",
             viewportMargin: Infinity,

public/libraries/codemirror/addon/mode/loadmode.js

@@ -0,0 +1,64 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"), "cjs");
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], function(CM) { mod(CM, "amd"); });
+  else // Plain browser env
+    mod(CodeMirror, "plain");
+})(function(CodeMirror, env) {
+  if (!CodeMirror.modeURL) CodeMirror.modeURL = "../mode/%N/%N.js";
+
+  var loading = {};
+  function splitCallback(cont, n) {
+    var countDown = n;
+    return function() { if (--countDown == 0) cont(); };
+  }
+  function ensureDeps(mode, cont) {
+    var deps = CodeMirror.modes[mode].dependencies;
+    if (!deps) return cont();
+    var missing = [];
+    for (var i = 0; i < deps.length; ++i) {
+      if (!CodeMirror.modes.hasOwnProperty(deps[i]))
+        missing.push(deps[i]);
+    }
+    if (!missing.length) return cont();
+    var split = splitCallback(cont, missing.length);
+    for (var i = 0; i < missing.length; ++i)
+      CodeMirror.requireMode(missing[i], split);
+  }
+
+  CodeMirror.requireMode = function(mode, cont) {
+    if (typeof mode != "string") mode = mode.name;
+    if (CodeMirror.modes.hasOwnProperty(mode)) return ensureDeps(mode, cont);
+    if (loading.hasOwnProperty(mode)) return loading[mode].push(cont);
+
+    var file = CodeMirror.modeURL.replace(/%N/g, mode);
+    if (env == "plain") {
+      var script = document.createElement("script");
+      script.src = file;
+      var others = document.getElementsByTagName("script")[0];
+      var list = loading[mode] = [cont];
+      CodeMirror.on(script, "load", function() {
+        ensureDeps(mode, function() {
+          for (var i = 0; i < list.length; ++i) list[i]();
+        });
+      });
+      others.parentNode.insertBefore(script, others);
+    } else if (env == "cjs") {
+      require(file);
+      cont();
+    } else if (env == "amd") {
+      requirejs([file], cont);
+    }
+  };
+
+  CodeMirror.autoLoadMode = function(instance, mode) {
+    if (!CodeMirror.modes.hasOwnProperty(mode))
+      CodeMirror.requireMode(mode, function() {
+        instance.setOption("mode", instance.getOption("mode"));
+      });
+  };
+});

views/index.ejs

@@ -440,8 +440,8 @@
 
     <script src="libraries/codemirror/codemirror.js"></script>
     <link rel="stylesheet" href="libraries/codemirror/codemirror.css">
-    <script src="libraries/codemirror/mode/javascript/javascript.js"></script>
-    <script src="libraries/codemirror/mode/xml/xml.js"></script>
+    <script src="libraries/codemirror/addon/mode/loadmode.js"></script>
+    <script src="libraries/codemirror/mode/meta.js"></script>
 
     <link href="stylesheets/style.css" rel="stylesheet">