diff --git a/js/codemirror/LICENSE b/js/codemirror/LICENSE new file mode 100644 index 0000000000..3f7c0bb187 --- /dev/null +++ b/js/codemirror/LICENSE @@ -0,0 +1,19 @@ +Copyright (C) 2011 by Marijn Haverbeke + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/js/codemirror/README.md b/js/codemirror/README.md new file mode 100644 index 0000000000..624b5409b0 --- /dev/null +++ b/js/codemirror/README.md @@ -0,0 +1,6 @@ +# CodeMirror 2 + +CodeMirror 2 is a rewrite of [CodeMirror +1](http://github.com/marijnh/CodeMirror). The docs live +[here](http://codemirror.net/2/manual.html), and the project page is +[http://codemirror.net/2/](http://codemirror.net/2/). diff --git a/js/codemirror/compress.html b/js/codemirror/compress.html new file mode 100644 index 0000000000..4ffca2a555 --- /dev/null +++ b/js/codemirror/compress.html @@ -0,0 +1,83 @@ + + + + CodeMirror: Compression Helper + + + + + +

{ } CodeMirror

+ +
+/* Script compression
+   helper */
+
+ +

To optimize loading CodeMirror, especially when including a + bunch of different modes, it is recommended that you combine and + minify (and preferably also gzip) the scripts. This page makes + those first two steps very easy. Simply select the version and + scripts you need in the form below, and + click Compress to download the minified script + file.

+ +
+ +

Version:

+ +

+ +

+ with UglifyJS +

+ +

Custom code to add to the compressed file:

