Enter CodeMirror New Version 3.13

gulliver/js/codemirror/CONTRIBUTING.md

@@ -0,0 +1,70 @@
+# How to contribute
+
+- [Getting help](#getting-help-)
+- [Submitting bug reports](#submitting-bug-reports-)
+- [Contributing code](#contributing-code-)
+
+## Getting help [^](#how-to-contribute)
+
+Community discussion, questions, and informal bug reporting is done on the
+[CodeMirror Google group](http://groups.google.com/group/codemirror).
+
+## Submitting bug reports [^](#how-to-contribute)
+
+The preferred way to report bugs is to use the
+[GitHub issue tracker](http://github.com/marijnh/CodeMirror/issues). Before
+reporting a bug, read these pointers.
+
+**Note:** The issue tracker is for *bugs*, not requests for help. Questions
+should be asked on the
+[CodeMirror Google group](http://groups.google.com/group/codemirror) instead.
+
+### Reporting bugs effectively
+
+- CodeMirror is maintained by volunteers. They don't owe you anything, so be
+  polite. Reports with an indignant or belligerent tone tend to be moved to the
+  bottom of the pile.
+
+- Include information about **the browser in which the problem occurred**. Even
+  if you tested several browsers, and the problem occurred in all of them,
+  mention this fact in the bug report. Also include browser version numbers and
+  the operating system that you're on.
+
+- Mention which release of CodeMirror you're using. Preferably, try also with
+  the current development snapshot, to ensure the problem has not already been
+  fixed.
+
+- Mention very precisely what went wrong. "X is broken" is not a good bug
+  report. What did you expect to happen? What happened instead? Describe the
+  exact steps a maintainer has to take to make the problem occur. We can not
+  fix something that we can not observe.
+
+- If the problem can not be reproduced in any of the demos included in the
+  CodeMirror distribution, please provide an HTML document that demonstrates
+  the problem. The best way to do this is to go to
+  [jsbin.com](http://jsbin.com/ihunin/edit), enter it there, press save, and
+  include the resulting link in your bug report.
+
+## Contributing code [^](#how-to-contribute)
+
+- Make sure you have a [GitHub Account](https://github.com/signup/free)
+- Fork [CodeMirror](https://github.com/marijnh/CodeMirror/)
+  ([how to fork a repo](https://help.github.com/articles/fork-a-repo))
+- Make your changes
+- If your changes are easy to test or likely to regress, add tests.
+  Tests for the core go into `test/test.js`, some modes have their own
+  test suite under `mode/XXX/test.js`. Feel free to add new test
+  suites to modes that don't have one yet (be sure to link the new
+  tests into `test/index.html`).
+- Make sure all tests pass. Visit `test/index.html` in your browser to
+  run them.
+- Submit a pull request
+([how to create a pull request](https://help.github.com/articles/fork-a-repo))
+
+### Coding standards
+
+- 2 spaces per indentation level, no tabs.
+- Include semicolons after statements.
+- Note that the linter (`test/lint/lint.js`) which is run after each
+  commit complains about unused variables and functions. Prefix their
+  names with an underscore to muffle it.

gulliver/js/codemirror/LICENSE

@@ -1,23 +1,23 @@
- Copyright (c) 2007-2010 Marijn Haverbeke
+Copyright (C) 2013 by Marijn Haverbeke <marijnh@gmail.com>
 
- This software is provided 'as-is', without any express or implied
- warranty. In no event will the authors be held liable for any
- damages arising from the use of this software.
+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:
 
- Permission is granted to anyone to use this software for any
- purpose, including commercial applications, and to alter it and
- redistribute it freely, subject to the following restrictions:
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
 
- 1. The origin of this software must not be misrepresented; you must
-    not claim that you wrote the original software. If you use this
-    software in a product, an acknowledgment in the product
-    documentation would be appreciated but is not required.
+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.
 
- 2. Altered source versions must be plainly marked as such, and must
-    not be misrepresented as being the original software.
-
- 3. This notice may not be removed or altered from any source
-    distribution.
-
- Marijn Haverbeke
- marijnh@gmail.com
+Please note that some subdirectories of the CodeMirror distribution
+include their own LICENSE files, and are released under different
+licences.

gulliver/js/codemirror/README.md

@@ -0,0 +1,9 @@
+# CodeMirror [![Build Status](https://secure.travis-ci.org/marijnh/CodeMirror.png?branch=master)](http://travis-ci.org/marijnh/CodeMirror)
+
+CodeMirror is a JavaScript component that provides a code editor in
+the browser. When a mode is available for the language you are coding
+in, it will color your code, and optionally help with indentation.
+
+The project page is http://codemirror.net  
+The manual is at http://codemirror.net/doc/manual.html  
+The contributing guidelines are in [CONTRIBUTING.md](https://github.com/marijnh/CodeMirror/blob/master/CONTRIBUTING.md)

gulliver/js/codemirror/bin/compress

@@ -0,0 +1,91 @@
+#!/usr/bin/env node
+
+// Compression helper for CodeMirror
+//
+// Example:
+//
+//   bin/compress codemirror runmode javascript xml
+//
+// Will take lib/codemirror.js, addon/runmode/runmode.js,
+// mode/javascript/javascript.js, and mode/xml/xml.js, run them though
+// the online minifier at http://marijnhaverbeke.nl/uglifyjs, and spit
+// out the result.
+//
+//   bin/compress codemirror --local /path/to/bin/UglifyJS
+//
+// Will use a local minifier instead of the online default one.
+//
+// Script files are specified without .js ending. Prefixing them with
+// their full (local) path is optional. So you may say lib/codemirror
+// or mode/xml/xml to be more precise. In fact, even the .js suffix
+// may be speficied, if wanted.
+
+"use strict";
+
+var fs = require("fs");
+
+function help(ok) {
+  console.log("usage: " + process.argv[1] + " [--local /path/to/uglifyjs] files...");
+  process.exit(ok ? 0 : 1);
+}
+
+var local = null, args = null, files = [], blob = "";
+
+for (var i = 2; i < process.argv.length; ++i) {
+  var arg = process.argv[i];
+  if (arg == "--local" && i + 1 < process.argv.length) {
+    var parts = process.argv[++i].split(/\s+/);
+    local = parts[0];
+    args = parts.slice(1);
+  } else if (arg == "--help") {
+    help(true);
+  } else if (arg[0] != "-") {
+    files.push({name: arg, re: new RegExp("(?:\\/|^)" + arg + (/\.js$/.test(arg) ? "$" : "\\.js$"))});
+  } else help(false);
+}
+
+function walk(dir) {
+  fs.readdirSync(dir).forEach(function(fname) {
+    if (/^[_\.]/.test(fname)) return;
+    var file = dir + fname;
+    if (fs.statSync(file).isDirectory()) return walk(file + "/");
+    if (files.some(function(spec, i) {
+      var match = spec.re.test(file);
+      if (match) files.splice(i, 1);
+      return match;
+    })) {
+      if (local) args.push(file);
+      else blob += fs.readFileSync(file, "utf8");
+    }
+  });
+}
+
+walk("lib/");
+walk("addon/");
+walk("mode/");
+
+if (!local && !blob) help(false);
+
+if (files.length) {
+  console.log("Some speficied files were not found: " +
+              files.map(function(a){return a.name;}).join(", "));
+  process.exit(1);
+}
+  
+if (local) {
+  require("child_process").spawn(local, args, {stdio: ["ignore", process.stdout, process.stderr]});
+} else {
+  var data = new Buffer("js_code=" + require("querystring").escape(blob), "utf8");
+  var req = require("http").request({
+    host: "marijnhaverbeke.nl",
+    port: 80,
+    method: "POST",
+    path: "/uglifyjs",
+    headers: {"content-type": "application/x-www-form-urlencoded",
+              "content-length": data.length}
+  });
+  req.on("response", function(resp) {
+    resp.on("data", function (chunk) { process.stdout.write(chunk); });
+  });
+  req.end(data);
+}

gulliver/js/codemirror/demo/activeline.html

@@ -0,0 +1,70 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Active Line Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../mode/xml/xml.js"></script>
+    <script src="../addon/selection/active-line.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+
+    <style type="text/css">
+      .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
+      .CodeMirror-activeline-background {background: #e8f2ff !important;}
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: Active Line Demo</h1>
+
+    <form><textarea id="code" name="code">
+<?xml version="1.0" encoding="UTF-8"?>
+<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"
+     xmlns:georss="http://www.georss.org/georss"
+     xmlns:twitter="http://api.twitter.com">
+  <channel>
+    <title>Twitter / codemirror</title>
+    <link>http://twitter.com/codemirror</link>
+    <atom:link type="application/rss+xml"
+               href="http://twitter.com/statuses/user_timeline/242283288.rss" rel="self"/>
+    <description>Twitter updates from CodeMirror / codemirror.</description>
+    <language>en-us</language>
+    <ttl>40</ttl>
+  <item>
+    <title>codemirror: http://cloud-ide.com &#8212; they're springing up like mushrooms. This one
+      uses CodeMirror as its editor.</title>
+    <description>codemirror: http://cloud-ide.com &#8212; they're springing up like mushrooms. This
+      one uses CodeMirror as its editor.</description>
+    <pubDate>Thu, 17 Mar 2011 23:34:47 +0000</pubDate>
+    <guid>http://twitter.com/codemirror/statuses/48527733722058752</guid>
+    <link>http://twitter.com/codemirror/statuses/48527733722058752</link>
+    <twitter:source>web</twitter:source>
+    <twitter:place/>
+  </item>
+  <item>
+    <title>codemirror: Posted a description of the CodeMirror 2 internals at
+      http://codemirror.net/2/internals.html</title>
+    <description>codemirror: Posted a description of the CodeMirror 2 internals at
+      http://codemirror.net/2/internals.html</description>
+    <pubDate>Wed, 02 Mar 2011 12:15:09 +0000</pubDate>
+    <guid>http://twitter.com/codemirror/statuses/42920879788789760</guid>
+    <link>http://twitter.com/codemirror/statuses/42920879788789760</link>
+    <twitter:source>web</twitter:source>
+    <twitter:place/>
+  </item>
+  </channel>
+</rss></textarea></form>
+
+    <script>
+var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+  mode: "application/xml",
+  styleActiveLine: true,
+  lineNumbers: true,
+  lineWrapping: true
+});
+</script>
+
+    <p>Styling the current cursor line.</p>
+
+  </body>
+</html>

gulliver/js/codemirror/demo/bidi.html

@@ -0,0 +1,61 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Bi-directional Text Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../mode/xml/xml.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+
+    <style type="text/css">
+      .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: Bi-directional Text Demo</h1>
+
+    <form><textarea id="code" name="code"><!-- Piece of the CodeMirror manual, 'translated' into Arabic by
+     Google Translate -->
+
+<dl>
+  <dt id=option_value><code>value (string or Doc)</code></dt>
+  <dd>قيمة البداية المحرر. يمكن أن تكون سلسلة، أو. كائن مستند.</dd>
+  <dt id=option_mode><code>mode (string or object)</code></dt>
+  <dd>وضع الاستخدام. عندما لا تعطى، وهذا الافتراضي إلى الطريقة الاولى
+  التي تم تحميلها. قد يكون من سلسلة، والتي إما أسماء أو ببساطة هو وضع
+  MIME نوع المرتبطة اسطة. بدلا من ذلك، قد يكون من كائن يحتوي على
+  خيارات التكوين لواسطة، مع <code>name</code> الخاصية التي وضع أسماء
+  (على سبيل المثال <code>{name: "javascript", json: true}</code>).
+  صفحات التجريبي لكل وضع تحتوي على معلومات حول ما معلمات تكوين وضع
+  يدعمها. يمكنك أن تطلب CodeMirror التي تم تعريفها طرق وأنواع MIME
+  الكشف على <code>CodeMirror.modes</code>
+  و <code>CodeMirror.mimeModes</code> الكائنات. وضع خرائط الأسماء
+  الأولى لمنشئات الخاصة بهم، وخرائط لأنواع MIME 2 المواصفات
+  واسطة.</dd>
+  <dt id=option_theme><code>theme (string)</code></dt>
+  <dd>موضوع لنمط المحرر مع. يجب عليك التأكد من الملف CSS تحديد
+  المقابلة <code>.cm-s-[name]</code> يتم تحميل أنماط (انظر
+  <a href=../theme/><code>theme</code></a> الدليل في التوزيع).
+  الافتراضي هو <code>"default"</code> ، والتي تم تضمينها في
+  الألوان <code>codemirror.css</code>. فمن الممكن استخدام فئات متعددة
+  في تطبيق السمات مرة واحدة على سبيل المثال <code>"foo bar"</code>
+  سيتم تعيين كل من <code>cm-s-foo</code> و <code>cm-s-bar</code>
+  الطبقات إلى المحرر.</dd>
+</dl>
+</textarea></form>
+
+    <script>
+var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+  mode: "text/html",
+  lineNumbers: true,
+  lineWrapping: true
+});
+</script>
+
+  <p>Demonstration of bi-directional text support. See
+  the <a href="http://marijnhaverbeke.nl/blog/cursor-in-bidi-text.html">related
+  blog post</a> for more background.</p>
+
+  </body>
+</html>

gulliver/js/codemirror/demo/btree.html

@@ -0,0 +1,87 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: B-Tree visualization</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+
+    <style type="text/css">
+      .lineblock { display: inline-block; margin: 1px; height: 5px; }
+      .CodeMirror {border: 1px solid #aaa; height: 400px}
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: B-Tree visualization</h1>
+
+    <p>Shows a visual representation of the b-tree that CodeMirror
+    uses to store its document. See
+    the <a href="http://marijnhaverbeke.nl/blog/codemirror-line-tree.html">corresponding
+    blog post</a> for a description of this format. The gray blocks
+    under each leaf show the lines it holds (with their width
+    representing the line height). Add and remove content to see how
+    the nodes are split and merged to keep the tree balanced.</p>
+
+    <div style="position: relative">
+      <div style="width: 60%; display: inline-block; vertical-align: top">
+        <form><textarea id="code" name="code">type here, see a summary of the document b-tree to the right</textarea></form>
+      </div>
+      <div style="display: inline-block; height: 402px; overflow-y: auto" id="output"></div>
+    </div>
+
+    <script id="me">
+var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+  lineNumbers: true,
+  lineWrapping: true
+});
+var updateTimeout;
+editor.on("change", function(cm) {
+  clearTimeout(updateTimeout);
+  updateTimeout = setTimeout(updateVisual, 200);
+});
+updateVisual();
+
+function updateVisual() {
+  var out = document.getElementById("output");
+  out.innerHTML = "";
+
+  function drawTree(out, node) {
+    if (node.lines) {
+      out.appendChild(document.createElement("div")).innerHTML =
+        "<b>leaf</b>: " + node.lines.length + " lines, " + Math.round(node.height) + " px";
+      var lines = out.appendChild(document.createElement("div"));
+      lines.style.lineHeight = "6px"; lines.style.marginLeft = "10px";
+      for (var i = 0; i < node.lines.length; ++i) {
+        var line = node.lines[i], lineElt = lines.appendChild(document.createElement("div"));
+        lineElt.className = "lineblock";
+        var gray = Math.min(line.text.length * 3, 230), col = gray.toString(16);
+        if (col.length == 1) col = "0" + col;
+        lineElt.style.background = "#" + col + col + col;
+                          console.log(line.height, line);
+        lineElt.style.width = Math.max(Math.round(line.height / 3), 1) + "px";
+      }
+    } else {
+      out.appendChild(document.createElement("div")).innerHTML =
+        "<b>node</b>: " + node.size + " lines, " + Math.round(node.height) + " px";
+      var sub = out.appendChild(document.createElement("div"));
+      sub.style.paddingLeft = "20px";
+      for (var i = 0; i < node.children.length; ++i)
+        drawTree(sub, node.children[i]);
+    }
+  }
+  drawTree(out, editor.getDoc());
+}
+
+function fillEditor() {
+  var sc = document.getElementById("me");
+  var doc = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "") + "\n";
+  doc += doc; doc += doc; doc += doc; doc += doc; doc += doc; doc += doc;
+  editor.setValue(doc);
+}
+    </script>
+
+<p><button onclick="fillEditor()">Add a lot of content</button></p>
+
+  </body>
+</html>

gulliver/js/codemirror/demo/buffers.html

@@ -0,0 +1,98 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Multiple Buffer & Split View Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../mode/javascript/javascript.js"></script>
+    <script src="../mode/css/css.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+
+    <style type="text/css" id=style>
+      .CodeMirror {border: 1px solid black; height: 250px;}
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: Multiple Buffer & Split View Demo</h1>
+
+    <div id=code_top></div>
+    <div>
+      Select buffer: <select id=buffers_top></select>
+      &nbsp; &nbsp; <button onclick="newBuf('top')">New buffer</button>
+    </div>
+    <div id=code_bot></div>
+    <div>
+      Select buffer: <select id=buffers_bot></select>
+      &nbsp; &nbsp; <button onclick="newBuf('bot')">New buffer</button>
+    </div>
+
+    <script id=script>
+var sel_top = document.getElementById("buffers_top");
+CodeMirror.on(sel_top, "change", function() {
+  selectBuffer(ed_top, sel_top.options[sel_top.selectedIndex].value);
+});
+
+var sel_bot = document.getElementById("buffers_bot");
+CodeMirror.on(sel_bot, "change", function() {
+  selectBuffer(ed_bot, sel_bot.options[sel_bot.selectedIndex].value);
+});
+
+var buffers = {};
+
+function openBuffer(name, text, mode) {
+  buffers[name] = CodeMirror.Doc(text, mode);
+  var opt = document.createElement("option");
+  opt.appendChild(document.createTextNode(name));
+  sel_top.appendChild(opt);
+  sel_bot.appendChild(opt.cloneNode(true));
+}
+
+function newBuf(where) {
+  var name = prompt("Name for the buffer", "*scratch*");
+  if (name == null) return;
+  if (buffers.hasOwnProperty(name)) {
+    alert("There's already a buffer by that name.");
+    return;
+  }
+  openBuffer(name, "", "javascript");
+  selectBuffer(where == "top" ? ed_top : ed_bot, name);
+  var sel = where == "top" ? sel_top : sel_bot;
+  sel.value = name;
+}
+
+function selectBuffer(editor, name) {
+  var buf = buffers[name];
+  if (buf.getEditor()) buf = buf.linkedDoc({sharedHist: true});
+  var old = editor.swapDoc(buf);
+  var linked = old.iterLinkedDocs(function(doc) {linked = doc;});
+  if (linked) {
+    // Make sure the document in buffers is the one the other view is looking at
+    for (var name in buffers) if (buffers[name] == old) buffers[name] = linked;
+    old.unlinkDoc(linked);
+  }
+  editor.focus();
+}
+
+function nodeContent(id) {
+  var node = document.getElementById(id), val = node.textContent || node.innerText;
+  val = val.slice(val.match(/^\s*/)[0].length, val.length - val.match(/\s*$/)[0].length) + "\n";
+  return val;
+}
+openBuffer("js", nodeContent("script"), "javascript");
+openBuffer("css", nodeContent("style"), "css");
+
+var ed_top = CodeMirror(document.getElementById("code_top"), {lineNumbers: true});
+selectBuffer(ed_top, "js");
+var ed_bot = CodeMirror(document.getElementById("code_bot"), {lineNumbers: true});
+selectBuffer(ed_bot, "js");
+</script>
+
+    <p>Demonstration of
+    using <a href="../doc/manual.html#linkedDoc">linked documents</a>
+    to provide a split view on a document, and
+    using <a href="../doc/manual.html#swapDoc"><code>swapDoc</code></a>
+    to use a single editor to display multiple documents.</p>
+
+  </body>
+</html>

gulliver/js/codemirror/demo/changemode.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Mode-Changing Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../mode/javascript/javascript.js"></script>
+    <script src="../mode/scheme/scheme.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+
+    <style type="text/css">
+      .CodeMirror {border: 1px solid black;}
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: Mode-Changing demo</h1>
+
+    <form><textarea id="code" name="code">
+;; If there is Scheme code in here, the editor will be in Scheme mode.
+;; If you put in JS instead, it'll switch to JS mode.
+
+(define (double x)
+  (* x x))
+</textarea></form>
+
+<p>On changes to the content of the above editor, a (crude) script
+tries to auto-detect the language used, and switches the editor to
+either JavaScript or Scheme mode based on that.</p>
+
+<script>
+  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+    mode: "scheme",
+    lineNumbers: true,
+    tabMode: "indent"
+  });
+  editor.on("change", function() {
+    clearTimeout(pending);
+    setTimeout(update, 400);
+  });
+  var pending;
+  function looksLikeScheme(code) {
+    return !/^\s*\(\s*function\b/.test(code) && /^\s*[;\(]/.test(code);
+  }
+  function update() {
+    editor.setOption("mode", looksLikeScheme(editor.getValue()) ? "scheme" : "javascript");
+  }
+</script>
+  </body>
+</html>

gulliver/js/codemirror/demo/closebrackets.html

@@ -0,0 +1,63 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Closebrackets Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../addon/edit/closebrackets.js"></script>
+    <script src="../mode/javascript/javascript.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+    <style type="text/css">
+      .CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;}
+    </style>
+  </head>
+  <body>
+
+    <h1>CodeMirror: Closebrackets Demo</h1>
+
+    <p>Type a bracket like '[', '(', '{', '&quot;', or '''
+    and <a href="../doc/manual.html#addon_closebrackets">the addon</a>
+    will auto-close it. Type the closing variant when directly in
+    front of a matching character and it will overwrite it.</p>
+
+    <p>If you backspace over a starting bracket while inside empty brackets
+    (e.g. <code>{|}</code>), it will delete the closing bracket for you.</p>
+
+
+    <form><textarea id="code" name="code">(function() {
+  var DEFAULT_BRACKETS = "()[]{}''\"\"";
+
+  CodeMirror.defineOption("autoCloseBrackets", false, function(cm, val, old) {
+    var wasOn = old && old != CodeMirror.Init;
+    if (val && !wasOn)
+      cm.addKeyMap(buildKeymap(typeof val == "string" ? val : DEFAULT_BRACKETS));
+    else if (!val && wasOn)
+      cm.removeKeyMap("autoCloseBrackets");
+  });
+
+  function buildKeymap(pairs) {
+    var map = {name : "autoCloseBrackets"};
+    for (var i = 0; i < pairs.length; i += 2) (function(left, right) {
+      function maybeOverwrite(cm) {
+        var cur = cm.getCursor(), ahead = cm.getRange(cur, CodeMirror.Pos(cur.line, cur.ch + 1));
+        if (ahead != right) return CodeMirror.Pass;
+        else cm.execCommand("goCharRight");
+      }
+      map["'" + left + "'"] = function(cm) {
+        if (left == right && maybeOverwrite(cm) != CodeMirror.Pass) return;
+        var cur = cm.getCursor(), ahead = CodeMirror.Pos(cur.line, cur.ch + 1);
+        cm.replaceSelection(left + right, {head: ahead, anchor: ahead});
+      };
+      if (left != right) map["'" + right + "'"] = maybeOverwrite;
+    })(pairs.charAt(i), pairs.charAt(i + 1));
+    return map;
+  }
+})();
+</textarea></form>
+
+    <script type="text/javascript">
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {autoCloseBrackets: true});
+    </script>
+  </body>
+</html>

gulliver/js/codemirror/demo/closetag.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Close-Tag Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../addon/edit/closetag.js"></script>
+    <script src="../mode/xml/xml.js"></script>
+    <script src="../mode/javascript/javascript.js"></script>
+    <script src="../mode/css/css.js"></script>
+    <script src="../mode/htmlmixed/htmlmixed.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+    <style type="text/css">
+      .CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;}
+    </style>
+  </head>
+  <body>
+    
+    <h1>Close-Tag Demo</h1>
+    <ul>
+      <li>Type an html tag.  When you type '>' or '/', the tag will auto-close/complete.  Block-level tags will indent.</li>
+      <li>There are options for disabling tag closing or customizing the list of tags to indent.</li>
+      <li>Works with "text/html" (based on htmlmixed.js or xml.js) mode.</li>
+      <li>View source for key binding details.</li>
+    </ul>
+
+    <form><textarea id="code" name="code"><html</textarea></form>
+
+    <script type="text/javascript">
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+        mode: 'text/html',
+        autoCloseTags: true
+      });
+    </script>
+  </body>
+</html>

gulliver/js/codemirror/demo/complete.html

@@ -0,0 +1,70 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Autocomplete Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../addon/hint/show-hint.js"></script>
+    <link rel="stylesheet" href="../addon/hint/show-hint.css">
+    <script src="../addon/hint/javascript-hint.js"></script>
+    <script src="../mode/javascript/javascript.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+  </head>
+  <body>
+    <h1>CodeMirror: Autocomplete demo</h1>
+
+    <form><textarea id="code" name="code">
+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;
+}
+</textarea></form>
+
+<p>Press <strong>ctrl-space</strong> to activate autocompletion. See
+the code (<a href="../addon/hint/show-hint.js">here</a>
+and <a href="../addon/hint/javascript-hint.js">here</a>) to figure out
+how it works.</p>
+
+    <script>
+      CodeMirror.commands.autocomplete = function(cm) {
+        CodeMirror.showHint(cm, CodeMirror.javascriptHint);
+      }
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+        lineNumbers: true,
+        extraKeys: {"Ctrl-Space": "autocomplete"}
+      });
+    </script>
+  </body>
+</html>

gulliver/js/codemirror/demo/completePHP.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Autocomplete Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../addon/edit/matchbrackets.js"></script>
+    <script src="../mode/htmlmixed/htmlmixed.js"></script>
+    <script src="../mode/xml/xml.js"></script>
+    <script src="../mode/javascript/javascript.js"></script>
+    <script src="../mode/css/css.js"></script>
+    <script src="../mode/clike/clike.js"></script>
+
+    <script src="../addon/hint/show-hint.js"></script>
+    <link rel="stylesheet" href="../addon/hint/show-hint.css">
+    <script src="../addon/hint/php-hint.js"></script>
+    <script src="../mode/php/php.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+  </head>
+  <body>
+    <h2>CodeMirror: Autocomplete demo</h2>
+
+    <form><textarea id="code" name="code">
+<?php
+
+function getData($data) {
+    $tre = $data . " fff ";
+    return $tre;
+}
+
+$sa =
+PMFAddInputDocument(
+
+$list = array("a" => 1, "b" => 2, "c" => 4 );
+
+?>
+</textarea></form>
+
+<p>Press <strong>ctrl-space</strong> to activate autocompletion. See
+the code (<a href="../addon/hint/show-hint.js">here</a>
+and <a href="../addon/hint/php-hint.js">here</a>) to figure out
+how it works.</p>
+
+    <script>
+      CodeMirror.commands.autocomplete = function(cm) {
+        CodeMirror.showHint(cm, CodeMirror.phpHint);
+      }
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+        lineNumbers: true,
+        matchBrackets: true,
+        mode: "application/x-httpd-php",
+        indentUnit: 2,
+        indentWithTabs: true,
+        extraKeys: {"Ctrl-Space": "autocomplete"}
+      });
+    </script>
+  </body>
+</html>

gulliver/js/codemirror/demo/emacs.html

@@ -0,0 +1,60 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Emacs bindings demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../mode/clike/clike.js"></script>
+    <script src="../keymap/emacs.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+
+    <style type="text/css">
+      .CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: Emacs bindings demo</h1>
+
+    <form><textarea id="code" name="code">
+#include "syscalls.h"
+/* getchar:  simple buffered version */
+int getchar(void)
+{
+  static char buf[BUFSIZ];
+  static char *bufp = buf;
+  static int n = 0;
+  if (n == 0) {  /* buffer is empty */
+    n = read(0, buf, sizeof buf);
+    bufp = buf;
+  }
+  return (--n >= 0) ? (unsigned char) *bufp++ : EOF;
+}
+</textarea></form>
+
+<p>The emacs keybindings are enabled by
+including <a href="../keymap/emacs.js">keymap/emacs.js</a> and setting
+the <code>keyMap</code> option to <code>"emacs"</code>. Because
+CodeMirror's internal API is quite different from Emacs, they are only
+a loose approximation of actual emacs bindings, though.</p>
+
+<p>Also note that a lot of browsers disallow certain keys from being
+captured. For example, Chrome blocks both Ctrl-W and Ctrl-N, with the
+result that idiomatic use of Emacs keys will constantly close your tab
+or open a new window.</p>
+
+    <script>
+      CodeMirror.commands.save = function() {
+        var elt = editor.getWrapperElement();
+        elt.style.background = "#def";
+        setTimeout(function() { elt.style.background = ""; }, 300);
+      };
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+        lineNumbers: true,
+        mode: "text/x-csrc",
+        keyMap: "emacs"
+      });
+    </script>
+
+  </body>
+</html>

gulliver/js/codemirror/demo/folding.html

@@ -0,0 +1,69 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Code Folding Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../addon/fold/foldcode.js"></script>
+    <script src="../addon/fold/brace-fold.js"></script>
+    <script src="../addon/fold/xml-fold.js"></script>
+    <script src="../mode/javascript/javascript.js"></script>
+    <script src="../mode/xml/xml.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+
+    <style type="text/css">
+      .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
+      .CodeMirror-foldmarker {
+        color: blue;
+        text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
+        font-family: arial;
+        line-height: .3;
+        cursor: pointer;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: Code Folding Demo</h1>
+
+    <p>Demonstration of code folding using the code
+    in <a href="../addon/fold/foldcode.js"><code>foldcode.js</code></a>.
+    Press ctrl-q or click on the gutter to fold a block, again
+    to unfold.</p>
+    <form>
+      <div style="max-width: 50em; margin-bottom: 1em">JavaScript:<br><textarea id="code" name="code"></textarea></div>
+      <div style="max-width: 50em">HTML:<br><textarea id="code-html" name="code-html"></textarea></div>
+    </form>
+    <script id="script">
+window.onload = function() {
+  var te = document.getElementById("code");
+  var sc = document.getElementById("script");
+  te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "");
+  sc.innerHTML = "";
+  var te_html = document.getElementById("code-html");
+  te_html.value = "<html>\n  " + document.documentElement.innerHTML + "\n</html>";
+
+  var foldFunc = CodeMirror.newFoldFunction(CodeMirror.braceRangeFinder);
+  window.editor = CodeMirror.fromTextArea(te, {
+    mode: "javascript",
+    lineNumbers: true,
+    lineWrapping: true,
+    extraKeys: {"Ctrl-Q": function(cm){foldFunc(cm, cm.getCursor().line);}}
+  });
+  editor.on("gutterClick", foldFunc);
+  foldFunc(editor, 9);
+
+  var foldFunc_html = CodeMirror.newFoldFunction(CodeMirror.tagRangeFinder);
+  window.editor_html = CodeMirror.fromTextArea(te_html, {
+    mode: "text/html",
+    lineNumbers: true,
+    lineWrapping: true,
+    extraKeys: {"Ctrl-Q": function(cm){foldFunc_html(cm, cm.getCursor().line);}}
+  });
+  editor_html.on("gutterClick", foldFunc_html);
+  foldFunc_html(editor_html, 11);
+  foldFunc_html(editor_html, 1);
+};
+</script>
+  </body>
+</html>

gulliver/js/codemirror/demo/fullscreen.html

@@ -0,0 +1,147 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Full Screen Editing</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <link rel="stylesheet" href="../theme/night.css">
+    <script src="../mode/xml/xml.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+
+    <style type="text/css">
+      .CodeMirror-fullscreen {
+        display: block;
+        position: absolute;
+        top: 0; left: 0;
+        width: 100%;
+        z-index: 9999;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: Full Screen Editing</h1>
+
+    <form><textarea id="code" name="code" rows="5">
+  <dt id="option_indentWithTabs"><code>indentWithTabs (boolean)</code></dt>
+  <dd>Whether, when indenting, the first N*8 spaces should be
+  replaced by N tabs. Default is false.</dd>
+
+  <dt id="option_tabMode"><code>tabMode (string)</code></dt>
+  <dd>Determines what happens when the user presses the tab key.
+  Must be one of the following:
+    <dl>
+      <dt><code>"classic" (the default)</code></dt>
+      <dd>When nothing is selected, insert a tab. Otherwise,
+      behave like the <code>"shift"</code> mode. (When shift is
+      held, this behaves like the <code>"indent"</code> mode.)</dd>
+      <dt><code>"shift"</code></dt>
+      <dd>Indent all selected lines by
+      one <a href="#option_indentUnit"><code>indentUnit</code></a>.
+      If shift was held while pressing tab, un-indent all selected
+      lines one unit.</dd>
+      <dt><code>"indent"</code></dt>
+      <dd>Indent the line the 'correctly', based on its syntactic
+      context. Only works if the
+      mode <a href="#indent">supports</a> it.</dd>
+      <dt><code>"default"</code></dt>
+      <dd>Do not capture tab presses, let the browser apply its
+      default behaviour (which usually means it skips to the next
+      control).</dd>
+    </dl></dd>
+
+  <dt id="option_enterMode"><code>enterMode (string)</code></dt>
+  <dd>Determines whether and how new lines are indented when the
+  enter key is pressed. The following modes are supported:
+    <dl>
+      <dt><code>"indent" (the default)</code></dt>
+      <dd>Use the mode's indentation rules to give the new line
+      the correct indentation.</dd>
+      <dt><code>"keep"</code></dt>
+      <dd>Indent the line the same as the previous line.</dd>
+      <dt><code>"flat"</code></dt>
+      <dd>Do not indent the new line.</dd>
+    </dl></dd>
+
+  <dt id="option_enterMode"><code>enterMode (string)</code></dt>
+  <dd>Determines whether and how new lines are indented when the
+  enter key is pressed. The following modes are supported:
+    <dl>
+      <dt><code>"indent" (the default)</code></dt>
+      <dd>Use the mode's indentation rules to give the new line
+      the correct indentation.</dd>
+      <dt><code>"keep"</code></dt>
+      <dd>Indent the line the same as the previous line.</dd>
+      <dt><code>"flat"</code></dt>
+      <dd>Do not indent the new line.</dd>
+    </dl></dd>
+
+  <dt id="option_enterMode"><code>enterMode (string)</code></dt>
+  <dd>Determines whether and how new lines are indented when the
+  enter key is pressed. The following modes are supported:
+    <dl>
+      <dt><code>"indent" (the default)</code></dt>
+      <dd>Use the mode's indentation rules to give the new line
+      the correct indentation.</dd>
+      <dt><code>"keep"</code></dt>
+      <dd>Indent the line the same as the previous line.</dd>
+      <dt><code>"flat"</code></dt>
+      <dd>Do not indent the new line.</dd>
+    </dl></dd>
+
+  <dt id="option_enterMode"><code>enterMode (string)</code></dt>
+  <dd>Determines whether and how new lines are indented when the
+  enter key is pressed. The following modes are supported:
+    <dl>
+      <dt><code>"indent" (the default)</code></dt>
+      <dd>Use the mode's indentation rules to give the new line
+      the correct indentation.</dd>
+      <dt><code>"keep"</code></dt>
+      <dd>Indent the line the same as the previous line.</dd>
+      <dt><code>"flat"</code></dt>
+      <dd>Do not indent the new line.</dd>
+    </dl></dd>
+
+</textarea></form>
+  <script>
+    function isFullScreen(cm) {
+      return /\bCodeMirror-fullscreen\b/.test(cm.getWrapperElement().className);
+    }
+    function winHeight() {
+      return window.innerHeight || (document.documentElement || document.body).clientHeight;
+    }
+    function setFullScreen(cm, full) {
+      var wrap = cm.getWrapperElement();
+      if (full) {
+        wrap.className += " CodeMirror-fullscreen";
+        wrap.style.height = winHeight() + "px";
+        document.documentElement.style.overflow = "hidden";
+      } else {
+        wrap.className = wrap.className.replace(" CodeMirror-fullscreen", "");
+        wrap.style.height = "";
+        document.documentElement.style.overflow = "";
+      }
+      cm.refresh();
+    }
+    CodeMirror.on(window, "resize", function() {
+      var showing = document.body.getElementsByClassName("CodeMirror-fullscreen")[0];
+      if (!showing) return;
+      showing.CodeMirror.getWrapperElement().style.height = winHeight() + "px";
+    });
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+      lineNumbers: true,
+      theme: "night",
+      extraKeys: {
+        "F11": function(cm) {
+          setFullScreen(cm, !isFullScreen(cm));
+        },
+        "Esc": function(cm) {
+          if (isFullScreen(cm)) setFullScreen(cm, false);
+        }
+      }
+    });
+  </script>
+
+    <p>Press <strong>F11</strong> when cursor is in the editor to toggle full screen editing. <strong>Esc</strong> can also be used to <i>exit</i> full screen editing.</p>
+  </body>
+</html>

gulliver/js/codemirror/demo/html5complete.html

@@ -0,0 +1,92 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Close-Tag Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../addon/hint/show-hint.js"></script>
+    <link rel="stylesheet" href="../addon/hint/show-hint.css">
+    <script src="../addon/edit/closetag.js"></script>
+    <script src="../addon/hint/html-hint.js"></script>
+    <script src="../mode/xml/xml.js"></script>
+    <script src="../mode/javascript/javascript.js"></script>
+    <script src="../mode/css/css.js"></script>
+    <script src="../mode/htmlmixed/htmlmixed.js"></script>
+        
+    <link rel="stylesheet" href="../doc/docs.css">
+    <style type="text/css">
+      .CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;}
+    </style>
+  </head>
+  <body>
+    
+    <h1>HTML5 code completation demo</h1>
+    <ul>
+      <li>Type an html tag. If you press Ctrl+Space a hint panel show the code suggest. You can type to autocomplete tags, attributes if your cursor are inner a tag or attribute values if your cursor are inner a attribute value.</li>
+    </ul>
+
+    <form><textarea id="code" name="code">
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="utf-8">
+    <title>Home - W2S Web IDE</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+  </head>
+  
+  <body>
+    
+    <div class="container">
+      
+      <div class="masthead">
+        <h3 class="muted">HTML5 Autocomplete</h3>
+        <div class="navbar">
+          <div class="navbar-inner">
+            <div class="container">
+              <ul class="nav">
+                <li class=" active "><a href="#">Home</a></li>
+                <li class=""><a href="#">Features</a></li>
+                <li class=""><a href="#">Sign In</a></li>
+              </ul>
+            </div>
+          </div>
+        </div><!-- /.navbar -->
+      </div>
+      
+      <!-- Jumbotron -->
+      <div class="jumbotron">
+        <img src="/Images/w2s.png" />
+        <h1>W2S Cloud IDE</h1>
+      </div>
+      
+      <hr>
+      
+      
+      <hr>
+      
+      <div class="footer">
+        Final of html5 autocomplete
+      </div>
+      
+    </div> <!-- /container -->
+  </body>
+</html>
+
+</textarea></form>
+    <script type="text/javascript">
+      CodeMirror.commands.autocomplete = function(cm) {
+          CodeMirror.showHint(cm, CodeMirror.htmlHint);
+      }
+        
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+        mode: 'text/html',
+        autoCloseTags: true,
+        extraKeys: {"Ctrl-Space": "autocomplete"}
+      });
+    </script>
+  </body>
+</html>

gulliver/js/codemirror/demo/indentwrap.html

@@ -0,0 +1,49 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Indented wrapped line demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../mode/xml/xml.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+
+    <style type="text/css">
+      .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: Indented wrapped line demo</h1>
+
+    <form><textarea id="code" name="code">
+<!doctype html>
+<body>
+  <h2 id="overview">Overview</h2>
+
+  <p>CodeMirror is a code-editor component that can be embedded in Web pages. The core library provides <em>only</em> the editor component, no accompanying buttons, auto-completion, or other IDE functionality. It does provide a rich API on top of which such functionality can be straightforwardly implemented. See the <a href="#addons">add-ons</a> included in the distribution, and the <a href="https://github.com/jagthedrummer/codemirror-ui">CodeMirror UI</a> project, for reusable implementations of extra features.</p>
+
+  <p>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 number of modes (see the <a href="../mode/"><code>mode/</code></a> directory), and it isn't hard to <a href="#modeapi">write new ones</a> for other languages.</p>
+</body>
+</textarea></form>
+
+    <p>This page uses a hack on top of the <code>"renderLine"</code>
+    event to make wrapped text line up with the base indentation of
+    the line.</p>
+
+    <script>
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+        lineNumbers: true,
+        lineWrapping: true,
+        mode: "text/html"
+      });
+      var charWidth = editor.defaultCharWidth(), basePadding = 4;
+      editor.on("renderLine", function(cm, line, elt) {
+        var off = CodeMirror.countColumn(line.text, null, cm.getOption("tabSize")) * charWidth;
+        elt.style.textIndent = "-" + off + "px";
+        elt.style.paddingLeft = (basePadding + off) + "px";
+      });
+      editor.refresh();
+    </script>
+
+  </body>
+</html>

gulliver/js/codemirror/demo/lint.html

@@ -0,0 +1,90 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Linter Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../mode/javascript/javascript.js"></script>
+    <script src="http://ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script>
+    <script src="https://raw.github.com/zaach/jsonlint/79b553fb65c192add9066da64043458981b3972b/lib/jsonlint.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+    <link rel="stylesheet" href="../addon/lint/lint.css">
+    <script src="../addon/lint/lint.js"></script>
+    <script src="../addon/lint/javascript-lint.js"></script>
+    <script src="../addon/lint/json-lint.js"></script>
+
+    <style type="text/css">
+      .CodeMirror {border: 1px solid black;}
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: Linter Demo</h1>
+
+    <p><textarea id="code-js">var widgets = []
+function updateHints() {
+  editor.operation(function(){
+    for (var i = 0; i < widgets.length; ++i)
+      editor.removeLineWidget(widgets[i]);
+    widgets.length = 0;
+
+    JSHINT(editor.getValue());
+    for (var i = 0; i < JSHINT.errors.length; ++i) {
+      var err = JSHINT.errors[i];
+      if (!err) continue;
+      var msg = document.createElement("div");
+      var icon = msg.appendChild(document.createElement("span"));
+      icon.innerHTML = "!!";
+      icon.className = "lint-error-icon";
+      msg.appendChild(document.createTextNode(err.reason));
+      msg.className = "lint-error";
+      widgets.push(editor.addLineWidget(err.line - 1, msg, {coverGutter: false, noHScroll: true}));
+    }
+  });
+  var info = editor.getScrollInfo();
+  var after = editor.charCoords({line: editor.getCursor().line + 1, ch: 0}, "local").top;
+  if (info.top + info.clientHeight < after)
+    editor.scrollTo(null, after - info.clientHeight + 3);
+}
+</textarea></p>
+
+    <p><textarea id="code-json">[
+ {
+  _id: "post 1",
+  "author": "Bob",
+  "content": "...",
+  "page_views": 5
+ },
+ {
+  "_id": "post 2",
+  "author": "Bob",
+  "content": "...",
+  "page_views": 9
+ },
+ {
+  "_id": "post 3",
+  "author": "Bob",
+  "content": "...",
+  "page_views": 8
+ }
+]
+</textarea></p>
+
+<script>
+  var editor = CodeMirror.fromTextArea(document.getElementById("code-js"), {
+    lineNumbers: true,
+    mode: "javascript",
+    gutters: ["CodeMirror-lint-markers"],
+    lintWith: CodeMirror.javascriptValidator
+  });
+
+  var editor_json = CodeMirror.fromTextArea(document.getElementById("code-json"), {
+    lineNumbers: true,
+    mode: "application/json",
+    gutters: ["CodeMirror-lint-markers"],
+    lintWith: CodeMirror.jsonValidator
+  });
+</script>
+
+  </body>
+</html>

gulliver/js/codemirror/demo/loadmode.html

@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Lazy Mode Loading Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../addon/mode/loadmode.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+
+    <style type="text/css">
+      .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: Lazy Mode Loading</h1>
+
+    <form><textarea id="code" name="code">This is the editor.
+// It starts out in plain text mode,
+#  use the control below to load and apply a mode
+  "you'll see the highlighting of" this text /*change*/.
+</textarea></form>
+<p><input type=text value=javascript id=mode> <button type=button onclick="change()">change mode</button></p>
+
+    <script>
+CodeMirror.modeURL = "../mode/%N/%N.js";
+var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+  lineNumbers: true
+});
+var modeInput = document.getElementById("mode");
+CodeMirror.on(modeInput, "keypress", function(e) {
+  if (e.keyCode == 13) change();
+});
+function change() {
+   editor.setOption("mode", modeInput.value);
+   CodeMirror.autoLoadMode(editor, modeInput.value);
+}
+</script>
+  </body>
+</html>

gulliver/js/codemirror/demo/marker.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Breakpoint Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../mode/javascript/javascript.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+
+    <style type="text/css">
+      .breakpoints {width: .8em;}
+      .breakpoint { color: #822; }
+      .CodeMirror {border: 1px solid #aaa;}
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: Breakpoint demo</h1>
+
+    <form><textarea id="code" name="code">
+var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+  lineNumbers: true,
+  gutters: ["CodeMirror-linenumbers", "breakpoints"]
+});
+editor.on("gutterClick", function(cm, n) {
+  var info = cm.lineInfo(n);
+  cm.setGutterMarker(n, "breakpoints", info.markers ? null : makeMarker());
+});
+
+function makeMarker() {
+  var marker = document.createElement("div");
+  marker.innerHTML = "●";
+  marker.className = "breakpoint";
+  return marker;
+}
+</textarea></form>
+
+<p>Click the line-number gutter to add or remove 'breakpoints'.</p>
+
+    <script>
+var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+  lineNumbers: true,
+  gutters: ["CodeMirror-linenumbers", "breakpoints"]
+});
+editor.on("gutterClick", function(cm, n) {
+  var info = cm.lineInfo(n);
+  cm.setGutterMarker(n, "breakpoints", info.gutterMarkers ? null : makeMarker());
+});
+
+function makeMarker() {
+  var marker = document.createElement("div");
+  marker.style.color = "#822";
+  marker.innerHTML = "●";
+  return marker;
+}
+    </script>
+
+  </body>
+</html>

gulliver/js/codemirror/demo/markselection.html

@@ -0,0 +1,36 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Match Highlighter Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../addon/search/searchcursor.js"></script>
+    <script src="../addon/selection/mark-selection.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+
+    <style type="text/css">
+      .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
+      .CodeMirror-selected  { background-color: blue !important; }
+      .CodeMirror-selectedtext { color: white; }
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: Mark Selection Demo</h1>
+
+    <form><textarea id="code" name="code">Select something from here.
+You'll see that the selection's foreground color changes to white!
+Since, by default, CodeMirror only puts an independent "marker" layer
+behind the text, you'll need something like this to change its colour.</textarea></form>
+
+    <script>
+var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+  lineNumbers: true,
+  styleSelectedText: true
+});
+</script>
+
+    <p>Simple addon to easily mark (and style) selected text.</p>
+
+  </body>
+</html>

gulliver/js/codemirror/demo/matchhighlighter.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Match Highlighter Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../addon/search/searchcursor.js"></script>
+    <script src="../addon/search/match-highlighter.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+
+    <style type="text/css">
+      .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
+      .CodeMirror-focused .cm-matchhighlight {
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
+        background-position: bottom;
+        background-repeat: repeat-x;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: Match Highlighter Demo</h1>
+
+    <form><textarea id="code" name="code">Select this text: hardToSpotVar
+	And everywhere else in your code where hardToSpotVar appears will automatically illuminate.
+Give it a try!  No more hardToSpotVars.</textarea></form>
+
+    <script>
+var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+  lineNumbers: true,
+  highlightSelectionMatches: true
+});
+</script>
+
+    <p>Search and highlight occurences of the selected text.</p>
+
+  </body>
+</html>

gulliver/js/codemirror/demo/multiplex.html

@@ -0,0 +1,60 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Multiplexing Parser Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../addon/mode/multiplex.js"></script>
+    <script src="../mode/xml/xml.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+
+    <style type="text/css">
+      .CodeMirror {border: 1px solid black;}
+      .cm-delimit {color: #fa4;}
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: Multiplexing Parser Demo</h1>
+
+    <form><textarea id="code" name="code">
+<html>
+  <body style="<<magic>>">
+    <h1><< this is not <html >></h1>
+    <<
+        multiline
+        not html
+        at all : &amp;amp; <link/>
+    >>
+    <p>this is html again</p>
+  </body>
+</html>
+</textarea></form>
+
+    <script>
+CodeMirror.defineMode("demo", function(config) {
+  return CodeMirror.multiplexingMode(
+    CodeMirror.getMode(config, "text/html"),
+    {open: "<<", close: ">>",
+     mode: CodeMirror.getMode(config, "text/plain"),
+     delimStyle: "delimit"}
+    // .. more multiplexed styles can follow here
+  );
+});
+var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+  mode: "demo",
+  lineNumbers: true,
+  lineWrapping: true
+});
+</script>
+
+    <p>Demonstration of a multiplexing mode, which, at certain
+    boundary strings, switches to one or more inner modes. The out
+    (HTML) mode does not get fed the content of the <code>&lt;&lt;
+    >></code> blocks. See
+    the <a href="../doc/manual.html#addon_multiplex">manual</a> and
+    the <a href="../addon/mode/multiplex.js">source</a> for more
+    information.</p>
+
+  </body>
+</html>

gulliver/js/codemirror/demo/mustache.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Overlay Parser Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../addon/mode/overlay.js"></script>
+    <script src="../mode/xml/xml.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+
+    <style type="text/css">
+      .CodeMirror {border: 1px solid black;}
+      .cm-mustache {color: #0ca;}
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: Overlay Parser Demo</h1>
+
+    <form><textarea id="code" name="code">
+<html>
+  <body>
+    <h1>{{title}}</h1>
+    <p>These are links to {{things}}:</p>
+    <ul>{{#links}}
+      <li><a href="{{url}}">{{text}}</a></li>
+    {{/links}}</ul>
+  </body>
+</html>
+</textarea></form>
+
+    <script>
+CodeMirror.defineMode("mustache", function(config, parserConfig) {
+  var mustacheOverlay = {
+    token: function(stream, state) {
+      var ch;
+      if (stream.match("{{")) {
+        while ((ch = stream.next()) != null)
+          if (ch == "}" && stream.next() == "}") break;
+        stream.eat("}");
+        return "mustache";
+      }
+      while (stream.next() != null && !stream.match("{{", false)) {}
+      return null;
+    }
+  };
+  return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), mustacheOverlay);
+});
+var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "mustache"});
+</script>
+
+    <p>Demonstration of a mode that parses HTML, highlighting
+    the <a href="http://mustache.github.com/">Mustache</a> templating
+    directives inside of it by using the code
+    in <a href="../addon/mode/overlay.js"><code>overlay.js</code></a>. View
+    source to see the 15 lines of code needed to accomplish this.</p>
+
+  </body>
+</html>

gulliver/js/codemirror/demo/placeholder.html

@@ -0,0 +1,36 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Placeholder demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../addon/display/placeholder.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+
+    <style type="text/css">
+      .CodeMirror { border: 1px solid silver; }
+      .CodeMirror-empty { outline: 1px solid #c22; }
+      .CodeMirror-empty.CodeMirror-focused { outline: none; }
+      .CodeMirror pre.CodeMirror-placeholder { color: #999; }
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: Placeholder demo</h1>
+
+    <form><textarea id="code" name="code" placeholder="Code goes here..."></textarea></form>
+
+    <p>The <a href="../doc/manual.html#addon_placeholder">placeholder</a>
+    plug-in adds an option <code>placeholder</code> that can be set to
+    make text appear in the editor when it is empty and not focused.
+    If the source textarea has a <code>placeholder</code> attribute,
+    it will automatically be inherited.</p>
+
+    <script>
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+        lineNumbers: true
+      });
+    </script>
+
+  </body>
+</html>

gulliver/js/codemirror/demo/preview.html

@@ -0,0 +1,76 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: HTML5 preview</title>
+    <script src=../lib/codemirror.js></script>
+    <script src=../mode/xml/xml.js></script>
+    <script src=../mode/javascript/javascript.js></script>
+    <script src=../mode/css/css.js></script>
+    <script src=../mode/htmlmixed/htmlmixed.js></script>
+    <link rel=stylesheet href=../lib/codemirror.css>
+    <link rel=stylesheet href=../doc/docs.css>
+    <style type=text/css>
+      .CodeMirror {
+        float: left;
+        width: 50%;
+        border: 1px solid black;
+      }
+      iframe {
+        width: 49%;
+        float: left;
+        height: 300px;
+        border: 1px solid black;
+        border-left: 0px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: HTML5 preview</h1>
+    <textarea id=code name=code>
+<!doctype html>
+<html>
+  <head>
+    <meta charset=utf-8>
+    <title>HTML5 canvas demo</title>
+    <style>p {font-family: monospace;}</style>
+  </head>
+  <body>
+    <p>Canvas pane goes here:</p>
+    <canvas id=pane width=300 height=200></canvas>
+    <script>
+      var canvas = document.getElementById('pane');
+      var context = canvas.getContext('2d');
+
+      context.fillStyle = 'rgb(250,0,0)';
+      context.fillRect(10, 10, 55, 50);
+
+      context.fillStyle = 'rgba(0, 0, 250, 0.5)';
+      context.fillRect(30, 30, 55, 50);
+    </script>
+  </body>
+</html></textarea>
+    <iframe id=preview></iframe>
+    <script>
+      var delay;
+      // Initialize CodeMirror editor with a nice html5 canvas demo.
+      var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
+        mode: 'text/html',
+        tabMode: 'indent'
+      });
+      editor.on("change", function() {
+        clearTimeout(delay);
+        delay = setTimeout(updatePreview, 300);
+      });
+      
+      function updatePreview() {
+        var previewFrame = document.getElementById('preview');
+        var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
+        preview.open();
+        preview.write(editor.getValue());
+        preview.close();
+      }
+      setTimeout(updatePreview, 300);
+    </script>
+  </body>
+</html>

gulliver/js/codemirror/demo/resize.html

@@ -0,0 +1,49 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Autoresize Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../mode/css/css.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+
+    <style type="text/css">
+      .CodeMirror {
+        border: 1px solid #eee;
+        height: auto;
+      }
+      .CodeMirror-scroll {
+        overflow-y: hidden;
+        overflow-x: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: Autoresize demo</h1>
+
+    <form><textarea id="code" name="code">
+.CodeMirror {
+  border: 1px solid #eee;
+  height: auto;
+}
+.CodeMirror-scroll {
+  overflow-y: hidden;
+  overflow-x: auto;
+}
+</textarea></form>
+
+<p>By setting a few CSS properties, and giving
+the <a href="../doc/manual.html#option_viewportMargin"><code>viewportMargin</code></a>
+a value of <code>Infinity</code>, CodeMirror can be made to
+automatically resize to fit its content.</p>
+
+    <script>
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+        lineNumbers: true,
+        viewportMargin: Infinity
+      });
+    </script>
+
+  </body>
+</html>

gulliver/js/codemirror/demo/runmode.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Mode Runner Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../addon/runmode/runmode.js"></script>
+    <script src="../mode/xml/xml.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+  </head>
+  <body>
+    <h1>CodeMirror: Mode Runner Demo</h1>
+
+    <textarea id="code" style="width: 90%; height: 7em; border: 1px solid black; padding: .2em .4em;">
+<foobar>
+  <blah>Enter your xml here and press the button below to display
+    it as highlighted by the CodeMirror XML mode</blah>
+  <tag2 foo="2" bar="&amp;quot;bar&amp;quot;"/>
+</foobar></textarea><br>
+    <button onclick="doHighlight();">Highlight!</button>
+    <pre id="output" class="cm-s-default"></pre>
+
+    <script>
+function doHighlight() {
+  CodeMirror.runMode(document.getElementById("code").value, "application/xml",
+                     document.getElementById("output"));
+}
+</script>
+
+    <p>Running a CodeMirror mode outside of the editor.
+    The <code>CodeMirror.runMode</code> function, defined
+    in <code><a href="../addon/runmode/runmode.js">lib/runmode.js</a></code> takes the following arguments:</p>
+
+    <dl>
+      <dt><code>text (string)</code></dt>
+      <dd>The document to run through the highlighter.</dd>
+      <dt><code>mode (<a href="../doc/manual.html#option_mode">mode spec</a>)</code></dt>
+      <dd>The mode to use (must be loaded as normal).</dd>
+      <dt><code>output (function or DOM node)</code></dt>
+      <dd>If this is a function, it will be called for each token with
+      two arguments, the token's text and the token's style class (may
+      be <code>null</code> for unstyled tokens). If it is a DOM node,
+      the tokens will be converted to <code>span</code> elements as in
+      an editor, and inserted into the node
+      (through <code>innerHTML</code>).</dd>
+    </dl>
+
+  </body>
+</html>

gulliver/js/codemirror/demo/search.html

@@ -0,0 +1,85 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Search/Replace Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../mode/xml/xml.js"></script>
+    <script src="../addon/dialog/dialog.js"></script>
+    <link rel="stylesheet" href="../addon/dialog/dialog.css">
+    <script src="../addon/search/searchcursor.js"></script>
+    <script src="../addon/search/search.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+
+    <style type="text/css">
+      .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
+      dt {font-family: monospace; color: #666;}
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: Search/Replace Demo</h1>
+
+    <form><textarea id="code" name="code">
+  <dt id="option_indentWithTabs"><code>indentWithTabs (boolean)</code></dt>
+  <dd>Whether, when indenting, the first N*8 spaces should be
+  replaced by N tabs. Default is false.</dd>
+
+  <dt id="option_tabMode"><code>tabMode (string)</code></dt>
+  <dd>Determines what happens when the user presses the tab key.
+  Must be one of the following:
+    <dl>
+      <dt><code>"classic" (the default)</code></dt>
+      <dd>When nothing is selected, insert a tab. Otherwise,
+      behave like the <code>"shift"</code> mode. (When shift is
+      held, this behaves like the <code>"indent"</code> mode.)</dd>
+      <dt><code>"shift"</code></dt>
+      <dd>Indent all selected lines by
+      one <a href="#option_indentUnit"><code>indentUnit</code></a>.
+      If shift was held while pressing tab, un-indent all selected
+      lines one unit.</dd>
+      <dt><code>"indent"</code></dt>
+      <dd>Indent the line the 'correctly', based on its syntactic
+      context. Only works if the
+      mode <a href="#indent">supports</a> it.</dd>
+      <dt><code>"default"</code></dt>
+      <dd>Do not capture tab presses, let the browser apply its
+      default behaviour (which usually means it skips to the next
+      control).</dd>
+    </dl></dd>
+
+  <dt id="option_enterMode"><code>enterMode (string)</code></dt>
+  <dd>Determines whether and how new lines are indented when the
+  enter key is pressed. The following modes are supported:
+    <dl>
+      <dt><code>"indent" (the default)</code></dt>
+      <dd>Use the mode's indentation rules to give the new line
+      the correct indentation.</dd>
+      <dt><code>"keep"</code></dt>
+      <dd>Indent the line the same as the previous line.</dd>
+      <dt><code>"flat"</code></dt>
+      <dd>Do not indent the new line.</dd>
+    </dl></dd>
+</textarea></form>
+
+    <script>
+var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "text/html", lineNumbers: true});
+</script>
+
+    <p>Demonstration of primitive search/replace functionality. The
+    keybindings (which can be overridden by custom keymaps) are:</p>
+    <dl>
+      <dt>Ctrl-F / Cmd-F</dt><dd>Start searching</dd>
+      <dt>Ctrl-G / Cmd-G</dt><dd>Find next</dd>
+      <dt>Shift-Ctrl-G / Shift-Cmd-G</dt><dd>Find previous</dd>
+      <dt>Shift-Ctrl-F / Cmd-Option-F</dt><dd>Replace</dd>
+      <dt>Shift-Ctrl-R / Shift-Cmd-Option-F</dt><dd>Replace all</dd>
+    </dl>
+    <p>Searching is enabled by
+    including <a href="../addon/search/search.js">addon/search/search.js</a>
+    and <a href="../addon/search/searchcursor.js">addon/search/searchcursor.js</a>.
+    For good-looking input dialogs, you also want to include
+    <a href="../addon/dialog/dialog.js">addon/dialog/dialog.js</a>
+    and <a href="../addon/dialog/dialog.css">addon/dialog/dialog.css</a>.</p>
+  </body>
+</html>