git add stuff

2026-02-14 19:50:25 +03:00
parent 5c3329238b
commit 3942076805
1130 changed files with 120023 additions and 6 deletions
--- a/simpla/design/js/codemirror/mode/clike/clike.css
+++ b/simpla/design/js/codemirror/mode/clike/clike.css
@@ -0,0 +1,6 @@
+span.c-like-keyword {color: #90b;}
+span.c-like-number {color: #291;}
+span.c-like-comment {color: #a70;}
+span.c-like-string {color: #a22;}
+span.c-like-preprocessor {color: #049;}
+span.c-like-var {color: #22b;}
--- a/simpla/design/js/codemirror/mode/clike/clike.js
+++ b/simpla/design/js/codemirror/mode/clike/clike.js
@@ -0,0 +1,181 @@
+CodeMirror.defineMode("clike", function(config, parserConfig) {
+  var indentUnit = config.indentUnit, keywords = parserConfig.keywords,
+      cpp = parserConfig.useCPP, multiLineStrings = parserConfig.multiLineStrings, $vars = parserConfig.$vars;
+  var isOperatorChar = /[+\-*&%=<>!?|]/;
+
+  function chain(stream, state, f) {
+    state.tokenize = f;
+    return f(stream, state);
+  }
+
+  var type;
+  function ret(tp, style) {
+    type = tp;
+    return style;
+  }
+
+  function tokenBase(stream, state) {
+    var ch = stream.next();
+    if (ch == '"' || ch == "'")
+      return chain(stream, state, tokenString(ch));
+    else if (/[\[\]{}\(\),;\:\.]/.test(ch))
+      return ret(ch);
+    else if (ch == "#" && cpp && state.startOfLine) {
+      stream.skipToEnd();
+      return ret("directive", "c-like-preprocessor");
+    }
+    else if (/\d/.test(ch)) {
+      stream.eatWhile(/[\w\.]/)
+      return ret("number", "c-like-number");
+    }
+    else if (ch == "/") {
+      if (stream.eat("*")) {
+        return chain(stream, state, tokenComment);
+      }
+      else if (stream.eat("/")) {
+        stream.skipToEnd();
+        return ret("comment", "c-like-comment");
+      }
+      else {
+        stream.eatWhile(isOperatorChar);
+        return ret("operator");
+      }
+    }
+    else if (isOperatorChar.test(ch)) {
+      stream.eatWhile(isOperatorChar);
+      return ret("operator");
+    }
+    else if ($vars && ch == "$") {
+      stream.eatWhile(/[\w\$_]/);
+      return ret("word", "c-like-var");
+    }
+    else {
+      stream.eatWhile(/[\w\$_]/);
+      if (keywords && keywords.propertyIsEnumerable(stream.current())) return ret("keyword", "c-like-keyword");
+      return ret("word", "c-like-word");
+    }
+  }
+
+  function tokenString(quote) {
+    return function(stream, state) {
+      var escaped = false, next, end = false;
+      while ((next = stream.next()) != null) {
+        if (next == quote && !escaped) {end = true; break;}
+        escaped = !escaped && next == "\\";
+      }
+      if (end || !(escaped || multiLineStrings))
+        state.tokenize = tokenBase;
+      return ret("string", "c-like-string");
+    };
+  }
+
+  function tokenComment(stream, state) {
+    var maybeEnd = false, ch;
+    while (ch = stream.next()) {
+      if (ch == "/" && maybeEnd) {
+        state.tokenize = tokenBase;
+        break;
+      }
+      maybeEnd = (ch == "*");
+    }
+    return ret("comment", "c-like-comment");
+  }
+
+  function Context(indented, column, type, align, prev) {
+    this.indented = indented;
+    this.column = column;
+    this.type = type;
+    this.align = align;
+    this.prev = prev;
+  }
+
+  function pushContext(state, col, type) {
+    return state.context = new Context(state.indented, col, type, null, state.context);
+  }
+  function popContext(state) {
+    return state.context = state.context.prev;
+  }
+
+  // Interface
+
+  return {
+    startState: function(basecolumn) {
+      return {
+        tokenize: tokenBase,
+        context: new Context((basecolumn || 0) - indentUnit, 0, "top", false),
+        indented: 0,
+        startOfLine: true
+      };
+    },
+
+    token: function(stream, state) {
+      var ctx = state.context;
+      if (stream.sol()) {
+        if (ctx.align == null) ctx.align = false;
+        state.indented = stream.indentation();
+        state.startOfLine = true;
+      }
+      if (stream.eatSpace()) return null;
+      var style = state.tokenize(stream, state);
+      if (type == "comment") return style;
+      if (ctx.align == null) ctx.align = true;
+
+      if ((type == ";" || type == ":") && ctx.type == "statement") popContext(state);
+      else if (type == "{") pushContext(state, stream.column(), "}");
+      else if (type == "[") pushContext(state, stream.column(), "]");
+      else if (type == "(") pushContext(state, stream.column(), ")");
+      else if (type == "}") {
+        if (ctx.type == "statement") ctx = popContext(state);
+        if (ctx.type == "}") ctx = popContext(state);
+        if (ctx.type == "statement") ctx = popContext(state);
+      }
+      else if (type == ctx.type) popContext(state);
+      else if (ctx.type == "}") pushContext(state, stream.column(), "statement");
+      state.startOfLine = false;
+      return style;
+    },
+
+    indent: function(state, textAfter) {
+      if (state.tokenize != tokenBase) return 0;
+      var firstChar = textAfter && textAfter.charAt(0), ctx = state.context, closing = firstChar == ctx.type;
+      if (ctx.type == "statement") return ctx.indented + (firstChar == "{" ? 0 : indentUnit);
+      else if (ctx.align) return ctx.column + (closing ? 0 : 1);
+      else return ctx.indented + (closing ? 0 : indentUnit);
+    },
+
+    electricChars: "{}"
+  };
+});
+
+(function() {
+  function keywords(str) {
+    var obj = {}, words = str.split(" ");
+    for (var i = 0; i < words.length; ++i) obj[words[i]] = true;
+    return obj;
+  }
+  var cKeywords = "auto if break int case long char register continue return default short do sizeof " +
+    "double static else struct entry switch extern typedef float union for unsigned " +
+    "goto while enum void const signed volatile";
+
+  CodeMirror.defineMIME("text/x-csrc", {
+    name: "clike",
+    useCPP: true,
+    keywords: keywords(cKeywords)
+  });
+  CodeMirror.defineMIME("text/x-c++src", {
+    name: "clike",
+    useCPP: true,
+    keywords: keywords(cKeywords + " asm dynamic_cast namespace reinterpret_cast try bool explicit new " +
+                       "static_cast typeid catch false operator template typename class friend private " +
+                       "this using const_cast inline public throw virtual delete mutable protected true " +
+                       "wchar_t")
+  });
+  CodeMirror.defineMIME("text/x-java", {
+    name: "clike",
+    keywords: keywords("abstract assert boolean break byte case catch char class const continue default " + 
+                       "do double else enum extends false final finally float for goto if implements import " +
+                       "instanceof int interface long native new null package private protected public " +
+                       "return short static strictfp super switch synchronized this throw throws transient " +
+                       "true try void volatile while")
+  });
+}());
--- a/simpla/design/js/codemirror/mode/clike/index.html
+++ b/simpla/design/js/codemirror/mode/clike/index.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<html>
+  <head>
+    <title>CodeMirror 2: C-like mode</title>
+    <link rel="stylesheet" href="../../lib/codemirror.css">
+    <script src="../../lib/codemirror.js"></script>
+    <script src="clike.js"></script>
+    <link rel="stylesheet" href="clike.css">
+    <link rel="stylesheet" href="../../css/docs.css">
+    <style>.CodeMirror {border: 2px inset #dee;}</style>
+  </head>
+  <body>
+    <h1>CodeMirror 2: C-like mode</h1>
+
+<form><textarea id="code" name="code">
+/* C demo code */
+
+#include <zmq.h>
+#include <pthread.h>
+#include <semaphore.h>
+#include <time.h>
+#include <stdio.h>
+#include <fcntl.h>
+#include <malloc.h>
+
+typedef struct {
+  void* arg_socket;
+  zmq_msg_t* arg_msg;
+  char* arg_string;
+  unsigned long arg_len;
+  int arg_int, arg_command;
+
+  int signal_fd;
+  int pad;
+  void* context;
+  sem_t sem;
+} acl_zmq_context;
+
+#define p(X) (context->arg_##X)
+
+void* zmq_thread(void* context_pointer) {
+  acl_zmq_context* context = (acl_zmq_context*)context_pointer;
+  char ok = 'K', err = 'X';
+  int res;
+
+  while (1) {
+    while ((res = sem_wait(&amp;context->sem)) == EINTR);
+    if (res) {write(context->signal_fd, &amp;err, 1); goto cleanup;}
+    switch(p(command)) {
+    case 0: goto cleanup;
+    case 1: p(socket) = zmq_socket(context->context, p(int)); break;
+    case 2: p(int) = zmq_close(p(socket)); break;
+    case 3: p(int) = zmq_bind(p(socket), p(string)); break;
+    case 4: p(int) = zmq_connect(p(socket), p(string)); break;
+    case 5: p(int) = zmq_getsockopt(p(socket), p(int), (void*)p(string), &amp;p(len)); break;
+    case 6: p(int) = zmq_setsockopt(p(socket), p(int), (void*)p(string), p(len)); break;
+    case 7: p(int) = zmq_send(p(socket), p(msg), p(int)); break;
+    case 8: p(int) = zmq_recv(p(socket), p(msg), p(int)); break;
+    case 9: p(int) = zmq_poll(p(socket), p(int), p(len)); break;
+    }
+    p(command) = errno;
+    write(context->signal_fd, &amp;ok, 1);
+  }
+ cleanup:
+  close(context->signal_fd);
+  free(context_pointer);
+  return 0;
+}
+
+void* zmq_thread_init(void* zmq_context, int signal_fd) {
+  acl_zmq_context* context = malloc(sizeof(acl_zmq_context));
+  pthread_t thread;
+
+  context->context = zmq_context;
+  context->signal_fd = signal_fd;
+  sem_init(&amp;context->sem, 1, 0);
+  pthread_create(&amp;thread, 0, &amp;zmq_thread, context);
+  pthread_detach(thread);
+  return context;
+}
+</textarea></form>
+
+    <script>
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+        lineNumbers: true,
+        matchBrackets: true,
+        mode: "text/x-csrc"
+      });
+    </script>
+
+    <p>Simple mode that tries to handle C-like languages as well as it
+    can. Takes two configuration parameters: <code>keywords</code>, an
+    object whose property names are the keywords in the language,
+    and <code>useCPP</code>, which determines whether C preprocessor
+    directives are recognized.</p>
+
+    <p><strong>MIME types defined:</strong> <code>text/x-csrc</code>
+    (C code), <code>text/x-c++src</code> (C++
+    code), <code>text/x-java</code> (Java code).</p>
+  </body>
+</html>
--- a/simpla/design/js/codemirror/mode/css/css.css
+++ b/simpla/design/js/codemirror/mode/css/css.css
@@ -0,0 +1,9 @@
+span.css-at {color: #708;}
+span.css-unit {color: #281;}
+span.css-value {color: #708;}
+span.css-identifier {color: black;}
+span.css-selector {color: #11B;}
+span.css-important {color: #00F;}
+span.css-colorcode {color: #299;}
+span.css-comment {color: #A70;}
+span.css-string {color: #A22;}
--- a/simpla/design/js/codemirror/mode/css/css.js
+++ b/simpla/design/js/codemirror/mode/css/css.js
@@ -0,0 +1,124 @@
+CodeMirror.defineMode("css", function(config) {
+  var indentUnit = config.indentUnit, type;
+  function ret(style, tp) {type = tp; return style;}
+
+  function tokenBase(stream, state) {
+    var ch = stream.next();
+    if (ch == "@") {stream.eatWhile(/\w/); return ret("css-at", stream.current());}
+    else if (ch == "/" && stream.eat("*")) {
+      state.tokenize = tokenCComment;
+      return tokenCComment(stream, state);
+    }
+    else if (ch == "<" && stream.eat("!")) {
+      state.tokenize = tokenSGMLComment;
+      return tokenSGMLComment(stream, state);
+    }
+    else if (ch == "=") ret(null, "compare");
+    else if ((ch == "~" || ch == "|") && stream.eat("=")) return ret(null, "compare");
+    else if (ch == "\"" || ch == "'") {
+      state.tokenize = tokenString(ch);
+      return state.tokenize(stream, state);
+    }
+    else if (ch == "#") {
+      stream.eatWhile(/\w/);
+      return ret("css-selector", "hash");
+    }
+    else if (ch == "!") {
+      stream.match(/^\s*\w*/);
+      return ret("css-important", "important");
+    }
+    else if (/\d/.test(ch)) {
+      stream.eatWhile(/[\w.%]/);
+      return ret("css-unit", "unit");
+    }
+    else if (/[,.+>*\/]/.test(ch)) {
+      return ret(null, "select-op");
+    }
+    else if (/[;{}:\[\]]/.test(ch)) {
+      return ret(null, ch);
+    }
+    else {
+      stream.eatWhile(/[\w\\\-_]/);
+      return ret("css-identifier", "identifier");
+    }
+  }
+
+  function tokenCComment(stream, state) {
+    var maybeEnd = false, ch;
+    while ((ch = stream.next()) != null) {
+      if (maybeEnd && ch == "/") {
+        state.tokenize = tokenBase;
+        break;
+      }
+      maybeEnd = (ch == "*");
+    }
+    return ret("css-comment", "comment");
+  }
+
+  function tokenSGMLComment(stream, state) {
+    var dashes = 0, ch;
+    while ((ch = stream.next()) != null) {
+      if (dashes >= 2 && ch == ">") {
+        state.tokenize = tokenBase;
+        break;
+      }
+      dashes = (ch == "-") ? dashes + 1 : 0;
+    }
+    return ret("css-comment", "comment");
+  }
+
+  function tokenString(quote) {
+    return function(stream, state) {
+      var escaped = false, ch;
+      while ((ch = stream.next()) != null) {
+        if (ch == quote && !escaped)
+          break;
+        escaped = !escaped && ch == "\\";
+      }
+      if (!escaped) state.tokenize = tokenBase;
+      return ret("css-string", "string");
+    };
+  }
+
+  return {
+    startState: function(base) {
+      return {tokenize: tokenBase,
+              baseIndent: base || 0,
+              stack: []};
+    },
+
+    token: function(stream, state) {
+      if (stream.eatSpace()) return null;
+      var style = state.tokenize(stream, state);
+
+      var context = state.stack[state.stack.length-1];
+      if (type == "hash" && context == "rule") style = "css-colorcode";
+      else if (style == "css-identifier") {
+        if (context == "rule") style = "css-value";
+        else if (!context || context == "@media{") style = "css-selector";
+      }
+
+      if (context == "rule" && /^[\{\};]$/.test(type))
+        state.stack.pop();
+      if (type == "{") {
+        if (context == "@media") state.stack[state.stack.length-1] = "@media{";
+        else state.stack.push("{");
+      }
+      else if (type == "}") state.stack.pop();
+      else if (type == "@media") state.stack.push("@media");
+      else if (context != "rule" && context != "@media" && type != "comment") state.stack.push("rule");
+      return style;
+    },
+
+    indent: function(state, textAfter) {
+      var n = state.stack.length;
+      if (/^\}/.test(textAfter))
+        n -= state.stack[state.stack.length-1] == "rule" ? 2 : 1;
+      return state.baseIndent + n * indentUnit;
+    },
+
+    electricChars: "}"
+  };
+});
+
+CodeMirror.defineMIME("text/css", "css");
--- a/simpla/design/js/codemirror/mode/css/index.html
+++ b/simpla/design/js/codemirror/mode/css/index.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html>
+  <head>
+    <title>CodeMirror 2: CSS mode</title>
+    <link rel="stylesheet" href="../../lib/codemirror.css">
+    <script src="../../lib/codemirror.js"></script>
+    <script src="css.js"></script>
+    <link rel="stylesheet" href="css.css">
+    <style>.CodeMirror {background: #f8f8f8;}</style>
+    <link rel="stylesheet" href="../../css/docs.css">
+  </head>
+  <body>
+    <h1>CodeMirror 2: CSS mode</h1>
+    <form><textarea id="code" name="code">
+/* Some example CSS */
+
+@import url("something.css");
+
+body {
+  margin: 0;
+  padding: 3em 6em;
+  font-family: tahoma, arial, sans-serif;
+  color: #000;
+}
+
+#navigation a {
+  font-weight: bold;
+  text-decoration: none !important;
+}
+
+h1 {
+  font-size: 2.5em;
+}
+
+h2 {
+  font-size: 1.7em;
+}
+
+h1:before, h2:before {
+  content: "::";
+}
+
+code {
+  font-family: courier, monospace;
+  font-size: 80%;
+  color: #418A8A;
+}
+</textarea></form>
+    <script>
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {});
+    </script>
+
+    <p><strong>MIME types defined:</strong> <code>text/css</code>.</p>
+
+  </body>
+</html>
--- a/simpla/design/js/codemirror/mode/diff/diff.css
+++ b/simpla/design/js/codemirror/mode/diff/diff.css
@@ -0,0 +1,3 @@
+span.diff-rangeinfo {color: #a0b;}
+span.diff-minus {color: #a22;}
+span.diff-plus {color: #2b2;}
--- a/simpla/design/js/codemirror/mode/diff/diff.js
+++ b/simpla/design/js/codemirror/mode/diff/diff.js
@@ -0,0 +1,13 @@
+CodeMirror.defineMode("diff", function() {
+  return {
+    token: function(stream) {
+      var ch = stream.next();
+      stream.skipToEnd();
+      if (ch == "+") return "diff-plus";
+      if (ch == "-") return "diff-minus";
+      if (ch == "@") return "diff-rangeinfo";
+    }
+  };
+});
+
+CodeMirror.defineMIME("text/x-diff", "diff");
--- a/simpla/design/js/codemirror/mode/diff/index.html
+++ b/simpla/design/js/codemirror/mode/diff/index.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<html>
+  <head>
+    <title>CodeMirror 2: Diff mode</title>
+    <link rel="stylesheet" href="../../lib/codemirror.css">
+    <script src="../../lib/codemirror.js"></script>
+    <script src="diff.js"></script>
+    <link rel="stylesheet" href="diff.css">
+    <style>.CodeMirror {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}</style>
+    <link rel="stylesheet" href="../../css/docs.css">
+  </head>
+  <body>
+    <h1>CodeMirror 2: Diff mode</h1>
+    <form><textarea id="code" name="code">
+diff --git a/index.html b/index.html
+index c1d9156..7764744 100644
+--- a/index.html
+++ b/index.html
+@@ -95,7 +95,8 @@ StringStream.prototype = {
+     <script>
+       var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+         lineNumbers: true,
+-        autoMatchBrackets: true
+        autoMatchBrackets: true,
+      onGutterClick: function(x){console.log(x);}
+       });
+     </script>
+   </body>
+diff --git a/lib/codemirror.js b/lib/codemirror.js
+index 04646a9..9a39cc7 100644
+--- a/lib/codemirror.js
+++ b/lib/codemirror.js
+@@ -399,10 +399,16 @@ var CodeMirror = (function() {
+     }
+ 
+     function onMouseDown(e) {
+-      var start = posFromMouse(e), last = start;
+      var start = posFromMouse(e), last = start, target = e.target();
+       if (!start) return;
+       setCursor(start.line, start.ch, false);
+       if (e.button() != 1) return;
+      if (target.parentNode == gutter) {
+        if (options.onGutterClick)
+          options.onGutterClick(indexOf(gutter.childNodes, target) + showingFrom);
+        return;
+      }
+
+       if (!focused) onFocus();
+ 
+       e.stop();
+@@ -808,7 +814,7 @@ var CodeMirror = (function() {
+       for (var i = showingFrom; i < showingTo; ++i) {
+         var marker = lines[i].gutterMarker;
+         if (marker) html.push('<div class="' + marker.style + '">' + htmlEscape(marker.text) + '</div>');
+-        else html.push("<div>" + (options.lineNumbers ? i + 1 : "\u00a0") + "</div>");
+        else html.push("<div>" + (options.lineNumbers ? i + options.firstLineNumber : "\u00a0") + "</div>");
+       }
+       gutter.style.display = "none"; // TODO test whether this actually helps
+       gutter.innerHTML = html.join("");
+@@ -1371,10 +1377,8 @@ var CodeMirror = (function() {
+         if (option == "parser") setParser(value);
+         else if (option === "lineNumbers") setLineNumbers(value);
+         else if (option === "gutter") setGutter(value);
+-        else if (option === "readOnly") options.readOnly = value;
+-        else if (option === "indentUnit") {options.indentUnit = indentUnit = value; setParser(options.parser);}
+-        else if (/^(?:enterMode|tabMode|indentWithTabs|readOnly|autoMatchBrackets|undoDepth)$/.test(option)) options[option] = value;
+-        else throw new Error("Can't set option " + option);
+        else if (option === "indentUnit") {options.indentUnit = value; setParser(options.parser);}
+        else options[option] = value;
+       },
+       cursorCoords: cursorCoords,
+       undo: operation(undo),
+@@ -1402,7 +1406,8 @@ var CodeMirror = (function() {
+       replaceRange: operation(replaceRange),
+ 
+       operation: function(f){return operation(f)();},
+-      refresh: function(){updateDisplay([{from: 0, to: lines.length}]);}
+      refresh: function(){updateDisplay([{from: 0, to: lines.length}]);},
+      getInputField: function(){return input;}
+     };
+     return instance;
+   }
+@@ -1420,6 +1425,7 @@ var CodeMirror = (function() {
+     readOnly: false,
+     onChange: null,
+     onCursorActivity: null,
+    onGutterClick: null,
+     autoMatchBrackets: false,
+     workTime: 200,
+     workDelay: 300,
+</textarea></form>
+    <script>
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {});
+    </script>
+
+    <p><strong>MIME types defined:</strong> <code>text/x-diff</code>.</p>
+
+  </body>
+</html>
--- a/simpla/design/js/codemirror/mode/haskell/haskell.css
+++ b/simpla/design/js/codemirror/mode/haskell/haskell.css
@@ -0,0 +1,25 @@
+span.hs-char,
+span.hs-float,
+span.hs-integer,
+span.hs-string 	{color: #762;}
+
+span.hs-comment {color: #262;font-style: italic;}
+span.hs-pragma {color: #555;font-style: italic;}
+
+span.hs-special,
+span.hs-varid,
+span.hs-varsym {color: #000;}
+
+span.hs-conid,
+span.hs-consym {color: #b11;}
+
+span.hs-qualifier {color: #555;}
+
+span.hs-reservedid,
+span.hs-reservedop {color: #730;}
+
+span.hs-prelude-varid,
+span.hs-prelude-varsym {color: #30a;}
+span.hs-prelude-conid {color: #b11;}
+
+span.hs-error {background-color: #fdd;}
--- a/simpla/design/js/codemirror/mode/haskell/haskell.js
+++ b/simpla/design/js/codemirror/mode/haskell/haskell.js
@@ -0,0 +1,242 @@
+CodeMirror.defineMode("haskell", function(cmCfg, modeCfg) {
+
+  function switchState(source, setState, f) {
+    setState(f);
+    return f(source, setState);
+  }
+  
+  // These should all be Unicode extended, as per the Haskell 2010 report
+  var smallRE = /[a-z_]/;
+  var largeRE = /[A-Z]/;
+  var digitRE = /[0-9]/;
+  var hexitRE = /[0-9A-Fa-f]/;
+  var octitRE = /[0-7]/;
+  var idRE = /[a-z_A-Z0-9']/;
+  var symbolRE = /[-!#$%&*+.\/<=>?@\\^|~:]/;
+  var specialRE = /[(),;[\]`{}]/;
+  var whiteCharRE = /[ \t\v\f]/; // newlines are handled in tokenizer
+    
+  function normal(source, setState) {
+    if (source.eatWhile(whiteCharRE)) {
+      return null;
+    }
+      
+    var ch = source.next();
+    if (specialRE.test(ch)) {
+      if (ch == '{' && source.eat('-')) {
+        var t = "hs-comment";
+        if (source.eat('#')) {
+          t = "hs-pragma";
+        }
+        return switchState(source, setState, ncomment(t, 1));
+      }
+      return "hs-special";
+    }
+    
+    if (ch == '\'') {
+      if (source.eat('\\')) {
+        source.next();  // should handle other escapes here
+      }
+      else {
+        source.next();
+      }
+      if (source.eat('\'')) {
+        return "hs-char";
+      }
+      return "hs-error";
+    }
+    
+    if (ch == '"') {
+      return switchState(source, setState, stringLiteral);
+    }
+      
+    if (largeRE.test(ch)) {
+      source.eatWhile(idRE);
+      if (source.eat('.')) {
+        return "hs-qualifier";
+      }
+      return "hs-conid";
+    }
+      
+    if (smallRE.test(ch)) {
+      source.eatWhile(idRE);
+      return "hs-varid";
+    }
+      
+    if (digitRE.test(ch)) {
+      if (ch == '0') {
+        if (source.eat(/[xX]/)) {
+          source.eatWhile(hexitRE); // should require at least 1
+          return "hs-integer";
+        }
+        if (source.eat(/[oO]/)) {
+          source.eatWhile(octitRE); // should require at least 1
+          return "hs-integer";
+        }
+      }
+      source.eatWhile(digitRE);
+      var t = "hs-integer";
+      if (source.eat('.')) {
+        t = "hs-float";
+        source.eatWhile(digitRE); // should require at least 1
+      }
+      if (source.eat(/[eE]/)) {
+        t = "hs-float";
+        source.eat(/[-+]/);
+        source.eatWhile(digitRE); // should require at least 1
+      }
+      return t;
+    }
+      
+    if (symbolRE.test(ch)) {
+      if (ch == '-' && source.eat(/-/)) {
+        source.eatWhile(/-/);
+        if (!source.eat(symbolRE)) {
+          source.skipToEnd();
+          return "hs-comment";
+        }
+      }
+      var t = "hs-varsym";
+      if (ch == ':') {
+        t = "hs-consym";
+      }
+      source.eatWhile(symbolRE);
+      return t;    
+    }
+      
+    return "hs-error";
+  }
+    
+  function ncomment(type, nest) {
+    if (nest == 0) {
+      return normal;
+    }
+    return function(source, setState) {
+      var currNest = nest;
+      while (!source.eol()) {
+        ch = source.next();
+        if (ch == '{' && source.eat('-')) {
+          ++currNest;
+        }
+        else if (ch == '-' && source.eat('}')) {
+          --currNest;
+          if (currNest == 0) {
+            setState(normal);
+            return type;
+          }
+        }
+      }
+      setState(ncomment(type, currNest));
+      return type;
+    }
+  }
+    
+  function stringLiteral(source, setState) {
+    while (!source.eol()) {
+      var ch = source.next();
+      if (ch == '"') {
+        setState(normal);
+        return "hs-string";
+      }
+      if (ch == '\\') {
+        if (source.eol() || source.eat(whiteCharRE)) {
+          setState(stringGap);
+          return "hs-string";
+        }
+        if (source.eat('&')) {
+        }
+        else {
+          source.next(); // should handle other escapes here
+        }
+      }
+    }
+    setState(normal);
+    return "hs-error";
+  }
+  
+  function stringGap(source, setState) {
+    if (source.eat('\\')) {
+      return switchState(source, setState, stringLiteral);
+    }
+    source.next();
+    setState(normal);
+    return "hs-error";
+  }
+  
+  
+  var wellKnownWords = (function() {
+    var wkw = {};
+    function setType(t) {
+      return function () {
+        for (var i = 0; i < arguments.length; i++)
+          wkw[arguments[i]] = t;
+      }
+    }
+    
+    setType("hs-reservedid")(
+      "case", "class", "data", "default", "deriving", "do", "else", "foreign",
+      "if", "import", "in", "infix", "infixl", "infixr", "instance", "let",
+      "module", "newtype", "of", "then", "type", "where", "_");
+      
+    setType("hs-reservedop")(
+      "\.\.", ":", "::", "=", "\\", "\"", "<-", "->", "@", "~", "=>");
+      
+    setType("hs-prelude-varsym")(
+      "!!", "$!", "$", "&&", "+", "++", "-", ".", "/", "/=", "<", "<=", "=<<",
+      "==", ">", ">=", ">>", ">>=", "^", "^^", "||", "*", "**");
+      
+    setType("hs-prelude-conid")(
+      "Bool", "Bounded", "Char", "Double", "EQ", "Either", "Enum", "Eq",
+      "False", "FilePath", "Float", "Floating", "Fractional", "Functor", "GT",
+      "IO", "IOError", "Int", "Integer", "Integral", "Just", "LT", "Left",
+      "Maybe", "Monad", "Nothing", "Num", "Ord", "Ordering", "Rational", "Read",
+      "ReadS", "Real", "RealFloat", "RealFrac", "Right", "Show", "ShowS",
+      "String", "True");
+      
+    setType("hs-prelude-varid")(
+      "abs", "acos", "acosh", "all", "and", "any", "appendFile", "asTypeOf",
+      "asin", "asinh", "atan", "atan2", "atanh", "break", "catch", "ceiling",
+      "compare", "concat", "concatMap", "const", "cos", "cosh", "curry",
+      "cycle", "decodeFloat", "div", "divMod", "drop", "dropWhile", "either",
+      "elem", "encodeFloat", "enumFrom", "enumFromThen", "enumFromThenTo",
+      "enumFromTo", "error", "even", "exp", "exponent", "fail", "filter",
+      "flip", "floatDigits", "floatRadix", "floatRange", "floor", "fmap",
+      "foldl", "foldl1", "foldr", "foldr1", "fromEnum", "fromInteger",
+      "fromIntegral", "fromRational", "fst", "gcd", "getChar", "getContents",
+      "getLine", "head", "id", "init", "interact", "ioError", "isDenormalized",
+      "isIEEE", "isInfinite", "isNaN", "isNegativeZero", "iterate", "last",
+      "lcm", "length", "lex", "lines", "log", "logBase", "lookup", "map",
+      "mapM", "mapM_", "max", "maxBound", "maximum", "maybe", "min", "minBound",
+      "minimum", "mod", "negate", "not", "notElem", "null", "odd", "or",
+      "otherwise", "pi", "pred", "print", "product", "properFraction",
+      "putChar", "putStr", "putStrLn", "quot", "quotRem", "read", "readFile",
+      "readIO", "readList", "readLn", "readParen", "reads", "readsPrec",
+      "realToFrac", "recip", "rem", "repeat", "replicate", "return", "reverse",
+      "round", "scaleFloat", "scanl", "scanl1", "scanr", "scanr1", "seq",
+      "sequence", "sequence_", "show", "showChar", "showList", "showParen",
+      "showString", "shows", "showsPrec", "significand", "signum", "sin",
+      "sinh", "snd", "span", "splitAt", "sqrt", "subtract", "succ", "sum",
+      "tail", "take", "takeWhile", "tan", "tanh", "toEnum", "toInteger",
+      "toRational", "truncate", "uncurry", "undefined", "unlines", "until",
+      "unwords", "unzip", "unzip3", "userError", "words", "writeFile", "zip",
+      "zip3", "zipWith", "zipWith3");
+      
+    return wkw;
+  })();
+    
+  
+  
+  return {
+    startState: function ()  { return { f: normal }; },
+    copyState:  function (s) { return { f: s.f }; },
+    
+    token: function(stream, state) {
+      var t = state.f(stream, function(s) { state.f = s; });
+      var w = stream.current();
+      return (w in wellKnownWords) ? wellKnownWords[w] : t;
+    }
+  };
+
+});
+
+CodeMirror.defineMIME("text/x-haskell", "haskell");
--- a/simpla/design/js/codemirror/mode/haskell/index.html
+++ b/simpla/design/js/codemirror/mode/haskell/index.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html>
+  <head>
+    <title>CodeMirror 2: Haskell mode</title>
+    <link rel="stylesheet" href="../../lib/codemirror.css">
+    <script src="../../lib/codemirror.js"></script>
+    <script src="haskell.js"></script>
+    <link rel="stylesheet" href="haskell.css">
+    <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
+    <link rel="stylesheet" href="../../css/docs.css">
+  </head>
+  <body>
+    <h1>CodeMirror 2: Haskell mode</h1>
+
+<form><textarea id="code" name="code">
+module UniquePerms (
+    uniquePerms
+    )
+where
+
+-- | Find all unique permutations of a list where there might be duplicates.
+uniquePerms :: (Eq a) => [a] -> [[a]]
+uniquePerms = permBag . makeBag
+
+-- | An unordered collection where duplicate values are allowed,
+-- but represented with a single value and a count.
+type Bag a = [(a, Int)]
+
+makeBag :: (Eq a) => [a] -> Bag a
+makeBag [] = []
+makeBag (a:as) = mix a $ makeBag as
+  where
+    mix a []                        = [(a,1)]
+    mix a (bn@(b,n):bs) | a == b    = (b,n+1):bs
+                        | otherwise = bn : mix a bs
+
+permBag :: Bag a -> [[a]]
+permBag [] = [[]]
+permBag bs = concatMap (\(f,cs) -> map (f:) $ permBag cs) . oneOfEach $ bs
+  where
+    oneOfEach [] = []
+    oneOfEach (an@(a,n):bs) =
+        let bs' = if n == 1 then bs else (a,n-1):bs
+        in (a,bs') : mapSnd (an:) (oneOfEach bs)
+    
+    apSnd f (a,b) = (a, f b)
+    mapSnd = map . apSnd
+</textarea></form>
+
+    <script>
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+        lineNumbers: true,
+        matchBrackets: true
+      });
+    </script>
+
+    <p><strong>MIME types defined:</strong> <code>text/x-haskell</code>.</p>
+  </body>
+</html>
--- a/simpla/design/js/codemirror/mode/htmlmixed/htmlmixed.js
+++ b/simpla/design/js/codemirror/mode/htmlmixed/htmlmixed.js
@@ -0,0 +1,66 @@
+CodeMirror.defineMode("htmlmixed", function(config, parserConfig) {
+  var htmlMode = CodeMirror.getMode(config, {name: "xml", htmlMode: true});
+  var jsMode = CodeMirror.getMode(config, "javascript");
+  var cssMode = CodeMirror.getMode(config, "css");
+
+  function html(stream, state) {
+    var style = htmlMode.token(stream, state.htmlState);
+    if (style == "xml-tag" && stream.current() == ">" && state.htmlState.context) {
+      if (/^script$/i.test(state.htmlState.context.tagName)) {
+        state.token = javascript;
+        state.localState = jsMode.startState(htmlMode.indent(state.htmlState, ""));
+      }
+      else if (/^style$/i.test(state.htmlState.context.tagName)) {
+        state.token = css;
+        state.localState = cssMode.startState(htmlMode.indent(state.htmlState, ""));
+      }
+    }
+    return style;
+  }
+  function javascript(stream, state) {
+    if (stream.match(/^<\/\s*script\s*>/i, false)) {
+      state.token = html;
+      state.curState = null;
+      return html(stream, state);
+    }
+    return jsMode.token(stream, state.localState);
+  }
+  function css(stream, state) {
+    if (stream.match(/^<\/\s*style\s*>/i, false)) {
+      state.token = html;
+      state.localState = null;
+      return html(stream, state);
+    }
+    return cssMode.token(stream, state.localState);
+  }
+
+  return {
+    startState: function() {
+      var state = htmlMode.startState();
+      return {token: html, localState: null, htmlState: state};
+    },
+
+    copyState: function(state) {
+      if (state.localState)
+        var local = CodeMirror.copyState(state.token == css ? cssMode : jsMode, state.localState);
+      return {token: state.token, localState: local, htmlState: CodeMirror.copyState(htmlMode, state.htmlState)};
+    },
+
+    token: function(stream, state) {
+      return state.token(stream, state);
+    },
+
+    indent: function(state, textAfter) {
+      if (state.token == html || /^\s*<\//.test(textAfter))
+        return htmlMode.indent(state.htmlState, textAfter);
+      else if (state.token == javascript)
+        return jsMode.indent(state.localState, textAfter);
+      else
+        return cssMode.indent(state.localState, textAfter);
+    },
+
+    electricChars: "/{}:"
+  }
+});
+
+CodeMirror.defineMIME("text/html", "htmlmixed");
--- a/simpla/design/js/codemirror/mode/htmlmixed/index.html
+++ b/simpla/design/js/codemirror/mode/htmlmixed/index.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html>
+  <head>
+    <title>CodeMirror 2: HTML mixed mode</title>
+    <link rel="stylesheet" href="../../lib/codemirror.css">
+    <script src="../../lib/codemirror.js"></script>
+    <script src="../xml/xml.js"></script>
+    <link rel="stylesheet" href="../xml/xml.css">
+    <script src="../javascript/javascript.js"></script>
+    <link rel="stylesheet" href="../javascript/javascript.css">
+    <script src="../css/css.js"></script>
+    <link rel="stylesheet" href="../css/css.css">
+    <script src="htmlmixed.js"></script>
+    <link rel="stylesheet" href="../../css/docs.css">
+    <style>.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
+  </head>
+  <body>
+    <h1>CodeMirror 2: HTML mixed mode</h1>
+    <form><textarea id="code" name="code">
+<html style="color: green">
+  <!-- this is a comment -->
+  <head>
+    <title>Mixed HTML Example</title>
+    <style type="text/css">
+      h1 {font-family: comic sans; color: #f0f;}
+      div {background: yellow !important;}
+      body {
+        max-width: 50em;
+        margin: 1em 2em 1em 5em;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Mixed HTML Example</h1>
+    <script>
+      function jsFunc(arg1, arg2) {
+        if (arg1 && arg2) document.body.innerHTML = "achoo";
+      }
+    </script>
+  </body>
+</html>
+</textarea></form>
+    <script>
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "text/html", tabMode: "indent"});
+    </script>
+
+    <p>The HTML mixed mode depends on the XML, JavaScript, and CSS modes.</p>
+
+    <p><strong>MIME types defined:</strong> <code>text/html</code>
+    (redefined, only takes effect if you load this parser after the
+    XML parser).</p>
+
+  </body>
+</html>
--- a/simpla/design/js/codemirror/mode/javascript/index.html
+++ b/simpla/design/js/codemirror/mode/javascript/index.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html>
+  <head>
+    <title>CodeMirror 2: JavaScript mode</title>
+    <link rel="stylesheet" href="../../lib/codemirror.css">
+    <script src="../../lib/codemirror.js"></script>
+    <script src="javascript.js"></script>
+    <link rel="stylesheet" href="javascript.css">
+    <link rel="stylesheet" href="../../css/docs.css">
+    <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
+  </head>
+  <body>
+    <h1>CodeMirror 2: JavaScript mode</h1>
+
+<div><textarea id="code" name="code">
+// Demo code (the actual new parser character stream implementation)
+
+function StringStream(string) {
+  this.pos = 0;
+  this.string = string;
+}
+
+StringStream.prototype = {
+  done: function() {return this.pos >= this.string.length;},
+  peek: function() {return this.string.charAt(this.pos);},
+  next: function() {
+    if (this.pos &lt; this.string.length)
+      return this.string.charAt(this.pos++);
+  },
+  eat: function(match) {
+    var ch = this.string.charAt(this.pos);
+    if (typeof match == "string") var ok = ch == match;
+    else var ok = ch &amp;&amp; match.test ? match.test(ch) : match(ch);
+    if (ok) {this.pos++; return ch;}
+  },
+  eatWhile: function(match) {
+    var start = this.pos;
+    while (this.eat(match));
+    if (this.pos > start) return this.string.slice(start, this.pos);
+  },
+  backUp: function(n) {this.pos -= n;},
+  column: function() {return this.pos;},
+  eatSpace: function() {
+    var start = this.pos;
+    while (/\s/.test(this.string.charAt(this.pos))) this.pos++;
+    return this.pos - start;
+  },
+  match: function(pattern, consume, caseInsensitive) {
+    if (typeof pattern == "string") {
+      function cased(str) {return caseInsensitive ? str.toLowerCase() : str;}
+      if (cased(this.string).indexOf(cased(pattern), this.pos) == this.pos) {
+        if (consume !== false) this.pos += str.length;
+        return true;
+      }
+    }
+    else {
+      var match = this.string.slice(this.pos).match(pattern);
+      if (match &amp;&amp; consume !== false) this.pos += match[0].length;
+      return match;
+    }
+  }
+};
+</textarea></div>
+
+    <script>
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+        lineNumbers: true,
+        matchBrackets: true
+      });
+    </script>
+
+    <p>JavaScript mode supports a single configuration
+    option, <code>json</code>, which will set the mode to expect JSON
+    data rather than a JavaScript program.</p>
+
+    <p><strong>MIME types defined:</strong> <code>text/javascript</code>, <code>application/json</code>.</p>
+  </body>
+</html>
--- a/simpla/design/js/codemirror/mode/javascript/javascript.css
+++ b/simpla/design/js/codemirror/mode/javascript/javascript.css
@@ -0,0 +1,6 @@
+span.js-keyword {color: #90b;}
+span.js-atom {color: #291;}
+span.js-variabledef {color: #00f;}
+span.js-localvariable {color: #049;}
+span.js-comment {color: #a70;}
+span.js-string {color: #a22;}
--- a/simpla/design/js/codemirror/mode/javascript/javascript.js
+++ b/simpla/design/js/codemirror/mode/javascript/javascript.js
@@ -0,0 +1,348 @@
+CodeMirror.defineMode("javascript", function(config, parserConfig) {
+  var indentUnit = config.indentUnit;
+  var jsonMode = parserConfig.json;
+
+  // Tokenizer
+
+  var keywords = function(){
+    function kw(type) {return {type: type, style: "js-keyword"};}
+    var A = kw("keyword a"), B = kw("keyword b"), C = kw("keyword c");
+    var operator = kw("operator"), atom = {type: "atom", style: "js-atom"};
+    return {
+      "if": A, "while": A, "with": A, "else": B, "do": B, "try": B, "finally": B,
+      "return": C, "break": C, "continue": C, "new": C, "delete": C, "throw": C,
+      "var": kw("var"), "function": kw("function"), "catch": kw("catch"),
+      "for": kw("for"), "switch": kw("switch"), "case": kw("case"), "default": kw("default"),
+      "in": operator, "typeof": operator, "instanceof": operator,
+      "true": atom, "false": atom, "null": atom, "undefined": atom, "NaN": atom, "Infinity": atom
+    };
+  }();
+
+  var isOperatorChar = /[+\-*&%=<>!?|]/;
+
+  function chain(stream, state, f) {
+    state.tokenize = f;
+    return f(stream, state);
+  }
+
+  function nextUntilUnescaped(stream, end) {
+    var escaped = false, next;
+    while ((next = stream.next()) != null) {
+      if (next == end && !escaped)
+        return false;
+      escaped = !escaped && next == "\\";
+    }
+    return escaped;
+  }
+
+  // Used as scratch variables to communicate multiple values without
+  // consing up tons of objects.
+  var type, content;
+  function ret(tp, style, cont) {
+    type = tp; content = cont;
+    return style;
+  }
+
+  function jsTokenBase(stream, state) {
+    var ch = stream.next();
+    if (ch == '"' || ch == "'")
+      return chain(stream, state, jsTokenString(ch));
+    else if (/[\[\]{}\(\),;\:\.]/.test(ch))
+      return ret(ch);
+    else if (ch == "0" && stream.eat(/x/i)) {
+      stream.eatWhile(/[\da-f]/i);
+      return ret("number", "js-atom");
+    }      
+    else if (/\d/.test(ch)) {
+      stream.match(/^\d*(?:\.\d*)?(?:e[+\-]?\d+)?/);
+      return ret("number", "js-atom");
+    }
+    else if (ch == "/") {
+      if (stream.eat("*")) {
+        return chain(stream, state, jsTokenComment);
+      }
+      else if (stream.eat("/")) {
+        stream.skipToEnd();
+        return ret("comment", "js-comment");
+      }
+      else if (state.reAllowed) {
+        nextUntilUnescaped(stream, "/");
+        stream.eatWhile(/[gimy]/); // 'y' is "sticky" option in Mozilla
+        return ret("regexp", "js-string");
+      }
+      else {
+        stream.eatWhile(isOperatorChar);
+        return ret("operator", null, stream.current());
+      }
+    }
+    else if (isOperatorChar.test(ch)) {
+      stream.eatWhile(isOperatorChar);
+      return ret("operator", null, stream.current());
+    }
+    else {
+      stream.eatWhile(/[\w\$_]/);
+      var word = stream.current(), known = keywords.propertyIsEnumerable(word) && keywords[word];
+      return known ? ret(known.type, known.style, word) :
+                     ret("variable", "js-variable", word);
+    }
+  }
+
+  function jsTokenString(quote) {
+    return function(stream, state) {
+      if (!nextUntilUnescaped(stream, quote))
+        state.tokenize = jsTokenBase;
+      return ret("string", "js-string");
+    };
+  }
+
+  function jsTokenComment(stream, state) {
+    var maybeEnd = false, ch;
+    while (ch = stream.next()) {
+      if (ch == "/" && maybeEnd) {
+        state.tokenize = jsTokenBase;
+        break;
+      }
+      maybeEnd = (ch == "*");
+    }
+    return ret("comment", "js-comment");
+  }
+
+  // Parser
+
+  var atomicTypes = {"atom": true, "number": true, "variable": true, "string": true, "regexp": true};
+
+  function JSLexical(indented, column, type, align, prev, info) {
+    this.indented = indented;
+    this.column = column;
+    this.type = type;
+    this.prev = prev;
+    this.info = info;
+    if (align != null) this.align = align;
+  }
+
+  function inScope(state, varname) {
+    for (var v = state.localVars; v; v = v.next)
+      if (v.name == varname) return true;
+  }
+
+  function parseJS(state, style, type, content, stream) {
+    var cc = state.cc;
+    // Communicate our context to the combinators.
+    // (Less wasteful than consing up a hundred closures on every call.)
+    cx.state = state; cx.stream = stream; cx.marked = null, cx.cc = cc;
+  
+    if (!state.lexical.hasOwnProperty("align"))
+      state.lexical.align = true;
+
+    while(true) {
+      var combinator = cc.length ? cc.pop() : jsonMode ? expression : statement;
+      if (combinator(type, content)) {
+        while(cc.length && cc[cc.length - 1].lex)
+          cc.pop()();
+        if (cx.marked) return cx.marked;
+        if (type == "variable" && inScope(state, content)) return "js-localvariable";
+        return style;
+      }
+    }
+  }
+
+  // Combinator utils
+
+  var cx = {state: null, column: null, marked: null, cc: null};
+  function pass() {
+    for (var i = arguments.length - 1; i >= 0; i--) cx.cc.push(arguments[i]);
+  }
+  function cont() {
+    pass.apply(null, arguments);
+    return true;
+  }
+  function register(varname) {
+    var state = cx.state;
+    if (state.context) {
+      cx.marked = "js-variabledef";
+      for (var v = state.localVars; v; v = v.next)
+        if (v.name == varname) return;
+      state.localVars = {name: varname, next: state.localVars};
+    }
+  }
+
+  // Combinators
+
+  var defaultVars = {name: "this", next: {name: "arguments"}};
+  function pushcontext() {
+    if (!cx.state.context) cx.state.localVars = defaultVars;
+    cx.state.context = {prev: cx.state.context, vars: cx.state.localVars};
+  }
+  function popcontext() {
+    cx.state.localVars = cx.state.context.vars;
+    cx.state.context = cx.state.context.prev;
+  }
+  function pushlex(type, info) {
+    var result = function() {
+      var state = cx.state;
+      state.lexical = new JSLexical(state.indented, cx.stream.column(), type, null, state.lexical, info)
+    };
+    result.lex = true;
+    return result;
+  }
+  function poplex() {
+    var state = cx.state;
+    if (state.lexical.prev) {
+      if (state.lexical.type == ")")
+        state.indented = state.lexical.indented;
+      state.lexical = state.lexical.prev;
+    }
+  }
+  poplex.lex = true;
+
+  function expect(wanted) {
+    return function expecting(type) {
+      if (type == wanted) return cont();
+      else if (wanted == ";") return pass();
+      else return cont(arguments.callee);
+    };
+  }
+
+  function statement(type) {
+    if (type == "var") return cont(pushlex("vardef"), vardef1, expect(";"), poplex);
+    if (type == "keyword a") return cont(pushlex("form"), expression, statement, poplex);
+    if (type == "keyword b") return cont(pushlex("form"), statement, poplex);
+    if (type == "{") return cont(pushlex("}"), block, poplex);
+    if (type == ";") return cont();
+    if (type == "function") return cont(functiondef);
+    if (type == "for") return cont(pushlex("form"), expect("("), pushlex(")"), forspec1, expect(")"),
+                                      poplex, statement, poplex);
+    if (type == "variable") return cont(pushlex("stat"), maybelabel);
+    if (type == "switch") return cont(pushlex("form"), expression, pushlex("}", "switch"), expect("{"),
+                                         block, poplex, poplex);
+    if (type == "case") return cont(expression, expect(":"));
+    if (type == "default") return cont(expect(":"));
+    if (type == "catch") return cont(pushlex("form"), pushcontext, expect("("), funarg, expect(")"),
+                                        statement, poplex, popcontext);
+    return pass(pushlex("stat"), expression, expect(";"), poplex);
+  }
+  function expression(type) {
+    if (atomicTypes.hasOwnProperty(type)) return cont(maybeoperator);
+    if (type == "function") return cont(functiondef);
+    if (type == "keyword c") return cont(expression);
+    if (type == "(") return cont(pushlex(")"), expression, expect(")"), poplex, maybeoperator);
+    if (type == "operator") return cont(expression);
+    if (type == "[") return cont(pushlex("]"), commasep(expression, "]"), poplex, maybeoperator);
+    if (type == "{") return cont(pushlex("}"), commasep(objprop, "}"), poplex, maybeoperator);
+    return cont();
+  }
+  function maybeoperator(type, value) {
+    if (type == "operator" && /\+\+|--/.test(value)) return cont(maybeoperator);
+    if (type == "operator") return cont(expression);
+    if (type == ";") return;
+    if (type == "(") return cont(pushlex(")"), commasep(expression, ")"), poplex, maybeoperator);
+    if (type == ".") return cont(property, maybeoperator);
+    if (type == "[") return cont(pushlex("]"), expression, expect("]"), poplex, maybeoperator);
+  }
+  function maybelabel(type) {
+    if (type == ":") return cont(poplex, statement);
+    return pass(maybeoperator, expect(";"), poplex);
+  }
+  function property(type) {
+    if (type == "variable") {cx.marked = "js-property"; return cont();}
+  }
+  function objprop(type) {
+    if (type == "variable") cx.marked = "js-property";
+    if (atomicTypes.hasOwnProperty(type)) return cont(expect(":"), expression);
+  }
+  function commasep(what, end) {
+    function proceed(type) {
+      if (type == ",") return cont(what, proceed);
+      if (type == end) return cont();
+      return cont(expect(end));
+    }
+    return function commaSeparated(type) {
+      if (type == end) return cont();
+      else return pass(what, proceed);
+    };
+  }
+  function block(type) {
+    if (type == "}") return cont();
+    return pass(statement, block);
+  }
+  function vardef1(type, value) {
+    if (type == "variable"){register(value); return cont(vardef2);}
+    return cont();
+  }
+  function vardef2(type, value) {
+    if (value == "=") return cont(expression, vardef2);
+    if (type == ",") return cont(vardef1);
+  }
+  function forspec1(type) {
+    if (type == "var") return cont(vardef1, forspec2);
+    if (type == ";") return pass(forspec2);
+    if (type == "variable") return cont(formaybein);
+    return pass(forspec2);
+  }
+  function formaybein(type, value) {
+    if (value == "in") return cont(expression);
+    return cont(maybeoperator, forspec2);
+  }
+  function forspec2(type, value) {
+    if (type == ";") return cont(forspec3);
+    if (value == "in") return cont(expression);
+    return cont(expression, expect(";"), forspec3);
+  }
+  function forspec3(type) {
+    if (type != ")") cont(expression);
+  }
+  function functiondef(type, value) {
+    if (type == "variable") {register(value); return cont(functiondef);}
+    if (type == "(") return cont(pushlex(")"), pushcontext, commasep(funarg, ")"), poplex, statement, popcontext);
+  }
+  function funarg(type, value) {
+    if (type == "variable") {register(value); return cont();}
+  }
+
+  // Interface
+
+  return {
+    startState: function(basecolumn) {
+      return {
+        tokenize: jsTokenBase,
+        reAllowed: true,
+        cc: [],
+        lexical: new JSLexical((basecolumn || 0) - indentUnit, 0, "block", false),
+        localVars: null,
+        context: null,
+        indented: 0
+      };
+    },
+
+    token: function(stream, state) {
+      if (stream.sol()) {
+        if (!state.lexical.hasOwnProperty("align"))
+          state.lexical.align = false;
+        state.indented = stream.indentation();
+      }
+      if (stream.eatSpace()) return null;
+      var style = state.tokenize(stream, state);
+      if (type == "comment") return style;
+      state.reAllowed = type == "operator" || type == "keyword c" || type.match(/^[\[{}\(,;:]$/);
+      return parseJS(state, style, type, content, stream);
+    },
+
+    indent: function(state, textAfter) {
+      if (state.tokenize != jsTokenBase) return 0;
+      var firstChar = textAfter && textAfter.charAt(0), lexical = state.lexical,
+          type = lexical.type, closing = firstChar == type;
+      if (type == "vardef") return lexical.indented + 4;
+      else if (type == "form" && firstChar == "{") return lexical.indented;
+      else if (type == "stat" || type == "form") return lexical.indented + indentUnit;
+      else if (lexical.info == "switch" && !closing)
+        return lexical.indented + (/^(?:case|default)\b/.test(textAfter) ? indentUnit : 2 * indentUnit);
+      else if (lexical.align) return lexical.column + (closing ? 0 : 1);
+      else return lexical.indented + (closing ? 0 : indentUnit);
+    },
+
+    electricChars: ":{}"
+  };
+});
+
+CodeMirror.defineMIME("text/javascript", "javascript");
+CodeMirror.defineMIME("application/json", {name: "javascript", json: true});
--- a/simpla/design/js/codemirror/mode/php/index.html
+++ b/simpla/design/js/codemirror/mode/php/index.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html>
+  <head>
+    <title>CodeMirror 2: PHP mode</title>
+    <link rel="stylesheet" href="../../lib/codemirror.css">
+    <script src="../../lib/codemirror.js"></script>
+    <script src="../xml/xml.js"></script>
+    <link rel="stylesheet" href="../xml/xml.css">
+    <script src="../javascript/javascript.js"></script>
+    <link rel="stylesheet" href="../javascript/javascript.css">
+    <script src="../css/css.js"></script>
+    <link rel="stylesheet" href="../css/css.css">
+    <script src="../clike/clike.js"></script>
+    <link rel="stylesheet" href="../clike/clike.css">
+    <script src="php.js"></script>
+    <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
+    <link rel="stylesheet" href="../../css/docs.css">
+  </head>
+  <body>
+    <h1>CodeMirror 2: PHP mode</h1>
+
+<form><textarea id="code" name="code">
+<?php
+function hello($who) {
+	return "Hello " . $who;
+}
+?>
+<p>The program says <?= hello("World") ?>.</p>
+<script>
+	alert("And here is some JS code"); // also colored
+</script>
+</textarea></form>
+
+    <script>
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+        lineNumbers: true,
+        matchBrackets: true,
+        mode: "application/x-httpd-php",
+        indentUnit: 8,
+        indentWithTabs: true,
+        enterMode: "keep",
+        tabMode: "shift"
+      });
+    </script>
+
+    <p>Simple HTML/PHP mode based on
+    the <a href="../clike/">C-like</a> mode. Depends on XML,
+    JavaScript, CSS, and C-like modes.</p>
+
+    <p><strong>MIME types defined:</strong> <code>application/x-httpd-php</code>.</p>
+  </body>
+</html>
--- a/simpla/design/js/codemirror/mode/php/php.js
+++ b/simpla/design/js/codemirror/mode/php/php.js
@@ -0,0 +1,83 @@
+(function() {
+  function keywords(str) {
+    var obj = {}, words = str.split(" ");
+    for (var i = 0; i < words.length; ++i) obj[words[i]] = true;
+    return obj;
+  }
+  var phpKeywords =
+    keywords("abstract and array as break case catch cfunction class clone const continue declare " +
+             "default do else elseif enddeclare endfor endforeach endif endswitch endwhile extends " +
+             "final for foreach function global goto if implements interface instanceof namespace " +
+             "new or private protected public static switch throw try use var while xor");
+
+  CodeMirror.defineMode("php", function(config, parserConfig) {
+    var htmlMode = CodeMirror.getMode(config, "text/html");
+    var jsMode = CodeMirror.getMode(config, "text/javascript");
+    var cssMode = CodeMirror.getMode(config, "text/css");
+    var phpMode = CodeMirror.getMode(config, {name: "clike", keywords: phpKeywords, multiLineStrings: true, $vars: true});
+
+    function dispatch(stream, state) { // TODO open PHP inside text/css
+      if (state.curMode == htmlMode) {
+        var style = htmlMode.token(stream, state.curState);
+        if (style == "xml-processing" && /^<\?/.test(stream.current())) {
+          state.curMode = phpMode;
+          state.curState = state.php;
+          state.curClose = /^\?>/;
+        }
+        else if (style == "xml-tag" && stream.current() == ">" && state.curState.context) {
+          if (/^script$/i.test(state.curState.context.tagName)) {
+            state.curMode = jsMode;
+            state.curState = jsMode.startState(htmlMode.indent(state.curState, ""));
+            state.curClose = /^<\/\s*script\s*>/i;
+          }
+          else if (/^style$/i.test(state.curState.context.tagName)) {
+            state.curMode = cssMode;
+            state.curState = cssMode.startState(htmlMode.indent(state.curState, ""));
+            state.curClose =  /^<\/\s*style\s*>/i;
+          }
+        }
+        return style;
+      }
+      else if (stream.match(state.curClose, false)) {
+        state.curMode = htmlMode;
+        state.curState = state.html;
+        state.curClose = null;
+        return dispatch(stream, state);
+      }
+      else return state.curMode.token(stream, state.curState);
+    }
+
+    return {
+      startState: function() {
+        var html = htmlMode.startState();
+        return {html: html,
+                php: phpMode.startState(),
+                curMode: htmlMode,
+                curState: html,
+                curClose: null}
+      },
+
+      copyState: function(state) {
+        var html = state.html, htmlNew = CodeMirror.copyState(htmlMode, html),
+            php = state.php, phpNew = CodeMirror.copyState(phpMode, php), cur;
+        if (state.curState == html) cur = htmlNew;
+        else if (state.curState == php) cur = phpNew;
+        else cur = CodeMirror.copyState(state.curMode, state.curState);
+        return {html: htmlNew, php: phpNew, curMode: state.curMode, curState: cur, curClose: state.curClose};
+      },
+
+      token: dispatch,
+
+      indent: function(state, textAfter) {
+        if ((state.curMode != phpMode && /^\s*<\//.test(textAfter)) ||
+            (state.curMode == phpMode && /^\?>/.test(textAfter)))
+          return htmlMode.indent(state.html, textAfter);
+        return state.curMode.indent(state.curState, textAfter);
+      },
+
+      electricChars: "/{}:"
+    }
+  });
+})();
+
+CodeMirror.defineMIME("application/x-httpd-php", "php");
--- a/simpla/design/js/codemirror/mode/stex/index.html
+++ b/simpla/design/js/codemirror/mode/stex/index.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html>
+  <head>
+    <title>CodeMirror 2: sTeX mode</title>
+    <link rel="stylesheet" href="../../lib/codemirror.css">
+    <script src="../../lib/codemirror.js"></script>
+    <script src="stex.js"></script>
+    <link rel="stylesheet" href="stex.css">
+    <style>.CodeMirror {background: #f8f8f8;}</style>
+    <link rel="stylesheet" href="../../css/docs.css">
+  </head>
+  <body>
+    <h1>CodeMirror 2: sTeX mode</h1>
+     <form><textarea id="code" name="code">
+\begin{module}[id=bbt-size]
+\importmodule[balanced-binary-trees]{balanced-binary-trees}
+\importmodule[\KWARCslides{dmath/en/cardinality}]{cardinality}
+
+\begin{frame}
+  \frametitle{Size Lemma for Balanced Trees}
+  \begin{itemize}
+  \item
+    \begin{assertion}[id=size-lemma,type=lemma] 
+    Let $G=\tup{V,E}$ be a \termref[cd=binary-trees]{balanced binary tree} 
+    of \termref[cd=graph-depth,name=vertex-depth]{depth}$n>i$, then the set
+     $\defeq{\livar{V}i}{\setst{\inset{v}{V}}{\gdepth{v} = i}}$ of
+    \termref[cd=graphs-intro,name=node]{nodes} at 
+    \termref[cd=graph-depth,name=vertex-depth]{depth} $i$ has
+    \termref[cd=cardinality,name=cardinality]{cardinality} $\power2i$.
+   \end{assertion}
+  \item
+    \begin{sproof}[id=size-lemma-pf,proofend=,for=size-lemma]{via induction over the depth $i$.}
+      \begin{spfcases}{We have to consider two cases}
+        \begin{spfcase}{$i=0$}
+          \begin{spfstep}[display=flow]
+            then $\livar{V}i=\set{\livar{v}r}$, where $\livar{v}r$ is the root, so
+            $\eq{\card{\livar{V}0},\card{\set{\livar{v}r}},1,\power20}$.
+          \end{spfstep}
+        \end{spfcase}
+        \begin{spfcase}{$i>0$}
+          \begin{spfstep}[display=flow]
+           then $\livar{V}{i-1}$ contains $\power2{i-1}$ vertexes 
+           \begin{justification}[method=byIH](IH)\end{justification}
+          \end{spfstep}
+          \begin{spfstep}
+           By the \begin{justification}[method=byDef]definition of a binary
+              tree\end{justification}, each $\inset{v}{\livar{V}{i-1}}$ is a leaf or has
+            two children that are at depth $i$.
+          \end{spfstep}
+          \begin{spfstep}
+           As $G$ is \termref[cd=balanced-binary-trees,name=balanced-binary-tree]{balanced} and $\gdepth{G}=n>i$, $\livar{V}{i-1}$ cannot contain
+            leaves.
+          \end{spfstep}
+          \begin{spfstep}[type=conclusion]
+           Thus $\eq{\card{\livar{V}i},{\atimes[cdot]{2,\card{\livar{V}{i-1}}}},{\atimes[cdot]{2,\power2{i-1}}},\power2i}$.
+          \end{spfstep}
+        \end{spfcase}
+      \end{spfcases}
+    \end{sproof}
+  \item 
+    \begin{assertion}[id=fbbt,type=corollary]	
+      A fully balanced tree of depth $d$ has $\power2{d+1}-1$ nodes.
+    \end{assertion}
+  \item
+      \begin{sproof}[for=fbbt,id=fbbt-pf]{}
+        \begin{spfstep}
+          Let $\defeq{G}{\tup{V,E}}$ be a fully balanced tree
+        \end{spfstep}
+        \begin{spfstep}
+          Then $\card{V}=\Sumfromto{i}1d{\power2i}= \power2{d+1}-1$.
+        \end{spfstep}
+      \end{sproof}
+    \end{itemize}
+  \end{frame}
+\begin{note}
+  \begin{omtext}[type=conclusion,for=binary-tree]
+    This shows that balanced binary trees grow in breadth very quickly, a consequence of
+    this is that they are very shallow (and this compute very fast), which is the essence of
+    the next result.
+  \end{omtext}
+\end{note}
+\end{module}
+
+%%% Local Variables: 
+%%% mode: LaTeX
+%%% TeX-master: "all"
+%%% End: \end{document}
+</textarea></form>
+    <script>
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {});
+    </script>
+
+    <p><strong>MIME types defined:</strong> <code>text/stex</code>.</p>
+
+  </body>
+</html>
--- a/simpla/design/js/codemirror/mode/stex/stex.css
+++ b/simpla/design/js/codemirror/mode/stex/stex.css
@@ -0,0 +1,20 @@
+span.css-at {color: #708;}
+span.css-unit {color: #281;}
+span.css-value {color: #708;}
+span.css-identifier {color: black;}
+span.css-selector {color: #11B;}
+span.css-important {color: #00F;}
+span.css-colorcode {color: #299;}
+span.css-comment {color: #A70;}
+span.css-string {color: #A22;}
+
+span.stex-unit { color: #281; }
+span.stex-identifier { color: black; }
+span.stex-slash { color: #FAA; }
+span.stex-command { color: #00F; }
+span.stex-comment { color: #A70; }
+span.stex-import { color: #00F; }
+span.stex-filepath { color: #852626; }
+span.stex-module { color: #852626; }
+span.stex-error { text-decoration: underline; color: red; }
+span.stex-string { color: #A22; }
--- a/simpla/design/js/codemirror/mode/stex/stex.js
+++ b/simpla/design/js/codemirror/mode/stex/stex.js
@@ -0,0 +1,167 @@
+/*
+ * Author: Constantin Jucovschi (c.jucovschi@jacobs-university.de)
+ * Licence: MIT
+ */
+
+CodeMirror.defineMode("stex", function(cmCfg, modeCfg) 
+{    
+    function pushCommand(state, command) {
+	state.cmdState.push(command);
+    }
+
+    function peekCommand(state) { 
+	if (state.cmdState.length>0)
+	    return state.cmdState[state.cmdState.length-1];
+	else
+	    return null;
+    }
+
+    function popCommand(state) {
+	if (state.cmdState.length>0) {
+	    var plug = state.cmdState.pop();
+	    plug.closeBracket();
+	}	    
+    }
+
+    function applyMostPowerful(state) {
+      context = state.cmdState;
+      for (var i = context.length - 1; i >= 0; i--) {
+	  var plug = context[i];
+	  if (plug.name=="DEFAULT")
+	      continue;
+	  return plug.styleIdentifier();
+      }
+      return "stex-identifier";
+    }
+
+    function addPluginPattern(pluginName, cmdStyle, brackets, styles) {
+	return function () {
+	    this.name=pluginName;
+	    this.bracketNo = 0;
+	    this.style=cmdStyle;
+	    this.styles = styles;
+	    this.brackets = brackets;
+
+	    this.styleIdentifier = function(content) {
+		if (this.bracketNo<=this.styles.length)
+		    return this.styles[this.bracketNo-1];
+		else
+		    return null;
+	    };
+	    this.openBracket = function(content) {
+		this.bracketNo++;
+		return "stex-bracket";
+	    };
+	    this.closeBracket = function(content) {
+	    };
+	}
+    }
+
+    var plugins = new Array();
+   
+    plugins["importmodule"] = addPluginPattern("importmodule", "stex-command", "{[", ["stex-filepath", "stex-module"]);
+    plugins["documentclass"] = addPluginPattern("documentclass", "stex-command", "{[", ["", "stex-unit"]);
+    plugins["usepackage"] = addPluginPattern("documentclass", "stex-command", "[", ["stex-unit"]);
+    plugins["begin"] = addPluginPattern("documentclass", "stex-command", "[", ["stex-unit"]);
+    plugins["end"] = addPluginPattern("documentclass", "stex-command", "[", ["stex-unit"]);
+
+    plugins["DEFAULT"] = function () {
+	this.name="DEFAULT";
+	this.style="stex-command";
+
+	this.styleIdentifier = function(content) {
+	};
+	this.openBracket = function(content) {
+	};
+	this.closeBracket = function(content) {
+	};
+    };
+
+    function setState(state, f) {
+	state.f = f;
+    }
+
+    function normal(source, state) {
+	if (source.match(/^\\[a-z]+/)) {
+	    cmdName = source.current();
+	    cmdName = cmdName.substr(1, cmdName.length-1);
+	    var plug = plugins[cmdName];
+	    if (typeof(plug) == 'undefined') {
+		plug = plugins["DEFAULT"];
+	    }
+	    plug = new plug();
+	    pushCommand(state, plug);
+	    setState(state, beginParams);
+	    return plug.style;
+	}
+
+	var ch = source.next();
+	if (ch == "%") {
+	    setState(state, inCComment);
+	    return "stex-comment";
+	} 
+	else if (ch=='}' || ch==']') {
+	    plug = peekCommand(state);
+	    if (plug) {
+		plug.closeBracket(ch);
+		setState(state, beginParams);
+	    } else
+		return "stex-error";
+	    return "stex-bracket";
+	} else if (ch=='{' || ch=='[') {
+	    plug = plugins["DEFAULT"];	    
+	    plug = new plug();
+	    pushCommand(state, plug);
+	    return "stex-bracket";	    
+	}
+	else if (/\d/.test(ch)) {
+	    source.eatWhile(/[\w.%]/);
+	    return "stex-unit";
+	}
+	else {
+	    source.eatWhile(/[\w-_]/);
+	    return applyMostPowerful(state);
+	}
+    }
+
+    function inCComment(source, state) {
+	source.skipToEnd();
+	setState(state, normal);
+	return "css-comment";
+    }
+
+    function beginParams(source, state) {
+	var ch = source.peek();
+	if (ch == '{' || ch == '[') {
+	   lastPlug = peekCommand(state);
+	   style = lastPlug.openBracket(ch);
+	   source.eat(ch);
+	   setState(state, normal);
+	   return "stex-bracket";
+	}
+	if (/[ \t\r]/.test(ch)) {
+	    source.eat(ch);
+	    return null;
+	}
+	setState(state, normal);
+	lastPlug = peekCommand(state);
+	if (lastPlug) {
+	    popCommand(state);
+	}
+        return normal(source, state);
+    }
+
+    return {
+     startState: function() { return { f:normal, cmdState:[] }; },
+	 copyState: function(s) { return { f: s.f, cmdState: s.cmdState.slice(0, s.cmdState.length) }; },
+	 
+	 token: function(stream, state) {
+	 var t = state.f(stream, state);
+	 var w = stream.current();
+	 return t;
+     }
+ };
+});
+
+
+CodeMirror.defineMIME("text/x-stex", "stex");
--- a/simpla/design/js/codemirror/mode/xml/index.html
+++ b/simpla/design/js/codemirror/mode/xml/index.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html>
+  <head>
+    <title>CodeMirror 2: XML mode</title>
+    <link rel="stylesheet" href="../../lib/codemirror.css">
+    <script src="../../lib/codemirror.js"></script>
+    <script src="xml.js"></script>
+    <link rel="stylesheet" href="xml.css">
+    <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
+    <link rel="stylesheet" href="../../css/docs.css">
+  </head>
+  <body>
+    <h1>CodeMirror 2: XML mode</h1>
+    <form><textarea id="code" name="code">
+&lt;html style="color: green"&gt;
+  &lt;!-- this is a comment --&gt;
+  &lt;head&gt;
+    &lt;title&gt;HTML Example&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    The indentation tries to be &lt;em&gt;somewhat &amp;quot;do what
+    I mean&amp;quot;&lt;/em&gt;... but might not match your style.
+  &lt;/body&gt;
+&lt;/html&gt;
+</textarea></form>
+    <script>
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: {name: "xml", htmlMode: true}});
+    </script>
+    <p>The XML mode supports two configuration parameters:</p>
+    <dl>
+      <dt><code>htmlMode (boolean)</code></dt>
+      <dd>This switches the mode to parse HTML instead of XML. This
+      means attributes do not have to be quoted, and some elements
+      (such as <code>br</code>) do not require a closing tag.</dd>
+      <dt><code>alignCDATA (boolean)</code></dt>
+      <dd>Setting this to true will force the opening tag of CDATA
+      blocks to not be indented.</dd>
+    </dl>
+
+    <p><strong>MIME types defined:</strong> <code>application/xml</code>, <code>text/html</code>.</p>
+  </body>
+</html>
--- a/simpla/design/js/codemirror/mode/xml/xml.css
+++ b/simpla/design/js/codemirror/mode/xml/xml.css
@@ -0,0 +1,7 @@
+span.xml-tag {color: #a0b;}
+span.xml-attribute {color: #281;}
+span.xml-attname {color: #00f;}
+span.xml-comment {color: #a70;}
+span.xml-cdata {color: #48a;}
+span.xml-processing {color: #999;}
+span.xml-entity {color: #a22;}
--- a/simpla/design/js/codemirror/mode/xml/xml.js
+++ b/simpla/design/js/codemirror/mode/xml/xml.js
@@ -0,0 +1,206 @@
+CodeMirror.defineMode("xml", function(config, parserConfig) {
+  var indentUnit = config.indentUnit;
+  var Kludges = parserConfig.htmlMode ? {
+    autoSelfClosers: {"br": true, "img": true, "hr": true, "link": true, "input": true,
+                      "meta": true, "col": true, "frame": true, "base": true, "area": true},
+    doNotIndent: {"pre": true, "!cdata": true},
+    allowUnquoted: true
+  } : {autoSelfClosers: {}, doNotIndent: {"!cdata": true}, allowUnquoted: false};
+  var alignCDATA = parserConfig.alignCDATA;
+
+  // Return variables for tokenizers
+  var tagName, type;
+
+  function inText(stream, state) {
+    function chain(parser) {
+      state.tokenize = parser;
+      return parser(stream, state);
+    }
+
+    var ch = stream.next();
+    if (ch == "<") {
+      if (stream.eat("!")) {
+        if (stream.eat("[")) {
+          if (stream.match("[CDATA[")) return chain(inBlock("xml-cdata", "]]>"));
+          else return null;
+        }
+        else if (stream.match("--")) return chain(inBlock("xml-comment", "-->"));
+        else if (stream.match("DOCTYPE")) {
+          stream.eatWhile(/[\w\._\-]/);
+          return chain(inBlock("xml-doctype", ">"));
+        }
+        else return null;
+      }
+      else if (stream.eat("?")) {
+        stream.eatWhile(/[\w\._\-]/);
+        state.tokenize = inBlock("xml-processing", "?>");
+        return "xml-processing";
+      }
+      else {
+        type = stream.eat("/") ? "closeTag" : "openTag";
+        stream.eatSpace();
+        tagName = "";
+        var c;
+        while ((c = stream.eat(/[^\s\u00a0=<>\"\'\/?]/))) tagName += c;
+        state.tokenize = inTag;
+        return "xml-tag";
+      }
+    }
+    else if (ch == "&") {
+      stream.eatWhile(/[^;]/);
+      stream.eat(";");
+      return "xml-entity";
+    }
+    else {
+      stream.eatWhile(/[^&<]/);
+      return null;
+    }
+  }
+
+  function inTag(stream, state) {
+    var ch = stream.next();
+    if (ch == ">" || (ch == "/" && stream.eat(">"))) {
+      state.tokenize = inText;
+      type = ch == ">" ? "endTag" : "selfcloseTag";
+      return "xml-tag";
+    }
+    else if (ch == "=") {
+      type = "equals";
+      return null;
+    }
+    else if (/[\'\"]/.test(ch)) {
+      state.tokenize = inAttribute(ch);
+      return state.tokenize(stream, state);
+    }
+    else {
+      stream.eatWhile(/[^\s\u00a0=<>\"\'\/?]/);
+      return "xml-word";
+    }
+  }
+
+  function inAttribute(quote) {
+    return function(stream, state) {
+      while (!stream.eol()) {
+        if (stream.next() == quote) {
+          state.tokenize = inTag;
+          break;
+        }
+      }
+      return "xml-attribute";
+    };
+  }
+
+  function inBlock(style, terminator) {
+    return function(stream, state) {
+      while (!stream.eol()) {
+        if (stream.match(terminator)) {
+          state.tokenize = inText;
+          break;
+        }
+        stream.next();
+      }
+      return style;
+    };
+  }
+
+  var curState, setStyle;
+  function pass() {
+    for (var i = arguments.length - 1; i >= 0; i--) curState.cc.push(arguments[i]);
+  }
+  function cont() {
+    pass.apply(null, arguments);
+    return true;
+  }
+
+  function pushContext(tagName, startOfLine) {
+    var noIndent = Kludges.doNotIndent.hasOwnProperty(tagName) || (curState.context && curState.context.noIndent);
+    curState.context = {
+      prev: curState.context,
+      tagName: tagName,
+      indent: curState.indented,
+      startOfLine: startOfLine,
+      noIndent: noIndent
+    };
+  }
+  function popContext() {
+    if (curState.context) curState.context = curState.context.prev;
+  }
+
+  function element(type) {
+    if (type == "openTag") {curState.tagName = tagName; return cont(attributes, endtag(curState.startOfLine));}
+    else if (type == "closeTag") {popContext(); return cont(endclosetag);}
+    else if (type == "xml-cdata") {
+      if (!curState.context || curState.context.name != "!cdata") pushContext("!cdata");
+      if (curState.tokenize == inText) popContext();
+      return cont();
+    }
+    else return cont();
+  }
+  function endtag(startOfLine) {
+    return function(type) {
+      if (type == "selfcloseTag" ||
+          (type == "endTag" && Kludges.autoSelfClosers.hasOwnProperty(curState.tagName.toLowerCase())))
+        return cont();
+      if (type == "endTag") {pushContext(curState.tagName, startOfLine); return cont();}
+      return cont();
+    };
+  }
+  function endclosetag(type) {
+    if (type == "endTag") return cont();
+    return pass();
+  }
+
+  function attributes(type) {
+    if (type == "xml-word") {setStyle = "xml-attname"; return cont(attributes);}
+    if (type == "equals") return cont(attvalue, attributes);
+    return pass();
+  }
+  function attvalue(type) {
+    if (type == "xml-word" && Kludges.allowUnquoted) {setStyle = "xml-attribute"; return cont();}
+    if (type == "xml-attribute") return cont();
+    return pass();
+  }
+
+  return {
+    startState: function() {
+      return {tokenize: inText, cc: [], indented: 0, startOfLine: true, tagName: null, context: null};
+    },
+
+    token: function(stream, state) {
+      if (stream.sol()) {
+        state.startOfLine = true;
+        state.indented = stream.indentation();
+      }
+      if (stream.eatSpace()) return null;
+
+      setStyle = type = tagName = null;
+      var style = state.tokenize(stream, state);
+      if ((style || type) && style != "xml-comment") {
+        curState = state;
+        while (true) {
+          var comb = state.cc.pop() || element;
+          if (comb(type || style)) break;
+        }
+      }
+      state.startOfLine = false;
+      return setStyle || style;
+    },
+
+    indent: function(state, textAfter) {
+      var context = state.context;
+      if (context && context.noIndent) return 0;
+      if (alignCDATA && /<!\[CDATA\[/.test(textAfter)) return 0;
+      if (context && /^<\//.test(textAfter))
+        context = context.prev;
+      while (context && !context.startOfLine)
+        context = context.prev;
+      if (context) return context.indent + indentUnit;
+      else return 0;
+    },
+
+    electricChars: "/"
+  };
+});
+
+CodeMirror.defineMIME("application/xml", "xml");
+CodeMirror.defineMIME("text/html", {name: "xml", htmlMode: true});