+
+ + + + + + + diff --git a/js/codemirror/css/baboon.png b/js/codemirror/css/baboon.png new file mode 100644 index 0000000000..55d97f70b8 Binary files /dev/null and b/js/codemirror/css/baboon.png differ diff --git a/js/codemirror/css/baboon_vector.svg b/js/codemirror/css/baboon_vector.svg new file mode 100644 index 0000000000..dc1667af91 --- /dev/null +++ b/js/codemirror/css/baboon_vector.svg @@ -0,0 +1,153 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/js/codemirror/css/docs.css b/js/codemirror/css/docs.css new file mode 100644 index 0000000000..c1b99dfa39 --- /dev/null +++ b/js/codemirror/css/docs.css @@ -0,0 +1,157 @@ +body { + font-family: Arial, sans-serif; + line-height: 1.5; + max-width: 64.3em; + margin: 3em auto; + padding: 0 1em; +} +body.droid { + font-family: Droid Sans, Arial, sans-serif; +} + +h1 { + letter-spacing: -3px; + font-size: 3.23em; + font-weight: bold; + margin: 0; +} + +h2 { + font-size: 1.23em; + font-weight: bold; + margin: .5em 0; + letter-spacing: -1px; +} + +h3 { + font-size: 1em; + font-weight: bold; + margin: .4em 0; +} + +pre { + background-color: #eee; + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + border-radius: 6px; + padding: 1em; +} + +pre.code { + margin: 0 1em; +} + +.grey { + font-size: 2.2em; + padding: .5em 1em; + line-height: 1.2em; + margin-top: .5em; + position: relative; +} + +img.logo { + position: absolute; + right: -25px; + bottom: 4px; +} + +a:link, a:visited, .quasilink { + color: #df0019; + cursor: pointer; + text-decoration: none; +} + +a:hover, .quasilink:hover { + color: #800004; +} + +h1 a:link, h1 a:visited, h1 a:hover { + color: black; +} + +ul { + margin: 0; + padding-left: 1.2em; +} + +a.download { + color: white; + background-color: #df0019; + width: 100%; + display: block; + text-align: center; + font-size: 1.23em; + font-weight: bold; + text-decoration: none; + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + border-radius: 6px; + padding: .5em 0; + margin-bottom: 1em; +} + +a.download:hover { + background-color: #bb0010; +} + +.rel { + margin-bottom: 0; +} + +.rel-note { + color: #777; + font-size: .9em; + margin-top: .1em; +} + +.logo-braces { + color: #df0019; + position: relative; + top: -4px; +} + +.blk { + float: left; +} + +.left { + width: 37em; + padding-right: 6.53em; + padding-bottom: 1em; +} + +.left1 { + width: 15.24em; + padding-right: 6.45em; +} + +.left2 { + width: 15.24em; +} + +.right { + width: 20.68em; +} + +.leftbig { + width: 42.44em; + padding-right: 6.53em; +} + +.rightsmall { + width: 15.24em; +} + +.clear:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; +} +.clear { display: inline-block; } +/* start commented backslash hack \*/ +* html .clear { height: 1%; } +.clear { display: block; } +/* close commented backslash hack */ diff --git a/js/codemirror/css/font.js b/js/codemirror/css/font.js new file mode 100644 index 0000000000..58b559aa62 --- /dev/null +++ b/js/codemirror/css/font.js @@ -0,0 +1,18 @@ +function waitForStyles() { + for (var i = 0; i < document.styleSheets.length; i++) + if (/googleapis/.test(document.styleSheets[i].href)) + return document.body.className += " droid"; + setTimeout(waitForStyles, 100); +} + +document.body.style.display = "none"; +setTimeout(function() { + document.body.style.display = ""; + if (/AppleWebKit/.test(navigator.userAgent) && /iP[oa]d|iPhone/.test(navigator.userAgent)) return; + var link = document.createElement("LINK"); + link.type = "text/css"; + link.rel = "stylesheet"; + link.href = "http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"; + document.documentElement.getElementsByTagName("HEAD")[0].appendChild(link); + waitForStyles(); +}, 30); diff --git a/js/codemirror/demo/activeline.html b/js/codemirror/demo/activeline.html new file mode 100644 index 0000000000..7a169663e7 --- /dev/null +++ b/js/codemirror/demo/activeline.html @@ -0,0 +1,71 @@ + + + + CodeMirror 2: Active Line Demo + + + + + + + + + +

CodeMirror 2: Active Line Demo

+ +
+ + + +

Styling the current cursor line.

+ + + diff --git a/js/codemirror/demo/complete.html b/js/codemirror/demo/complete.html new file mode 100644 index 0000000000..4dfef30b29 --- /dev/null +++ b/js/codemirror/demo/complete.html @@ -0,0 +1,79 @@ + + + + CodeMirror 2: Autocomplete Demo + + + + + + + + + +

CodeMirror 2: Autocomplete demo

+ +
+ +

Press ctrl-space to activate autocompletion. See +the code to figure out how it works.

+ + + + diff --git a/js/codemirror/demo/complete.js b/js/codemirror/demo/complete.js new file mode 100644 index 0000000000..29b7c26c7c --- /dev/null +++ b/js/codemirror/demo/complete.js @@ -0,0 +1,150 @@ +(function () { + // Minimal event-handling wrapper. + function stopEvent() { + if (this.preventDefault) {this.preventDefault(); this.stopPropagation();} + else {this.returnValue = false; this.cancelBubble = true;} + } + function addStop(event) { + if (!event.stop) event.stop = stopEvent; + return event; + } + function connect(node, type, handler) { + function wrapHandler(event) {handler(addStop(event || window.event));} + if (typeof node.addEventListener == "function") + node.addEventListener(type, wrapHandler, false); + else + node.attachEvent("on" + type, wrapHandler); + } + + function forEach(arr, f) { + for (var i = 0, e = arr.length; i < e; ++i) f(arr[i]); + } + + var editor = CodeMirror.fromTextArea(document.getElementById("code"), { + lineNumbers: true, + onKeyEvent: function(i, e) { + // Hook into ctrl-space + if (e.keyCode == 32 && (e.ctrlKey || e.metaKey) && !e.altKey) { + e.stop(); + return startComplete(); + } + } + }); + + function startComplete() { + // We want a single cursor position. + if (editor.somethingSelected()) return; + // Find the token at the cursor + var cur = editor.getCursor(false), token = editor.getTokenAt(cur), tprop = token; + // If it's not a 'word-style' token, ignore the token. + if (!/^[\w$_]*$/.test(token.string)) { + token = tprop = {start: cur.ch, end: cur.ch, string: "", state: token.state, + className: token.string == "." ? "js-property" : null}; + } + // If it is a property, find out what it is a property of. + while (tprop.className == "js-property") { + tprop = editor.getTokenAt({line: cur.line, ch: tprop.start}); + if (tprop.string != ".") return; + tprop = editor.getTokenAt({line: cur.line, ch: tprop.start}); + if (!context) var context = []; + context.push(tprop); + } + var completions = getCompletions(token, context); + if (!completions.length) return; + function insert(str) { + editor.replaceRange(str, {line: cur.line, ch: token.start}, {line: cur.line, ch: token.end}); + } + // When there is only one completion, use it directly. + if (completions.length == 1) {insert(completions[0]); return true;} + + // Build the select widget + var complete = document.createElement("div"); + complete.className = "completions"; + var sel = complete.appendChild(document.createElement("select")); + sel.multiple = true; + for (var i = 0; i < completions.length; ++i) { + var opt = sel.appendChild(document.createElement("option")); + opt.appendChild(document.createTextNode(completions[i])); + } + sel.firstChild.selected = true; + sel.size = Math.min(10, completions.length); + var pos = editor.cursorCoords(); + complete.style.left = pos.x + "px"; + complete.style.top = pos.yBot + "px"; + document.body.appendChild(complete); + // Hack to hide the scrollbar. + if (completions.length <= 10) + complete.style.width = (sel.clientWidth - 1) + "px"; + + var done = false; + function close() { + if (done) return; + done = true; + complete.parentNode.removeChild(complete); + } + function pick() { + insert(sel.options[sel.selectedIndex].value); + close(); + setTimeout(function(){editor.focus();}, 50); + } + connect(sel, "blur", close); + connect(sel, "keydown", function(event) { + var code = event.keyCode; + // Enter and space + if (code == 13 || code == 32) {event.stop(); pick();} + // Escape + else if (code == 27) {event.stop(); close(); editor.focus();} + else if (code != 38 && code != 40) {close(); editor.focus(); setTimeout(startComplete, 50);} + }); + connect(sel, "dblclick", pick); + + sel.focus(); + // Opera sometimes ignores focusing a freshly created node + if (window.opera) setTimeout(function(){if (!done) sel.focus();}, 100); + return true; + } + + var stringProps = ("charAt charCodeAt indexOf lastIndexOf substring substr slice trim trimLeft trimRight " + + "toUpperCase toLowerCase split concat match replace search").split(" "); + var arrayProps = ("length concat join splice push pop shift unshift slice reverse sort indexOf " + + "lastIndexOf every some filter forEach map reduce reduceRight ").split(" "); + var funcProps = "prototype apply call bind".split(" "); + var keywords = ("break case catch continue debugger default delete do else false finally for function " + + "if in instanceof new null return switch throw true try typeof var void while with").split(" "); + + function getCompletions(token, context) { + var found = [], start = token.string; + function maybeAdd(str) { + if (str.indexOf(start) == 0) found.push(str); + } + function gatherCompletions(obj) { + if (typeof obj == "string") forEach(stringProps, maybeAdd); + else if (obj instanceof Array) forEach(arrayProps, maybeAdd); + else if (obj instanceof Function) forEach(funcProps, maybeAdd); + for (var name in obj) maybeAdd(name); + } + + if (context) { + // If this is a property, see if it belongs to some object we can + // find in the current environment. + var obj = context.pop(), base; + if (obj.className == "js-variable") + base = window[obj.string]; + else if (obj.className == "js-string") + base = ""; + else if (obj.className == "js-atom") + base = 1; + while (base != null && context.length) + base = base[context.pop().string]; + if (base != null) gatherCompletions(base); + } + else { + // If not, just look in the window object and any local scope + // (reading into JS mode internals to get at the local variables) + for (var v = token.state.localVars; v; v = v.next) maybeAdd(v.name); + gatherCompletions(window); + forEach(keywords, maybeAdd); + } + return found; + } +})(); diff --git a/js/codemirror/demo/marker.html b/js/codemirror/demo/marker.html new file mode 100644 index 0000000000..7b3a2ba9d4 --- /dev/null +++ b/js/codemirror/demo/marker.html @@ -0,0 +1,53 @@ + + + + CodeMirror 2: Breakpoint Demo + + + + + + + + + +

CodeMirror 2: Breakpoint demo

+ +
+ +

Click the line-number gutter to add or remove 'breakpoints'.

+ + + + + diff --git a/js/codemirror/demo/mustache.html b/js/codemirror/demo/mustache.html new file mode 100644 index 0000000000..6541f10592 --- /dev/null +++ b/js/codemirror/demo/mustache.html @@ -0,0 +1,57 @@ + + + + CodeMirror 2: Overlay Parser Demo + + + + + + + + + + +

CodeMirror 2: Overlay Parser Demo

+ +
+ + + +

Demonstration of a mode that parses HTML, highlighting + the Mustache templating + directives inside of it by using the code + in overlay.js. View + source to see the 15 lines of code needed to accomplish this.

+ + + diff --git a/js/codemirror/demo/resize.html b/js/codemirror/demo/resize.html new file mode 100644 index 0000000000..0022044d29 --- /dev/null +++ b/js/codemirror/demo/resize.html @@ -0,0 +1,38 @@ + + + + CodeMirror 2: Autoresize Demo + + + + + + + + + +

CodeMirror 2: Autoresize demo

+ +
+ +

By setting a single CSS property, CodeMirror can be made to +automatically resize to fit the content. Use max-height +to prevent it from growing past a given point (on halfway modern +browsers).

+ + + + + diff --git a/js/codemirror/demo/search.html b/js/codemirror/demo/search.html new file mode 100644 index 0000000000..5fe8c9d0b4 --- /dev/null +++ b/js/codemirror/demo/search.html @@ -0,0 +1,106 @@ + + + + CodeMirror 2: Search/Replace Demo + + + + + + + + + +

CodeMirror 2: Search/Replace Demo

+ +
+ + or + it by + + + + +

Demonstration of search/replace functionality and marking + text.

+ + + diff --git a/js/codemirror/index.html b/js/codemirror/index.html new file mode 100644 index 0000000000..c60ede49bb --- /dev/null +++ b/js/codemirror/index.html @@ -0,0 +1,224 @@ + + + + CodeMirror + + + + + + +

{ } CodeMirror

+ +
+/* In-browser code editing
+   made bearable */
+
+ +
+ +

CodeMirror is a JavaScript library that can + be used to create a relatively pleasant editor interface for + code-like content ― computer programs, HTML markup, and + similar. If a mode has been written for the language you are + editing, the code will be coloured, and the editor will optionally + help you with indentation.

+ +

This is the project page for CodeMirror 2, the currently more + actively developed, and recommended + version. CodeMirror 1 is still available + from here.

+ +
+ +

Supported modes:

+ + + +
+ +

Usage demos:

+ + + +
+ +

Getting the code

+ +

All of CodeMirror is released under a MIT-style license. To get it, you can download + the latest + release or the current development + snapshot as zip files. To create a custom minified script file, + you can use the compression API.

+ +

We use git for version control. + The main repository can be fetched in this way:

+ + 
git clone http://marijnhaverbeke.nl/git/codemirror2
+ +

CodeMirror can also be found on GitHub at marijnh/CodeMirror2. + If you plan to hack on the code and contribute patches, the best way + to do it is to create a GitHub fork, and send pull requests.

+ +

Documentation

+ +

The manual is your first stop for + learning how to use this library. It starts with a quick explanation + of how to use the editor, and then describes all of the (many) + options and methods that CodeMirror exposes.

+ +

For those who want to learn more about the code, there is + an overview of the internals available. + The source code + itself is, for the most part, also well commented.

+ +

Support and bug reports

+ +

There is + a Google + group (a sort of mailing list/newsgroup thing) for discussion + and news related to CodeMirror. Reporting bugs is best done + on github. + You can also e-mail me + directly: Marijn + Haverbeke.

+ +

Supported browsers

+ +

The following browsers are able to run CodeMirror:

+ +
    +
  • Firefox 2 or higher
    • +
  • Chrome, any version
    • +
  • Safari 3 or higher
    • +
  • Internet Explorer 6 or higher
    • +
  • Opera 9 or higher (with some key-handling problems on OS X)
    • +
+ +

I am not actively testing against every new browser release, and + vendors have a habit of introducing bugs all the time, so I am + relying on the community to tell me when something breaks. + See here for information on how to contact + me.

+ +
+ +
+ + Download the latest release + +

Make a donation

+ +
    +
  • Paypal
    • +
  • Bank
    • +
+ + + +

Releases:

+ +

26-05-2011: Version 2.01:

+
    +
  • Add a Smalltalk mode.
    • +
  • Add a reStructuredText mode.
    • +
  • Add a Python mode.
    • +
  • Add a PL/SQL mode.
    • +
  • coordsChar now works
    • +
  • Fix a problem where onCursorActivity interfered with onChange.
    • +
  • Fix a number of scrolling and mouse-click-position glitches.
    • +
  • Pass information about the changed lines to onChange.
    • +
  • Support cmd-up/down on OS X.
    • +
  • Add triple-click line selection.
    • +
  • Don't handle shift when changing the selection through the API.
    • +
  • Support "nocursor" mode for readOnly option.
    • +
  • Add an onHighlightComplete option.
    • +
  • Fix the context menu for Firefox.
    • +
+ +

28-03-2011: Version 2.0:

+

CodeMirror 2 is a complete rewrite that's + faster, smaller, simpler to use, and less dependent on browser + quirks. See this + and this + for more information. + +

28-03-2011: Version 1.0:

+
    +
  • Fix error when debug history overflows.
    • +
  • Refine handling of C# verbatim strings.
    • +
  • Fix some issues with JavaScript indentation.
    • +
+ +

22-02-2011: Version 2.0 beta 2:

+

Somewhate more mature API, lots of bugs shaken out. + +

17-02-2011: Version 0.94:

+
    +
  • tabMode: "spaces" was modified slightly (now indents when something is selected).
    • +
  • Fixes a bug that would cause the selection code to break on some IE versions.
    • +
  • Disabling spell-check on WebKit browsers now works.
    • +
+ +

08-02-2011: Version 2.0 beta 1:

+

CodeMirror 2 is a complete rewrite of + CodeMirror, no longer depending on an editable frame.

+ +

19-01-2011: Version 0.93:

+
    +
  • Added a Regular Expression parser.
    • +
  • Fixes to the PHP parser.
    • +
  • Support for regular expression in search/replace.
    • +
  • Add save method to instances created with fromTextArea.
    • +
  • Add support for MS T-SQL in the SQL parser.
    • +
  • Support use of CSS classes for highlighting brackets.
    • +
  • Fix yet another hang with line-numbering in hidden editors.
    • +
+ +

Older releases...

+ +
+ +
 
+ +
+ + +
+ + + + + + diff --git a/js/codemirror/internals.html b/js/codemirror/internals.html new file mode 100644 index 0000000000..6a9dba4c95 --- /dev/null +++ b/js/codemirror/internals.html @@ -0,0 +1,382 @@ + + + + CodeMirror: Internals + + + + + + +

{ } CodeMirror

+ +
+/* (Re-) Implementing A Syntax-
+   Highlighting Editor in JavaScript */
+
+ +
+ +

+ Topic: JavaScript, code editor implementation
+ Author: Marijn Haverbeke
+ Date: March 2nd 2011 +

+ +

This is a followup to +my Brutal Odyssey to the +Dark Side of the DOM Tree story. That one describes the +mind-bending process of implementing (what would become) CodeMirror 1. +This one describes the internals of CodeMirror 2, a complete rewrite +and rethink of the old code base. I wanted to give this piece another +Hunter Thompson copycat subtitle, but somehow that would be out of +place—the process this time around was one of straightforward +engineering, requiring no serious mind-bending whatsoever.

+ +

So, what is wrong with CodeMirror 1? I'd estimate, by mailing list +activity and general search-engine presence, that it has been +integrated into about a thousand systems by now. The most prominent +one, since a few weeks, +being Google +code's project hosting. It works, and it's being used widely. + +

Still, I did not start replacing it because I was bored. CodeMirror +1 was heavily reliant on designMode +or contentEditable (depending on the browser). Neither of +these are well specified (HTML5 tries +to specify +their basics), and, more importantly, they tend to be one of the more +obscure and buggy areas of browser functionality—CodeMirror, by using +this functionality in a non-typical way, was constantly running up +against browser bugs. WebKit wouldn't show an empty line at the end of +the document, and in some releases would suddenly get unbearably slow. +Firefox would show the cursor in the wrong place. Internet Explorer +would insist on linkifying everything that looked like a URL or email +address, a behaviour that can't be turned off. Some bugs I managed to +work around (which was often a frustrating, painful process), others, +such as the Firefox cursor placement, I gave up on, and had to tell +user after user that they were known problems, but not something I +could help.

+ +

Also, there is the fact that designMode (which seemed +to be less buggy than contentEditable in Webkit and +Firefox, and was thus used by CodeMirror 1 in those browsers) requires +a frame. Frames are another tricky area. It takes some effort to +prevent getting tripped up by domain restrictions, they don't +initialize synchronously, behave strangely in response to the back +button, and, on several browsers, can't be moved around the DOM +without having them re-initialize. They did provide a very nice way to +namespace the library, though—CodeMirror 1 could freely pollute the +namespace inside the frame.

+ +

Finally, working with an editable document means working with +selection in arbitrary DOM structures. Internet Explorer (8 and +before) has an utterly different (and awkward) selection API than all +of the other browsers, and even among the different implementations of +document.selection, details about how exactly a selection +is represented vary quite a bit. Add to that the fact that Opera's +selection support tended to be very buggy until recently, and you can +imagine why CodeMirror 1 contains 700 lines of selection-handling +code.

+ +

And that brings us to the main issue with the CodeMirror 1 +code base: The proportion of browser-bug-workarounds to real +application code was getting dangerously high. By building on top of a +few dodgy features, I put the system in a vulnerable position—any +incompatibility and bugginess in these features, I had to paper over +with my own code. Not only did I have to do some serious stunt-work to +get it to work on older browsers (as detailed in the +previous story), things +also kept breaking in newly released versions, requiring me to come up +with new scary hacks in order to keep up. This was starting +to lose its appeal.

+ +

General Approach

+ +

What CodeMirror 2 does is try to sidestep most of the hairy hacks +that came up in version 1. I owe a lot to the +ACE editor for inspiration on how to +approach this.

+ +

I absolutely did not want to be completely reliant on key events to +generate my input. Every JavaScript programmer knows that key event +information is horrible and incomplete. Some people (most awesomely +Mihai Bazon with Ymacs) have been able +to build more or less functioning editors by directly reading key +events, but it takes a lot of work (the kind of never-ending, fragile +work I described earlier), and will never be able to properly support +things like multi-keystoke international character input.

+ +

So what I do is focus a hidden textarea, and let the browser +believe that the user is typing into that. What we show to the user is +a DOM structure we built to represent his document. If this is updated +quickly enough, and shows some kind of believable cursor, it feels +like a real text-input control.

+ +

Another big win is that this DOM representation does not have to +span the whole document. Some CodeMirror 1 users insisted that they +needed to put a 30 thousand line XML document into CodeMirror. Putting +all that into the DOM takes a while, especially since, for some +reason, an editable DOM tree is slower than a normal one on most +browsers. If we have full control over what we show, we must only +ensure that the visible part of the document has been added, and can +do the rest only when needed. (Fortunately, the onscroll +event works almost the same on all browsers, and lends itself well to +displaying things only as they are scrolled into view.)

+ +

Input

+ +

ACE uses its hidden textarea only as a text input shim, and does +all cursor movement and things like text deletion itself by directly +handling key events. CodeMirror's way is to let the browser do its +thing as much as possible, and not, for example, define its own set of +key bindings. One way to do this would have been to have the whole +document inside the hidden textarea, and after each key event update +the display DOM to reflect what's in that textarea.

+ +

That'd be simple, but it is not realistic. For even medium-sized +document the editor would be constantly munging huge strings, and get +terribly slow. What CodeMirror 2 does is put the current selection, +along with an extra line on the top and on the bottom, into the +textarea.

+ +

This means that the arrow keys (and their ctrl-variations), home, +end, etcetera, do not have to be handled specially. We just read the +cursor position in the textarea, and update our cursor to match it. +Also, copy and paste work pretty much for free, and people get their +native key bindings, without any special work on my part. For example, +I have emacs key bindings configured for Chrome and Firefox. There is +no way for a script to detect this.

+ +

Of course, since only a small part of the document sits in the +textarea, keys like page up and ctrl-end won't do the right thing. +CodeMirror is catching those events and handling them itself.

+ +

Selection

+ +

Getting and setting the selection range of a textarea in modern +browsers is trivial—you just use the selectionStart +and selectionEnd properties. On IE you have to do some +insane stuff with temporary ranges and compensating for the fact that +moving the selection by a 'character' will treat \r\n as a single +character, but even there it is possible to build functions that +reliably set and get the selection range.

+ +

But consider this typical case: When I'm somewhere in my document, +press shift, and press the up arrow, something gets selected. Then, if +I, still holding shift, press the up arrow again, the top of my +selection is adjusted. The selection remembers where its head +and its anchor are, and moves the head when we shift-move. +This is a generally accepted property of selections, and done right by +every editing component built in the past twenty years.

+ +

But not something that the browser selection APIs expose.

+ +

Great. So when someone creates an 'upside-down' selection, the next +time CodeMirror has to update the textarea, it'll re-create the +selection as an 'upside-up' selection, with the anchor at the top, and +the next cursor motion will behave in an unexpected way—our second +up-arrow press in the example above will not do anything, since it is +interpreted in exactly the same way as the first.

+ +

No problem. We'll just, ehm, detect that the selection is +upside-down (you can tell by the way it was created), and then, when +an upside-down selection is present, and a cursor-moving key is +pressed in combination with shift, we quickly collapse the selection +in the textarea to its start, allow the key to take effect, and then +combine its new head with its old anchor to get the real +selection.

+ +

In short, scary hacks could not be avoided entirely in CodeMirror +2.

+ +

And, the observant reader might ask, how do you even know that a +key combo is a cursor-moving combo, if you claim you support any +native key bindings? Well, we don't, but we can learn. The editor +keeps a set known cursor-movement combos (initialized to the +predictable defaults), and updates this set when it observes that +pressing a certain key had (only) the effect of moving the cursor. +This, of course, doesn't work if the first time the key is used was +for extending an inverted selection, but it works most of the +time.

+ +

Intelligent Updating

+ +

One thing that always comes up when you have a complicated internal +state that's reflected in some user-visible external representation +(in this case, the displayed code and the textarea's content) is +keeping the two in sync. The naive way is to just update the display +every time you change your state, but this is not only error prone +(you'll forget), it also easily leads to duplicate work on big, +composite operations. Then you start passing around flags indicating +whether the display should be updated in an attempt to be efficient +again and, well, at that point you might as well give up completely.

+ +

I did go down that road, but then switched to a much simpler model: +simply keep track of all the things that have been changed during an +action, and then, only at the end, use this information to update the +user-visible display.

+ +

CodeMirror uses a concept of operations, which start by +calling a specific set-up function that clears the state and end by +calling another function that reads this state and does the required +updating. Most event handlers, and all the user-visible methods that +change state are wrapped like this. There's a method +called operation that accepts a function, and returns +another function that wraps the given function as an operation.

+ +

It's trivial to extend this (as CodeMirror does) to detect nesting, +and, when an operation is started inside an operation, simply +increment the nesting count, and only do the updating when this count +reaches zero again.

+ +

If we have a set of changed ranges and know the currently shown +range, we can (with some awkward code to deal with the fact that +changes can add and remove lines, so we're dealing with a changing +coordinate system) construct a map of the ranges that were left +intact. We can then compare this map with the part of the document +that's currently visible (based on scroll offset and editor height) to +determine whether something needs to be updated.

+ +

CodeMirror uses two update algorithms—a full refresh, where it just +discards the whole part of the DOM that contains the edited text and +rebuilds it, and a patch algorithm, where it uses the information +about changed and intact ranges to update only the out-of-date parts +of the DOM. When more than 30 percent (which is the current heuristic, +might change) of the lines need to be updated, the full refresh is +chosen (since it's faster to do than painstakingly finding and +updating all the changed lines), in the other case it does the +patching (so that, if you scroll a line or select another character, +the whole screen doesn't have to be re-rendered).

+ +

All updating uses innerHTML rather than direct DOM +manipulation, since that still seems to be by far the fastest way to +build documents. There's a per-line function that combines the +highlighting, marking, and +selection info for that line into a snippet of HTML. The patch updater +uses this to reset individual lines, the refresh updater builds an +HTML chunk for the whole visible document at once, and then uses a +single innerHTML update to do the refresh.

+ +

Parsers can be Simple

+ +

When I wrote CodeMirror 1, I +thought interruptable +parsers were a hugely scary and complicated thing, and I used a +bunch of heavyweight abstractions to keep this supposed complexity +under control: parsers +were iterators +that consumed input from another iterator, and used funny +closure-resetting tricks to copy and resume themselves.

+ +

This made for a rather nice system, in that parsers formed strictly +separate modules, and could be composed in predictable ways. +Unfortunately, it was quite slow (stacking three or four iterators on +top of each other), and extremely intimidating to people not used to a +functional programming style.

+ +

With a few small changes, however, we can keep all those +advantages, but simplify the API and make the whole thing less +indirect and inefficient. CodeMirror +2's mode API uses explicit state +objects, and makes the parser/tokenizer a function that simply takes a +state and a character stream abstraction, advances the stream one +token, and returns the way the token should be styled. This state may +be copied, optionally in a mode-defined way, in order to be able to +continue a parse at a given point. Even someone who's never touched a +lambda in his life can understand this approach. Additionally, far +fewer objects are allocated in the course of parsing now.

+ +

The biggest speedup comes from the fact that the parsing no longer +has to touch the DOM though. In CodeMirror 1, on an older browser, you +could see the parser work its way through the document, +managing some twenty lines in each 50-millisecond time slice it got. It +was reading its input from the DOM, and updating the DOM as it went +along, which any experienced JavaScript programmer will immediately +spot as a recipe for slowness. In CodeMirror 2, the parser usually +finishes the whole document in a single 100-millisecond time slice—it +manages some 1500 lines during that time on Chrome. All it has to do +is munge strings, so there is no real reason for it to be slow +anymore.

+ +

What Gives?

+ +

Given all this, what can you expect from CodeMirror 2? First, the +good:

+ +
    + +
  • Small. the base library is some 32k when minified +now, 12k when gzipped. It's smaller than its own logo.
    • + +
  • Lightweight. CodeMirror 2 initializes very +quickly, and does almost no work when it is not focused. This means +you can treat it almost like a textarea, have multiple instances on a +page without trouble.
    • + +
  • Huge document support. Since highlighting is +really fast, and no DOM structure is being built for non-visible +content, you don't have to worry about locking up your browser when a +user enters a megabyte-sized document.
    • + +
  • Extended API. Some things kept coming up in the +mailing list, such as marking pieces of text or lines, which were +extremely hard to do with CodeMirror 1. The new version has proper +support for these built in.
    • + +
  • Tab support. Tabs inside editable documents were, +for some reason, a no-go. At least six different people announced they +were going to add tab support to CodeMirror 1, none survived (I mean, +none delivered a working version). CodeMirror 2 no longer removes tabs +from your document.
    • + +
  • Sane styling. iframe nodes aren't +really known for respecting document flow. Now that an editor instance +is a plain div element, it is much easier to size it to +fit the surrounding elements. You don't even have to make it scroll if +you do not want to.
    • + +
+ +

Then, the bad:

+ +
    + +
  • No line-wrapping. I'd have liked to get +line-wrapping to work, but it doesn't match the model I'm using very +well. It is important that cursor movement in the textarea matches +what you see on the screen, and it seems to be impossible to have the +lines wrapped the same in the textarea and the normal DOM.
    • + +
  • Some cursor flakiness. The textarea hack does not +really do justice to the complexity of cursor handling—a selection is +typically more than just an offset into a string. For example, if you +use the up and down arrow keys to move to a shorter line and then +back, you'll end up in your old position in most editor controls, but +CodeMirror 2 currently doesn't remember the 'real' cursor column in +this case. These can be worked around on a case-by-case basis, but +I haven't put much energy into that yet.
    • + +
+ +
+ +

Contents

+ + + +
+ +
 
+ + + + diff --git a/js/codemirror/lib/codemirror.css b/js/codemirror/lib/codemirror.css new file mode 100644 index 0000000000..e9db4eb49e --- /dev/null +++ b/js/codemirror/lib/codemirror.css @@ -0,0 +1,56 @@ +.CodeMirror { + overflow: auto; + height: 300px; + line-height: 1em; + font-family: monospace; +} + +.CodeMirror-gutter { + position: absolute; left: 0; top: 0; + background-color: #f7f7f7; + border-right: 1px solid #eee; + min-width: 2em; + height: 100%; +} +.CodeMirror-gutter-text { + color: #aaa; + text-align: right; + padding: .4em .2em .4em .4em; +} +.CodeMirror-lines { + padding: .4em; +} + +.CodeMirror pre { + -moz-border-radius: 0; + -webkit-border-radius: 0; + -o-border-radius: 0; + border-radius: 0; + border-width: 0; margin: 0; padding: 0; background: transparent; + font-family: inherit; +} + +.CodeMirror textarea { + font-family: monospace !important; +} + +.CodeMirror-cursor { + z-index: 10; + position: absolute; + visibility: hidden; + border-left: 1px solid black !important; +} +.CodeMirror-focused .CodeMirror-cursor { + visibility: visible; +} + +span.CodeMirror-selected { + background: #ccc !important; + color: HighlightText !important; +} +.CodeMirror-focused span.CodeMirror-selected { + background: Highlight !important; +} + +.CodeMirror-matchingbracket {color: #0f0 !important;} +.CodeMirror-nonmatchingbracket {color: #f22 !important;} diff --git a/js/codemirror/lib/codemirror.js b/js/codemirror/lib/codemirror.js new file mode 100644 index 0000000000..23fadb6c74 --- /dev/null +++ b/js/codemirror/lib/codemirror.js @@ -0,0 +1,2018 @@ +// All functions that need access to the editor's state live inside +// the CodeMirror function. Below that, at the bottom of the file, +// some utilities are defined. + +// CodeMirror is the only global var we claim +var CodeMirror = (function() { + // This is the function that produces an editor instance. It's + // closure is used to store the editor state. + function CodeMirror(place, givenOptions) { + // Determine effective options based on given values and defaults. + var options = {}, defaults = CodeMirror.defaults; + for (var opt in defaults) + if (defaults.hasOwnProperty(opt)) + options[opt] = (givenOptions && givenOptions.hasOwnProperty(opt) ? givenOptions : defaults)[opt]; + + var targetDocument = options["document"]; + // The element in which the editor lives. Takes care of scrolling + // (if enabled). + var wrapper = targetDocument.createElement("div"); + wrapper.className = "CodeMirror"; + // Work around http://www.quirksmode.org/bugreports/archives/2006/09/Overflow_Hidden_not_hiding.html + if (window.ActiveXObject && /MSIE [1-7]\b/.test(navigator.userAgent)) + wrapper.style.position = "relative"; + // This mess creates the base DOM structure for the editor. + wrapper.innerHTML = + '
' + // Set to the height of the text, causes scrolling + '
' + + '
' + // Moved around its parent to cover visible view + '
' + + '
' + // Wraps and hides input textarea + '
' + + // Provides positioning relative to (visible) text origin + '
' + + '
 
' + // Absolutely positioned blinky cursor + '
'; // This DIV contains the actual code + if (place.appendChild) place.appendChild(wrapper); else place(wrapper); + // I've never seen more elegant code in my life. + var code = wrapper.firstChild, measure = code.firstChild, mover = measure.nextSibling, + gutter = mover.firstChild, gutterText = gutter.firstChild, + inputDiv = gutter.nextSibling, input = inputDiv.firstChild, + lineSpace = inputDiv.nextSibling.firstChild, cursor = lineSpace.firstChild, lineDiv = cursor.nextSibling; + if (options.tabindex != null) input.tabindex = options.tabindex; + if (!options.gutter && !options.lineNumbers) gutter.style.display = "none"; + + // Delayed object wrap timeouts, making sure only one is active. blinker holds an interval. + var poll = new Delayed(), highlight = new Delayed(), blinker; + + // mode holds a mode API object. lines an array of Line objects + // (see Line constructor), work an array of lines that should be + // parsed, and history the undo history (instance of History + // constructor). + var mode, lines = [new Line("")], work, history = new History(), focused; + loadMode(); + // The selection. These are always maintained to point at valid + // positions. Inverted is used to remember that the user is + // selecting bottom-to-top. + var sel = {from: {line: 0, ch: 0}, to: {line: 0, ch: 0}, inverted: false}; + // Selection-related flags. shiftSelecting obviously tracks + // whether the user is holding shift. reducedSelection is a hack + // to get around the fact that we can't create inverted + // selections. See below. + var shiftSelecting, reducedSelection, lastDoubleClick; + // Variables used by startOperation/endOperation to track what + // happened during the operation. + var updateInput, changes, textChanged, selectionChanged, leaveInputAlone; + // Current visible range (may be bigger than the view window). + var showingFrom = 0, showingTo = 0, lastHeight = 0, curKeyId = null; + // editing will hold an object describing the things we put in the + // textarea, to help figure out whether something changed. + // bracketHighlighted is used to remember that a backet has been + // marked. + var editing, bracketHighlighted; + // Tracks the maximum line length so that the horizontal scrollbar + // can be kept static when scrolling. + var maxLine = ""; + + // Initialize the content. Somewhat hacky (delayed prepareInput) + // to work around browser issues. + operation(function(){setValue(options.value || ""); updateInput = false;})(); + setTimeout(prepareInput, 20); + + // Register our event handlers. + connect(wrapper, "mousedown", operation(onMouseDown)); + // Gecko browsers fire contextmenu *after* opening the menu, at + // which point we can't mess with it anymore. Context menu is + // handled in onMouseDown for Gecko. + if (!gecko) connect(wrapper, "contextmenu", operation(onContextMenu)); + connect(code, "dblclick", operation(onDblClick)); + connect(wrapper, "scroll", function() {updateDisplay([]); if (options.onScroll) options.onScroll(instance);}); + connect(window, "resize", function() {updateDisplay(true);}); + connect(input, "keyup", operation(onKeyUp)); + connect(input, "keydown", operation(onKeyDown)); + connect(input, "keypress", operation(onKeyPress)); + connect(input, "focus", onFocus); + connect(input, "blur", onBlur); + + connect(wrapper, "dragenter", function(e){e.stop();}); + connect(wrapper, "dragover", function(e){e.stop();}); + connect(wrapper, "drop", operation(onDrop)); + connect(wrapper, "paste", function(){focusInput(); fastPoll();}); + connect(input, "paste", function(){fastPoll();}); + connect(input, "cut", function(){fastPoll();}); + + if (targetDocument.activeElement == input) onFocus(); + else onBlur(); + + function isLine(l) {return l >= 0 && l < lines.length;} + // The instance object that we'll return. Mostly calls out to + // local functions in the CodeMirror function. Some do some extra + // range checking and/or clipping. operation is used to wrap the + // call so that changes it makes are tracked, and the display is + // updated afterwards. + var instance = { + getValue: getValue, + setValue: operation(setValue), + getSelection: getSelection, + replaceSelection: operation(replaceSelection), + focus: function(){focusInput(); onFocus(); fastPoll();}, + setOption: function(option, value) { + options[option] = value; + if (option == "lineNumbers" || option == "gutter") gutterChanged(); + else if (option == "mode" || option == "indentUnit") loadMode(); + else if (option == "readOnly" && value == "nocursor") input.blur(); + }, + getOption: function(option) {return options[option];}, + undo: operation(undo), + redo: operation(redo), + indentLine: operation(function(n) {if (isLine(n)) indentLine(n, "smart");}), + historySize: function() {return {undo: history.done.length, redo: history.undone.length};}, + matchBrackets: operation(function(){matchBrackets(true);}), + getTokenAt: function(pos) { + pos = clipPos(pos); + return lines[pos.line].getTokenAt(mode, getStateBefore(pos.line), pos.ch); + }, + cursorCoords: function(start){ + if (start == null) start = sel.inverted; + return pageCoords(start ? sel.from : sel.to); + }, + charCoords: function(pos){return pageCoords(clipPos(pos));}, + coordsChar: function(coords) { + var off = eltOffset(lineSpace); + var line = clipLine(Math.min(lines.length - 1, showingFrom + Math.floor((coords.y - off.top) / lineHeight()))); + return clipPos({line: line, ch: charFromX(clipLine(line), coords.x - off.left)}); + }, + getSearchCursor: function(query, pos, caseFold) {return new SearchCursor(query, pos, caseFold);}, + markText: operation(function(a, b, c){return operation(markText(a, b, c));}), + setMarker: addGutterMarker, + clearMarker: removeGutterMarker, + setLineClass: operation(setLineClass), + lineInfo: lineInfo, + addWidget: function(pos, node, scroll) { + var pos = localCoords(clipPos(pos), true); + node.style.top = (showingFrom * lineHeight() + pos.yBot + paddingTop()) + "px"; + node.style.left = (pos.x + paddingLeft()) + "px"; + code.appendChild(node); + if (scroll) + scrollIntoView(pos.x, pos.yBot, pos.x + node.offsetWidth, pos.yBot + node.offsetHeight); + }, + + lineCount: function() {return lines.length;}, + getCursor: function(start) { + if (start == null) start = sel.inverted; + return copyPos(start ? sel.from : sel.to); + }, + somethingSelected: function() {return !posEq(sel.from, sel.to);}, + setCursor: operation(function(line, ch) { + if (ch == null && typeof line.line == "number") setCursor(line.line, line.ch); + else setCursor(line, ch); + }), + setSelection: operation(function(from, to) {setSelection(clipPos(from), clipPos(to || from));}), + getLine: function(line) {if (isLine(line)) return lines[line].text;}, + setLine: operation(function(line, text) { + if (isLine(line)) replaceRange(text, {line: line, ch: 0}, {line: line, ch: lines[line].text.length}); + }), + removeLine: operation(function(line) { + if (isLine(line)) replaceRange("", {line: line, ch: 0}, clipPos({line: line+1, ch: 0})); + }), + replaceRange: operation(replaceRange), + getRange: function(from, to) {return getRange(clipPos(from), clipPos(to));}, + + operation: function(f){return operation(f)();}, + refresh: function(){updateDisplay(true);}, + getInputField: function(){return input;}, + getWrapperElement: function(){return wrapper;} + }; + + function setValue(code) { + history = null; + var top = {line: 0, ch: 0}; + updateLines(top, {line: lines.length - 1, ch: lines[lines.length-1].text.length}, + splitLines(code), top, top); + history = new History(); + } + function getValue(code) { + var text = []; + for (var i = 0, l = lines.length; i < l; ++i) + text.push(lines[i].text); + return text.join("\n"); + } + + function onMouseDown(e) { + var ld = lastDoubleClick; lastDoubleClick = null; + // First, see if this is a click in the gutter + for (var n = e.target(); n != wrapper; n = n.parentNode) + if (n.parentNode == gutterText) { + if (options.onGutterClick) + options.onGutterClick(instance, indexOf(gutterText.childNodes, n) + showingFrom); + return e.stop(); + } + + if (gecko && e.button() == 3) onContextMenu(e); + if (e.button() != 1) return; + // For button 1, if it was clicked inside the editor + // (posFromMouse returning non-null), we have to adjust the + // selection. + var start = posFromMouse(e), last = start, going; + if (!start) {if (e.target() == wrapper) e.stop(); return;} + + if (!focused) onFocus(); + e.stop(); + if (ld && +new Date - ld < 400) return selectLine(start.line); + + setCursor(start.line, start.ch, true); + // And then we have to see if it's a drag event, in which case + // the dragged-over text must be selected. + function end() { + focusInput(); + updateInput = true; + move(); up(); + } + function extend(e) { + var cur = posFromMouse(e, true); + if (cur && !posEq(cur, last)) { + if (!focused) onFocus(); + last = cur; + setSelectionUser(start, cur); + updateInput = false; + var visible = visibleLines(); + if (cur.line >= visible.to || cur.line < visible.from) + going = setTimeout(operation(function(){extend(e);}), 150); + } + } + + var move = connect(targetDocument, "mousemove", operation(function(e) { + clearTimeout(going); + e.stop(); + extend(e); + }), true); + var up = connect(targetDocument, "mouseup", operation(function(e) { + clearTimeout(going); + var cur = posFromMouse(e); + if (cur) setSelectionUser(start, cur); + e.stop(); + end(); + }), true); + } + function onDblClick(e) { + var pos = posFromMouse(e); + if (!pos) return; + selectWordAt(pos); + e.stop(); + lastDoubleClick = +new Date; + } + function onDrop(e) { + var pos = posFromMouse(e, true), files = e.e.dataTransfer.files; + if (!pos || options.readOnly) return; + if (files && files.length && window.FileReader && window.File) { + var n = files.length, text = Array(n), read = 0; + for (var i = 0; i < n; ++i) loadFile(files[i], i); + function loadFile(file, i) { + var reader = new FileReader; + reader.onload = function() { + text[i] = reader.result; + if (++read == n) replaceRange(text.join(""), clipPos(pos), clipPos(pos)); + }; + reader.readAsText(file); + } + } + else { + try { + var text = e.e.dataTransfer.getData("Text"); + if (text) replaceRange(text, pos, pos); + } + catch(e){} + } + } + function onKeyDown(e) { + if (!focused) onFocus(); + + var code = e.e.keyCode; + // Tries to detect ctrl on non-mac, cmd on mac. + var mod = (mac ? e.e.metaKey : e.e.ctrlKey) && !e.e.altKey, anyMod = e.e.ctrlKey || e.e.altKey || e.e.metaKey; + if (code == 16 || e.e.shiftKey) shiftSelecting = shiftSelecting || (sel.inverted ? sel.to : sel.from); + else shiftSelecting = null; + // First give onKeyEvent option a chance to handle this. + if (options.onKeyEvent && options.onKeyEvent(instance, addStop(e.e))) return; + + if (code == 33 || code == 34) {scrollPage(code == 34); return e.stop();} // page up/down + if (mod && ((code == 36 || code == 35) || // ctrl-home/end + mac && (code == 38 || code == 40))) { // cmd-up/down + scrollEnd(code == 36 || code == 38); return e.stop(); + } + if (mod && code == 65) {selectAll(); return e.stop();} // ctrl-a + if (!options.readOnly) { + if (!anyMod && code == 13) {return;} // enter + if (!anyMod && code == 9 && handleTab(e.e.shiftKey)) return e.stop(); // tab + if (mod && code == 90) {undo(); return e.stop();} // ctrl-z + if (mod && ((e.e.shiftKey && code == 90) || code == 89)) {redo(); return e.stop();} // ctrl-shift-z, ctrl-y + } + + // Key id to use in the movementKeys map. We also pass it to + // fastPoll in order to 'self learn'. We need this because + // reducedSelection, the hack where we collapse the selection to + // its start when it is inverted and a movement key is pressed + // (and later restore it again), shouldn't be used for + // non-movement keys. + curKeyId = (mod ? "c" : "") + code; + if (sel.inverted && movementKeys.hasOwnProperty(curKeyId)) { + var range = selRange(input); + if (range) { + reducedSelection = {anchor: range.start}; + setSelRange(input, range.start, range.start); + } + } + fastPoll(curKeyId); + } + function onKeyUp(e) { + if (options.onKeyEvent && options.onKeyEvent(instance, addStop(e.e))) return; + if (reducedSelection) { + reducedSelection = null; + updateInput = true; + } + if (e.e.keyCode == 16) shiftSelecting = null; + } + function onKeyPress(e) { + if (options.onKeyEvent && options.onKeyEvent(instance, addStop(e.e))) return; + if (options.electricChars && mode.electricChars) { + var ch = String.fromCharCode(e.e.charCode == null ? e.e.keyCode : e.e.charCode); + if (mode.electricChars.indexOf(ch) > -1) + setTimeout(operation(function() {indentLine(sel.to.line, "smart");}), 50); + } + var code = e.e.keyCode; + // Re-stop tab and enter. Necessary on some browsers. + if (code == 13) {if (!options.readOnly) handleEnter(); e.stop();} + else if (!e.e.ctrlKey && !e.e.altKey && !e.e.metaKey && code == 9 && options.tabMode != "default") e.stop(); + else fastPoll(curKeyId); + } + + function onFocus() { + if (options.readOnly == "nocursor") return; + if (!focused && options.onFocus) options.onFocus(instance); + focused = true; + slowPoll(); + if (wrapper.className.search(/\bCodeMirror-focused\b/) == -1) + wrapper.className += " CodeMirror-focused"; + restartBlink(); + } + function onBlur() { + if (focused && options.onBlur) options.onBlur(instance); + clearInterval(blinker); + shiftSelecting = null; + focused = false; + wrapper.className = wrapper.className.replace(" CodeMirror-focused", ""); + } + + // Replace the range from from to to by the strings in newText. + // Afterwards, set the selection to selFrom, selTo. + function updateLines(from, to, newText, selFrom, selTo) { + if (history) { + var old = []; + for (var i = from.line, e = to.line + 1; i < e; ++i) old.push(lines[i].text); + history.addChange(from.line, newText.length, old); + while (history.done.length > options.undoDepth) history.done.shift(); + } + updateLinesNoUndo(from, to, newText, selFrom, selTo); + } + function unredoHelper(from, to) { + var change = from.pop(); + if (change) { + var replaced = [], end = change.start + change.added; + for (var i = change.start; i < end; ++i) replaced.push(lines[i].text); + to.push({start: change.start, added: change.old.length, old: replaced}); + var pos = clipPos({line: change.start + change.old.length - 1, + ch: editEnd(replaced[replaced.length-1], change.old[change.old.length-1])}); + updateLinesNoUndo({line: change.start, ch: 0}, {line: end - 1, ch: lines[end-1].text.length}, change.old, pos, pos); + } + } + function undo() {unredoHelper(history.done, history.undone);} + function redo() {unredoHelper(history.undone, history.done);} + + function updateLinesNoUndo(from, to, newText, selFrom, selTo) { + var recomputeMaxLength = false, maxLineLength = maxLine.length; + for (var i = from.line; i < to.line; ++i) { + if (lines[i].text.length == maxLineLength) {recomputeMaxLength = true; break;} + } + + var nlines = to.line - from.line, firstLine = lines[from.line], lastLine = lines[to.line]; + // First adjust the line structure, taking some care to leave highlighting intact. + if (firstLine == lastLine) { + if (newText.length == 1) + firstLine.replace(from.ch, to.ch, newText[0]); + else { + lastLine = firstLine.split(to.ch, newText[newText.length-1]); + var spliceargs = [from.line + 1, nlines]; + firstLine.replace(from.ch, firstLine.text.length, newText[0]); + for (var i = 1, e = newText.length - 1; i < e; ++i) spliceargs.push(new Line(newText[i])); + spliceargs.push(lastLine); + lines.splice.apply(lines, spliceargs); + } + } + else if (newText.length == 1) { + firstLine.replace(from.ch, firstLine.text.length, newText[0] + lastLine.text.slice(to.ch)); + lines.splice(from.line + 1, nlines); + } + else { + var spliceargs = [from.line + 1, nlines - 1]; + firstLine.replace(from.ch, firstLine.text.length, newText[0]); + lastLine.replace(0, to.ch, newText[newText.length-1]); + for (var i = 1, e = newText.length - 1; i < e; ++i) spliceargs.push(new Line(newText[i])); + lines.splice.apply(lines, spliceargs); + } + + + for (var i = from.line, e = i + newText.length; i < e; ++i) { + var l = lines[i].text; + if (l.length > maxLineLength) { + maxLine = l; maxLineLength = l.length; + recomputeMaxLength = false; + } + } + if (recomputeMaxLength) { + maxLineLength = 0; + for (var i = 0, e = lines.length; i < e; ++i) { + var l = lines[i].text; + if (l.length > maxLineLength) { + maxLineLength = l.length; maxLine = l; + } + } + } + + // Add these lines to the work array, so that they will be + // highlighted. Adjust work lines if lines were added/removed. + var newWork = [], lendiff = newText.length - nlines - 1; + for (var i = 0, l = work.length; i < l; ++i) { + var task = work[i]; + if (task < from.line) newWork.push(task); + else if (task > to.line) newWork.push(task + lendiff); + } + if (newText.length) newWork.push(from.line); + work = newWork; + startWorker(100); + // Remember that these lines changed, for updating the display + changes.push({from: from.line, to: to.line + 1, diff: lendiff}); + textChanged = {from: from, to: to, text: newText}; + + // Update the selection + function updateLine(n) {return n <= Math.min(to.line, to.line + lendiff) ? n : n + lendiff;} + setSelection(selFrom, selTo, updateLine(sel.from.line), updateLine(sel.to.line)); + + // Make sure the scroll-size div has the correct height. + code.style.height = (lines.length * lineHeight() + 2 * paddingTop()) + "px"; + } + + function replaceRange(code, from, to) { + from = clipPos(from); + if (!to) to = from; else to = clipPos(to); + code = splitLines(code); + function adjustPos(pos) { + if (posLess(pos, from)) return pos; + if (!posLess(to, pos)) return end; + var line = pos.line + code.length - (to.line - from.line) - 1; + var ch = pos.ch; + if (pos.line == to.line) + ch += code[code.length-1].length - (to.ch - (to.line == from.line ? from.ch : 0)); + return {line: line, ch: ch}; + } + var end; + replaceRange1(code, from, to, function(end1) { + end = end1; + return {from: adjustPos(sel.from), to: adjustPos(sel.to)}; + }); + return end; + } + function replaceSelection(code, collapse) { + replaceRange1(splitLines(code), sel.from, sel.to, function(end) { + if (collapse == "end") return {from: end, to: end}; + else if (collapse == "start") return {from: sel.from, to: sel.from}; + else return {from: sel.from, to: end}; + }); + } + function replaceRange1(code, from, to, computeSel) { + var endch = code.length == 1 ? code[0].length + from.ch : code[code.length-1].length; + var newSel = computeSel({line: from.line + code.length - 1, ch: endch}); + updateLines(from, to, code, newSel.from, newSel.to); + } + + function getRange(from, to) { + var l1 = from.line, l2 = to.line; + if (l1 == l2) return lines[l1].text.slice(from.ch, to.ch); + var code = [lines[l1].text.slice(from.ch)]; + for (var i = l1 + 1; i < l2; ++i) code.push(lines[i].text); + code.push(lines[l2].text.slice(0, to.ch)); + return code.join("\n"); + } + function getSelection() { + return getRange(sel.from, sel.to); + } + + var pollingFast = false; // Ensures slowPoll doesn't cancel fastPoll + function slowPoll() { + if (pollingFast) return; + poll.set(2000, function() { + startOperation(); + readInput(); + if (focused) slowPoll(); + endOperation(); + }); + } + function fastPoll(keyId) { + var missed = false; + pollingFast = true; + function p() { + startOperation(); + var changed = readInput(); + if (changed == "moved" && keyId) movementKeys[keyId] = true; + if (!changed && !missed) {missed = true; poll.set(80, p);} + else {pollingFast = false; slowPoll();} + endOperation(); + } + poll.set(20, p); + } + + // Inspects the textarea, compares its state (content, selection) + // to the data in the editing variable, and updates the editor + // content or cursor if something changed. + function readInput() { + if (leaveInputAlone) return; + var changed = false, text = input.value, sr = selRange(input); + if (!sr) return false; + var changed = editing.text != text, rs = reducedSelection; + var moved = changed || sr.start != editing.start || sr.end != (rs ? editing.start : editing.end); + if (!moved && !rs) return false; + if (changed) { + shiftSelecting = reducedSelection = null; + if (options.readOnly) {updateInput = true; return "changed";} + } + + // Compute selection start and end based on start/end offsets in textarea + function computeOffset(n, startLine) { + var pos = 0; + for (;;) { + var found = text.indexOf("\n", pos); + if (found == -1 || (text.charAt(found-1) == "\r" ? found - 1 : found) >= n) + return {line: startLine, ch: n - pos}; + ++startLine; + pos = found + 1; + } + } + var from = computeOffset(sr.start, editing.from), + to = computeOffset(sr.end, editing.from); + // Here we have to take the reducedSelection hack into account, + // so that you can, for example, press shift-up at the start of + // your selection and have the right thing happen. + if (rs) { + from = sr.start == rs.anchor ? to : from; + to = shiftSelecting ? sel.to : sr.start == rs.anchor ? from : to; + if (!posLess(from, to)) { + reducedSelection = null; + sel.inverted = false; + var tmp = from; from = to; to = tmp; + } + } + + // In some cases (cursor on same line as before), we don't have + // to update the textarea content at all. + if (from.line == to.line && from.line == sel.from.line && from.line == sel.to.line && !shiftSelecting) + updateInput = false; + + // Magic mess to extract precise edited range from the changed + // string. + if (changed) { + var start = 0, end = text.length, len = Math.min(end, editing.text.length); + var c, line = editing.from, nl = -1; + while (start < len && (c = text.charAt(start)) == editing.text.charAt(start)) { + ++start; + if (c == "\n") {line++; nl = start;} + } + var ch = nl > -1 ? start - nl : start, endline = editing.to - 1, edend = editing.text.length; + for (;;) { + c = editing.text.charAt(edend); + if (c == "\n") endline--; + if (text.charAt(end) != c) {++end; ++edend; break;} + if (edend <= start || end <= start) break; + --end; --edend; + } + var nl = editing.text.lastIndexOf("\n", edend - 1), endch = nl == -1 ? edend : edend - nl - 1; + updateLines({line: line, ch: ch}, {line: endline, ch: endch}, splitLines(text.slice(start, end)), from, to); + if (line != endline || from.line != line) updateInput = true; + } + else setSelection(from, to); + + editing.text = text; editing.start = sr.start; editing.end = sr.end; + return changed ? "changed" : moved ? "moved" : false; + } + + // Set the textarea content and selection range to match the + // editor state. + function prepareInput() { + var text = []; + var from = Math.max(0, sel.from.line - 1), to = Math.min(lines.length, sel.to.line + 2); + for (var i = from; i < to; ++i) text.push(lines[i].text); + text = input.value = text.join(lineSep); + var startch = sel.from.ch, endch = sel.to.ch; + for (var i = from; i < sel.from.line; ++i) + startch += lineSep.length + lines[i].text.length; + for (var i = from; i < sel.to.line; ++i) + endch += lineSep.length + lines[i].text.length; + editing = {text: text, from: from, to: to, start: startch, end: endch}; + setSelRange(input, startch, reducedSelection ? startch : endch); + } + function focusInput() { + if (options.readOnly != "nocursor") input.focus(); + } + + function scrollCursorIntoView() { + var cursor = localCoords(sel.inverted ? sel.from : sel.to); + return scrollIntoView(cursor.x, cursor.y, cursor.x, cursor.yBot); + } + function scrollIntoView(x1, y1, x2, y2) { + var pl = paddingLeft(), pt = paddingTop(), lh = lineHeight(); + y1 += pt; y2 += pt; x1 += pl; x2 += pl; + var screen = wrapper.clientHeight, screentop = wrapper.scrollTop, scrolled = false, result = true; + if (y1 < screentop) {wrapper.scrollTop = Math.max(0, y1 - 2*lh); scrolled = true;} + else if (y2 > screentop + screen) {wrapper.scrollTop = y2 + lh - screen; scrolled = true;} + + var screenw = wrapper.clientWidth, screenleft = wrapper.scrollLeft; + if (x1 < screenleft) {wrapper.scrollLeft = Math.max(0, x1 - 10); scrolled = true;} + else if (x2 > screenw + screenleft) { + wrapper.scrollLeft = x2 + 10 - screenw; + scrolled = true; + if (x2 > code.clientWidth) result = false; + } + if (scrolled && options.onScroll) options.onScroll(instance); + return result; + } + + function visibleLines() { + var lh = lineHeight(), top = wrapper.scrollTop - paddingTop(); + return {from: Math.min(lines.length, Math.max(0, Math.floor(top / lh))), + to: Math.min(lines.length, Math.ceil((top + wrapper.clientHeight) / lh))}; + } + // Uses a set of changes plus the current scroll position to + // determine which DOM updates have to be made, and makes the + // updates. + function updateDisplay(changes) { + if (!wrapper.clientWidth) { + showingFrom = showingTo = 0; + return; + } + // First create a range of theoretically intact lines, and punch + // holes in that using the change info. + var intact = changes === true ? [] : [{from: showingFrom, to: showingTo, domStart: 0}]; + for (var i = 0, l = changes.length || 0; i < l; ++i) { + var change = changes[i], intact2 = [], diff = change.diff || 0; + for (var j = 0, l2 = intact.length; j < l2; ++j) { + var range = intact[j]; + if (change.to <= range.from) + intact2.push({from: range.from + diff, to: range.to + diff, domStart: range.domStart}); + else if (range.to <= change.from) + intact2.push(range); + else { + if (change.from > range.from) + intact2.push({from: range.from, to: change.from, domStart: range.domStart}) + if (change.to < range.to) + intact2.push({from: change.to + diff, to: range.to + diff, + domStart: range.domStart + (change.to - range.from)}); + } + } + intact = intact2; + } + + // Then, determine which lines we'd want to see, and which + // updates have to be made to get there. + var visible = visibleLines(); + var from = Math.min(showingFrom, Math.max(visible.from - 3, 0)), + to = Math.min(lines.length, Math.max(showingTo, visible.to + 3)), + updates = [], domPos = 0, domEnd = showingTo - showingFrom, pos = from, changedLines = 0; + + for (var i = 0, l = intact.length; i < l; ++i) { + var range = intact[i]; + if (range.to <= from) continue; + if (range.from >= to) break; + if (range.domStart > domPos || range.from > pos) { + updates.push({from: pos, to: range.from, domSize: range.domStart - domPos, domStart: domPos}); + changedLines += range.from - pos; + } + pos = range.to; + domPos = range.domStart + (range.to - range.from); + } + if (domPos != domEnd || pos != to) { + changedLines += Math.abs(to - pos); + updates.push({from: pos, to: to, domSize: domEnd - domPos, domStart: domPos}); + } + + if (!updates.length) return; + lineDiv.style.display = "none"; + // If more than 30% of the screen needs update, just do a full + // redraw (which is quicker than patching) + if (changedLines > (visible.to - visible.from) * .3) + refreshDisplay(from = Math.max(visible.from - 10, 0), to = Math.min(visible.to + 7, lines.length)); + // Otherwise, only update the stuff that needs updating. + else + patchDisplay(updates); + lineDiv.style.display = ""; + + // Position the mover div to align with the lines it's supposed + // to be showing (which will cover the visible display) + var different = from != showingFrom || to != showingTo || lastHeight != wrapper.clientHeight; + showingFrom = from; showingTo = to; + mover.style.top = (from * lineHeight()) + "px"; + if (different) { + lastHeight = wrapper.clientHeight; + code.style.height = (lines.length * lineHeight() + 2 * paddingTop()) + "px"; + updateGutter(); + } + + var textWidth = stringWidth(maxLine); + lineSpace.style.width = textWidth > wrapper.clientWidth ? textWidth + "px" : ""; + + // Since this is all rather error prone, it is honoured with the + // only assertion in the whole file. + if (lineDiv.childNodes.length != showingTo - showingFrom) + throw new Error("BAD PATCH! " + JSON.stringify(updates) + " size=" + (showingTo - showingFrom) + + " nodes=" + lineDiv.childNodes.length); + updateCursor(); + } + + function refreshDisplay(from, to) { + var html = [], start = {line: from, ch: 0}, inSel = posLess(sel.from, start) && !posLess(sel.to, start); + for (var i = from; i < to; ++i) { + var ch1 = null, ch2 = null; + if (inSel) { + ch1 = 0; + if (sel.to.line == i) {inSel = false; ch2 = sel.to.ch;} + } + else if (sel.from.line == i) { + if (sel.to.line == i) {ch1 = sel.from.ch; ch2 = sel.to.ch;} + else {inSel = true; ch1 = sel.from.ch;} + } + html.push(lines[i].getHTML(ch1, ch2, true)); + } + lineDiv.innerHTML = html.join(""); + } + function patchDisplay(updates) { + // Slightly different algorithm for IE (badInnerHTML), since + // there .innerHTML on PRE nodes is dumb, and discards + // whitespace. + var sfrom = sel.from.line, sto = sel.to.line, off = 0, + scratch = badInnerHTML && targetDocument.createElement("div"); + for (var i = 0, e = updates.length; i < e; ++i) { + var rec = updates[i]; + var extra = (rec.to - rec.from) - rec.domSize; + var nodeAfter = lineDiv.childNodes[rec.domStart + rec.domSize + off] || null; + if (badInnerHTML) + for (var j = Math.max(-extra, rec.domSize); j > 0; --j) + lineDiv.removeChild(nodeAfter ? nodeAfter.previousSibling : lineDiv.lastChild); + else if (extra) { + for (var j = Math.max(0, extra); j > 0; --j) + lineDiv.insertBefore(targetDocument.createElement("pre"), nodeAfter); + for (var j = Math.max(0, -extra); j > 0; --j) + lineDiv.removeChild(nodeAfter ? nodeAfter.previousSibling : lineDiv.lastChild); + } + var node = lineDiv.childNodes[rec.domStart + off], inSel = sfrom < rec.from && sto >= rec.from; + for (var j = rec.from; j < rec.to; ++j) { + var ch1 = null, ch2 = null; + if (inSel) { + ch1 = 0; + if (sto == j) {inSel = false; ch2 = sel.to.ch;} + } + else if (sfrom == j) { + if (sto == j) {ch1 = sel.from.ch; ch2 = sel.to.ch;} + else {inSel = true; ch1 = sel.from.ch;} + } + if (badInnerHTML) { + scratch.innerHTML = lines[j].getHTML(ch1, ch2, true); + lineDiv.insertBefore(scratch.firstChild, nodeAfter); + } + else { + node.innerHTML = lines[j].getHTML(ch1, ch2, false); + node.className = lines[j].className || ""; + node = node.nextSibling; + } + } + off += extra; + } + } + + function updateGutter() { + if (!options.gutter && !options.lineNumbers) return; + var hText = mover.offsetHeight, hEditor = wrapper.clientHeight; + gutter.style.height = (hText - hEditor < 2 ? hEditor : hText) + "px"; + var html = []; + for (var i = showingFrom; i < showingTo; ++i) { + var marker = lines[i].gutterMarker; + var text = options.lineNumbers ? i + options.firstLineNumber : null; + if (marker && marker.text) + text = marker.text.replace("%N%", text != null ? text : ""); + else if (text == null) + text = "\u00a0"; + html.push((marker && marker.style ? '
' : "
"), text, "
");
+      }
+      gutter.style.display = "none";
+      gutterText.innerHTML = html.join("");
+      var minwidth = String(lines.length).length, firstNode = gutterText.firstChild, val = eltText(firstNode), pad = "";
+      while (val.length + pad.length < minwidth) pad += "\u00a0";
+      if (pad) firstNode.insertBefore(targetDocument.createTextNode(pad), firstNode.firstChild);
+      gutter.style.display = "";
+      lineSpace.style.marginLeft = gutter.offsetWidth + "px";
+    }
+    function updateCursor() {
+      var head = sel.inverted ? sel.from : sel.to;
+      var x = charX(head.line, head.ch) + "px", y = (head.line - showingFrom) * lineHeight() + "px";
+      inputDiv.style.top = y;
+      if (posEq(sel.from, sel.to)) {
+        cursor.style.top = y; cursor.style.left = x;
+        cursor.style.display = "";
+      }
+      else cursor.style.display = "none";
+    }
+
+    function setSelectionUser(from, to) {
+      var sh = shiftSelecting && clipPos(shiftSelecting);
+      if (sh) {
+        if (posLess(sh, from)) from = sh;
+        else if (posLess(to, sh)) to = sh;
+      }
+      setSelection(from, to);
+    }
+    // Update the selection. Last two args are only used by
+    // updateLines, since they have to be expressed in the line
+    // numbers before the update.
+    function setSelection(from, to, oldFrom, oldTo) {
+      if (posEq(sel.from, from) && posEq(sel.to, to)) return;
+      if (posLess(to, from)) {var tmp = to; to = from; from = tmp;}
+
+      var startEq = posEq(sel.to, to), endEq = posEq(sel.from, from);
+      if (posEq(from, to)) sel.inverted = false;
+      else if (startEq && !endEq) sel.inverted = true;
+      else if (endEq && !startEq) sel.inverted = false;
+
+      // Some ugly logic used to only mark the lines that actually did
+      // see a change in selection as changed, rather than the whole
+      // selected range.
+      if (oldFrom == null) {oldFrom = sel.from.line; oldTo = sel.to.line;}
+      if (posEq(from, to)) {
+        if (!posEq(sel.from, sel.to))
+          changes.push({from: oldFrom, to: oldTo + 1});
+      }
+      else if (posEq(sel.from, sel.to)) {
+        changes.push({from: from.line, to: to.line + 1});
+      }
+      else {
+        if (!posEq(from, sel.from)) {
+          if (from.line < oldFrom)
+            changes.push({from: from.line, to: Math.min(to.line, oldFrom) + 1});
+          else
+            changes.push({from: oldFrom, to: Math.min(oldTo, from.line) + 1});
+        }
+        if (!posEq(to, sel.to)) {
+          if (to.line < oldTo)
+            changes.push({from: Math.max(oldFrom, from.line), to: oldTo + 1});
+          else
+            changes.push({from: Math.max(from.line, oldTo), to: to.line + 1});
+        }
+      }
+      sel.from = from; sel.to = to;
+      selectionChanged = true;
+    }
+    function setCursor(line, ch, user) {
+      var pos = clipPos({line: line, ch: ch || 0});
+      (user ? setSelectionUser : setSelection)(pos, pos);
+    }
+
+    function clipLine(n) {return Math.max(0, Math.min(n, lines.length-1));}
+    function clipPos(pos) {
+      if (pos.line < 0) return {line: 0, ch: 0};
+      if (pos.line >= lines.length) return {line: lines.length-1, ch: lines[lines.length-1].text.length};
+      var ch = pos.ch, linelen = lines[pos.line].text.length;
+      if (ch == null || ch > linelen) return {line: pos.line, ch: linelen};
+      else if (ch < 0) return {line: pos.line, ch: 0};
+      else return pos;
+    }
+
+    function scrollPage(down) {
+      var linesPerPage = Math.floor(wrapper.clientHeight / lineHeight()), head = sel.inverted ? sel.from : sel.to;
+      setCursor(head.line + (Math.max(linesPerPage - 1, 1) * (down ? 1 : -1)), head.ch, true);
+    }
+    function scrollEnd(top) {
+      setCursor(top ? 0 : lines.length - 1, true);
+    }
+    function selectAll() {
+      var endLine = lines.length - 1;
+      setSelection({line: 0, ch: 0}, {line: endLine, ch: lines[endLine].text.length});
+    }
+    function selectWordAt(pos) {
+      var line = lines[pos.line].text;
+      var start = pos.ch, end = pos.ch;
+      while (start > 0 && /\w/.test(line.charAt(start - 1))) --start;
+      while (end < line.length && /\w/.test(line.charAt(end))) ++end;
+      setSelectionUser({line: pos.line, ch: start}, {line: pos.line, ch: end});
+    }
+    function selectLine(line) {
+      setSelectionUser({line: line, ch: 0}, {line: line, ch: lines[line].text.length});
+    }
+    function handleEnter() {
+      replaceSelection("\n", "end");
+      if (options.enterMode != "flat")
+        indentLine(sel.from.line, options.enterMode == "keep" ? "prev" : "smart");
+    }
+    function handleTab(shift) {
+      shiftSelecting = null;
+      switch (options.tabMode) {
+      case "default":
+        return false;
+      case "indent":
+        for (var i = sel.from.line, e = sel.to.line; i <= e; ++i) indentLine(i, "smart");
+        break;
+      case "classic":
+        if (posEq(sel.from, sel.to)) {
+          if (shift) indentLine(sel.from.line, "smart");
+          else replaceSelection("\t", "end");
+          break;
+        }
+      case "shift":
+        for (var i = sel.from.line, e = sel.to.line; i <= e; ++i) indentLine(i, shift ? "subtract" : "add");
+        break;
+      }
+      return true;
+    }
+
+    function indentLine(n, how) {
+      if (how == "smart") {
+        if (!mode.indent) how = "prev";
+        else var state = getStateBefore(n);
+      }
+
+      var line = lines[n], curSpace = line.indentation(), curSpaceString = line.text.match(/^\s*/)[0], indentation;
+      if (how == "prev") {
+        if (n) indentation = lines[n-1].indentation();
+        else indentation = 0;
+      }
+      else if (how == "smart") indentation = mode.indent(state, line.text.slice(curSpaceString.length));
+      else if (how == "add") indentation = curSpace + options.indentUnit;
+      else if (how == "subtract") indentation = curSpace - options.indentUnit;
+      indentation = Math.max(0, indentation);
+      var diff = indentation - curSpace;
+
+      if (!diff) {
+        if (sel.from.line != n && sel.to.line != n) return;
+        var indentString = curSpaceString;
+      }
+      else {
+        var indentString = "", pos = 0;
+        if (options.indentWithTabs)
+          for (var i = Math.floor(indentation / tabSize); i; --i) {pos += tabSize; indentString += "\t";}
+        while (pos < indentation) {++pos; indentString += " ";}
+      }
+
+      replaceRange(indentString, {line: n, ch: 0}, {line: n, ch: curSpaceString.length});
+    }
+
+    function loadMode() {
+      mode = CodeMirror.getMode(options, options.mode);
+      for (var i = 0, l = lines.length; i < l; ++i)
+        lines[i].stateAfter = null;
+      work = [0];
+      startWorker();
+    }
+    function gutterChanged() {
+      var visible = options.gutter || options.lineNumbers;
+      gutter.style.display = visible ? "" : "none";
+      if (visible) updateGutter();
+      else lineDiv.parentNode.style.marginLeft = 0;
+    }
+
+    function markText(from, to, className) {
+      from = clipPos(from); to = clipPos(to);
+      var accum = [];
+      function add(line, from, to, className) {
+        var line = lines[line], mark = line.addMark(from, to, className);
+        mark.line = line;
+        accum.push(mark);
+      }
+      if (from.line == to.line) add(from.line, from.ch, to.ch, className);
+      else {
+        add(from.line, from.ch, null, className);
+        for (var i = from.line + 1, e = to.line; i < e; ++i)
+          add(i, 0, null, className);
+        add(to.line, 0, to.ch, className);
+      }
+      changes.push({from: from.line, to: to.line + 1});
+      return function() {
+        var start, end;
+        for (var i = 0; i < accum.length; ++i) {
+          var mark = accum[i], found = indexOf(lines, mark.line);
+          mark.line.removeMark(mark);
+          if (found > -1) {
+            if (start == null) start = found;
+            end = found;
+          }
+        }
+        if (start != null) changes.push({from: start, to: end + 1});
+      };
+    }
+
+    function addGutterMarker(line, text, className) {
+      if (typeof line == "number") line = lines[clipLine(line)];
+      line.gutterMarker = {text: text, style: className};
+      updateGutter();
+      return line;
+    }
+    function removeGutterMarker(line) {
+      if (typeof line == "number") line = lines[clipLine(line)];
+      line.gutterMarker = null;
+      updateGutter();
+    }
+    function setLineClass(line, className) {
+      if (typeof line == "number") {
+        var no = line;
+        line = lines[clipLine(line)];
+      }
+      else {
+        var no = indexOf(lines, line);
+        if (no == -1) return null;
+      }
+      if (line.className != className) {
+        line.className = className;
+        changes.push({from: no, to: no + 1});
+      }
+      return line;
+    }
+
+    function lineInfo(line) {
+      if (typeof line == "number") {
+        var n = line;
+        line = lines[line];
+        if (!line) return null;
+      }
+      else {
+        var n = indexOf(lines, line);
+        if (n == -1) return null;
+      }
+      var marker = line.gutterMarker;
+      return {line: n, text: line.text, markerText: marker && marker.text, markerClass: marker && marker.style};
+    }
+
+    function stringWidth(str) {
+      measure.innerHTML = "
x
";
+      measure.firstChild.firstChild.firstChild.nodeValue = str;
+      return measure.firstChild.firstChild.offsetWidth || 10;
+    }
+    // These are used to go from pixel positions to character
+    // positions, taking varying character widths into account.
+    function charX(line, pos) {
+      if (pos == 0) return 0;
+      measure.innerHTML = "
" + lines[line].getHTML(null, null, false, pos) + "
";
+      return measure.firstChild.firstChild.offsetWidth;
+    }
+    function charFromX(line, x) {
+      if (x <= 0) return 0;
+      var lineObj = lines[line], text = lineObj.text;
+      function getX(len) {
+        measure.innerHTML = "
" + lineObj.getHTML(null, null, false, len) + "
";
+        return measure.firstChild.firstChild.offsetWidth;
+      }
+      var from = 0, fromX = 0, to = text.length, toX;
+      // Guess a suitable upper bound for our search.
+      var estimated = Math.min(to, Math.ceil(x / stringWidth("x")));
+      for (;;) {
+        var estX = getX(estimated);
+        if (estX <= x && estimated < to) estimated = Math.min(to, Math.ceil(estimated * 1.2));
+        else {toX = estX; to = estimated; break;}
+      }
+      if (x > toX) return to;
+      // Try to guess a suitable lower bound as well.
+      estimated = Math.floor(to * 0.8); estX = getX(estimated);
+      if (estX < x) {from = estimated; fromX = estX;}
+      // Do a binary search between these bounds.
+      for (;;) {
+        if (to - from <= 1) return (toX - x > x - fromX) ? from : to;
+        var middle = Math.ceil((from + to) / 2), middleX = getX(middle);
+        if (middleX > x) {to = middle; toX = middleX;}
+        else {from = middle; fromX = middleX;}
+      }
+    }
+
+    function localCoords(pos, inLineWrap) {
+      var lh = lineHeight(), line = pos.line - (inLineWrap ? showingFrom : 0);
+      return {x: charX(pos.line, pos.ch), y: line * lh, yBot: (line + 1) * lh};
+    }
+    function pageCoords(pos) {
+      var local = localCoords(pos, true), off = eltOffset(lineSpace);
+      return {x: off.left + local.x, y: off.top + local.y, yBot: off.top + local.yBot};
+    }
+
+    function lineHeight() {
+      var nlines = lineDiv.childNodes.length;
+      if (nlines) return (lineDiv.offsetHeight / nlines) || 1;
+      measure.innerHTML = "
x
";
+      return measure.firstChild.offsetHeight || 1;
+    }
+    function paddingTop() {return lineSpace.offsetTop;}
+    function paddingLeft() {return lineSpace.offsetLeft;}
+
+    function posFromMouse(e, liberal) {
+      var offW = eltOffset(wrapper, true), x = e.e.clientX, y = e.e.clientY;
+      // This is a mess of a heuristic to try and determine whether a
+      // scroll-bar was clicked or not, and to return null if one was
+      // (and !liberal).
+      if (!liberal && (x - offW.left > wrapper.clientWidth || y - offW.top > wrapper.clientHeight))
+        return null;
+      var offL = eltOffset(lineSpace, true);
+      var line = showingFrom + Math.floor((y - offL.top) / lineHeight());
+      return clipPos({line: line, ch: charFromX(clipLine(line), x - offL.left)});
+    }
+    function onContextMenu(e) {
+      var pos = posFromMouse(e);
+      if (!pos || window.opera) return; // Opera is difficult.
+      if (posEq(sel.from, sel.to) || posLess(pos, sel.from) || !posLess(pos, sel.to))
+        setCursor(pos.line, pos.ch);
+
+      var oldCSS = input.style.cssText;
+      input.style.cssText = "position: fixed; width: 30px; height: 30px; top: " + (e.pageY() - 1) +
+        "px; left: " + (e.pageX() - 1) + "px; z-index: 1000; background: white; " +
+        "border-width: 0; outline: none; overflow: hidden;";
+      var val = input.value = getSelection();
+      focusInput();
+      setSelRange(input, 0, input.value.length);
+      leaveInputAlone = true;
+      function rehide() {
+        if (input.value != val) operation(replaceSelection)(input.value, "end");
+        input.style.cssText = oldCSS;
+        leaveInputAlone = false;
+        prepareInput();
+        slowPoll();
+      }
+      
+      if (gecko) {
+        e.stop()
+        var mouseup = connect(window, "mouseup", function() {
+          mouseup();
+          setTimeout(rehide, 20);
+        }, true);
+      }
+      else {
+        setTimeout(rehide, 50);
+      }
+    }
+
+    // Cursor-blinking
+    function restartBlink() {
+      clearInterval(blinker);
+      var on = true;
+      cursor.style.visibility = "";
+      blinker = setInterval(function() {
+        cursor.style.visibility = (on = !on) ? "" : "hidden";
+      }, 650);
+    }
+
+    var matching = {"(": ")>", ")": "(<", "[": "]>", "]": "[<", "{": "}>", "}": "{<"};
+    function matchBrackets(autoclear) {
+      var head = sel.inverted ? sel.from : sel.to, line = lines[head.line], pos = head.ch - 1;
+      var match = (pos >= 0 && matching[line.text.charAt(pos)]) || matching[line.text.charAt(++pos)];
+      if (!match) return;
+      var ch = match.charAt(0), forward = match.charAt(1) == ">", d = forward ? 1 : -1, st = line.styles;
+      for (var off = pos + 1, i = 0, e = st.length; i < e; i+=2)
+        if ((off -= st[i].length) <= 0) {var style = st[i+1]; break;}
+
+      var stack = [line.text.charAt(pos)], re = /[(){}[\]]/;
+      function scan(line, from, to) {
+        if (!line.text) return;
+        var st = line.styles, pos = forward ? 0 : line.text.length - 1, cur;
+        for (var i = forward ? 0 : st.length - 2, e = forward ? st.length : -2; i != e; i += 2*d) {
+          var text = st[i];
+          if (st[i+1] != null && st[i+1] != style) {pos += d * text.length; continue;}
+          for (var j = forward ? 0 : text.length - 1, te = forward ? text.length : -1; j != te; j += d, pos+=d) {
+            if (pos >= from && pos < to && re.test(cur = text.charAt(j))) {
+              var match = matching[cur];
+              if (match.charAt(1) == ">" == forward) stack.push(cur);
+              else if (stack.pop() != match.charAt(0)) return {pos: pos, match: false};
+              else if (!stack.length) return {pos: pos, match: true};
+            }
+          }
+        }
+      }
+      for (var i = head.line, e = forward ? Math.min(i + 50, lines.length) : Math.max(-1, i - 50); i != e; i+=d) {
+        var line = lines[i], first = i == head.line;
+        var found = scan(line, first && forward ? pos + 1 : 0, first && !forward ? pos : line.text.length);
+        if (found) {
+          var style = found.match ? "CodeMirror-matchingbracket" : "CodeMirror-nonmatchingbracket";
+          var one = markText({line: head.line, ch: pos}, {line: head.line, ch: pos+1}, style),
+              two = markText({line: i, ch: found.pos}, {line: i, ch: found.pos + 1}, style);
+          var clear = operation(function(){one(); two();});
+          if (autoclear) setTimeout(clear, 800);
+          else bracketHighlighted = clear;
+          break;
+        }
+      }
+    }
+
+    // Finds the line to start with when starting a parse. Tries to
+    // find a line with a stateAfter, so that it can start with a
+    // valid state. If that fails, it returns the line with the
+    // smallest indentation, which tends to need the least context to
+    // parse correctly.
+    function findStartLine(n) {
+      var minindent, minline;
+      for (var search = n, lim = n - 40; search > lim; --search) {
+        if (search == 0) return 0;
+        var line = lines[search-1];
+        if (line.stateAfter) return search;
+        var indented = line.indentation();
+        if (minline == null || minindent > indented) {
+          minline = search;
+          minindent = indented;
+        }
+      }
+      return minline;
+    }
+    function getStateBefore(n) {
+      var start = findStartLine(n), state = start && lines[start-1].stateAfter;
+      if (!state) state = startState(mode);
+      else state = copyState(mode, state);
+      for (var i = start; i < n; ++i) {
+        var line = lines[i];
+        line.highlight(mode, state);
+        line.stateAfter = copyState(mode, state);
+      }
+      if (!lines[n].stateAfter) work.push(n);
+      return state;
+    }
+    function highlightWorker() {
+      var end = +new Date + options.workTime;
+      var didSomething = false;
+      while (work.length) {
+        if (!lines[showingFrom].stateAfter) var task = showingFrom;
+        else var task = work.pop();
+        if (task >= lines.length) continue;
+        didSomething = true;
+        var start = findStartLine(task), state = start && lines[start-1].stateAfter;
+        if (state) state = copyState(mode, state);
+        else state = startState(mode);
+
+        for (var i = start, l = lines.length; i < l; ++i) {
+          var line = lines[i], hadState = line.stateAfter;
+          if (+new Date > end) {
+            work.push(i);
+            startWorker(options.workDelay);
+            changes.push({from: task, to: i});
+            return;
+          }
+          var changed = line.highlight(mode, state);
+          line.stateAfter = copyState(mode, state);
+          if (hadState && !changed && line.text) break;
+        }
+        changes.push({from: task, to: i});
+      }
+      if (didSomething && options.onHighlightComplete)
+        options.onHighlightComplete(instance);
+    }
+    function startWorker(time) {
+      if (!work.length) return;
+      highlight.set(time, operation(highlightWorker));
+    }
+
+    // Operations are used to wrap changes in such a way that each
+    // change won't have to update the cursor and display (which would
+    // be awkward, slow, and error-prone), but instead updates are
+    // batched and then all combined and executed at once.
+    function startOperation() {
+      updateInput = null; changes = []; textChanged = selectionChanged = false;
+    }
+    function endOperation() {
+      var reScroll = false;
+      if (selectionChanged) reScroll = !scrollCursorIntoView();
+      if (changes.length) updateDisplay(changes);
+      else if (selectionChanged) updateCursor();
+      if (reScroll) scrollCursorIntoView();
+      if (selectionChanged) restartBlink();
+
+      // updateInput can be set to a boolean value to force/prevent an
+      // update.
+      if (!leaveInputAlone && (updateInput === true || (updateInput !== false && selectionChanged)))
+        prepareInput();
+
+      if (selectionChanged && options.matchBrackets)
+        setTimeout(operation(function() {
+          if (bracketHighlighted) {bracketHighlighted(); bracketHighlighted = null;}
+          matchBrackets(false);
+        }), 20);
+      var tc = textChanged; // textChanged can be reset by cursoractivity callback
+      if (selectionChanged && options.onCursorActivity)
+        options.onCursorActivity(instance);
+      if (tc && options.onChange && instance)
+        options.onChange(instance, tc);
+    }
+    var nestedOperation = 0;
+    function operation(f) {
+      return function() {
+        if (!nestedOperation++) startOperation();
+        try {var result = f.apply(this, arguments);}
+        finally {if (!--nestedOperation) endOperation();}
+        return result;
+      };
+    }
+
+    function SearchCursor(query, pos, caseFold) {
+      this.atOccurrence = false;
+      if (caseFold == null) caseFold = typeof query == "string" && query == query.toLowerCase();
+
+      if (pos && typeof pos == "object") pos = clipPos(pos);
+      else pos = {line: 0, ch: 0};
+      this.pos = {from: pos, to: pos};
+
+      // The matches method is filled in based on the type of query.
+      // It takes a position and a direction, and returns an object
+      // describing the next occurrence of the query, or null if no
+      // more matches were found.
+      if (typeof query != "string") // Regexp match
+        this.matches = function(reverse, pos) {
+          if (reverse) {
+            var line = lines[pos.line].text.slice(0, pos.ch), match = line.match(query), start = 0;
+            while (match) {
+              var ind = line.indexOf(match[0]);
+              start += ind;
+              line = line.slice(ind + 1);
+              var newmatch = line.match(query);
+              if (newmatch) match = newmatch;
+              else break;
+            }
+          }
+          else {
+            var line = lines[pos.line].text.slice(pos.ch), match = line.match(query),
+                start = match && pos.ch + line.indexOf(match[0]);
+          }
+          if (match)
+            return {from: {line: pos.line, ch: start},
+                    to: {line: pos.line, ch: start + match[0].length},
+                    match: match};
+        };
+      else { // String query
+        if (caseFold) query = query.toLowerCase();
+        var fold = caseFold ? function(str){return str.toLowerCase();} : function(str){return str;};
+        var target = query.split("\n");
+        // Different methods for single-line and multi-line queries
+        if (target.length == 1)
+          this.matches = function(reverse, pos) {
+            var line = fold(lines[pos.line].text), len = query.length, match;
+            if (reverse ? (pos.ch >= len && (match = line.lastIndexOf(query, pos.ch - len)) != -1)
+                        : (match = line.indexOf(query, pos.ch)) != -1)
+              return {from: {line: pos.line, ch: match},
+                      to: {line: pos.line, ch: match + len}};
+          };
+        else
+          this.matches = function(reverse, pos) {
+            var ln = pos.line, idx = (reverse ? target.length - 1 : 0), match = target[idx], line = fold(lines[ln].text);
+            var offsetA = (reverse ? line.indexOf(match) + match.length : line.lastIndexOf(match));
+            if (reverse ? offsetA >= pos.ch || offsetA != match.length
+                        : offsetA <= pos.ch || offsetA != line.length - match.length)
+              return;
+            for (;;) {
+              if (reverse ? !ln : ln == lines.length - 1) return;
+              line = fold(lines[ln += reverse ? -1 : 1].text);
+              match = target[reverse ? --idx : ++idx];
+              if (idx > 0 && idx < target.length - 1) {
+                if (line != match) return;
+                else continue;
+              }
+              var offsetB = (reverse ? line.lastIndexOf(match) : line.indexOf(match) + match.length);
+              if (reverse ? offsetB != line.length - match.length : offsetB != match.length)
+                return;
+              var start = {line: pos.line, ch: offsetA}, end = {line: ln, ch: offsetB};
+              return {from: reverse ? end : start, to: reverse ? start : end};
+            }
+          };
+      }
+    }
+
+    SearchCursor.prototype = {
+      findNext: function() {return this.find(false);},
+      findPrevious: function() {return this.find(true);},
+
+      find: function(reverse) {
+        var self = this, pos = clipPos(reverse ? this.pos.from : this.pos.to);
+        function savePosAndFail(line) {
+          var pos = {line: line, ch: 0};
+          self.pos = {from: pos, to: pos};
+          self.atOccurrence = false;
+          return false;
+        }
+
+        for (;;) {
+          if (this.pos = this.matches(reverse, pos)) {
+            this.atOccurrence = true;
+            return this.pos.match || true;
+          }
+          if (reverse) {
+            if (!pos.line) return savePosAndFail(0);
+            pos = {line: pos.line-1, ch: lines[pos.line-1].text.length};
+          }
+          else {
+            if (pos.line == lines.length - 1) return savePosAndFail(lines.length);
+            pos = {line: pos.line+1, ch: 0};
+          }
+        }
+      },
+
+      from: function() {if (this.atOccurrence) return copyPos(this.pos.from);},
+      to: function() {if (this.atOccurrence) return copyPos(this.pos.to);}
+    };
+
+    return instance;
+  } // (end of function CodeMirror)
+
+  // The default configuration options.
+  CodeMirror.defaults = {
+    value: "",
+    mode: null,
+    indentUnit: 2,
+    indentWithTabs: false,
+    tabMode: "classic",
+    enterMode: "indent",
+    electricChars: true,
+    onKeyEvent: null,
+    lineNumbers: false,
+    gutter: false,
+    firstLineNumber: 1,
+    readOnly: false,
+    onChange: null,
+    onCursorActivity: null,
+    onGutterClick: null,
+    onHighlightComplete: null,
+    onFocus: null, onBlur: null, onScroll: null,
+    matchBrackets: false,
+    workTime: 100,
+    workDelay: 200,
+    undoDepth: 40,
+    tabindex: null,
+    document: window.document
+  };
+
+  // Known modes, by name and by MIME
+  var modes = {}, mimeModes = {};
+  CodeMirror.defineMode = function(name, mode) {
+    if (!CodeMirror.defaults.mode && name != "null") CodeMirror.defaults.mode = name;
+    modes[name] = mode;
+  };
+  CodeMirror.defineMIME = function(mime, spec) {
+    mimeModes[mime] = spec;
+  };
+  CodeMirror.getMode = function(options, spec) {
+    if (typeof spec == "string" && mimeModes.hasOwnProperty(spec))
+      spec = mimeModes[spec];
+    if (typeof spec == "string")
+      var mname = spec, config = {};
+    else if (spec != null)
+      var mname = spec.name, config = spec;
+    var mfactory = modes[mname];
+    if (!mfactory) {
+      if (window.console) console.warn("No mode " + mname + " found, falling back to plain text.");
+      return CodeMirror.getMode(options, "text/plain");
+    }
+    return mfactory(options, config || {});
+  }
+  CodeMirror.listModes = function() {
+    var list = [];
+    for (var m in modes)
+      if (modes.propertyIsEnumerable(m)) list.push(m);
+    return list;
+  };
+  CodeMirror.listMIMEs = function() {
+    var list = [];
+    for (var m in mimeModes)
+      if (mimeModes.propertyIsEnumerable(m)) list.push(m);
+    return list;
+  };
+
+  CodeMirror.fromTextArea = function(textarea, options) {
+    if (!options) options = {};
+    options.value = textarea.value;
+    if (!options.tabindex && textarea.tabindex)
+      options.tabindex = textarea.tabindex;
+
+    function save() {textarea.value = instance.getValue();}
+    if (textarea.form) {
+      // Deplorable hack to make the submit method do the right thing.
+      var rmSubmit = connect(textarea.form, "submit", save, true);
+      if (typeof textarea.form.submit == "function") {
+        var realSubmit = textarea.form.submit;
+        function wrappedSubmit() {
+          save();
+          textarea.form.submit = realSubmit;
+          textarea.form.submit();
+          textarea.form.submit = wrappedSubmit;
+        }
+        textarea.form.submit = wrappedSubmit;
+      }
+    }
+
+    textarea.style.display = "none";
+    var instance = CodeMirror(function(node) {
+      textarea.parentNode.insertBefore(node, textarea.nextSibling);
+    }, options);
+    instance.save = save;
+    instance.toTextArea = function() {
+      save();
+      textarea.parentNode.removeChild(instance.getWrapperElement());
+      textarea.style.display = "";
+      if (textarea.form) {
+        rmSubmit();
+        if (typeof textarea.form.submit == "function")
+          textarea.form.submit = realSubmit;
+      }
+    };
+    return instance;
+  };
+
+  // Utility functions for working with state. Exported because modes
+  // sometimes need to do this.
+  function copyState(mode, state) {
+    if (state === true) return state;
+    if (mode.copyState) return mode.copyState(state);
+    var nstate = {};
+    for (var n in state) {
+      var val = state[n];
+      if (val instanceof Array) val = val.concat([]);
+      nstate[n] = val;
+    }
+    return nstate;
+  }
+  CodeMirror.startState = startState;
+  function startState(mode, a1, a2) {
+    return mode.startState ? mode.startState(a1, a2) : true;
+  }
+  CodeMirror.copyState = copyState;
+
+  // The character stream used by a mode's parser.
+  function StringStream(string) {
+    this.pos = this.start = 0;
+    this.string = string;
+  }
+  StringStream.prototype = {
+    eol: function() {return this.pos >= this.string.length;},
+    sol: function() {return this.pos == 0;},
+    peek: function() {return this.string.charAt(this.pos);},
+    next: function() {
+      if (this.pos < 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 && (match.test ? match.test(ch) : match(ch));
+      if (ok) {++this.pos; return ch;}
+    },
+    eatWhile: function(match) {
+      var start = this.start;
+      while (this.eat(match)){}
+      return this.pos > start;
+    },
+    eatSpace: function() {
+      var start = this.pos;
+      while (/[\s\u00a0]/.test(this.string.charAt(this.pos))) ++this.pos;
+      return this.pos > start;
+    },
+    skipToEnd: function() {this.pos = this.string.length;},
+    skipTo: function(ch) {
+      var found = this.string.indexOf(ch, this.pos);
+      if (found > -1) {this.pos = found; return true;}
+    },
+    backUp: function(n) {this.pos -= n;},
+    column: function() {return countColumn(this.string, this.start);},
+    indentation: function() {return countColumn(this.string);},
+    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 += pattern.length;
+          return true;
+        }
+      }
+      else {
+        var match = this.string.slice(this.pos).match(pattern);
+        if (match && consume !== false) this.pos += match[0].length;
+        return match;
+      }
+    },
+    current: function(){return this.string.slice(this.start, this.pos);}
+  };
+
+  // Line objects. These hold state related to a line, including
+  // highlighting info (the styles array).
+  function Line(text, styles) {
+    this.styles = styles || [text, null];
+    this.stateAfter = null;
+    this.text = text;
+    this.marked = this.gutterMarker = this.className = null;
+  }
+  Line.prototype = {
+    // Replace a piece of a line, keeping the styles around it intact.
+    replace: function(from, to, text) {
+      var st = [], mk = this.marked;
+      copyStyles(0, from, this.styles, st);
+      if (text) st.push(text, null);
+      copyStyles(to, this.text.length, this.styles, st);
+      this.styles = st;
+      this.text = this.text.slice(0, from) + text + this.text.slice(to);
+      this.stateAfter = null;
+      if (mk) {
+        var diff = text.length - (to - from), end = this.text.length;
+        function fix(n) {return n <= Math.min(to, to + diff) ? n : n + diff;}
+        for (var i = 0; i < mk.length; ++i) {
+          var mark = mk[i], del = false;
+          if (mark.from >= end) del = true;
+          else {mark.from = fix(mark.from); if (mark.to != null) mark.to = fix(mark.to);}
+          if (del || mark.from >= mark.to) {mk.splice(i, 1); i--;}
+        }
+      }
+    },
+    // Split a line in two, again keeping styles intact.
+    split: function(pos, textBefore) {
+      var st = [textBefore, null];
+      copyStyles(pos, this.text.length, this.styles, st);
+      return new Line(textBefore + this.text.slice(pos), st);
+    },
+    addMark: function(from, to, style) {
+      var mk = this.marked, mark = {from: from, to: to, style: style};
+      if (this.marked == null) this.marked = [];
+      this.marked.push(mark);
+      this.marked.sort(function(a, b){return a.from - b.from;});
+      return mark;
+    },
+    removeMark: function(mark) {
+      var mk = this.marked;
+      if (!mk) return;
+      for (var i = 0; i < mk.length; ++i)
+        if (mk[i] == mark) {mk.splice(i, 1); break;}
+    },
+    // Run the given mode's parser over a line, update the styles
+    // array, which contains alternating fragments of text and CSS
+    // classes.
+    highlight: function(mode, state) {
+      var stream = new StringStream(this.text), st = this.styles, pos = 0;
+      var changed = false, curWord = st[0], prevWord;
+      if (this.text == "" && mode.blankLine) mode.blankLine(state);
+      while (!stream.eol()) {
+        var style = mode.token(stream, state);
+        var substr = this.text.slice(stream.start, stream.pos);
+        stream.start = stream.pos;
+        if (pos && st[pos-1] == style)
+          st[pos-2] += substr;
+        else if (substr) {
+          if (!changed && (st[pos+1] != style || (pos && st[pos-2] != prevWord))) changed = true;
+          st[pos++] = substr; st[pos++] = style;
+          prevWord = curWord; curWord = st[pos];
+        }
+        // Give up when line is ridiculously long
+        if (stream.pos > 5000) {
+          st[pos++] = this.text.slice(stream.pos); st[pos++] = null;
+          break;
+        }
+      }
+      if (st.length != pos) {st.length = pos; changed = true;}
+      if (pos && st[pos-2] != prevWord) changed = true;
+      return changed;
+    },
+    // Fetch the parser token for a given character. Useful for hacks
+    // that want to inspect the mode state (say, for completion).
+    getTokenAt: function(mode, state, ch) {
+      var txt = this.text, stream = new StringStream(txt);
+      while (stream.pos < ch && !stream.eol()) {
+        stream.start = stream.pos;
+        var style = mode.token(stream, state);
+      }
+      return {start: stream.start,
+              end: stream.pos,
+              string: stream.current(),
+              className: style || null,
+              state: state};
+    },
+    indentation: function() {return countColumn(this.text);},
+    // Produces an HTML fragment for the line, taking selection,
+    // marking, and highlighting into account.
+    getHTML: function(sfrom, sto, includePre, endAt) {
+      var html = [];
+      if (includePre)
+        html.push(this.className ? '
': "
");
+      function span(text, style) {
+        if (!text) return;
+        if (style) html.push('', htmlEscape(text), "");
+        else html.push(htmlEscape(text));
+      }
+      var st = this.styles, allText = this.text, marked = this.marked;
+      if (sfrom == sto) sfrom = null;
+      var len = allText.length;
+      if (endAt != null) len = Math.min(endAt, len);
+
+      if (!allText && endAt == null)
+        span(" ", sfrom != null && sto == null ? "CodeMirror-selected" : null);
+      else if (!marked && sfrom == null)
+        for (var i = 0, ch = 0; ch < len; i+=2) {
+          var str = st[i], l = str.length;
+          if (ch + l > len) str = str.slice(0, len - ch);
+          ch += l;
+          span(str, st[i+1]);
+        }
+      else {
+        var pos = 0, i = 0, text = "", style, sg = 0;
+        var markpos = -1, mark = null;
+        function nextMark() {
+          if (marked) {
+            markpos += 1;
+            mark = (markpos < marked.length) ? marked[markpos] : null;
+          }
+        }
+        nextMark();
+        while (pos < len) {
+          var upto = len;
+          var extraStyle = "";
+          if (sfrom != null) {
+            if (sfrom > pos) upto = sfrom;
+            else if (sto == null || sto > pos) {
+              extraStyle = " CodeMirror-selected";
+              if (sto != null) upto = Math.min(upto, sto);
+            }
+          }
+          while (mark && mark.to != null && mark.to <= pos) nextMark();
+          if (mark) {
+            if (mark.from > pos) upto = Math.min(upto, mark.from);
+            else {
+              extraStyle += " " + mark.style;
+              if (mark.to != null) upto = Math.min(upto, mark.to);
+            }
+          }
+          for (;;) {
+            var end = pos + text.length;
+            var apliedStyle = style;
+            if (extraStyle) apliedStyle = style ? style + extraStyle : extraStyle;
+            span(end > upto ? text.slice(0, upto - pos) : text, apliedStyle);
+            if (end >= upto) {text = text.slice(upto - pos); pos = upto; break;}
+            pos = end;
+            text = st[i++]; style = st[i++];
+          }
+        }
+        if (sfrom != null && sto == null) span(" ", "CodeMirror-selected");
+      }
+      if (includePre) html.push("
");
+      return html.join("");
+    }
+  };
+  // Utility used by replace and split above
+  function copyStyles(from, to, source, dest) {
+    for (var i = 0, pos = 0, state = 0; pos < to; i+=2) {
+      var part = source[i], end = pos + part.length;
+      if (state == 0) {
+        if (end > from) dest.push(part.slice(from - pos, Math.min(part.length, to - pos)), source[i+1]);
+        if (end >= from) state = 1;
+      }
+      else if (state == 1) {
+        if (end > to) dest.push(part.slice(0, to - pos), source[i+1]);
+        else dest.push(part, source[i+1]);
+      }
+      pos = end;
+    }
+  }
+
+  // The history object 'chunks' changes that are made close together
+  // and at almost the same time into bigger undoable units.
+  function History() {
+    this.time = 0;
+    this.done = []; this.undone = [];
+  }
+  History.prototype = {
+    addChange: function(start, added, old) {
+      this.undone.length = 0;
+      var time = +new Date, last = this.done[this.done.length - 1];
+      if (time - this.time > 400 || !last ||
+          last.start > start + added || last.start + last.added < start - last.added + last.old.length)
+        this.done.push({start: start, added: added, old: old});
+      else {
+        var oldoff = 0;
+        if (start < last.start) {
+          for (var i = last.start - start - 1; i >= 0; --i)
+            last.old.unshift(old[i]);
+          last.added += last.start - start;
+          last.start = start;
+        }
+        else if (last.start < start) {
+          oldoff = start - last.start;
+          added += oldoff;
+        }
+        for (var i = last.added - oldoff, e = old.length; i < e; ++i)
+          last.old.push(old[i]);
+        if (last.added < added) last.added = added;
+      }
+      this.time = time;
+    }
+  };
+
+  // Event stopping compatibility wrapper.
+  function stopEvent() {
+    if (this.preventDefault) {this.preventDefault(); this.stopPropagation();}
+    else {this.returnValue = false; this.cancelBubble = true;}
+  }
+  // Ensure an event has a stop method.
+  function addStop(event) {
+    if (!event.stop) event.stop = stopEvent;
+    return event;
+  }
+
+  // Event wrapper, exposing the few operations we need.
+  function Event(orig) {this.e = orig;}
+  Event.prototype = {
+    stop: function() {stopEvent.call(this.e);},
+    target: function() {return this.e.target || this.e.srcElement;},
+    button: function() {
+      if (this.e.which) return this.e.which;
+      else if (this.e.button & 1) return 1;
+      else if (this.e.button & 2) return 3;
+      else if (this.e.button & 4) return 2;
+    },
+    pageX: function() {
+      if (this.e.pageX != null) return this.e.pageX;
+      var doc = this.target().ownerDocument;
+      return this.e.clientX + doc.body.scrollLeft + doc.documentElement.scrollLeft;
+    },
+    pageY: function() {
+      if (this.e.pageY != null) return this.e.pageY;
+      var doc = this.target().ownerDocument;
+      return this.e.clientY + doc.body.scrollTop + doc.documentElement.scrollTop;
+    }
+  };
+
+  // Event handler registration. If disconnect is true, it'll return a
+  // function that unregisters the handler.
+  function connect(node, type, handler, disconnect) {
+    function wrapHandler(event) {handler(new Event(event || window.event));}
+    if (typeof node.addEventListener == "function") {
+      node.addEventListener(type, wrapHandler, false);
+      if (disconnect) return function() {node.removeEventListener(type, wrapHandler, false);};
+    }
+    else {
+      node.attachEvent("on" + type, wrapHandler);
+      if (disconnect) return function() {node.detachEvent("on" + type, wrapHandler);};
+    }
+  }
+
+  function Delayed() {this.id = null;}
+  Delayed.prototype = {set: function(ms, f) {clearTimeout(this.id); this.id = setTimeout(f, ms);}};
+
+  // Some IE versions don't preserve whitespace when setting the
+  // innerHTML of a PRE tag.
+  var badInnerHTML = (function() {
+    var pre = document.createElement("pre");
+    pre.innerHTML = " "; return !pre.innerHTML;
+  })();
+
+  var gecko = /gecko\/\d{7}/i.test(navigator.userAgent);
+
+  var lineSep = "\n";
+  // Feature-detect whether newlines in textareas are converted to \r\n
+  (function () {
+    var te = document.createElement("textarea");
+    te.value = "foo\nbar";
+    if (te.value.indexOf("\r") > -1) lineSep = "\r\n";
+  }());
+
+  var tabSize = 8;
+  var mac = /Mac/.test(navigator.platform);
+  var movementKeys = {};
+  for (var i = 35; i <= 40; ++i)
+    movementKeys[i] = movementKeys["c" + i] = true;
+
+  // Counts the column offset in a string, taking tabs into account.
+  // Used mostly to find indentation.
+  function countColumn(string, end) {
+    if (end == null) {
+      end = string.search(/[^\s\u00a0]/);
+      if (end == -1) end = string.length;
+    }
+    for (var i = 0, n = 0; i < end; ++i) {
+      if (string.charAt(i) == "\t") n += tabSize - (n % tabSize);
+      else ++n;
+    }
+    return n;
+  }
+
+  // Find the position of an element by following the offsetParent chain.
+  // If screen==true, it returns screen (rather than page) coordinates.
+  function eltOffset(node, screen) {
+    var doc = node.ownerDocument.body;
+    var x = 0, y = 0, hitDoc = false;
+    for (var n = node; n; n = n.offsetParent) {
+      x += n.offsetLeft; y += n.offsetTop;
+      // Fixed-position elements don't have the document in their offset chain
+      if (n == doc) hitDoc = true;
+    }
+    var e = screen && hitDoc ? null : doc;
+    for (var n = node.parentNode; n != e; n = n.parentNode)
+      if (n.scrollLeft != null) { x -= n.scrollLeft; y -= n.scrollTop;}
+    return {left: x, top: y};
+  }
+  // Get a node's text content.
+  function eltText(node) {
+    return node.textContent || node.innerText || node.nodeValue || "";
+  }
+
+  // Operations on {line, ch} objects.
+  function posEq(a, b) {return a.line == b.line && a.ch == b.ch;}
+  function posLess(a, b) {return a.line < b.line || (a.line == b.line && a.ch < b.ch);}
+  function copyPos(x) {return {line: x.line, ch: x.ch};}
+
+  function htmlEscape(str) {
+    return str.replace(/[<>&]/g, function(str) {
+      return str == "&" ? "&" : str == "<" ? "<" : ">";
+    });
+  }
+
+  // Used to position the cursor after an undo/redo by finding the
+  // last edited character.
+  function editEnd(from, to) {
+    if (!to) return from ? from.length : 0;
+    if (!from) return to.length;
+    for (var i = from.length, j = to.length; i >= 0 && j >= 0; --i, --j)
+      if (from.charAt(i) != to.charAt(j)) break;
+    return j + 1;
+  }
+
+  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;
+  }
+
+  // See if "".split is the broken IE version, if so, provide an
+  // alternative way to split lines.
+  if ("\n\nb".split(/\n/).length != 3)
+    var splitLines = function(string) {
+      var pos = 0, nl, result = [];
+      while ((nl = string.indexOf("\n", pos)) > -1) {
+        result.push(string.slice(pos, string.charAt(nl-1) == "\r" ? nl - 1 : nl));
+        pos = nl + 1;
+      }
+      result.push(string.slice(pos));
+      return result;
+    };
+  else
+    var splitLines = function(string){return string.split(/\r?\n/);};
+
+  // Sane model of finding and setting the selection in a textarea
+  if (window.getSelection) {
+    var selRange = function(te) {
+      try {return {start: te.selectionStart, end: te.selectionEnd};}
+      catch(e) {return null;}
+    };
+    var setSelRange = function(te, start, end) {
+      try {te.setSelectionRange(start, end);}
+      catch(e) {} // Fails on Firefox when textarea isn't part of the document
+    };
+  }
+  // IE model. Don't ask.
+  else {
+    var selRange = function(te) {
+      try {var range = te.ownerDocument.selection.createRange();}
+      catch(e) {return null;}
+      if (!range || range.parentElement() != te) return null;
+      var val = te.value, len = val.length, localRange = te.createTextRange();
+      localRange.moveToBookmark(range.getBookmark());
+      var endRange = te.createTextRange();
+      endRange.collapse(false);
+
+      if (localRange.compareEndPoints("StartToEnd", endRange) > -1)
+        return {start: len, end: len};
+
+      var start = -localRange.moveStart("character", -len);
+      for (var i = val.indexOf("\r"); i > -1 && i < start; i = val.indexOf("\r", i+1), start++) {}
+
+      if (localRange.compareEndPoints("EndToEnd", endRange) > -1)
+        return {start: start, end: len};
+
+      var end = -localRange.moveEnd("character", -len);
+      for (var i = val.indexOf("\r"); i > -1 && i < end; i = val.indexOf("\r", i+1), end++) {}
+      return {start: start, end: end};
+    };
+    var setSelRange = function(te, start, end) {
+      var range = te.createTextRange();
+      range.collapse(true);
+      var endrange = range.duplicate();
+      var newlines = 0, txt = te.value;
+      for (var pos = txt.indexOf("\n"); pos > -1 && pos < start; pos = txt.indexOf("\n", pos + 1))
+        ++newlines;
+      range.move("character", start - newlines);
+      for (; pos > -1 && pos < end; pos = txt.indexOf("\n", pos + 1))
+        ++newlines;
+      endrange.move("character", end - newlines);
+      range.setEndPoint("EndToEnd", endrange);
+      range.select();
+    };
+  }
+
+  CodeMirror.defineMode("null", function() {
+    return {token: function(stream) {stream.skipToEnd();}};
+  });
+  CodeMirror.defineMIME("text/plain", "null");
+
+  return CodeMirror;
+})();
diff --git a/js/codemirror/lib/overlay.js b/js/codemirror/lib/overlay.js
new file mode 100644
index 0000000000..c4cdf9fc84
--- /dev/null
+++ b/js/codemirror/lib/overlay.js
@@ -0,0 +1,51 @@
+// Utility function that allows modes to be combined. The mode given
+// as the base argument takes care of most of the normal mode
+// functionality, but a second (typically simple) mode is used, which
+// can override the style of text. Both modes get to parse all of the
+// text, but when both assign a non-null style to a piece of code, the
+// overlay wins, unless the combine argument was true, in which case
+// the styles are combined.
+
+CodeMirror.overlayParser = function(base, overlay, combine) {
+  return {
+    startState: function() {
+      return {
+        base: CodeMirror.startState(base),
+        overlay: CodeMirror.startState(overlay),
+        basePos: 0, baseCur: null,
+        overlayPos: 0, overlayCur: null
+      };
+    },
+    copyState: function(state) {
+      return {
+        base: CodeMirror.copyState(base, state.base),
+        overlay: CodeMirror.copyState(overlay, state.overlay),
+        basePos: state.basePos, baseCur: null,
+        overlayPos: state.overlayPos, overlayCur: null
+      };
+    },
+
+    token: function(stream, state) {
+      if (stream.start == state.basePos) {
+        state.baseCur = base.token(stream, state.base);
+        state.basePos = stream.pos;
+      }
+      if (stream.start == state.overlayPos) {
+        stream.pos = stream.start;
+        state.overlayCur = overlay.token(stream, state.overlay);
+        state.overlayPos = stream.pos;
+      }
+      stream.pos = Math.min(state.basePos, state.overlayPos);
+      if (stream.eol()) state.basePos = state.overlayPos = 0;
+
+      if (state.overlayCur == null) return state.baseCur;
+      if (state.baseCur != null && combine) return state.baseCur + " " + state.overlayCur;
+      else return state.overlayCur;
+    },
+    
+    indent: function(state, textAfter) {
+      return base.indent(state.base, textAfter);
+    },
+    electricChars: base.electricChars
+  };
+};
diff --git a/js/codemirror/manual.html b/js/codemirror/manual.html
new file mode 100644
index 0000000000..25e6225b89
--- /dev/null
+++ b/js/codemirror/manual.html
@@ -0,0 +1,797 @@
+
+
+  
+    CodeMirror: User Manual
+    
+    
+    
+  
+  
+
+
{ } CodeMirror

+
+
+/* User manual and
+   reference guide */
+

+
+

+
+    
Overview

+
+    
CodeMirror is a code-editor component that can be embedded in
+    Web pages. It provides only the editor component, no
+    accompanying buttons
+    (see CodeMirror
+    UI for a drop-in button bar), auto-completion, or other IDE
+    functionality. It does provide a rich API on top of which such
+    functionality can be straightforwardly implemented.

+
+    
CodeMirror works with language-specific modes. Modes are
+    JavaScript programs that help color (and optionally indent) text
+    written in a given language. The distribution comes with a few
+    modes (see the mode/ directory), and it isn't hard
+    to write new ones for other languages.

+
+    
Basic Usage

+
+    
The easiest way to use CodeMirror is to simply load the script
+    and style sheet found under lib/ in the distribution,
+    plus the script and style sheet for the mode(s) you want to use.
+    (See also the compresion helper.) For
+    example:

+
+    
<script src="lib/codemirror.js"></script>
+<link rel="stylesheet" href="lib/codemirror.css">
+<script src="mode/javascript/javascript.js"></script>
+<link rel="stylesheet" href="mode/javascript/javascript.css">

+
+    
Having done this, an editor instance can be created like
+    this:

+
+    
var myCodeMirror = CodeMirror(document.body);

+
+    
The editor will be appended to the document body, will start
+    empty, and will use the mode that we loaded. To have more control
+    over the new editor, a configuration object can be passed
+    to CodeMirror as a second argument:

+
+    
var myCodeMirror = CodeMirror(document.body, {
+  value: "function myScript(){return 100;}\n",
+  mode:  "javascript"
+});

+
+    
This will initialize the editor with a piece of code already in
+    it, and explicitly tell it to use the JavaScript mode (which is
+    useful when multiple modes are loaded).
+    See below for a full discussion of the
+    configuration options that CodeMirror accepts.

+
+    
In cases where you don't want to append the editor to an
+    element, and need more control over the way it is inserted, the
+    first argument to the CodeMirror function can also
+    be a function that, when given a DOM element, inserts it into the
+    document somewhere. This could be used to, for example, replace a
+    textarea with a real editor:

+
+    
var myCodeMirror = CodeMirror(function(elt) {
+  myTextArea.parentNode.replaceChild(elt, myTextArea);
+}, {value: myTextArea.value});

+
+    
However, for this use case, which is a common way to use
+    CodeMirror, the library provides a much more powerful
+    shortcut:

+
+    
var myCodeMirror = CodeMirror.fromTextArea(myTextArea);

+
+    
This will, among other things, ensure that the textarea's value
+    is updated when the form (if it is part of a form) is submitted.
+    See the API reference for a full
+    description of this method.

+
+    
Configuration

+
+    
Both the CodeMirror function and
+    its fromTextArea method take as second (optional)
+    argument an object containing configuration options. Any option
+    not supplied like this will be taken
+    from CodeMirror.defaults, an object containing the
+    default options. You can update this object to change the defaults
+    on your page.

+
+    
Options are not checked in any way, so setting bogus option
+    values is bound to lead to odd errors.

+
+    
Note: CodeMirror
+    2 does not support
+    line-wrapping. I would have very much liked to support it, but it
+    combines extremely poorly with the way the editor is
+    implemented.

+
+    
These are the supported options:

+
+    

+      
value (string)

+      
The starting value of the editor.

+
+      
mode (string or object)

+      
The mode to use. When not given, this will default to the
+      first mode that was loaded. It may be a string, which either
+      simply names the mode or is
+      a MIME type
+      associated with the mode. Alternatively, it may be an object
+      containing configuration options for the mode, with
+      a name property that names the mode (for
+      example {name: "javascript", json: true}). The demo
+      pages for each mode contain information about what configuration
+      parameters the mode supports. You can ask CodeMirror which modes
+      and MIME types are loaded with
+      the CodeMirror.listModes
+      and CodeMirror.listMIMEs functions.

+
+      
indentUnit (integer)

+      
How many spaces a block (whatever that means in the edited
+      language) should be indented. The default is 2.

+
+      
indentWithTabs (boolean)

+      
Whether, when indenting, the first N*8 spaces should be
+      replaced by N tabs. Default is false.

+
+      
tabMode (string)

+      
Determines what happens when the user presses the tab key.
+      Must be one of the following:
+        

+          
"classic" (the default)

+          
When nothing is selected, insert a tab. Otherwise,
+          behave like the "shift" mode. (When shift is
+          held, this behaves like the "indent" mode.)

+          
"shift"

+          
Indent all selected lines by
+          one indentUnit.
+          If shift was held while pressing tab, un-indent all selected
+          lines one unit.

+          
"indent"

+          
Indent the line the 'correctly', based on its syntactic
+          context. Only works if the
+          mode supports it.

+          
"default"

+          
Do not capture tab presses, let the browser apply its
+          default behaviour (which usually means it skips to the next
+          control).

+        

+
+      
enterMode (string)

+      
Determines whether and how new lines are indented when the
+      enter key is pressed. The following modes are supported:
+        

+          
"indent" (the default)

+          
Use the mode's indentation rules to give the new line
+          the correct indentation.

+          
"keep"

+          
Indent the line the same as the previous line.

+          
"flat"

+          
Do not indent the new line.

+        

+
+      
electricChars (boolean)

+      
Configures whether the editor should re-indent the current
+      line when a character is typed that might change its proper
+      indentation (only works if the mode supports indentation).
+      Default is true.

+
+      
lineNumbers (boolean)

+      
Whether to show line numbers to the left of the editor.

+
+      
firstLineNumber (integer)

+      
At which number to start counting lines. Default is 1.

+
+      
gutter (boolean)

+      
Can be used to force a 'gutter' (empty space on the left of
+      the editor) to be shown even when no line numbers are active.
+      This is useful for setting markers.

+
+      
readOnly (boolean)

+      
This disables editing of the editor content by the user.
+      (Changes through API functions will still be possible.) If you
+      also want to disable the cursor, use "nocursor" as
+      a value for this option, instead of true.

+
+      
onChange (function)

+      
When given, this function will be called every time the
+      content of the editor is changed. It will be given the editor
+      instance as only argument.

+
+      
onCursorActivity (function)

+      
Like onChange, but will also be called when the
+      cursor moves without any changes being made.

+
+      
onGutterClick (function)

+      
When given, will be called whenever the editor gutter (the
+      line-number area) is clicked. Will be given the editor instance
+      as first argument, and the (zero-based) number of the line that
+      was clicked as second argument.

+
+      
onFocus, onBlur (function)

+      
The given functions will be called whenever the editor is
+      focused or unfocused.

+
+      
onScroll (function)

+      
When given, will be called whenever the editor is
+      scrolled.

+
+      
onHighlightComplete (function)

+      
Whenever the editor's content has been fully highlighted,
+      this function (if given) will be called. It'll be given a single
+      argument, the editor instance.

+
+      
matchBrackets (boolean)

+      
Determines whether brackets are matched whenever the cursor
+      is moved next to a bracket.

+
+      
workTime, workDelay (number)

+      
Highlighting is done by a pseudo background-thread that will
+      work for workTime milliseconds, and then use
+      timeout to sleep for workDelay milliseconds. The
+      defaults are 200 and 300, you can change these options to make
+      the highlighting more or less aggressive.

+
+      
undoDepth (integer)

+      
The maximum number of undo levels that the editor stores.
+      Defaults to 40.

+
+      
tabindex (integer)

+      
The tab
+      index to assign to the editor. If not given, no tab index
+      will be assigned.

+
+      
document (DOM document)

+      
Use this if you want to display the editor in another DOM.
+      By default it will use the global document
+      object.

+
+      
onKeyEvent (function)

+      
This provides a rather low-level hook into CodeMirror's key
+      handling. If provided, this function will be called on
+      every keydown, keyup,
+      and keypress event that CodeMirror captures. It
+      will be passed two arguments, the editor instance and the key
+      event. This key event is pretty much the raw key event, except
+      that a stop() method is always added to it. You
+      could feed it to, for example, jQuery.Event to
+      further normalize it.
This function can inspect the key
+      event, and handle it if it wants to. It may return true to tell
+      CodeMirror to ignore the event. Be wary that, on some browsers,
+      stopping a keydown does not stop
+      the keypress from firing, whereas on others it
+      does. If you respond to an event, you should probably inspect
+      its type property and only do something when it
+      is keydown (or keypress for actions
+      that need character data).

+    

+
+    
Customized Styling

+
+    
Up to a certain extent, CodeMirror's look can be changed by
+    modifying style sheet files. The style sheets supplied by modes
+    simply provide the colors for that mode, and can be adapted in a
+    very straightforward way. To style the editor itself, it is
+    possible to alter or override the styles defined
+    in codemirror.css.

+
+    
Some care must be taken there, since a lot of the rules in this
+    file are necessary to have CodeMirror function properly. Adjusting
+    colors should be safe, of course, and with some care a lot of
+    other things can be changed as well. The CSS classes defined in
+    this file serve the following roles:

+
+    

+      
CodeMirror

+      
The outer element of the editor. This determines whether the
+      editor scrolls (overflow: auto + fixed height). Can
+      also be used to set styles that should hold for everything
+      inside the editor, or to set a background.

+
+      
CodeMirror-focused

+      
Whenever the editor is focused, the top element gets this
+      class. This is used to hide the cursor and give the selection a
+      different color when the editor is not focused.

+
+      
CodeMirror-gutter

+      
Use this for giving a background or a border to the editor
+      gutter. Don't set any padding here,
+      use CodeMirror-gutter-text for that. By default,
+      the gutter is 'fluid', meaning it will adjust its width to the
+      maximum line number or line marker width. You can also set a
+      fixed width if you want.

+
+      
CodeMirror-gutter-text

+      
Used to style the actual line numbers. For the numbers to
+      line up, you'll want this style to use exactly the same font and
+      vertical padding as normal edited text, as per
+      the CodeMirror-lines class.

+
+      
CodeMirror-lines

+      
The visible lines. If this has vertical
+      padding, CodeMirror-gutter should have the same
+      padding.

+
+      
CodeMirror-cursor

+      
The cursor is a block element that is absolutely positioned.
+      You can make it look whichever way you want.

+
+      
CodeMirror-selected

+      
The selection is represented by span elements
+      with this class.

+
+      
CodeMirror-matchingbracket,
+        CodeMirror-nonmatchingbracket

+      
These are used to style matched (or unmatched) brackets.

+    

+
+    
The actual lines, as well as the cursor, are represented
+    by pre elements. By default no text styling (such as
+    bold) that might change line height is applied. If you do want
+    such effects, you'll have to give CodeMirror pre a
+    fixed height. Also, you must still take care that character width
+    is constant.

+
+    
If your page's style sheets do funky things to
+    all div or pre elements (you probably
+    shouldn't do that), you'll have to define rules to cancel these
+    effects out again for elements under the CodeMirror
+    class.

+
+    
Programming API

+
+    
A lot of CodeMirror features are only available through its API.
+    This has the disadvantage that you need to do work to enable them,
+    and the advantage that CodeMirror will fit seamlessly into your
+    application.

+
+    
Whenever points in the document are represented, the API uses
+    objects with line and ch properties.
+    Both are zero-based. CodeMirror makes sure to 'clip' any positions
+    passed by client code so that they fit inside the document, so you
+    shouldn't worry too much about sanitizing your coordinates. If you
+    give ch a value of null, or don't
+    specify it, it will be replaced with the length of the specified
+    line.

+
+    

+      
getValue() → string

+      
Get the current editor content.

+      
setValue(string)

+      
Set the editor content.

+
+      
getSelection() → string

+      
Get the currently selected code.

+      
replaceSelection(string)

+      
Replace the selection with the given string.

+
+      
focus()

+      
Give the editor focus.

+
+      
setOption(option, value)

+      
Change the configuration of the editor. option
+      should the name of an option,
+      and value should be a valid value for that
+      option.

+      
getOption(option) → value

+      
Retrieves the current value of the given option for this
+      editor instance.

+
+      
cursorCoords(start) → object

+      
Returns an {x, y, yBot} object containing the
+      coordinates of the cursor relative to the top-left corner of the
+      page. yBot is the coordinate of the bottom of the
+      cursor. start is a boolean indicating whether you
+      want the start or the end of the selection.

+      
charCoords(pos) → object

+      
Like cursorCoords, but returns the position of
+      an arbitrary characters. pos should be
+      a {line, ch} object.

+      
coordsChar(object) → pos

+      
Given an {x, y} object (in page coordinates),
+      returns the {line, ch} position that corresponds to
+      it.

+
+      
undo()

+      
Undo one edit (if any undo events are stored).

+      
redo()

+      
Redo one undone edit.

+      
historySize() → object

+      
Returns an object with {undo, redo} properties,
+      both of which hold integers, indicating the amount of stored
+      undo and redo operations.

+
+      
indentLine(line)

+      
Reset the given line's indentation to the indentation
+      prescribed by the mode.

+
+      
getSearchCursor(query, start, caseFold) → cursor

+      
Used to implement search/replace
+      functionality. query can be a regular expression or
+      a string (only strings will match across lines—if they contain
+      newlines). start provides the starting position of
+      the search. It can be a {line, ch} object, or can
+      be left off to default to the start of the
+      document. caseFold is only relevant when matching a
+      string. It will cause the search to be case-insensitive. A
+      search cursor has the following methods:
+        

+          
findNext(), findPrevious() → boolean

+          
Search forward or backward from the current position.
+          The return value indicates whether a match was found. If
+          matching a regular expression, the return value will be the
+          array returned by the match method, in case you
+          want to extract matched groups.

+          
from(), to() → object

+          
These are only valid when the last call
+          to findNext or findPrevious did
+          not return false. They will return {line, ch}
+          objects pointing at the start and end of the match.

+        

+
+      
getTokenAt(pos) → object

+      
Retrieves information about the token the current mode found
+      at the given position (a {line, ch} object). The
+      returned object has the following properties:
+      

+        
start
The character (on the given line) at which the token starts.

+        
end
The character at which the token ends.

+        
string
The token's string.

+        
className
The class the mode assigned
+        to the token. (Can be null when no class was assigned.)

+      

+
+      
markText(from, to, className) → function

+      
Can be used to mark a range of text with a specific CSS
+      class name. from and to should
+      be {line, ch} objects. The method will return a
+      function that can be called to remove the marking.

+
+      
setMarker(line, text, className) → lineHandle

+      
Add a gutter marker for the given line. Gutter markers are
+      shown in the line-number area (instead of the number for this
+      line). Both text and className are
+      optional. Setting text to a Unicode character like
+      ● tends to give a nice effect. To put a picture in the gutter,
+      set text to a space and className to
+      something that sets a background image. If you
+      specify text, the given text (which may contain
+      HTML) will, by default, replace the line number for that line.
+      If this is not what you want, you can include the
+      string %N% in the text, which will be replaced by
+      the line number.

+      
clearMarker(line)

+      
Clears a marker created
+      with setMarker. line can be either a
+      number or a handle returned by setMarker (since a
+      number may now refer to a different line if something was added
+      or deleted).

+      
setLineClass(line, className) → lineHandle

+      
Set a CSS class name for the given line. line
+      can be a number or a line handle (as returned
+      by setMarker or this function).
+      Pass null to clear the class for a line.

+
+      
lineInfo(line) → object

+      
Returns the line number, text content, and marker status of
+      the given line, which can be either a number or a handle
+      returned by setMarker. The returned object has the
+      structure {line, text, markerText, markerClass}.

+
+      
addWidget(pos, node, scrollIntoView)

+      
Puts node, which should be an absolutely
+      positioned DOM node, into the editor, positioned right below the
+      given {line, ch} position.
+      When scrollIntoView is true, the editor will ensure
+      that the entire node is visible (if possible). To remove the
+      widget again, simply use DOM methods (move it somewhere else, or
+      call removeChild on its parent).

+
+      
matchBrackets()

+      
Force matching-bracket-highlighting to happen.

+
+      
lineCount() → number

+      
Get the number of lines in the editor.

+
+      
getCursor(start) → object

+      
start is a boolean indicating whether the start
+      or the end of the selection must be retrieved. If it is not
+      given, the current cursor pos, i.e. the side of the selection
+      that would move if you pressed an arrow key, is chosen.
+      A {line, ch} object will be returned.

+      
somethingSelected() → boolean

+      
Return true if any text is selected.

+      
setCursor(pos)

+      
Set the cursor position. You can either pass a
+      single {line, ch} object, or the line and the
+      character as two separate parameters.

+      
setSelection(start, end)

+      
Set the selection range. start
+      and end should be {line, ch} objects.

+
+      
getLine(n) → string

+      
Get the content of line n.

+      
setLine(n, text)

+      
Set the content of line n.

+      
removeLine(n)

+      
Remove the given line from the document.

+
+      
getRange(from, to) → string
+      
Get the text between the given points in the editor, which
+      should be {line, ch} objects.

+      
replaceRange(string, from, to)

+      
Replace the part of the document between from
+      and to with the given string. from
+      and to must be {line, ch}
+      objects. to can be left off to simply insert the
+      string at position from.

+    

+
+    
The following are more low-level methods:

+
+    

+      
operation(func) → result

+      
CodeMirror internally buffers changes and only updates its
+      DOM structure after it has finished performing some operation.
+      If you need to perform a lot of operations on a CodeMirror
+      instance, you can call this method with a function argument. It
+      will call the function, buffering up all changes, and only doing
+      the expensive update after the function returns. This can be a
+      lot faster. The return value from this method will be the return
+      value of your function.

+
+      
refresh()

+      
If your code does something to change the size of the editor
+      element (window resizes are already listened for), or unhides
+      it, you should probably follow up by calling this method to
+      ensure CodeMirror is still looking as intended.

+
+      
getInputField() → textarea

+      
Returns the hiden textarea used to read input.

+      
getWrapperElement() → node

+      
Returns the DOM node that represents the editor. Remove this
+      from your tree to delete an editor instance.

+    

+
+    
Finally, the CodeMirror object
+    itself has a method fromTextArea. This takes a
+    textarea DOM node as first argument and an optional configuration
+    object as second. It will replace the textarea with a CodeMirror
+    instance, and wire up the form of that textarea (if any) to make
+    sure the editor contents are put into the textarea when the form
+    is submitted. A CodeMirror instance created this way has two
+    additional methods:

+
+    

+      
save()

+      
Copy the content of the editor into the textarea.

+
+      
toTextArea()

+      
Remove the editor, and restore the original textarea (with
+      the editor's current content).

+    

+
+    
Writing CodeMirror Modes

+
+    
Modes typically consist of a JavaScript file and a CSS file.
+    The CSS file (see, for
+    example javascript.css)
+    defines the classes that will be used to style the syntactic
+    elements of the code, and the script contains the logic to
+    actually assign these classes to the right pieces of text.

+
+    
You'll usually want to use some kind of prefix for your CSS
+    classes, so that they are unlikely to clash with other classes,
+    both those used by other modes and those defined by the page in
+    which CodeMirror is embedded.

+
+    
The mode script should
+    call CodeMirror.defineMode to register itself with
+    CodeMirror. This function takes two arguments. The first should be
+    the name of the mode, for which you should use a lowercase string,
+    preferably one that is also the name of the files that define the
+    mode (i.e. "xml" is defined xml.js). The
+    second argument should be a function that, given a CodeMirror
+    configuration object (the thing passed to
+    the CodeMirror function) and a mode configuration
+    object (as in the mode
+    option), returns a mode object.

+
+    
Typically, you should use this second argument
+    to defineMode as your module scope function (modes
+    should not leak anything into the global scope!), i.e. write your
+    whole mode inside this function.

+
+    
The main responsibility of a mode script is parsing
+    the content of the editor. Depending on the language and the
+    amount of functionality desired, this can be done in really easy
+    or extremely complicated ways. Some parsers can be stateless,
+    meaning that they look at one element (token) of the code
+    at a time, with no memory of what came before. Most, however, will
+    need to remember something. This is done by using a state
+    object, which is an object that can be mutated every time a
+    new token is read.

+
+    
Modes that use a state must define
+    a startState method on their mode object. This is a
+    function of no arguments that produces a state object to be used
+    at the start of a document.

+
+    
The most important part of a mode object is
+    its token(stream, state) method. All modes must
+    define this method. It should read one token from the stream it is
+    given as an argument, optionally update its state, and return a
+    CSS class string, or null for tokens that do not have
+    to be styled.

+
+    
By default, blank lines are simply skipped when
+    tokenizing a document. For languages that have significant blank
+    lines, you can define a blankLine(state) method on
+    your mode that will get called whenever a blank line is passed
+    over, so that it can update the parser state.

+
+    
The stream object encapsulates a line of code
+    (tokens may never span lines) and our current position in that
+    line. It has the following API:

+
+    

+      
eol() → boolean

+      
Returns true only if the stream is at the end of the
+      line.

+      
sol() → boolean

+      
Returns true only if the stream is at the start of the
+      line.

+
+      
peek() → character

+      
Returns the next character in the stream without advancing
+      it. Will return undefined at the end of the
+      line.

+      
next() → character

+      
Returns the next character in the stream and advances it.
+      Also returns undefined when no more characters are
+      available.

+
+      
eat(match) → character

+      
match can be a character, a regular expression,
+      or a function that takes a character and returns a boolean. If
+      the next character in the stream 'matches' the given argument,
+      it is consumed and returned. Otherwise, undefined
+      is returned.

+      
eatWhile(match) → boolean

+      
Repeatedly calls eat with the given argument,
+      until it fails. Returns true if any characters were eaten.

+      
eatSpace() → boolean

+      
Shortcut for eatWhile when matching
+      white-space.

+      
skipToEnd()

+      
Moves the position to the end of the line.

+      
skipTo(ch) → boolean

+      
Skips to the next occurrence of the given character, if
+      found. Returns true if the character was found.

+      
match(pattern, consume, caseFold) → boolean

+      
Act like a
+      multi-character eat—if consume is true
+      or not given—or a look-ahead that doesn't update the stream
+      position—if it is false. pattern can be either a
+      string or a regular expression starting with ^.
+      When it is a string, caseFold can be set to true to
+      make the match case-insensitive. When successfully matching a
+      regular expression, the returned value will be the array
+      returned by match, in case you need to extract
+      matched groups.

+
+      
backUp(n)

+      
Backs up the stream n characters. Backing it up
+      further than the start of the current token will cause things to
+      break, so be careful.

+      
column() → integer

+      
Returns the column (taking into account tabs) at which the
+      current token starts. Can be used to find out whether a token
+      starts a new line.

+      
indentation() → integer

+      
Tells you how far the current line has been indented, in
+      spaces. Corrects for tab characters.

+
+      
current() → string

+      
Get the string between the start of the current token and
+      the current stream position.

+    

+
+    
Because state object are mutated, and CodeMirror
+    needs to keep valid versions of a state around so that it can
+    restart a parse at any line, copies must be made of state objects.
+    The default algorithm used is that a new state object is created,
+    which gets all the properties of the old object. Any properties
+    which hold arrays get a copy of these arrays (since arrays tend to
+    be used as mutable stacks). When this is not correct, for example
+    because a mode mutates non-array properties of its state object, a
+    mode object should define a copyState method,
+    which is given a state and should return a safe copy of that
+    state.

+
+    
If you want your mode to provide smart indentation
+    (see entermode
+    and tabMode when they
+    have a value of "indent"), you must define
+    an indent(state, textAfter) method on your mode
+    object.

+
+    
The indentation method should inspect the given state object,
+    and optionally the textAfter string, which contains
+    the text on the line that is being indented, and return an
+    integer, the amount of spaces to indent. It should usually take
+    the indentUnit
+    option into account.

+
+    
Finally, a mode may define
+    an electricChars property, which should hold a string
+    containing all the characters that should trigger the behaviour
+    described for
+    the electricChars
+    option.

+
+    
So, to summarize, a mode must provide
+    a token method, and it may
+    provide startState, copyState,
+    and indent methods. For an example of a trivial mode,
+    see the diff mode, for a more
+    involved example, see
+    the JavaScript
+    mode.

+
+    
Sometimes, it is useful for modes to nest—to have one
+    mode delegate work to another mode. An example of this kind of
+    mode is the mixed-mode HTML
+    mode. To implement such nesting, it is usually necessary to
+    create mode objects and copy states yourself. To create a mode
+    object, there are CodeMirror.getMode(options,
+    parserConfig), where the first argument is a configuration
+    object as passed to the mode constructor function, and the second
+    argument is a mode specification as in
+    the mode option. To copy a
+    state object, call CodeMirror.copyState(mode, state),
+    where mode is the mode that created the given
+    state.

+
+    
To make indentation work properly in a nested parser, it is
+    advisable to give the startState method of modes that
+    are intended to be nested an optional argument that provides the
+    base indentation for the block of code. The JavaScript and CSS
+    parser do this, for example, to allow JavaScript and CSS code
+    inside the mixed-mode HTML mode to be properly indented.

+
+    
Finally, it is possible to associate your mode, or a certain
+    configuration of your mode, with
+    a MIME type. For
+    example, the JavaScript mode associates itself
+    with text/javascript, and its JSON variant
+    with application/json. To do this,
+    call CodeMirror.defineMIME(mime, modeSpec),
+    where modeSpec can be a string or object specifying a
+    mode, as in the mode
+    option.

+
+

+
+    
Contents

+
+    
+
+

+
+
 

+
+
+
+  
+
diff --git a/js/codemirror/mode/clike/clike.css b/js/codemirror/mode/clike/clike.css
new file mode 100644
index 0000000000..052010f9db
--- /dev/null
+++ b/js/codemirror/mode/clike/clike.css
@@ -0,0 +1,7 @@
+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;}
+span.c-like-annotation {color: #666;}
diff --git a/js/codemirror/mode/clike/clike.js b/js/codemirror/mode/clike/clike.js
new file mode 100644
index 0000000000..73f418e707
--- /dev/null
+++ b/js/codemirror/mode/clike/clike.js
@@ -0,0 +1,187 @@
+CodeMirror.defineMode("clike", function(config, parserConfig) {
+  var indentUnit = config.indentUnit, keywords = parserConfig.keywords,
+      cpp = parserConfig.useCPP, multiLineStrings = parserConfig.multiLineStrings,
+      $vars = parserConfig.$vars, atAnnotations = parserConfig.atAnnotations;
+  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 (atAnnotations && ch == "@") {
+        stream.eatWhile(/[\w\$_]/);
+        return ret("annotation", "c-like-annotation");
+    }
+    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 == "}" || ctx.type == "top") 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",
+    atAnnotations: true,
+    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")
+  });
+}());
diff --git a/js/codemirror/mode/clike/index.html b/js/codemirror/mode/clike/index.html
new file mode 100644
index 0000000000..0836535d28
--- /dev/null
+++ b/js/codemirror/mode/clike/index.html
@@ -0,0 +1,101 @@
+
+
+  
+    CodeMirror 2: C-like mode
+    
+    
+    
+    
+    
+    
+  
+  
+    
CodeMirror 2: C-like mode

+
+

+
+    
+
+    
Simple mode that tries to handle C-like languages as well as it
+    can. Takes two configuration parameters: keywords, an
+    object whose property names are the keywords in the language,
+    and useCPP, which determines whether C preprocessor
+    directives are recognized.

+
+    
MIME types defined: text/x-csrc
+    (C code), text/x-c++src (C++
+    code), text/x-java (Java code).

+  
+
diff --git a/js/codemirror/mode/css/css.css b/js/codemirror/mode/css/css.css
new file mode 100644
index 0000000000..02d40ecb2b
--- /dev/null
+++ b/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;}
diff --git a/js/codemirror/mode/css/css.js b/js/codemirror/mode/css/css.js
new file mode 100644
index 0000000000..5faad7b2fc
--- /dev/null
+++ b/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");
diff --git a/js/codemirror/mode/css/index.html b/js/codemirror/mode/css/index.html
new file mode 100644
index 0000000000..ad895610f2
--- /dev/null
+++ b/js/codemirror/mode/css/index.html
@@ -0,0 +1,56 @@
+
+
+  
+    CodeMirror 2: CSS mode
+    
+    
+    
+    
+    
+    
+  
+  
+    
CodeMirror 2: CSS mode

+    

+    
+
+    
MIME types defined: text/css.

+
+  
+
diff --git a/js/codemirror/mode/diff/diff.css b/js/codemirror/mode/diff/diff.css
new file mode 100644
index 0000000000..60c1379ed9
--- /dev/null
+++ b/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;}
diff --git a/js/codemirror/mode/diff/diff.js b/js/codemirror/mode/diff/diff.js
new file mode 100644
index 0000000000..619d74e2af
--- /dev/null
+++ b/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");
diff --git a/js/codemirror/mode/diff/index.html b/js/codemirror/mode/diff/index.html
new file mode 100644
index 0000000000..2748f2fa8c
--- /dev/null
+++ b/js/codemirror/mode/diff/index.html
@@ -0,0 +1,99 @@
+
+
+  
+    CodeMirror 2: Diff mode
+    
+    
+    
+    
+    
+    
+  
+  
+    
CodeMirror 2: Diff mode

+    

+    
+
+    
MIME types defined: text/x-diff.

+
+  
+
diff --git a/js/codemirror/mode/haskell/haskell.css b/js/codemirror/mode/haskell/haskell.css
new file mode 100644
index 0000000000..41f9155563
--- /dev/null
+++ b/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;}
diff --git a/js/codemirror/mode/haskell/haskell.js b/js/codemirror/mode/haskell/haskell.js
new file mode 100644
index 0000000000..759ff602c9
--- /dev/null
+++ b/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()) {
+        var 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");
diff --git a/js/codemirror/mode/haskell/index.html b/js/codemirror/mode/haskell/index.html
new file mode 100644
index 0000000000..0bf34d5703
--- /dev/null
+++ b/js/codemirror/mode/haskell/index.html
@@ -0,0 +1,59 @@
+
+
+  
+    CodeMirror 2: Haskell mode
+    
+    
+    
+    
+    
+    
+  
+  
+    
CodeMirror 2: Haskell mode

+
+

+
+    
+
+    
MIME types defined: text/x-haskell.

+  
+
diff --git a/js/codemirror/mode/htmlmixed/htmlmixed.js b/js/codemirror/mode/htmlmixed/htmlmixed.js
new file mode 100644
index 0000000000..1de5c9ee81
--- /dev/null
+++ b/js/codemirror/mode/htmlmixed/htmlmixed.js
@@ -0,0 +1,74 @@
+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 maybeBackup(stream, pat, style) {
+    var cur = stream.current();
+    var close = cur.search(pat);
+    if (close > -1) stream.backUp(cur.length - close);
+    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 maybeBackup(stream, /<\/\s*script\s*>/,
+                       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 maybeBackup(stream, /<\/\s*style\s*>/,
+                       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");
diff --git a/js/codemirror/mode/htmlmixed/index.html b/js/codemirror/mode/htmlmixed/index.html
new file mode 100644
index 0000000000..c661c98d54
--- /dev/null
+++ b/js/codemirror/mode/htmlmixed/index.html
@@ -0,0 +1,54 @@
+
+
+  
+    CodeMirror 2: HTML mixed mode
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  
+  
+    
CodeMirror 2: HTML mixed mode

+    

+    
+
+    
The HTML mixed mode depends on the XML, JavaScript, and CSS modes.

+
+    
MIME types defined: text/html
+    (redefined, only takes effect if you load this parser after the
+    XML parser).

+
+  
+
diff --git a/js/codemirror/mode/javascript/index.html b/js/codemirror/mode/javascript/index.html
new file mode 100644
index 0000000000..7b528e041d
--- /dev/null
+++ b/js/codemirror/mode/javascript/index.html
@@ -0,0 +1,78 @@
+
+
+  
+    CodeMirror 2: JavaScript mode
+    
+    
+    
+    
+    
+    
+  
+  
+    
CodeMirror 2: JavaScript mode

+
+

+
+    
+
+    
JavaScript mode supports a single configuration
+    option, json, which will set the mode to expect JSON
+    data rather than a JavaScript program.

+
+    
MIME types defined: text/javascript, application/json.

+  
+
diff --git a/js/codemirror/mode/javascript/javascript.css b/js/codemirror/mode/javascript/javascript.css
new file mode 100644
index 0000000000..84fb1dfd4f
--- /dev/null
+++ b/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;}
diff --git a/js/codemirror/mode/javascript/javascript.js b/js/codemirror/mode/javascript/javascript.js
new file mode 100644
index 0000000000..0652165911
--- /dev/null
+++ b/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});
diff --git a/js/codemirror/mode/php/index.html b/js/codemirror/mode/php/index.html
new file mode 100644
index 0000000000..020e248982
--- /dev/null
+++ b/js/codemirror/mode/php/index.html
@@ -0,0 +1,52 @@
+
+
+  
+    CodeMirror 2: PHP mode
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  
+  
+    
CodeMirror 2: PHP mode

+
+

+
+    
+
+    
Simple HTML/PHP mode based on
+    the C-like mode. Depends on XML,
+    JavaScript, CSS, and C-like modes.

+
+    
MIME types defined: application/x-httpd-php.

+  
+
diff --git a/js/codemirror/mode/php/php.js b/js/codemirror/mode/php/php.js
new file mode 100644
index 0000000000..a23538f6b8
--- /dev/null
+++ b/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");
diff --git a/js/codemirror/mode/plsql/index.html b/js/codemirror/mode/plsql/index.html
new file mode 100644
index 0000000000..b554160bec
--- /dev/null
+++ b/js/codemirror/mode/plsql/index.html
@@ -0,0 +1,63 @@
+
+
+  
+    CodeMirror 2: Oracle PL/SQL mode
+    
+    
+    
+    
+    
+    
+  
+  
+    
CodeMirror 2: Oracle PL/SQL mode

+
+

+
+    
+
+    

+        Simple mode that handles Oracle PL/SQL language (and Oracle SQL, of course).
+    

+
+    
MIME type defined: text/x-plsql
+    (PLSQL code)
+
diff --git a/js/codemirror/mode/plsql/plsql.css b/js/codemirror/mode/plsql/plsql.css
new file mode 100644
index 0000000000..77e8ab9b86
--- /dev/null
+++ b/js/codemirror/mode/plsql/plsql.css
@@ -0,0 +1,33 @@
+span.plsql-keyword {
+    color: blue;
+}
+span.plsql-var {
+    color: red;
+}
+span.plsql-comment {
+    color: #AA7700;
+}
+span.plsql-string {
+    color: green;
+}
+span.plsql-operator {
+    color: blue;
+}
+span.plsql-word {
+    color: black;
+}
+span.plsql-function {
+    color: darkorange;
+}
+span.plsql-sqlplus {
+    color: darkorange;
+}
+span.plsql-type {
+    color: purple;
+}
+span.plsql-separator {
+    color: #666666;
+}
+span.plsql-number {
+    color: darkcyan;
+}
diff --git a/js/codemirror/mode/plsql/plsql.js b/js/codemirror/mode/plsql/plsql.js
new file mode 100644
index 0000000000..5e25944cae
--- /dev/null
+++ b/js/codemirror/mode/plsql/plsql.js
@@ -0,0 +1,218 @@
+CodeMirror.defineMode("plsql", function(config, parserConfig) {
+  var indentUnit       = config.indentUnit,
+      keywords         = parserConfig.keywords,
+      functions        = parserConfig.functions,
+      types            = parserConfig.types,
+      sqlplus          = parserConfig.sqlplus,
+      multiLineStrings = parserConfig.multiLineStrings;
+  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();
+    // start of string?
+    if (ch == '"' || ch == "'")
+      return chain(stream, state, tokenString(ch));
+    // is it one of the special signs []{}().,;? Seperator?
+    else if (/[\[\]{}\(\),;\.]/.test(ch))
+      return ret(ch);
+    // start of a number value?
+    else if (/\d/.test(ch)) {
+      stream.eatWhile(/[\w\.]/)
+      return ret("number", "plsql-number");
+    }
+    // multi line comment or simple operator?
+    else if (ch == "/") {
+      if (stream.eat("*")) {
+        return chain(stream, state, tokenComment);
+      }
+      else {
+        stream.eatWhile(isOperatorChar);
+        return ret("operator", "plsql-operator");
+      }
+    }
+    // single line comment or simple operator?
+    else if (ch == "-") {
+      if (stream.eat("-")) {
+        stream.skipToEnd();
+        return ret("comment", "plsql-comment");
+      }
+      else {
+        stream.eatWhile(isOperatorChar);
+        return ret("operator", "plsql-operator");
+      }
+    }
+    // pl/sql variable?
+    else if (ch == "@" || ch == "$") {
+      stream.eatWhile(/[\w\d\$_]/);
+      return ret("word", "plsql-var");
+    }
+    // is it a operator?
+    else if (isOperatorChar.test(ch)) {
+      stream.eatWhile(isOperatorChar);
+      return ret("operator", "plsql-operator");
+    }
+    else {
+      // get the whole word
+      stream.eatWhile(/[\w\$_]/);
+      // is it one of the listed keywords?
+      if (keywords && keywords.propertyIsEnumerable(stream.current().toLowerCase())) return ret("keyword", "plsql-keyword");
+      // is it one of the listed functions?
+      if (functions && functions.propertyIsEnumerable(stream.current().toLowerCase())) return ret("keyword", "plsql-function");
+      // is it one of the listed types?
+      if (types && types.propertyIsEnumerable(stream.current().toLowerCase())) return ret("keyword", "plsql-type");
+      // is it one of the listed sqlplus keywords?
+      if (sqlplus && sqlplus.propertyIsEnumerable(stream.current().toLowerCase())) return ret("keyword", "plsql-sqlplus");
+      // default: just a "word"
+      return ret("word", "plsql-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", "plsql-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", "plsql-comment");
+  }
+
+  // Interface
+
+  return {
+    startState: function(basecolumn) {
+      return {
+        tokenize: tokenBase,
+        indented: 0,
+        startOfLine: true
+      };
+    },
+
+    token: function(stream, state) {
+      if (stream.eatSpace()) return null;
+      var style = state.tokenize(stream, state);
+      return style;
+    }
+  };
+});
+
+(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 = "abort accept access add all alter and any array arraylen as asc assert assign at attributes audit " +
+        "authorization avg " +
+        "base_table begin between binary_integer body boolean by " +
+        "case cast char char_base check close cluster clusters colauth column comment commit compress connect " +
+        "connected constant constraint crash create current currval cursor " +
+        "data_base database date dba deallocate debugoff debugon decimal declare default definition delay delete " +
+        "desc digits dispose distinct do drop " +
+        "else elsif enable end entry escape exception exception_init exchange exclusive exists exit external " +
+        "fast fetch file for force form from function " +
+        "generic goto grant group " +
+        "having " +
+        "identified if immediate in increment index indexes indicator initial initrans insert interface intersect " +
+        "into is " +
+        "key " +
+        "level library like limited local lock log logging long loop " +
+        "master maxextents maxtrans member minextents minus mislabel mode modify multiset " +
+        "new next no noaudit nocompress nologging noparallel not nowait number_base " +
+        "object of off offline on online only open option or order out " +
+        "package parallel partition pctfree pctincrease pctused pls_integer positive positiven pragma primary prior " +
+        "private privileges procedure public " +
+        "raise range raw read rebuild record ref references refresh release rename replace resource restrict return " +
+        "returning reverse revoke rollback row rowid rowlabel rownum rows run " +
+        "savepoint schema segment select separate session set share snapshot some space split sql start statement " +
+        "storage subtype successful synonym " +
+        "tabauth table tables tablespace task terminate then to trigger truncate type " +
+        "union unique unlimited unrecoverable unusable update use using " +
+        "validate value values variable view views " +
+        "when whenever where while with work";
+
+  var cFunctions = "abs acos add_months ascii asin atan atan2 average " +
+        "bfilename " +
+        "ceil chartorowid chr concat convert cos cosh count " +
+        "decode deref dual dump dup_val_on_index " +
+        "empty error exp " +
+        "false floor found " +
+        "glb greatest " +
+        "hextoraw " +
+        "initcap instr instrb isopen " +
+        "last_day least lenght lenghtb ln lower lpad ltrim lub " +
+        "make_ref max min mod months_between " +
+        "new_time next_day nextval nls_charset_decl_len nls_charset_id nls_charset_name nls_initcap nls_lower " +
+        "nls_sort nls_upper nlssort no_data_found notfound null nvl " +
+        "others " +
+        "power " +
+        "rawtohex reftohex round rowcount rowidtochar rpad rtrim " +
+        "sign sin sinh soundex sqlcode sqlerrm sqrt stddev substr substrb sum sysdate " +
+        "tan tanh to_char to_date to_label to_multi_byte to_number to_single_byte translate true trunc " +
+        "uid upper user userenv " +
+        "variance vsize";
+
+  var cTypes = "bfile blob " +
+        "character clob " +
+        "dec " +
+        "float " +
+        "int integer " +
+        "mlslabel " +
+        "natural naturaln nchar nclob number numeric nvarchar2 " +
+        "real rowtype " +
+        "signtype smallint string " +
+        "varchar varchar2";
+
+  var cSqlplus = "appinfo arraysize autocommit autoprint autorecovery autotrace " +
+        "blockterminator break btitle " +
+        "cmdsep colsep compatibility compute concat copycommit copytypecheck " +
+        "define describe " +
+        "echo editfile embedded escape exec execute " +
+        "feedback flagger flush " +
+        "heading headsep " +
+        "instance " +
+        "linesize lno loboffset logsource long longchunksize " +
+        "markup " +
+        "native newpage numformat numwidth " +
+        "pagesize pause pno " +
+        "recsep recsepchar release repfooter repheader " +
+        "serveroutput shiftinout show showmode size spool sqlblanklines sqlcase sqlcode sqlcontinue sqlnumber " +
+        "sqlpluscompatibility sqlprefix sqlprompt sqlterminator suffix " +
+        "tab term termout time timing trimout trimspool ttitle " +
+        "underline " +
+        "verify version " +
+        "wrap";
+
+  CodeMirror.defineMIME("text/x-plsql", {
+    name: "plsql",
+    keywords: keywords(cKeywords),
+    functions: keywords(cFunctions),
+    types: keywords(cTypes),
+    sqlplus: keywords(cSqlplus)
+  });
+}());
diff --git a/js/codemirror/mode/python/LICENSE.txt b/js/codemirror/mode/python/LICENSE.txt
new file mode 100644
index 0000000000..918866b42a
--- /dev/null
+++ b/js/codemirror/mode/python/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2010 Timothy Farrell
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
\ No newline at end of file
diff --git a/js/codemirror/mode/python/index.html b/js/codemirror/mode/python/index.html
new file mode 100644
index 0000000000..e9640e9e48
--- /dev/null
+++ b/js/codemirror/mode/python/index.html
@@ -0,0 +1,123 @@
+
+
+  
+    CodeMirror 2: Python mode
+    
+    
+    
+    
+	
+    
+  
+  
+    
CodeMirror 2: Python mode

+    
+    

+    
+    
Configuration Options:

+    
    
+      
  • version - 2/3 - The version of Python to recognize.  Default is 2.
    • 
+      
  • singleLineStringErrors - true/false - If you have a single-line string that is not terminated at the end of the line, this will show subsequent lines as errors if true, otherwise it will consider the newline as the end of the string. Default is false.
    • 
+    

+
+    
MIME types defined: text/x-python.

+  
+
diff --git a/js/codemirror/mode/python/python.css b/js/codemirror/mode/python/python.css
new file mode 100644
index 0000000000..353fd963a1
--- /dev/null
+++ b/js/codemirror/mode/python/python.css
@@ -0,0 +1,23 @@
+span.py-delimiter,
+span.py-special {color: #666666;}
+
+span.py-operator {color: #666666;}
+
+span.py-error {background-color: #660000; color: #FFFFFF;}
+
+span.py-keyword {color: #770088; font-weight: bold;}
+
+span.py-number {color: #228811;}
+
+span.py-identifier,
+span.py-func {color: black;}
+
+span.py-type,
+span.py-decorator {color: #0000FF;}
+
+span.py-comment {color: #AA7700;}
+
+span.py-string,
+span.py-bytes,
+span.py-raw,
+span.py-unicode {color: #AA2222;}
\ No newline at end of file
diff --git a/js/codemirror/mode/python/python.js b/js/codemirror/mode/python/python.js
new file mode 100644
index 0000000000..373f51ce07
--- /dev/null
+++ b/js/codemirror/mode/python/python.js
@@ -0,0 +1,318 @@
+CodeMirror.defineMode("python", function(conf) {
+    var ERRORCLASS = 'py-error';
+    
+    function wordRegexp(words) {
+        return new RegExp("^((" + words.join(")|(") + "))\\b");
+    }
+    
+    var singleOperators = new RegExp("^[\\+\\-\\*/%&|\\^~<>!]");
+    var singleDelimiters = new RegExp('^[\\(\\)\\[\\]\\{\\}@,:`=;\\.]');
+    var doubleOperators = new RegExp("^((==)|(!=)|(<=)|(>=)|(<>)|(<<)|(>>)|(//)|(\\*\\*))");
+    var doubleDelimiters = new RegExp("^((\\+=)|(\\-=)|(\\*=)|(%=)|(/=)|(&=)|(\\|=)|(\\^=))");
+    var tripleDelimiters = new RegExp("^((//=)|(>>=)|(<<=)|(\\*\\*=))");
+    var identifiers = new RegExp("^[_A-Za-z][_A-Za-z0-9]*");
+
+    var wordOperators = wordRegexp(['and', 'or', 'not', 'is', 'in']);
+    var commonkeywords = ['as', 'assert', 'break', 'class', 'continue',
+                          'def', 'del', 'elif', 'else', 'except', 'finally',
+                          'for', 'from', 'global', 'if', 'import',
+                          'lambda', 'pass', 'raise', 'return',
+                          'try', 'while', 'with', 'yield'];
+    var commontypes = ['bool', 'classmethod', 'complex', 'dict', 'enumerate',
+                       'float', 'frozenset', 'int', 'list', 'object',
+                       'property', 'reversed', 'set', 'slice', 'staticmethod',
+                       'str', 'super', 'tuple', 'type'];
+    var py2 = {'types': ['basestring', 'buffer', 'file', 'long', 'unicode',
+                         'xrange'],
+               'keywords': ['exec', 'print']};
+    var py3 = {'types': ['bytearray', 'bytes', 'filter', 'map', 'memoryview',
+                         'open', 'range', 'zip'],
+               'keywords': ['nonlocal']};
+
+    if (!!conf.mode.version && parseInt(conf.mode.version, 10) === 3) {
+        commonkeywords = commonkeywords.concat(py3.keywords);
+        commontypes = commontypes.concat(py3.types);
+        var stringPrefixes = new RegExp("^(([rb]|(br))?('{3}|\"{3}|['\"]))", "i");
+    } else {
+        commonkeywords = commonkeywords.concat(py2.keywords);
+        commontypes = commontypes.concat(py2.types);
+        var stringPrefixes = new RegExp("^(([rub]|(ur)|(br))?('{3}|\"{3}|['\"]))", "i");
+    }
+    var keywords = wordRegexp(commonkeywords);
+    var types = wordRegexp(commontypes);
+
+    // tokenizers
+    function tokenBase(stream, state) {
+        // Handle scope changes
+        if (stream.sol()) {
+            var scopeOffset = state.scopes[0].offset;
+            if (stream.eatSpace()) {
+                var lineOffset = stream.indentation();
+                if (lineOffset > scopeOffset) {
+                    return 'py-indent';
+                } else if (lineOffset < scopeOffset) {
+                    return 'py-dedent';
+                }
+                return 'whitespace';
+            } else {
+                if (scopeOffset > 0) {
+                    dedent(stream, state);
+                }
+            }
+        }
+        if (stream.eatSpace()) {
+            return 'py-space';
+        }
+        
+        var ch = stream.peek();
+        
+        // Handle Comments
+        if (ch === '#') {
+            stream.skipToEnd();
+            return 'py-comment';
+        }
+        
+        // Handle Number Literals
+        if (stream.match(/^[0-9\.]/, false)) {
+            var floatLiteral = false;
+            // Floats
+            if (stream.match(/^\d*\.\d+(e[\+\-]?\d+)?/i)) { floatLiteral = true; }
+            if (stream.match(/^\d+\.\d*/)) { floatLiteral = true; }
+            if (stream.match(/^\.\d+/)) { floatLiteral = true; }
+            if (floatLiteral) {
+                // Float literals may be "imaginary"
+                stream.eat(/J/i);
+                return 'py-literal';
+            }
+            // Integers
+            var intLiteral = false;
+            // Hex
+            if (stream.match(/^0x[0-9a-f]+/i)) { intLiteral = true; }
+            // Binary
+            if (stream.match(/^0b[01]+/i)) { intLiteral = true; }
+            // Octal
+            if (stream.match(/^0o[0-7]+/i)) { intLiteral = true; }
+            // Decimal
+            if (stream.match(/^[1-9]\d*(e[\+\-]?\d+)?/)) {
+                // Decimal literals may be "imaginary"
+                stream.eat(/J/i);
+                // TODO - Can you have imaginary longs?
+                intLiteral = true;
+            }
+            // Zero by itself with no other piece of number.
+            if (stream.match(/^0(?![\dx])/i)) { intLiteral = true; }
+            if (intLiteral) {
+                // Integer literals may be "long"
+                stream.eat(/L/i);
+                return 'py-literal';
+            }
+        }
+        
+        // Handle Strings
+        if (stream.match(stringPrefixes)) {
+            state.tokenize = tokenStringFactory(stream.current());
+            return state.tokenize(stream, state);
+        }
+        
+        // Handle operators and Delimiters
+        if (stream.match(tripleDelimiters) || stream.match(doubleDelimiters)) {
+            return 'py-delimiter';
+        }
+        if (stream.match(doubleOperators)
+            || stream.match(singleOperators)
+            || stream.match(wordOperators)) {
+            return 'py-operator';
+        }
+        if (stream.match(singleDelimiters)) {
+            return 'py-delimiter';
+        }
+        
+        if (stream.match(types)) {
+            return 'py-type';
+        }
+        
+        if (stream.match(keywords)) {
+            return 'py-keyword';
+        }
+        
+        if (stream.match(identifiers)) {
+            return 'py-identifier';
+        }
+        
+        // Handle non-detected items
+        stream.next();
+        return ERRORCLASS;
+    }
+    
+    function tokenStringFactory(delimiter) {
+        while ('rub'.indexOf(delimiter[0].toLowerCase()) >= 0) {
+            delimiter = delimiter.substr(1);
+        }
+        var delim_re = new RegExp(delimiter);
+        var singleline = delimiter.length == 1;
+        var OUTCLASS = 'py-string';
+        
+        return function tokenString(stream, state) {
+            while (!stream.eol()) {
+                stream.eatWhile(/[^'"\\]/);
+                if (stream.eat('\\')) {
+                    stream.next();
+                    if (singleline && stream.eol()) {
+                        return OUTCLASS;
+                    }
+                } else if (stream.match(delim_re)) {
+                    state.tokenize = tokenBase;
+                    return OUTCLASS;
+                } else {
+                    stream.eat(/['"]/);
+                }
+            }
+            if (singleline) {
+                if (conf.mode.singleLineStringErrors) {
+                    OUTCLASS = ERRORCLASS
+                } else {
+                    state.tokenize = tokenBase;
+                }
+            }
+            return OUTCLASS;
+        };
+    }
+    
+    function indent(stream, state, type) {
+        type = type || 'py';
+        var indentUnit = 0;
+        if (type === 'py') {
+            for (var i = 0; i < state.scopes.length; ++i) {
+                if (state.scopes[i].type === 'py') {
+                    indentUnit = state.scopes[i].offset + conf.indentUnit;
+                    break;
+                }
+            }
+        } else {
+            indentUnit = stream.column() + stream.current().length;
+        }
+        state.scopes.unshift({
+            offset: indentUnit,
+            type: type
+        });
+    }
+    
+    function dedent(stream, state) {
+        if (state.scopes.length == 1) return;
+        if (state.scopes[0].type === 'py') {
+            var _indent = stream.indentation();
+            var _indent_index = -1;
+            for (var i = 0; i < state.scopes.length; ++i) {
+                if (_indent === state.scopes[i].offset) {
+                    _indent_index = i;
+                    break;
+                }
+            }
+            if (_indent_index === -1) {
+                return true;
+            }
+            while (state.scopes[0].offset !== _indent) {
+                state.scopes.shift();
+            }
+            return false
+        } else {
+            state.scopes.shift();
+            return false;
+        }
+    }
+
+    function tokenLexer(stream, state) {
+        var style = state.tokenize(stream, state);
+        var current = stream.current();
+
+        // Handle '.' connected identifiers
+        if (current === '.') {
+            style = state.tokenize(stream, state);
+            current = stream.current();
+            if (style === 'py-identifier') {
+                return 'py-identifier';
+            } else {
+                return ERRORCLASS;
+            }
+        }
+        
+        // Handle decorators
+        if (current === '@') {
+            style = state.tokenize(stream, state);
+            current = stream.current();
+            if (style === 'py-identifier'
+                || current === '@staticmethod'
+                || current === '@classmethod') {
+                return 'py-decorator';
+            } else {
+                return ERRORCLASS;
+            }
+        }
+        
+        // Handle scope changes.
+        if (current === 'pass' || current === 'return') {
+            state.dedent += 1;
+        }
+        if ((current === ':' && !state.lambda && state.scopes[0].type == 'py')
+            || style === 'py-indent') {
+            indent(stream, state);
+        }
+        var delimiter_index = '[({'.indexOf(current);
+        if (delimiter_index !== -1) {
+            indent(stream, state, '])}'.slice(delimiter_index, delimiter_index+1));
+        }
+        if (style === 'py-dedent') {
+            if (dedent(stream, state)) {
+                return ERRORCLASS;
+            }
+        }
+        delimiter_index = '])}'.indexOf(current);
+        if (delimiter_index !== -1) {
+            if (dedent(stream, state)) {
+                return ERRORCLASS;
+            }
+        }
+        if (state.dedent > 0 && stream.eol() && state.scopes[0].type == 'py') {
+            if (state.scopes.length > 1) state.scopes.shift();
+            state.dedent -= 1;
+        }
+        
+        return style;
+    }
+
+    var external = {
+        startState: function(basecolumn) {
+            return {
+              tokenize: tokenBase,
+              scopes: [{offset:basecolumn || 0, type:'py'}],
+              lastToken: null,
+              lambda: false,
+              dedent: 0
+          };
+        },
+        
+        token: function(stream, state) {
+            var style = tokenLexer(stream, state);
+            
+            state.lastToken = {style:style, content: stream.current()};
+            
+            if (stream.eol() && stream.lambda) {
+                state.lambda = false;
+            }
+            
+            return style;
+        },
+        
+        indent: function(state, textAfter) {
+            if (state.tokenize != tokenBase) {
+                return 0;
+            }
+            
+            return state.scopes[0].offset;
+        }
+        
+    };
+    return external;
+});
+
+CodeMirror.defineMIME("text/x-python", "python");
diff --git a/js/codemirror/mode/rst/index.html b/js/codemirror/mode/rst/index.html
new file mode 100644
index 0000000000..0831dff46f
--- /dev/null
+++ b/js/codemirror/mode/rst/index.html
@@ -0,0 +1,526 @@
+
+
+  
+    CodeMirror 2: reStructuredText mode
+    
+    
+    
+    
+    
+    
+  
+  
+    
CodeMirror 2: reStructuredText mode

+
+

+
+    
+    
The reStructuredText mode supports one configuration parameter:

+    

+      
verbatim (string)

+      
A name or MIME type of a mode that will be used for highlighting
+      verbatim blocks. By default, reStructuredText mode uses uniform color
+      for whole block of verbatim text if no mode is given.

+    

+    
If python mode is available (not a part of CodeMirror 2 yet),
+    it will be used for highlighting blocks containing Python/IPython terminal
+    sessions (blocks starting with >>> (for Python) or
+    In [num]: (for IPython).
+
+    
MIME types defined: text/x-rst.

+  
+
+
diff --git a/js/codemirror/mode/rst/rst.css b/js/codemirror/mode/rst/rst.css
new file mode 100644
index 0000000000..90ba05e30b
--- /dev/null
+++ b/js/codemirror/mode/rst/rst.css
@@ -0,0 +1,77 @@
+
+span.rst-emphasis {
+    font-style: italic;
+}
+
+span.rst-strong {
+    font-weight: bold;
+}
+
+span.rst-interpreted {
+    color: #33cc66;
+}
+
+span.rst-inline {
+    color: #3399cc;
+}
+
+span.rst-role {
+    color: #666699;
+}
+
+span.rst-list {
+    color: #cc0099;
+    font-weight: bold;
+}
+
+span.rst-body {
+    color: #6699cc;
+}
+
+span.rst-verbatim {
+    color: #3366ff;
+}
+
+span.rst-comment {
+    color: #aa7700;
+}
+
+span.rst-directive {
+    font-weight: bold;
+    color: #3399ff;
+}
+
+span.rst-hyperlink {
+    font-weight: bold;
+    color: #3366ff;
+}
+
+span.rst-footnote {
+    font-weight: bold;
+    color: #3333ff;
+}
+
+span.rst-citation {
+    font-weight: bold;
+    color: #3300ff;
+}
+
+span.rst-replacement {
+    color: #9933cc;
+}
+
+span.rst-section {
+    font-weight: bold;
+    color: #cc0099;
+}
+
+span.rst-directive-marker {
+    font-weight: bold;
+    color: #3399ff;
+}
+
+span.rst-verbatim-marker {
+    font-weight: bold;
+    color: #9900ff;
+}
+
diff --git a/js/codemirror/mode/rst/rst.js b/js/codemirror/mode/rst/rst.js
new file mode 100644
index 0000000000..8dd5f281b8
--- /dev/null
+++ b/js/codemirror/mode/rst/rst.js
@@ -0,0 +1,335 @@
+
+CodeMirror.defineMode('rst', function(config, options) {
+    function setState(state, fn, ctx) {
+        state.fn = fn;
+        setCtx(state, ctx);
+    }
+
+    function setCtx(state, ctx) {
+        state.ctx = ctx || {};
+    }
+
+    function setNormal(state, ch) {
+        if (ch && (typeof ch !== 'string')) {
+            var str = ch.current();
+            ch = str[str.length-1];
+        }
+
+        setState(state, normal, {back: ch});
+    }
+
+    function hasMode(mode) {
+        if (mode) {
+            var modes = CodeMirror.listModes();
+
+            for (var i in modes) {
+                if (modes[i] == mode) {
+                    return true;
+                }
+            }
+        }
+
+        return false;
+    }
+
+    function getMode(mode) {
+        if (hasMode(mode)) {
+            return CodeMirror.getMode(config, mode);
+        } else {
+            return null;
+        }
+    }
+
+    var verbatimMode = getMode(options.verbatim);
+    var pythonMode = getMode('python');
+
+    var reSection = /^[!"#$%&'()*+,-./:;<=>?@[\\\]^_`{|}~]/;
+    var reDirective = /^\s*\w([-:.\w]*\w)?::(\s|$)/;
+    var reHyperlink = /^\s*_[\w-]+:(\s|$)/;
+    var reFootnote = /^\s*\[(\d+|#)\](\s|$)/;
+    var reCitation = /^\s*\[[A-Za-z][\w-]*\](\s|$)/;
+    var reFootnoteRef = /^\[(\d+|#)\]_/;
+    var reCitationRef = /^\[[A-Za-z][\w-]*\]_/;
+    var reDirectiveMarker = /^\.\.(\s|$)/;
+    var reVerbatimMarker = /^::\s*$/;
+    var rePreInline = /^[-\s"([{/:.,;!?\\_]/;
+    var reEnumeratedList = /^\s*((\d+|[A-Za-z#])[.)]|\((\d+|[A-Z-a-z#])\))\s/;
+    var reBulletedList = /^\s*[-\+\*]\s/;
+    var reExamples = /^\s+(>>>|In \[\d+\]:)\s/;
+
+    function normal(stream, state) {
+        var ch, sol, i;
+
+        if (stream.eat(/\\/)) {
+            ch = stream.next();
+            setNormal(state, ch);
+            return null;
+        }
+
+        sol = stream.sol();
+
+        if (sol && (ch = stream.eat(reSection))) {
+            for (i = 0; stream.eat(ch); i++);
+
+            if (i >= 3 && stream.match(/^\s*$/)) {
+                setNormal(state, null);
+                return 'rst-section';
+            } else {
+                stream.backUp(i + 1);
+            }
+        }
+
+        if (sol && stream.match(reDirectiveMarker)) {
+            if (!stream.eol()) {
+                setState(state, directive);
+            }
+
+            return 'rst-directive-marker';
+        }
+
+        if (stream.match(reVerbatimMarker)) {
+            if (!verbatimMode) {
+                setState(state, verbatim);
+            } else {
+                var mode = verbatimMode;
+
+                setState(state, verbatim, {
+                    mode: mode,
+                    local: mode.startState()
+                });
+            }
+
+            return 'rst-verbatim-marker';
+        }
+
+        if (sol && stream.match(reExamples, false)) {
+            if (!pythonMode) {
+                setState(state, verbatim);
+                return 'rst-verbatim-marker';
+            } else {
+                var mode = pythonMode;
+
+                setState(state, verbatim, {
+                    mode: mode,
+                    local: mode.startState()
+                });
+
+                return null;
+            }
+        }
+
+        if (sol && (stream.match(reEnumeratedList) ||
+                    stream.match(reBulletedList))) {
+            setNormal(state, stream);
+            return 'rst-list';
+        }
+
+        function testBackward(re) {
+            return sol || !state.ctx.back || re.test(state.ctx.back);
+        }
+
+        function testForward(re) {
+            return stream.eol() || stream.match(re, false);
+        }
+
+        function testInline(re) {
+            return stream.match(re) && testBackward(/\W/) && testForward(/\W/);
+        }
+
+        if (testInline(reFootnoteRef)) {
+            setNormal(state, stream);
+            return 'rst-footnote';
+        }
+
+        if (testInline(reCitationRef)) {
+            setNormal(state, stream);
+            return 'rst-citation';
+        }
+
+        ch = stream.next();
+
+        if (testBackward(rePreInline)) {
+            if ((ch === ':' || ch === '|') && stream.eat(/\S/)) {
+                var token;
+
+                if (ch === ':') {
+                    token = 'rst-role';
+                } else {
+                    token = 'rst-replacement';
+                }
+
+                setState(state, inline, {
+                    ch: ch,
+                    wide: false,
+                    prev: null,
+                    token: token
+                });
+
+                return token;
+            }
+
+            if (ch === '*' || ch === '`') {
+                var orig = ch,
+                    wide = false;
+
+                ch = stream.next();
+
+                if (ch == orig) {
+                    wide = true;
+                    ch = stream.next();
+                }
+
+                if (ch && !/\s/.test(ch)) {
+                    var token;
+
+                    if (orig === '*') {
+                        token = wide ? 'rst-strong' : 'rst-emphasis';
+                    } else {
+                        token = wide ? 'rst-inline' : 'rst-interpreted';
+                    }
+
+                    setState(state, inline, {
+                        ch: orig,               // inline() has to know what to search for
+                        wide: wide,             // are we looking for `ch` or `chch`
+                        prev: null,             // terminator must not be preceeded with whitespace
+                        token: token            // I don't want to recompute this all the time
+                    });
+
+                    return token;
+                }
+            }
+        }
+
+        setNormal(state, ch);
+        return null;
+    }
+
+    function inline(stream, state) {
+        var ch = stream.next(),
+            token = state.ctx.token;
+
+        function finish(ch) {
+            state.ctx.prev = ch;
+            return token;
+        }
+
+        if (ch != state.ctx.ch) {
+            return finish(ch);
+        }
+
+        if (/\s/.test(state.ctx.prev)) {
+            return finish(ch);
+        }
+
+        if (state.ctx.wide) {
+            ch = stream.next();
+
+            if (ch != state.ctx.ch) {
+                return finish(ch);
+            }
+        }
+
+        if (!stream.eol() && !rePostInline.test(stream.peek())) {
+            if (state.ctx.wide) {
+                stream.backUp(1);
+            }
+
+            return finish(ch);
+        }
+
+        setState(state, normal);
+        setNormal(state, ch);
+
+        return token;
+    }
+
+    function directive(stream, state) {
+        var token = null;
+
+        if (stream.match(reDirective)) {
+            token = 'rst-directive';
+        } else if (stream.match(reHyperlink)) {
+            token = 'rst-hyperlink';
+        } else if (stream.match(reFootnote)) {
+            token = 'rst-footnote';
+        } else if (stream.match(reCitation)) {
+            token = 'rst-citation';
+        } else {
+            stream.eatSpace();
+
+            if (stream.eol()) {
+                setNormal(state, stream);
+                return null;
+            } else {
+                stream.skipToEnd();
+                setState(state, comment);
+                return 'rst-comment';
+            }
+        }
+
+        setState(state, body, {start: true});
+        return token;
+    }
+
+    function body(stream, state) {
+        var token = 'rst-body';
+
+        if (!state.ctx.start || stream.sol()) {
+            return block(stream, state, token);
+        }
+
+        stream.skipToEnd();
+        setCtx(state);
+
+        return token;
+    }
+
+    function comment(stream, state) {
+        return block(stream, state, 'rst-comment');
+    }
+
+    function verbatim(stream, state) {
+        if (!verbatimMode) {
+            return block(stream, state, 'rst-verbatim');
+        } else {
+            if (stream.sol()) {
+                if (!stream.eatSpace()) {
+                    setNormal(state, stream);
+                }
+
+                return null;
+            }
+
+            return verbatimMode.token(stream, state.ctx.local);
+        }
+    }
+
+    function block(stream, state, token) {
+        if (stream.eol() || stream.eatSpace()) {
+            stream.skipToEnd();
+            return token;
+        } else {
+            setNormal(state, stream);
+            return null;
+        }
+    }
+
+    return {
+        startState: function() {
+            return {fn: normal, ctx: {}};
+        },
+
+        copyState: function(state) {
+            return {fn: state.fn, ctx: state.ctx};
+        },
+
+        token: function(stream, state) {
+            var token = state.fn(stream, state);
+            return token;
+        }
+    };
+});
+
+CodeMirror.defineMIME("text/x-rst", "rst");
+
diff --git a/js/codemirror/mode/smalltalk/index.html b/js/codemirror/mode/smalltalk/index.html
new file mode 100644
index 0000000000..fe56b58911
--- /dev/null
+++ b/js/codemirror/mode/smalltalk/index.html
@@ -0,0 +1,56 @@
+
+
+  
+    CodeMirror 2: Smalltalk mode
+    
+    
+    
+    
+    
+    
+  
+  
+    
CodeMirror 2: Smalltalk mode

+
+

+
+    
+
+    
Simple Smalltalk mode.

+
+    
MIME types defined: text/x-stsrc.

+  
+
diff --git a/js/codemirror/mode/smalltalk/smalltalk.css b/js/codemirror/mode/smalltalk/smalltalk.css
new file mode 100644
index 0000000000..7c2daa49dc
--- /dev/null
+++ b/js/codemirror/mode/smalltalk/smalltalk.css
@@ -0,0 +1,5 @@
+span.st-keyword {color: #90b;}
+span.st-number {color: #291;}
+span.st-comment {color: #a70;}
+span.st-string {color: #a22;}
+span.st-var {color: #22b;}
diff --git a/js/codemirror/mode/smalltalk/smalltalk.js b/js/codemirror/mode/smalltalk/smalltalk.js
new file mode 100644
index 0000000000..763f70de88
--- /dev/null
+++ b/js/codemirror/mode/smalltalk/smalltalk.js
@@ -0,0 +1,122 @@
+CodeMirror.defineMode("smalltalk", function(config, parserConfig) {
+  var keywords = {"true": 1, "false": 1, nil: 1, self: 1, "super": 1, thisContext: 1};
+  var indentUnit = config.indentUnit;
+
+  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 == '"')
+      return chain(stream, state, tokenComment(ch));
+    else if (ch == "'")
+      return chain(stream, state, tokenString(ch));
+    else if (ch == "#") {
+      stream.eatWhile(/[\w\$_]/);
+      return ret("string", "st-string");
+    }
+    else if (/\d/.test(ch)) {
+      stream.eatWhile(/[\w\.]/)
+      return ret("number", "st-number");
+    }
+    else if (/[\[\]()]/.test(ch)) {
+      return ret(ch, null);
+    }
+    else {
+      stream.eatWhile(/[\w\$_]/);
+      if (keywords && keywords.propertyIsEnumerable(stream.current())) return ret("keyword", "st-keyword");
+      return ret("word", "st-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))
+        state.tokenize = tokenBase;
+      return ret("string", "st-string");
+    };
+  }
+
+  function tokenComment(quote) {
+    return function(stream, state) {
+      var next, end = false;
+      while ((next = stream.next()) != null) {
+        if (next == quote) {end = true; break;}
+      }
+      if (end)
+        state.tokenize = tokenBase;
+      return ret("comment", "st-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 == "[") pushContext(state, stream.column(), "]");
+      else if (type == "(") pushContext(state, stream.column(), ")");
+      else if (type == ctx.type) popContext(state);
+      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.align) return ctx.column + (closing ? 0 : 1);
+      else return ctx.indented + (closing ? 0 : indentUnit);
+    },
+
+    electricChars: "]"
+  };
+});
+
+CodeMirror.defineMIME("text/x-stsrc", {name: "smalltalk"});
diff --git a/js/codemirror/mode/stex/index.html b/js/codemirror/mode/stex/index.html
new file mode 100644
index 0000000000..73b07ac13e
--- /dev/null
+++ b/js/codemirror/mode/stex/index.html
@@ -0,0 +1,96 @@
+
+
+  
+    CodeMirror 2: sTeX mode
+    
+    
+    
+    
+    
+    
+  
+  
+    
CodeMirror 2: sTeX mode

+     

+    
+
+    
MIME types defined: text/stex.

+
+  
+
diff --git a/js/codemirror/mode/stex/stex.css b/js/codemirror/mode/stex/stex.css
new file mode 100644
index 0000000000..64b975e98d
--- /dev/null
+++ b/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; }
diff --git a/js/codemirror/mode/stex/stex.js b/js/codemirror/mode/stex/stex.js
new file mode 100644
index 0000000000..3106e3be0c
--- /dev/null
+++ b/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) {
+      var 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]+/)) {
+	    var 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 == '[') {
+	   var lastPlug = peekCommand(state);
+	   var 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");
diff --git a/js/codemirror/mode/xml/index.html b/js/codemirror/mode/xml/index.html
new file mode 100644
index 0000000000..5ad7c63fe8
--- /dev/null
+++ b/js/codemirror/mode/xml/index.html
@@ -0,0 +1,42 @@
+
+
+  
+    CodeMirror 2: XML mode
+    
+    
+    
+    
+    
+    
+  
+  
+    
CodeMirror 2: XML mode

+    

+    
+    
The XML mode supports two configuration parameters:

+    

+      
htmlMode (boolean)

+      
This switches the mode to parse HTML instead of XML. This
+      means attributes do not have to be quoted, and some elements
+      (such as br) do not require a closing tag.

+      
alignCDATA (boolean)

+      
Setting this to true will force the opening tag of CDATA
+      blocks to not be indented.

+    

+
+    
MIME types defined: application/xml, text/html.

+  
+
diff --git a/js/codemirror/mode/xml/xml.css b/js/codemirror/mode/xml/xml.css
new file mode 100644
index 0000000000..86845faa63
--- /dev/null
+++ b/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;}
diff --git a/js/codemirror/mode/xml/xml.js b/js/codemirror/mode/xml/xml.js
new file mode 100644
index 0000000000..1d92c4e7b8
--- /dev/null
+++ b/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 && /
+
+  
+    CodeMirror
+    
+    
+    
+  
+  
+
+
{ } CodeMirror

+
+
+/* Old release history */
+
+

+
+  
17-12-2010: Version 0.92:

+  
    
+    
  • Make CodeMirror work in XHTML documents.
    • 
+    
  • Fix bug in handling of backslashes in Python strings.
    • 
+    
  • The styleNumbers option is now officially
+    supported and documented.
    • 
+    
  • onLineNumberClick option added.
    • 
+    
  • More consistent names onLoad and
+    onCursorActivity callbacks. Old names still work, but
+    are deprecated.
    • 
+    
  • Add a Freemarker mode.
    • 
+  

+
+  
11-11-2010: Version 0.91:

+  
    
+    
  • Adds support for Java.
    • 
+    
  • Small additions to the PHP and SQL parsers.
    • 
+    
  • Work around various Webkit issues.
    • 
+    
  • Fix toTextArea to update the code in the textarea.
    • 
+    
  • Add a noScriptCaching option (hack to ease development).
    • 
+    
  • Make sub-modes of HTML mixed mode configurable.
    • 
+  

+
+  
02-10-2010: Version 0.9:

+  
    
+    
  • Add support for searching backwards.
    • 
+    
  • There are now parsers for Scheme, XQuery, and OmetaJS.
    • 
+    
  • Makes height: "dynamic" more robust.
    • 
+    
  • Fixes bug where paste did not work on OS X.
    • 
+    
  • Add a enterMode and electricChars options to make indentation even more customizable.
    • 
+    
  • Add firstLineNumber option.
    • 
+    
  • Fix bad handling of @media rules by the CSS parser.
    • 
+    
  • Take a new, more robust approach to working around the invisible-last-line bug in WebKit.
    • 
+  

+
+  
22-07-2010: Version 0.8:

+  
    
+    
  • Add a cursorCoords method to find the screen
+    coordinates of the cursor.
    • 
+    
  • A number of fixes and support for more syntax in the PHP parser.
    • 
+    
  • Fix indentation problem with JSON-mode JS parser in Webkit.
    • 
+    
  • Add a minification UI.
    • 
+    
  • Support a height: dynamic mode, where the editor's
+    height will adjust to the size of its content.
    • 
+    
  • Better support for IME input mode.
    • 
+    
  • Fix JavaScript parser getting confused when seeing a no-argument
+    function call.
    • 
+    
  • Have CSS parser see the difference between selectors and other
+    identifiers.
    • 
+    
  • Fix scrolling bug when pasting in a horizontally-scrolled
+    editor.
    • 
+    
  • Support toTextArea method in instances created with
+    fromTextArea.
    • 
+    
  • Work around new Opera cursor bug that causes the cursor to jump
+    when pressing backspace at the end of a line.
    • 
+  

+
+  
27-04-2010: Version
+  0.67:

+  
More consistent page-up/page-down behaviour
+  across browsers. Fix some issues with hidden editors looping forever
+  when line-numbers were enabled. Make PHP parser parse
+  "\\" correctly. Have jumpToLine work on
+  line handles, and add cursorLine function to fetch the
+  line handle where the cursor currently is. Add new
+  setStylesheet function to switch style-sheets in a
+  running editor.

+
+  
01-03-2010: Version
+  0.66:

+  
Adds removeLine method to API.
+  Introduces the PLSQL parser.
+  Marks XML errors by adding (rather than replacing) a CSS class, so
+  that they can be disabled by modifying their style. Fixes several
+  selection bugs, and a number of small glitches.

+
+  
12-11-2009: Version
+  0.65:

+  
Add support for having both line-wrapping and
+  line-numbers turned on, make paren-highlighting style customisable
+  (markParen and unmarkParen config
+  options), work around a selection bug that Opera
+  reintroduced in version 10.

+
+  
23-10-2009: Version
+  0.64:

+  
Solves some issues introduced by the
+  paste-handling changes from the previous release. Adds
+  setSpellcheck, setTextWrapping,
+  setIndentUnit, setUndoDepth,
+  setTabMode, and setLineNumbers to
+  customise a running editor. Introduces an SQL parser. Fixes a few small
+  problems in the Python
+  parser. And, as usual, add workarounds for various newly discovered
+  browser incompatibilities.

+
+
31-08-2009: Version
+0.63:

+
 Overhaul of paste-handling (less fragile), fixes for several
+serious IE8 issues (cursor jumping, end-of-document bugs) and a number
+of small problems.

+
+
30-05-2009: Version
+0.62:

+
Introduces Python
+and Lua parsers. Add
+setParser (on-the-fly mode changing) and
+clearHistory methods. Make parsing passes time-based
+instead of lines-based (see the passTime option).

+
+  
+
+
diff --git a/js/codemirror/test/index.html b/js/codemirror/test/index.html
new file mode 100644
index 0000000000..a3ad057da1
--- /dev/null
+++ b/js/codemirror/test/index.html
@@ -0,0 +1,29 @@
+
+
+  
+    CodeMirror 2: Test Suite
+    
+    
+    
+    
+
+    
+  
+  
+    
CodeMirror 2: Test Suite

+
+    
A limited set of programmatic sanity tests for CodeMirror.

+
+    

+
+    
+
+    
+  
+
diff --git a/js/codemirror/test/test.js b/js/codemirror/test/test.js
new file mode 100644
index 0000000000..af18b5b4a8
--- /dev/null
+++ b/js/codemirror/test/test.js
@@ -0,0 +1,248 @@
+var tests = [];
+
+test("fromTextArea", function() {
+  var te = document.getElementById("code");
+  te.value = "CONTENT";
+  var cm = CodeMirror.fromTextArea(te);
+  is(!te.offsetHeight);
+  eq(cm.getValue(), "CONTENT");
+  cm.setValue("foo\nbar");
+  eq(cm.getValue(), "foo\nbar");
+  cm.save();
+  is(/^foo\r?\nbar$/.test(te.value));
+  cm.setValue("xxx");
+  cm.toTextArea();
+  is(te.offsetHeight);
+  eq(te.value, "xxx");
+});
+
+testCM("getRange", function(cm) {
+  eq(cm.getLine(0), "1234");
+  eq(cm.getLine(1), "5678");
+  eq(cm.getLine(2), null);
+  eq(cm.getLine(-1), null);
+  eq(cm.getRange({line: 0, ch: 0}, {line: 0, ch: 3}), "123");
+  eq(cm.getRange({line: 0, ch: -1}, {line: 0, ch: 200}), "1234");
+  eq(cm.getRange({line: 0, ch: 2}, {line: 1, ch: 2}), "34\n56");
+  eq(cm.getRange({line: 1, ch: 2}, {line: 100, ch: 0}), "78");
+}, {value: "1234\n5678"});
+
+testCM("replaceRange", function(cm) {
+  eq(cm.getValue(), "");
+  cm.replaceRange("foo\n", {line: 0, ch: 0});
+  eq(cm.getValue(), "foo\n");
+  cm.replaceRange("a\nb", {line: 0, ch: 1});
+  eq(cm.getValue(), "fa\nboo\n");
+  eq(cm.lineCount(), 3);
+  cm.replaceRange("xyzzy", {line: 0, ch: 0}, {line: 1, ch: 1});
+  eq(cm.getValue(), "xyzzyoo\n");
+  cm.replaceRange("abc", {line: 0, ch: 0}, {line: 10, ch: 0});
+  eq(cm.getValue(), "abc");
+  eq(cm.lineCount(), 1);
+});
+
+testCM("selection", function(cm) {
+  cm.setSelection({line: 0, ch: 4}, {line: 2, ch: 2});
+  is(cm.somethingSelected());
+  eq(cm.getSelection(), "11\n222222\n33");
+  eqPos(cm.getCursor(false), {line: 2, ch: 2});
+  eqPos(cm.getCursor(true), {line: 0, ch: 4});
+  cm.setSelection({line: 1, ch: 0});
+  is(!cm.somethingSelected());
+  eq(cm.getSelection(), "");
+  eqPos(cm.getCursor(true), {line: 1, ch: 0});
+  cm.replaceSelection("abc");
+  eq(cm.getSelection(), "abc");
+  eq(cm.getValue(), "111111\nabc222222\n333333");
+  cm.replaceSelection("def", "end");
+  eq(cm.getSelection(), "");
+  eqPos(cm.getCursor(true), {line: 1, ch: 3});
+  cm.setCursor({line: 2, ch: 1});
+  eqPos(cm.getCursor(true), {line: 2, ch: 1});
+  cm.setCursor(1, 2);
+  eqPos(cm.getCursor(true), {line: 1, ch: 2});
+}, {value: "111111\n222222\n333333"});
+
+testCM("lines", function(cm) {
+  eq(cm.getLine(0), "111111");
+  eq(cm.getLine(1), "222222");
+  eq(cm.getLine(-1), null);
+  cm.removeLine(1);
+  cm.setLine(1, "abc");
+  eq(cm.getValue(), "111111\nabc");
+}, {value: "111111\n222222\n333333"});
+
+testCM("indent", function(cm) {
+  cm.indentLine(1);
+  eq(cm.getLine(1), "   blah();");
+  cm.setOption("indentUnit", 8);
+  cm.indentLine(1);
+  eq(cm.getLine(1), "\tblah();");
+}, {value: "if (x) {\nblah();\n}", indentUnit: 3, indentWithTabs: true});
+
+test("defaults", function() {
+  var olddefaults = CodeMirror.defaults, defs = CodeMirror.defaults = {};
+  for (var opt in olddefaults) defs[opt] = olddefaults[opt];
+  defs.indentUnit = 5;
+  defs.value = "uu";
+  defs.enterMode = "keep";
+  defs.tabindex = 55;
+  var place = document.getElementById("testground"), cm = CodeMirror(place);
+  try {
+    eq(cm.getOption("indentUnit"), 5);
+    cm.setOption("indentUnit", 10);
+    eq(defs.indentUnit, 5);
+    eq(cm.getValue(), "uu");
+    eq(cm.getOption("enterMode"), "keep");
+    eq(cm.getInputField().tabindex, 55);
+  }
+  finally {
+    CodeMirror.defaults = olddefaults;
+    place.removeChild(cm.getWrapperElement());
+  }
+});
+
+testCM("lineInfo", function(cm) {
+  eq(cm.lineInfo(-1), null);
+  var lh = cm.setMarker(1, "FOO", "bar");
+  var info = cm.lineInfo(1);
+  eq(info.text, "222222");
+  eq(info.markerText, "FOO");
+  eq(info.markerClass, "bar");
+  eq(info.line, 1);
+  eq(cm.lineInfo(2).markerText, null);
+  cm.clearMarker(lh);
+  eq(cm.lineInfo(1).markerText, null);
+}, {value: "111111\n222222\n333333"});
+
+testCM("coords", function(cm) {
+  cm.getWrapperElement().style.height = "100px";
+  var content = [];
+  for (var i = 0; i < 200; ++i) content.push("------------------------------" + i);
+  cm.setValue(content.join("\n"));
+  var top = cm.charCoords({line: 0, ch: 0});
+  var bot = cm.charCoords({line: 200, ch: 30});
+  is(top.x < bot.x);
+  is(top.y < bot.y);
+  is(top.y < top.yBot);
+  cm.getWrapperElement().scrollTop = 100;
+  cm.refresh();
+  var top2 = cm.charCoords({line: 0, ch: 0});
+  is(top.y > top2.y);
+  eq(top.x, top2.x);
+});
+
+testCM("coordsChar", function(cm) {
+  var content = [];
+  for (var i = 0; i < 70; ++i) content.push("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
+  cm.setValue(content.join("\n"));
+  for (var x = 0; x < 35; x += 2) {
+    for (var y = 0; y < 70; y += 5) {
+      cm.setCursor(y, x);
+      var pos = cm.coordsChar(cm.charCoords({line: y, ch: x}));
+      eq(pos.line, y);
+      eq(pos.ch, x);
+    }
+  }
+});
+
+testCM("undo", function(cm) {
+  cm.setLine(0, "def");
+  eq(cm.historySize().undo, 1);
+  cm.undo();
+  eq(cm.getValue(), "abc");
+  eq(cm.historySize().undo, 0);
+  eq(cm.historySize().redo, 1);
+  cm.redo();
+  eq(cm.getValue(), "def");
+  eq(cm.historySize().undo, 1);
+  eq(cm.historySize().redo, 0);
+  cm.setValue("1\n\n\n2");
+  eq(cm.historySize().undo, 0);
+  for (var i = 0; i < 20; ++i) {
+    cm.replaceRange("a", {line: 0, ch: 0});
+    cm.replaceRange("b", {line: 3, ch: 0});
+  }
+  eq(cm.historySize().undo, 40);
+  for (var i = 0; i < 38; ++i) cm.undo();
+  eq(cm.historySize().undo, 2);
+  eq(cm.historySize().redo, 38);
+  eq(cm.getValue(), "a1\n\n\nb2");
+  cm.setOption("undoDepth", 10);
+  for (var i = 0; i < 20; ++i) {
+    cm.replaceRange("a", {line: 0, ch: 0});
+    cm.replaceRange("b", {line: 3, ch: 0});
+  }
+  eq(cm.historySize().undo, 10);
+}, {value: "abc"});
+
+testCM("undoMultiLine", function(cm) {
+  cm.replaceRange("x", {line:0, ch: 0});
+  cm.replaceRange("y", {line:1, ch: 0});
+  cm.undo();
+  eq(cm.getValue(), "abc\ndef\nghi");
+  cm.replaceRange("y", {line:1, ch: 0});
+  cm.replaceRange("x", {line:0, ch: 0});
+  cm.undo();
+  eq(cm.getValue(), "abc\ndef\nghi");
+  cm.replaceRange("y", {line:2, ch: 0});
+  cm.replaceRange("x", {line:1, ch: 0});
+  cm.replaceRange("z", {line:2, ch: 0});
+  cm.undo();
+  eq(cm.getValue(), "abc\ndef\nghi");
+}, {value: "abc\ndef\nghi"});
+
+// Scaffolding
+
+function htmlEscape(str) {
+  return str.replace(/[<&]/g, function(str) {return str == "&" ? "&" : "<";});
+}
+function forEach(arr, f) {
+  for (var i = 0, e = arr.length; i < e; ++i) f(arr[i]);
+}
+
+function Failure(why) {this.message = why;}
+
+function test(name, run) {tests.push({name: name, func: run});}
+function testCM(name, run, opts) {
+  test(name, function() {
+    var place = document.getElementById("testground"), cm = CodeMirror(place, opts);
+    try {run(cm);}
+    finally {place.removeChild(cm.getWrapperElement());}
+  });
+}
+
+function runTests() {
+  var failures = [], run = 0;
+  for (var i = 0; i < tests.length; ++i) {
+    var test = tests[i];
+    try {test.func();}
+    catch(e) {
+      if (e instanceof Failure)
+        failures.push({type: "failure", test: test.name, text: e.message});
+      else
+        failures.push({type: "error", test: test.name, text: e.toString()});
+    }
+    run++;
+  }
+  var html = [run + " tests run."];
+  if (failures.length)
+    forEach(failures, function(fail) {
+      html.push(fail.test + ': ' + htmlEscape(fail.text) + "");
+    });
+  else html.push('All passed.');
+  document.getElementById("output").innerHTML = html.join("\n");
+}
+
+function eq(a, b, msg) {
+  if (a != b) throw new Failure(a + " != " + b + (msg ? " (" + msg + ")" : ""));
+}
+function eqPos(a, b, msg) {
+  eq(a.line, b.line, msg);
+  eq(a.ch, b.ch, msg);
+}
+function is(a, msg) {
+  if (!a) throw new Failure("assertion failed" + (msg ? " (" + msg + ")" : ""));
+}
+
+window.onload = runTests;