Commit e9216677 authored by Santhanavanich's avatar Santhanavanich
Browse files

update

No related merge requests found
Pipeline #1971 passed with stage
Showing with 7793 additions and 0 deletions
+7793 -0
<!doctype html>
<title>CodeMirror: Sublime Text bindings demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">
<link rel="stylesheet" href="../lib/codemirror.css">
<link rel="stylesheet" href="../addon/fold/foldgutter.css">
<link rel="stylesheet" href="../addon/dialog/dialog.css">
<link rel="stylesheet" href="../theme/monokai.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/search/searchcursor.js"></script>
<script src="../addon/search/search.js"></script>
<script src="../addon/dialog/dialog.js"></script>
<script src="../addon/edit/matchbrackets.js"></script>
<script src="../addon/edit/closebrackets.js"></script>
<script src="../addon/comment/comment.js"></script>
<script src="../addon/wrap/hardwrap.js"></script>
<script src="../addon/fold/foldcode.js"></script>
<script src="../addon/fold/brace-fold.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../keymap/sublime.js"></script>
<style>
.CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee; line-height: 1.3; height: 500px}
.CodeMirror-linenumbers { padding: 0 8px; }
</style>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/codemirror/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Sublime bindings</a>
</ul>
</div>
<article>
<h2>Sublime Text bindings demo</h2>
<p>The <code>sublime</code> keymap defines many Sublime Text-specific
bindings for CodeMirror. See the code below for an overview.</p>
<p>Enable the keymap by
loading <a href="../keymap/sublime.js"><code>keymap/sublime.js</code></a>
and setting
the <a href="../doc/manual.html#option_keyMap"><code>keyMap</code></a>
option to <code>"sublime"</code>.</p>
<p>(A lot of the search functionality is still missing.)
<script>
var value = "// The bindings defined specifically in the Sublime Text mode\nvar bindings = {\n";
var map = CodeMirror.keyMap.sublime;
for (var key in map) {
var val = map[key];
if (key != "fallthrough" && val != "..." && (!/find/.test(val) || /findUnder/.test(val)))
value += " \"" + key + "\": \"" + val + "\",\n";
}
value += "}\n\n// The implementation of joinLines\n";
value += CodeMirror.commands.joinLines.toString().replace(/^function\s*\(/, "function joinLines(").replace(/\n /g, "\n") + "\n";
var editor = CodeMirror(document.body.getElementsByTagName("article")[0], {
value: value,
lineNumbers: true,
mode: "javascript",
keyMap: "sublime",
autoCloseBrackets: true,
matchBrackets: true,
showCursorWhenSelecting: true,
theme: "monokai",
tabSize: 2
});
</script>
</article>
<!doctype html>
<title>CodeMirror: Tern Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">
<link rel="stylesheet" href="../lib/codemirror.css">
<link rel="stylesheet" href="../addon/dialog/dialog.css">
<link rel="stylesheet" href="../addon/hint/show-hint.css">
<link rel="stylesheet" href="../addon/tern/tern.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../addon/dialog/dialog.js"></script>
<script src="../addon/hint/show-hint.js"></script>
<script src="../addon/tern/tern.js"></script>
<script src="//ternjs.net/node_modules/acorn/dist/acorn.js"></script>
<script src="//ternjs.net/node_modules/acorn-loose/dist/acorn-loose.js"></script>
<script src="//ternjs.net/node_modules/acorn-walk/dist/walk.js"></script>
<script src="//ternjs.net/doc/demo/polyfill.js"></script>
<script src="//ternjs.net/lib/signal.js"></script>
<script src="//ternjs.net/lib/tern.js"></script>
<script src="//ternjs.net/lib/def.js"></script>
<script src="//ternjs.net/lib/comment.js"></script>
<script src="//ternjs.net/lib/infer.js"></script>
<script src="//ternjs.net/plugin/doc_comment.js"></script>
<style>
.CodeMirror {border: 1px solid #ddd;}
</style>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/codemirror/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Tern</a>
</ul>
</div>
<article>
<h2>Tern Demo</h2>
<form><textarea id="code" name="code">// Use ctrl-space to complete something
// Put the cursor in or after an expression, press ctrl-o to
// find its type
var foo = ["array", "of", "strings"];
var bar = foo.slice(0, 2).join("").split("a")[0];
// Works for locally defined types too.
function CTor() { this.size = 10; }
CTor.prototype.hallo = "hallo";
var baz = new CTor;
baz.
// You can press ctrl-q when the cursor is on a variable name to
// rename it. Try it with CTor...
// When the cursor is in an argument list, the arguments are
// shown below the editor.
[1].reduce( );
// And a little more advanced code...
(function(exports) {
exports.randomElt = function(arr) {
return arr[Math.floor(arr.length * Math.random())];
};
exports.strList = "foo".split("");
exports.intList = exports.strList.map(function(s) { return s.charCodeAt(0); });
})(window.myMod = {});
var randomStr = myMod.randomElt(myMod.strList);
var randomInt = myMod.randomElt(myMod.intList);
</textarea></form>
<p>Demonstrates integration of <a href="http://ternjs.net/">Tern</a>
and CodeMirror. The following keys are bound:</p>
<dl>
<dt>Ctrl-Space</dt><dd>Autocomplete</dd>
<dt>Ctrl-O</dt><dd>Find docs for the expression at the cursor</dd>
<dt>Ctrl-I</dt><dd>Find type at cursor</dd>
<dt>Alt-.</dt><dd>Jump to definition (Alt-, to jump back)</dd>
<dt>Ctrl-Q</dt><dd>Rename variable</dd>
<dt>Ctrl-.</dt><dd>Select all occurrences of a variable</dd>
</dl>
<p>Documentation is sparse for now. See the top of
the <a href="../addon/tern/tern.js">script</a> for a rough API
overview.</p>
<script>
function getURL(url, c) {
var xhr = new XMLHttpRequest();
xhr.open("get", url, true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
if (xhr.status < 400) return c(null, xhr.responseText);
var e = new Error(xhr.responseText || "No response");
e.status = xhr.status;
c(e);
};
}
var server;
getURL("//ternjs.net/defs/ecmascript.json", function(err, code) {
if (err) throw new Error("Request for ecmascript.json: " + err);
server = new CodeMirror.TernServer({defs: [JSON.parse(code)]});
editor.setOption("extraKeys", {
"Ctrl-Space": function(cm) { server.complete(cm); },
"Ctrl-I": function(cm) { server.showType(cm); },
"Ctrl-O": function(cm) { server.showDocs(cm); },
"Alt-.": function(cm) { server.jumpToDef(cm); },
"Alt-,": function(cm) { server.jumpBack(cm); },
"Ctrl-Q": function(cm) { server.rename(cm); },
"Ctrl-.": function(cm) { server.selectName(cm); }
})
editor.on("cursorActivity", function(cm) { server.updateArgHints(cm); });
});
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
mode: "javascript"
});
</script>
</article>
<!doctype html>
<title>CodeMirror: Theme Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">
<link rel="stylesheet" href="../lib/codemirror.css">
<link rel="stylesheet" href="../theme/3024-day.css">
<link rel="stylesheet" href="../theme/3024-night.css">
<link rel="stylesheet" href="../theme/abcdef.css">
<link rel="stylesheet" href="../theme/ambiance.css">
<link rel="stylesheet" href="../theme/ayu-dark.css">
<link rel="stylesheet" href="../theme/ayu-mirage.css">
<link rel="stylesheet" href="../theme/base16-dark.css">
<link rel="stylesheet" href="../theme/bespin.css">
<link rel="stylesheet" href="../theme/base16-light.css">
<link rel="stylesheet" href="../theme/blackboard.css">
<link rel="stylesheet" href="../theme/cobalt.css">
<link rel="stylesheet" href="../theme/colorforth.css">
<link rel="stylesheet" href="../theme/dracula.css">
<link rel="stylesheet" href="../theme/duotone-dark.css">
<link rel="stylesheet" href="../theme/duotone-light.css">
<link rel="stylesheet" href="../theme/eclipse.css">
<link rel="stylesheet" href="../theme/elegant.css">
<link rel="stylesheet" href="../theme/erlang-dark.css">
<link rel="stylesheet" href="../theme/gruvbox-dark.css">
<link rel="stylesheet" href="../theme/hopscotch.css">
<link rel="stylesheet" href="../theme/icecoder.css">
<link rel="stylesheet" href="../theme/isotope.css">
<link rel="stylesheet" href="../theme/lesser-dark.css">
<link rel="stylesheet" href="../theme/liquibyte.css">
<link rel="stylesheet" href="../theme/lucario.css">
<link rel="stylesheet" href="../theme/material.css">
<link rel="stylesheet" href="../theme/material-darker.css">
<link rel="stylesheet" href="../theme/material-palenight.css">
<link rel="stylesheet" href="../theme/material-ocean.css">
<link rel="stylesheet" href="../theme/mbo.css">
<link rel="stylesheet" href="../theme/mdn-like.css">
<link rel="stylesheet" href="../theme/midnight.css">
<link rel="stylesheet" href="../theme/monokai.css">
<link rel="stylesheet" href="../theme/moxer.css">
<link rel="stylesheet" href="../theme/neat.css">
<link rel="stylesheet" href="../theme/neo.css">
<link rel="stylesheet" href="../theme/night.css">
<link rel="stylesheet" href="../theme/nord.css">
<link rel="stylesheet" href="../theme/oceanic-next.css">
<link rel="stylesheet" href="../theme/panda-syntax.css">
<link rel="stylesheet" href="../theme/paraiso-dark.css">
<link rel="stylesheet" href="../theme/paraiso-light.css">
<link rel="stylesheet" href="../theme/pastel-on-dark.css">
<link rel="stylesheet" href="../theme/railscasts.css">
<link rel="stylesheet" href="../theme/rubyblue.css">
<link rel="stylesheet" href="../theme/seti.css">
<link rel="stylesheet" href="../theme/shadowfox.css">
<link rel="stylesheet" href="../theme/solarized.css">
<link rel="stylesheet" href="../theme/the-matrix.css">
<link rel="stylesheet" href="../theme/tomorrow-night-bright.css">
<link rel="stylesheet" href="../theme/tomorrow-night-eighties.css">
<link rel="stylesheet" href="../theme/ttcn.css">
<link rel="stylesheet" href="../theme/twilight.css">
<link rel="stylesheet" href="../theme/vibrant-ink.css">
<link rel="stylesheet" href="../theme/xq-dark.css">
<link rel="stylesheet" href="../theme/xq-light.css">
<link rel="stylesheet" href="../theme/yeti.css">
<link rel="stylesheet" href="../theme/idea.css">
<link rel="stylesheet" href="../theme/darcula.css">
<link rel="stylesheet" href="../theme/yonce.css">
<link rel="stylesheet" href="../theme/zenburn.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../addon/selection/active-line.js"></script>
<script src="../addon/edit/matchbrackets.js"></script>
<style>
.CodeMirror {border: 1px solid black; font-size:13px}
</style>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/codemirror/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Theme</a>
</ul>
</div>
<article>
<h2>Theme Demo</h2>
<form><textarea id="code" name="code">
function findSequence(goal) {
function find(start, history) {
if (start == goal)
return history;
else if (start > goal)
return null;
else
return find(start + 5, "(" + history + " + 5)") ||
find(start * 3, "(" + history + " * 3)");
}
return find(1, "1");
}</textarea></form>
<p>Select a theme: <select onchange="selectTheme()" id=select>
<option selected>default</option>
<option>3024-day</option>
<option>3024-night</option>
<option>abcdef</option>
<option>ambiance</option>
<option>ayu-dark</option>
<option>ayu-mirage</option>
<option>base16-dark</option>
<option>base16-light</option>
<option>bespin</option>
<option>blackboard</option>
<option>cobalt</option>
<option>colorforth</option>
<option>darcula</option>
<option>dracula</option>
<option>duotone-dark</option>
<option>duotone-light</option>
<option>eclipse</option>
<option>elegant</option>
<option>erlang-dark</option>
<option>gruvbox-dark</option>
<option>hopscotch</option>
<option>icecoder</option>
<option>idea</option>
<option>isotope</option>
<option>lesser-dark</option>
<option>liquibyte</option>
<option>lucario</option>
<option>material</option>
<option>material-darker</option>
<option>material-palenight</option>
<option>material-ocean</option>
<option>mbo</option>
<option>mdn-like</option>
<option>midnight</option>
<option>monokai</option>
<option>moxer</option>
<option>neat</option>
<option>neo</option>
<option>night</option>
<option>nord</option>
<option>oceanic-next</option>
<option>panda-syntax</option>
<option>paraiso-dark</option>
<option>paraiso-light</option>
<option>pastel-on-dark</option>
<option>railscasts</option>
<option>rubyblue</option>
<option>seti</option>
<option>shadowfox</option>
<option>solarized dark</option>
<option>solarized light</option>
<option>the-matrix</option>
<option>tomorrow-night-bright</option>
<option>tomorrow-night-eighties</option>
<option>ttcn</option>
<option>twilight</option>
<option>vibrant-ink</option>
<option>xq-dark</option>
<option>xq-light</option>
<option>yeti</option>
<option>yonce</option>
<option>zenburn</option>
</select>
</p>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true
});
var input = document.getElementById("select");
function selectTheme() {
var theme = input.options[input.selectedIndex].textContent;
editor.setOption("theme", theme);
location.hash = "#" + theme;
}
var choice = (location.hash && location.hash.slice(1)) ||
(document.location.search &&
decodeURIComponent(document.location.search.slice(1)));
if (choice) {
input.value = choice;
editor.setOption("theme", choice);
}
CodeMirror.on(window, "hashchange", function() {
var theme = location.hash.slice(1);
if (theme) { input.value = theme; selectTheme(); }
});
</script>
</article>
<!doctype html>
<title>CodeMirror: Trailing Whitespace Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/edit/trailingspace.js"></script>
<style>
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
.cm-trailingspace {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg==);
background-position: bottom left;
background-repeat: repeat-x;
}
</style>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/codemirror/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Trailing Whitespace</a>
</ul>
</div>
<article>
<h2>Trailing Whitespace Demo</h2>
<form><textarea id="code" name="code">This text
has some
trailing whitespace!</textarea></form>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
showTrailingSpace: true
});
</script>
<p>Uses
the <a href="../doc/manual.html#addon_trailingspace">trailingspace</a>
addon to highlight trailing whitespace.</p>
</article>
<!doctype html>
<title>CodeMirror: Variable Height Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/markdown/markdown.js"></script>
<script src="../mode/xml/xml.js"></script>
<style>
.CodeMirror {border: 1px solid silver; border-width: 1px 2px; }
.cm-header { font-family: arial; }
.cm-header-1 { font-size: 150%; }
.cm-header-2 { font-size: 130%; }
.cm-header-3 { font-size: 120%; }
.cm-header-4 { font-size: 110%; }
.cm-header-5 { font-size: 100%; }
.cm-header-6 { font-size: 90%; }
.cm-strong { font-size: 140%; }
</style>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/codemirror/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Variable Height</a>
</ul>
</div>
<article>
<h2>Variable Height Demo</h2>
<form><textarea id="code" name="code"># A First Level Header
**Bold** text in a normal-size paragraph.
And a very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long, wrapped line with a piece of **big** text inside of it.
## A Second Level Header
Now is the time for all good men to come to
the aid of their country. This is just a
regular paragraph.
The quick brown fox jumped over the lazy
dog's back.
### Header 3
> This is a blockquote.
>
> This is the second paragraph in the blockquote.
>
> ## This is an H2 in a blockquote
</textarea></form>
<script id="script">
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
lineWrapping: true,
mode: "markdown"
});
</script>
</article>
<!doctype html>
<title>CodeMirror: Vim bindings demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">
<link rel="stylesheet" href="../lib/codemirror.css">
<link rel="stylesheet" href="../addon/dialog/dialog.css">
<link rel="stylesheet" href="../theme/midnight.css">
<link rel="stylesheet" href="../theme/solarized.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/dialog/dialog.js"></script>
<script src="../addon/search/searchcursor.js"></script>
<script src="../mode/clike/clike.js"></script>
<script src="../addon/edit/matchbrackets.js"></script>
<script src="../keymap/vim.js"></script>
<style>
.CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
</style>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/codemirror/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Vim bindings</a>
</ul>
</div>
<article>
<h2>Vim bindings demo</h2>
<p><strong style="color: #c33; text-decoration: none">Note:</strong> The CodeMirror vim bindings do not have an
active maintainer. That means that if you report bugs in it, they are
likely to go unanswered. It also means that if you want to help, you
are very welcome to look
at <a href="https://github.com/codemirror/codemirror/issues?q=is%3Aissue+is%3Aopen+label%3Avim">the
open issues</a> and see which ones you can solve.</p>
<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>
<div style="font-size: 13px; width: 300px; height: 30px;">Key buffer: <span id="command-display"></span></div>
<p>The vim keybindings are enabled by including <code><a
href="../keymap/vim.js">keymap/vim.js</a></code> and setting the
<code>keyMap</code> option to <code>vim</code>.</p>
<p><strong>Features</strong></p>
<ul>
<li>All common motions and operators, including text objects</li>
<li>Operator motion orthogonality</li>
<li>Visual mode - characterwise, linewise, blockwise</li>
<li>Full macro support (q, @)</li>
<li>Incremental highlighted search (/, ?, #, *, g#, g*)</li>
<li>Search/replace with confirm (:substitute, :%s)</li>
<li>Search history</li>
<li>Jump lists (Ctrl-o, Ctrl-i)</li>
<li>Key/command mapping with API (:map, :nmap, :vmap)</li>
<li>Sort (:sort)</li>
<li>Marks (`, ')</li>
<li>:global</li>
<li>Insert mode behaves identical to base CodeMirror</li>
<li>Cross-buffer yank/paste</li>
</ul>
<p>For the full list of key mappings and Ex commands, refer to the
<code>defaultKeymap</code> and <code>defaultExCommandMap</code> at the
top of <code><a href="../keymap/vim.js">keymap/vim.js</a></code>.
<p>Note that while the vim mode tries to emulate the most useful
features of vim as faithfully as possible, it does not strive to
become a complete vim implementation</p>
<script>
CodeMirror.commands.save = function(){ alert("Saving"); };
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
mode: "text/x-csrc",
keyMap: "vim",
matchBrackets: true,
showCursorWhenSelecting: true,
inputStyle: "contenteditable"
});
var commandDisplay = document.getElementById('command-display');
var keys = '';
CodeMirror.on(editor, 'vim-keypress', function(key) {
keys = keys + key;
commandDisplay.innerHTML = keys;
});
CodeMirror.on(editor, 'vim-command-done', function(e) {
keys = '';
commandDisplay.innerHTML = keys;
});
</script>
</article>
<!doctype html>
<title>CodeMirror: Visible tabs demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/clike/clike.js"></script>
<style>
.CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
.cm-tab {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
background-position: right;
background-repeat: no-repeat;
}
</style>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/codemirror/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Visible tabs</a>
</ul>
</div>
<article>
<h2>Visible tabs demo</h2>
<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>Tabs inside the editor are spans with the
class <code>cm-tab</code>, and can be styled.</p>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
tabSize: 4,
indentUnit: 4,
indentWithTabs: true,
mode: "text/x-csrc"
});
</script>
</article>
<!doctype html>
<title>CodeMirror: Inline Widget Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jshint/2.9.5/jshint.min.js"></script>
<style>
.CodeMirror {border: 1px solid black;}
.lint-error {font-family: arial; font-size: 70%; background: #ffa; color: #a00; padding: 2px 5px 3px; }
.lint-error-icon {color: white; background-color: red; font-weight: bold; border-radius: 50%; padding: 0 3px; margin-right: 7px;}
</style>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/codemirror/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Inline Widget</a>
</ul>
</div>
<article>
<h2>Inline Widget Demo</h2>
<div id=code></div>
<script id="script">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);
}
window.onload = function() {
var sc = document.getElementById("script");
var content = sc.textContent || sc.innerText || sc.innerHTML;
window.editor = CodeMirror(document.getElementById("code"), {
lineNumbers: true,
mode: "javascript",
value: content
});
var waiting;
editor.on("change", function() {
clearTimeout(waiting);
waiting = setTimeout(updateHints, 500);
});
setTimeout(updateHints, 100);
};
"long line to create a horizontal scrollbar, in order to test whether the (non-inline) widgets stay in place when scrolling to the right";
</script>
<p>This demo runs <a href="http://jshint.com">JSHint</a> over the code
in the editor (which is the script used on this page), and
inserts <a href="../doc/manual.html#addLineWidget">line widgets</a> to
display the warnings that JSHint comes up with.</p>
</article>
<!doctype html>
<title>CodeMirror: XML Autocomplete Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">
<link rel="stylesheet" href="../lib/codemirror.css">
<link rel="stylesheet" href="../addon/hint/show-hint.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/hint/show-hint.js"></script>
<script src="../addon/hint/xml-hint.js"></script>
<script src="../mode/xml/xml.js"></script>
<style>
.CodeMirror { border: 1px solid #eee; }
</style>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/codemirror/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">XML Autocomplete</a>
</ul>
</div>
<article>
<h2>XML Autocomplete Demo</h2>
<form><textarea id="code" name="code"><!-- write some xml below -->
</textarea></form>
<p>Press <strong>ctrl-space</strong>, or type a '&lt;' character to
activate autocompletion. This demo defines a simple schema that
guides completion. The schema can be customized—see
the <a href="../doc/manual.html#addon_xml-hint">manual</a>.</p>
<p>Development of the <code>xml-hint</code> addon was kindly
sponsored
by <a href="http://www.xperiment.mobi">www.xperiment.mobi</a>.</p>
<script>
var dummy = {
attrs: {
color: ["red", "green", "blue", "purple", "white", "black", "yellow"],
size: ["large", "medium", "small"],
description: null
},
children: []
};
var tags = {
"!top": ["top"],
"!attrs": {
id: null,
class: ["A", "B", "C"]
},
top: {
attrs: {
lang: ["en", "de", "fr", "nl"],
freeform: null
},
children: ["animal", "plant"]
},
animal: {
attrs: {
name: null,
isduck: ["yes", "no"]
},
children: ["wings", "feet", "body", "head", "tail"]
},
plant: {
attrs: {name: null},
children: ["leaves", "stem", "flowers"]
},
wings: dummy, feet: dummy, body: dummy, head: dummy, tail: dummy,
leaves: dummy, stem: dummy, flowers: dummy
};
function completeAfter(cm, pred) {
var cur = cm.getCursor();
if (!pred || pred()) setTimeout(function() {
if (!cm.state.completionActive)
cm.showHint({completeSingle: false});
}, 100);
return CodeMirror.Pass;
}
function completeIfAfterLt(cm) {
return completeAfter(cm, function() {
var cur = cm.getCursor();
return cm.getRange(CodeMirror.Pos(cur.line, cur.ch - 1), cur) == "<";
});
}
function completeIfInTag(cm) {
return completeAfter(cm, function() {
var tok = cm.getTokenAt(cm.getCursor());
if (tok.type == "string" && (!/['"]/.test(tok.string.charAt(tok.string.length - 1)) || tok.string.length == 1)) return false;
var inner = CodeMirror.innerMode(cm.getMode(), tok.state).state;
return inner.tagName;
});
}
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "xml",
lineNumbers: true,
extraKeys: {
"'<'": completeAfter,
"'/'": completeIfAfterLt,
"' '": completeIfInTag,
"'='": completeIfInTag,
"Ctrl-Space": "autocomplete"
},
hintOptions: {schemaInfo: tags}
});
</script>
</article>
// Kludge in HTML5 tag recognition in IE8
document.createElement("section");
document.createElement("article");
(function() {
if (!window.addEventListener) return;
var pending = false, prevVal = null;
function updateSoon() {
if (!pending) {
pending = true;
setTimeout(update, 250);
}
}
function update() {
pending = false;
var marks = document.getElementById("nav").getElementsByTagName("a"), found;
for (var i = 0; i < marks.length; ++i) {
var mark = marks[i], m;
if (mark.getAttribute("data-default")) {
if (found == null) found = i;
} else if (m = mark.href.match(/#(.*)/)) {
var ref = document.getElementById(m[1]);
if (ref && ref.getBoundingClientRect().top < 50)
found = i;
}
}
if (found != null && found != prevVal) {
prevVal = found;
var lis = document.getElementById("nav").getElementsByTagName("li");
for (var i = 0; i < lis.length; ++i) lis[i].className = "";
for (var i = 0; i < marks.length; ++i) {
if (found == i) {
marks[i].className = "active";
for (var n = marks[i]; n; n = n.parentNode)
if (n.nodeName == "LI") n.className = "active";
} else {
marks[i].className = "";
}
}
}
}
window.addEventListener("scroll", updateSoon);
window.addEventListener("load", updateSoon);
window.addEventListener("hashchange", function() {
setTimeout(function() {
var hash = document.location.hash, found = null, m;
var marks = document.getElementById("nav").getElementsByTagName("a");
for (var i = 0; i < marks.length; i++)
if ((m = marks[i].href.match(/(#.*)/)) && m[1] == hash) { found = i; break; }
if (found != null) for (var i = 0; i < marks.length; i++)
marks[i].className = i == found ? "active" : "";
}, 300);
});
})();
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(//themes.googleusercontent.com/static/fonts/sourcesanspro/v5/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');
}
body, html { margin: 0; padding: 0; height: 100%; }
section, article { display: block; padding: 0; }
body {
background: #f8f8f8;
font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
line-height: 1.5;
}
p { margin-top: 0; }
h2, h3, h1 {
font-weight: normal;
margin-bottom: .7em;
}
h1 { font-size: 140%; }
h2 { font-size: 120%; }
h3 { font-size: 110%; }
article > h2:first-child, section:first-child > h2 { margin-top: 0; }
#nav h1 {
margin-right: 12px;
margin-top: 0;
margin-bottom: 2px;
color: #d30707;
letter-spacing: .5px;
}
a, a:visited, a:link, .quasilink {
color: #A21313;
}
em {
padding-right: 2px;
}
.quasilink {
cursor: pointer;
}
article {
max-width: 700px;
margin: 0 0 0 160px;
border-left: 2px solid #E30808;
border-right: 1px solid #ddd;
padding: 30px 50px 100px 50px;
background: white;
z-index: 2;
position: relative;
min-height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#nav {
position: fixed;
padding-top: 30px;
max-height: 100%;
box-sizing: -moz-border-box;
box-sizing: border-box;
overflow-y: auto;
left: 0; right: none;
width: 160px;
text-align: right;
z-index: 1;
}
@media screen and (min-width: 1000px) {
article {
margin: 0 auto;
}
#nav {
right: 50%;
width: auto;
border-right: 349px solid transparent;
}
}
#nav ul {
display: block;
margin: 0; padding: 0;
margin-bottom: 32px;
}
#nav a {
text-decoration: none;
}
#nav li {
display: block;
margin-bottom: 4px;
}
#nav li ul {
font-size: 80%;
margin-bottom: 0;
display: none;
}
#nav li.active ul {
display: block;
}
#nav li li a {
padding-right: 20px;
display: inline-block;
}
#nav ul a {
color: black;
padding: 0 7px 1px 11px;
}
#nav ul a.active, #nav ul a:hover {
border-bottom: 1px solid #E30808;
margin-bottom: -1px;
color: #E30808;
}
#logo {
border: 0;
margin-right: 12px;
margin-bottom: 25px;
}
section {
border-top: 1px solid #E30808;
margin: 1.5em 0;
}
section.first {
border: none;
margin-top: 0;
}
#demo {
position: relative;
}
#demolist {
position: absolute;
right: 5px;
top: 5px;
z-index: 25;
}
.yinyang {
position: absolute;
top: -10px;
left: 0; right: 0;
margin: auto;
display: block;
height: 120px;
}
.actions {
margin: 1em 0 0;
min-height: 100px;
position: relative;
}
.actionspicture {
pointer-events: none;
position: absolute;
height: 100px;
top: 0; left: 0; right: 0;
}
.actionlink {
pointer-events: auto;
font-family: arial;
font-size: 80%;
font-weight: bold;
position: absolute;
top: 0; bottom: 0;
line-height: 1;
height: 1em;
margin: auto;
}
.actionlink.download {
color: white;
right: 50%;
margin-right: 13px;
text-shadow: -1px 1px 3px #b00, -1px -1px 3px #b00, 1px 0px 3px #b00;
}
.actionlink.fund {
color: #b00;
left: 50%;
margin-left: 15px;
}
.actionlink:hover {
text-decoration: underline;
}
.actionlink a {
color: inherit;
}
.actionsleft {
float: left;
}
.actionsright {
float: right;
text-align: right;
}
@media screen and (max-width: 800px) {
.actions {
padding-top: 120px;
}
.actionsleft, .actionsright {
float: none;
text-align: left;
margin-bottom: 1em;
}
}
th {
text-decoration: underline;
font-weight: normal;
text-align: left;
}
#features ul {
list-style: none;
margin: 0 0 1em;
padding: 0 0 0 1.2em;
}
#features li:before {
content: "-";
width: 1em;
display: inline-block;
padding: 0;
margin: 0;
margin-left: -1em;
}
.rel {
margin-bottom: 0;
}
.rel-note {
margin-top: 0;
color: #555;
}
pre {
padding-left: 15px;
border-left: 2px solid #ddd;
}
code {
padding: 0 2px;
}
strong {
text-decoration: underline;
font-weight: normal;
}
.field {
border: 1px solid #A21313;
}
<!doctype html>
<title>CodeMirror: Internals</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="docs.css">
<style>dl dl {margin: 0;} .update {color: #d40 !important}</style>
<script src="activebookmark.js"></script>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="logo.png"></a>
<ul>
<li><a href="../index.html">Home</a>
<li><a href="manual.html">Manual</a>
<li><a href="https://github.com/codemirror/codemirror">Code</a>
</ul>
<ul>
<li><a href="#top">Introduction</a></li>
<li><a href="#approach">General Approach</a></li>
<li><a href="#input">Input</a></li>
<li><a href="#selection">Selection</a></li>
<li><a href="#update">Intelligent Updating</a></li>
<li><a href="#parse">Parsing</a></li>
<li><a href="#summary">What Gives?</a></li>
<li><a href="#btree">Content Representation</a></li>
<li><a href="#keymap">Key Maps</a></li>
</ul>
</div>
<article>
<h2 id=top>(Re-) Implementing A Syntax-Highlighting Editor in JavaScript</h2>
<p style="font-size: 85%" id="intro">
<strong>Topic:</strong> JavaScript, code editor implementation<br>
<strong>Author:</strong> Marijn Haverbeke<br>
<strong>Date:</strong> March 2nd 2011 (updated November 13th 2011)
</p>
<p style="padding: 0 3em 0 2em"><strong>Caution</strong>: this text was written briefly after
version 2 was initially written. It no longer (even including the
update at the bottom) fully represents the current implementation. I'm
leaving it here as a historic document. For more up-to-date
information, look at the entries
tagged <a href="http://marijnhaverbeke.nl/blog/#cm-internals">cm-internals</a>
on my blog.</p>
<p>This is a followup to
my <a href="https://codemirror.net/story.html">Brutal Odyssey to the
Dark Side of the DOM Tree</a> 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.</p>
<p>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 <a href="http://googlecode.blogspot.com/2011/01/make-quick-fixes-quicker-on-google.html">Google
code's project hosting</a>. It works, and it's being used widely.</p>
<p>Still, I did not start replacing it because I was bored. CodeMirror
1 was heavily reliant on <code>designMode</code>
or <code>contentEditable</code> (depending on the browser). Neither of
these are well specified (HTML5 tries
to <a href="http://www.w3.org/TR/html5/editing.html#contenteditable">specify</a>
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.</p>
<p>Also, there is the fact that <code>designMode</code> (which seemed
to be less buggy than <code>contentEditable</code> 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.</p>
<p>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
<code>document.selection</code>, 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.</p>
<p>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 <a href="https://codemirror.net/story.html">story</a>), things
also kept breaking in newly released versions, requiring me to come up
with <em>new</em> scary hacks in order to keep up. This was starting
to lose its appeal.</p>
<section id=approach>
<h2>General Approach</h2>
<p>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
<a href="http://ace.ajax.org">ACE</a> editor for inspiration on how to
approach this.</p>
<p>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 <a href="http://ymacs.org">Ymacs</a>) 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. <a href="#keymap" class="update">[see below for caveat]</a></p>
<p>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.</p>
<p>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 <code>onscroll</code>
event works almost the same on all browsers, and lends itself well to
displaying things only as they are scrolled into view.)</p>
</section>
<section id="input">
<h2>Input</h2>
<p>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.</p>
<p>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.</p>
<p>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. <a class="update"
href="#keymap">[no longer the case]</a></p>
<p>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.</p>
</section>
<section id="selection">
<h2>Selection</h2>
<p>Getting and setting the selection range of a textarea in modern
browsers is trivial—you just use the <code>selectionStart</code>
and <code>selectionEnd</code> 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.</p>
<p>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 <em>head</em>
and its <em>anchor</em> 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.</p>
<p>But not something that the browser selection APIs expose.</p>
<p>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.</p>
<p>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 <em>real</em>
selection.</p>
<p>In short, scary hacks could not be avoided entirely in CodeMirror
2.</p>
<p>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.</p>
</section>
<section id="update">
<h2>Intelligent Updating</h2>
<p>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.</p>
<p>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.</p>
<p>CodeMirror uses a concept of <em>operations</em>, 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 <code>operation</code> that accepts a function, and returns
another function that wraps the given function as an operation.</p>
<p>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.</p>
<p>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.</p>
<p>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). <span class="update">[the full-refresh
algorithm was dropped, it wasn't really faster than the patching
one]</span></p>
<p>All updating uses <code>innerHTML</code> 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, <a href="manual.html#markText">marking</a>, 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 <code>innerHTML</code> update to do the refresh.</p>
</section>
<section id="parse">
<h2>Parsers can be Simple</h2>
<p>When I wrote CodeMirror 1, I
thought <a href="https://codemirror.net/story.html#parser">interruptable
parsers</a> were a hugely scary and complicated thing, and I used a
bunch of heavyweight abstractions to keep this supposed complexity
under control: parsers
were <a href="http://bob.pythonmac.org/archives/2005/07/06/iteration-in-javascript/">iterators</a>
that consumed input from another iterator, and used funny
closure-resetting tricks to copy and resume themselves.</p>
<p>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.</p>
<p>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 <a href="manual.html#modeapi">mode API</a> 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.</p>
<p>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 <em>see</em> 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.</p>
</section>
<section id="summary">
<h2>What Gives?</h2>
<p>Given all this, what can you expect from CodeMirror 2?</p>
<ul>
<li><strong>Small.</strong> the base library is
some <span class="update">45k</span> when minified
now, <span class="update">17k</span> when gzipped. It's smaller than
its own logo.</li>
<li><strong>Lightweight.</strong> 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.</li>
<li><strong>Huge document support.</strong> 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.</li>
<li><strong>Extended API.</strong> 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.</li>
<li><strong>Tab support.</strong> 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.</li>
<li><strong>Sane styling.</strong> <code>iframe</code> nodes aren't
really known for respecting document flow. Now that an editor instance
is a plain <code>div</code> 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 <a href="../demo/resize.html">want to</a>.</li>
</ul>
<p>On the downside, a CodeMirror 2 instance is <em>not</em> a native
editable component. Though it does its best to emulate such a
component as much as possible, there is functionality that browsers
just do not allow us to hook into. Doing select-all from the context
menu, for example, is not currently detected by CodeMirror.</p>
<p id="changes" style="margin-top: 2em;"><span style="font-weight:
bold">[Updates from November 13th 2011]</span> Recently, I've made
some changes to the codebase that cause some of the text above to no
longer be current. I've left the text intact, but added markers at the
passages that are now inaccurate. The new situation is described
below.</p>
</section>
<section id="btree">
<h2>Content Representation</h2>
<p>The original implementation of CodeMirror 2 represented the
document as a flat array of line objects. This worked well—splicing
arrays will require the part of the array after the splice to be
moved, but this is basically just a simple <code>memmove</code> of a
bunch of pointers, so it is cheap even for huge documents.</p>
<p>However, I recently added line wrapping and code folding (line
collapsing, basically). Once lines start taking up a non-constant
amount of vertical space, looking up a line by vertical position
(which is needed when someone clicks the document, and to determine
the visible part of the document during scrolling) can only be done
with a linear scan through the whole array, summing up line heights as
you go. Seeing how I've been going out of my way to make big documents
fast, this is not acceptable.</p>
<p>The new representation is based on a B-tree. The leaves of the tree
contain arrays of line objects, with a fixed minimum and maximum size,
and the non-leaf nodes simply hold arrays of child nodes. Each node
stores both the amount of lines that live below them and the vertical
space taken up by these lines. This allows the tree to be indexed both
by line number and by vertical position, and all access has
logarithmic complexity in relation to the document size.</p>
<p>I gave line objects and tree nodes parent pointers, to the node
above them. When a line has to update its height, it can simply walk
these pointers to the top of the tree, adding or subtracting the
difference in height from each node it encounters. The parent pointers
also make it cheaper (in complexity terms, the difference is probably
tiny in normal-sized documents) to find the current line number when
given a line object. In the old approach, the whole document array had
to be searched. Now, we can just walk up the tree and count the sizes
of the nodes coming before us at each level.</p>
<p>I chose B-trees, not regular binary trees, mostly because they
allow for very fast bulk insertions and deletions. When there is a big
change to a document, it typically involves adding, deleting, or
replacing a chunk of subsequent lines. In a regular balanced tree, all
these inserts or deletes would have to be done separately, which could
be really expensive. In a B-tree, to insert a chunk, you just walk
down the tree once to find where it should go, insert them all in one
shot, and then break up the node if needed. This breaking up might
involve breaking up nodes further up, but only requires a single pass
back up the tree. For deletion, I'm somewhat lax in keeping things
balanced—I just collapse nodes into a leaf when their child count goes
below a given number. This means that there are some weird editing
patterns that may result in a seriously unbalanced tree, but even such
an unbalanced tree will perform well, unless you spend a day making
strangely repeating edits to a really big document.</p>
</section>
<section id="keymap">
<h2>Keymaps</h2>
<p><a href="#approach">Above</a>, I claimed that directly catching key
events for things like cursor movement is impractical because it
requires some browser-specific kludges. I then proceeded to explain
some awful <a href="#selection">hacks</a> that were needed to make it
possible for the selection changes to be detected through the
textarea. In fact, the second hack is about as bad as the first.</p>
<p>On top of that, in the presence of user-configurable tab sizes and
collapsed and wrapped lines, lining up cursor movement in the textarea
with what's visible on the screen becomes a nightmare. Thus, I've
decided to move to a model where the textarea's selection is no longer
depended on.</p>
<p>So I moved to a model where all cursor movement is handled by my
own code. This adds support for a goal column, proper interaction of
cursor movement with collapsed lines, and makes it possible for
vertical movement to move through wrapped lines properly, instead of
just treating them like non-wrapped lines.</p>
<p>The key event handlers now translate the key event into a string,
something like <code>Ctrl-Home</code> or <code>Shift-Cmd-R</code>, and
use that string to look up an action to perform. To make keybinding
customizable, this lookup goes through
a <a href="manual.html#option_keyMap">table</a>, using a scheme that
allows such tables to be chained together (for example, the default
Mac bindings fall through to a table named 'emacsy', which defines
basic Emacs-style bindings like <code>Ctrl-F</code>, and which is also
used by the custom Emacs bindings).</p>
<p>A new
option <a href="manual.html#option_extraKeys"><code>extraKeys</code></a>
allows ad-hoc keybindings to be defined in a much nicer way than what
was possible with the
old <a href="manual.html#option_onKeyEvent"><code>onKeyEvent</code></a>
callback. You simply provide an object mapping key identifiers to
functions, instead of painstakingly looking at raw key events.</p>
<p>Built-in commands map to strings, rather than functions, for
example <code>"goLineUp"</code> is the default action bound to the up
arrow key. This allows new keymaps to refer to them without
duplicating any code. New commands can be defined by assigning to
the <code>CodeMirror.commands</code> object, which maps such commands
to functions.</p>
<p>The hidden textarea now only holds the current selection, with no
extra characters around it. This has a nice advantage: polling for
input becomes much, much faster. If there's a big selection, this text
does not have to be read from the textarea every time—when we poll,
just noticing that something is still selected is enough to tell us
that no new text was typed.</p>
<p>The reason that cheap polling is important is that many browsers do
not fire useful events on IME (input method engine) input, which is
the thing where people inputting a language like Japanese or Chinese
use multiple keystrokes to create a character or sequence of
characters. Most modern browsers fire <code>input</code> when the
composing is finished, but many don't fire anything when the character
is updated <em>during</em> composition. So we poll, whenever the
editor is focused, to provide immediate updates of the display.</p>
</section>
</article>
public/ThirdParty/codemirror-5.52.0/doc/logo.png

9.09 KB

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="640">
<path d="M292.4 53.2s8.7 18.6-3.6 39.2c-6.2 10.2-163.1 43.6-224.3 128.6-37.5 58.7-95 228.7 88.7 341.2 82.5 42.5 117.5 41.2 117.5 41.2s-55-38.7-20-65 86.2-38.7 100-75c16.2 12.5 42.5 38.7 67.5 36.2-2.5-16.2-8.7-22.5 11.2-25s30-2.5 30-2.5-18.7-15-40-16.2-61.2-42.5-60-60c26.2-15 60-40 80-32.5s40 20 43.7 31.2c0 7.5-3.7 20 12.5 10s12.5-16.2 18.7-30 7.5-16.2-6.2-27.5-46.2-37.5-72.5-30-81.2 28.7-108.7 2.5c11.2-25 28.7-65 20-92.5 16.2-12.5 35-26.2 37.5-48.7 18.7-2.5 58.7-13.7 51.2-33.7S374.9 36.0 293.6 53.5" fill="#fff"/>
<path d="M551.9 257.4c13.7-36.2 36.2-97.5 15-100s-45 55-51.2 70-31.2 90-17.5 100 53.7-70 53.7-70" fill="#fff"/>
<path d="M435.6 159.9c3.9-6.1 7.2-.8-9.6.4-16.8 1.2-37.0 6.4-40.4 13.8-6.4 13.7-8.6 47.6-33.0 55.1-1.2 8.7 0 28.7 34.3 32.5s35.6-18.7 55.6-18.1 18.1-6.8 11.2-12.5-30.6-43.7-30.6-56.2 8.1-8.1 12.5-15M128.7 536.8s-10.6-28.1 20.6-43.1 59.3-3.1 65 7.5-9.3 53.1-63.1 53.7c-13.1-10.6-22.5-18.1-22.5-18.1" fill="#da687d"/>
<g opacity=".7" transform="matrix(1.25 0 0 -1.25 -26.846 640)">
<path d="M466.2 369.8c.4-1.5.2-3.1.2-4.8-.0-1.6-.1-3.3-.6-4.9.1-.3-.0-.8-.0-1.2-.4-.5-.1-.9-.2-1.3.6-.6 1.5-1.3 1.1-2.1-.2-.5-.8-.7-1.4-.9-.3-1.4-.7-3.0-1.0-4.6-.0-.4-.0-1.0-.1-1.4-.3-1.0-.6-1.9-.9-3.0-.2-.9.0-2.6-1.0-2.8-.4-1.0-.6-1.8-1.1-2.8-.2-.1-.4.1-.6.0-.3-.3-.2-.8-.5-1.1-.2-.2-.5-.1-.6-.3-.3-.5-.2-1.2-.5-1.9a4.7 4.7 0 0 1-1.1-1.4c-.5-1.1-.6-2.6-1.5-3.5-.2-.2-.7-.3-1.0-.6-.2-.2-.4-.6-.6-.9-.3-.4-.6-1.0-.9-1.5-1.0-1.7-2.3-3.7-3.3-5.6-.1-.3-.2-.8-.3-1.1-.3-.8-.9-1.5-1.2-2.3-.5-1.2-1.3-3.3-2.5-4.4-.1-.1-.4-.2-.6-.4-.1-.2-.1-.5-.3-.8-.0-.1-.4-.1-.5-.3-.2-.2-.3-.4-.4-.6-.4-.3-1.0-.5-1.3-.9-.2-.3-.3-.7-.6-1.1-.3-.4-.7-.7-1.0-1.2-.9-1.2-1.3-2.8-2.7-3.3-.3-.1-.8-.1-1.2-.2-.3.3-.0.8-.1 1.1-.0.2-.2.3-.3.5-.1.4-.3 1.3-.3 1.8.0.5.3.9.3 1.6.0.5-.1 1.2-.1 1.8-.0.3.0.6.0.9-.0.5-.0.8.0 1.4.0.7-.0 1.4-.1 2.1.3 1.7.5 3.0 1.0 4.9.2.8.7 2.3 1.1 3.3.8 1.8 1.6 3.9 2.6 5.9.3.6.8 1.1 1.1 1.8.1.3.2.8.3 1.2 1.6 3.3 3.8 6.2 5.5 9.7 1.4 2.8 2.8 5.4 4.7 8.5.8 1.4 1.5 2.9 2.4 4.0.6.8 1.6 2.4 2.3 3.9.2.5.2 1.0 1.0 1.1.7.9 1.3 2.0 2.1 2.8.2.2.5.3.7.4.2.2.3.5.6.7.5.4 1.4.8 2.0 1.6.1.2.2.4.4.6.4.5 1.1 1.8 1.8 2.0.0.0.2.0.3-.0" fill="#da687d"/>
</g>
<g opacity=".7" transform="matrix(1.25 0 0 -1.25 -26.846 640)">
<path d="M459.8 349.4c.6-1.9.7-4.1.9-6.2-.0-2.1-.1-4.5-.7-6.9.0-.4-.1-1.1-.1-1.6-.5-.7-.2-1.2-.4-1.8.7-.8 1.6-1.6 1.1-2.8-.3-.8-1.1-1.0-1.8-1.4-.6-1.9-1.2-4.2-1.8-6.3-.1-.6-.2-1.3-.4-1.9-.5-1.3-1.1-2.6-1.5-4.1-.4-1.2-.3-3.4-1.6-3.6-.6-1.3-.9-2.3-1.6-3.6-.3-.2-.5.1-.8-.0-.3-.4-.4-1.0-.7-1.4-.2-.2-.5-.2-.7-.5-.4-.6-.3-1.5-.7-2.4a6.5 6.5 0 0 1-1.1-1.3l-.1-.2-.0-.1-.0-.0-.0-.0v-.0l.0.1-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0c-.6-1.6-.8-3.6-1.8-4.9-.3-.4-.8-.5-1.1-.9-.2-.3-.4-.9-.7-1.3-.3-.6-.7-1.4-1.0-2.1-1.0-2.4-2.5-5.2-3.5-8.0-.1-.5-.2-1.1-.3-1.6-.4-1.1-1.0-2.2-1.3-3.3-.6-1.7-1.4-4.7-3.0-6.3-.1-.2-.5-.4-.7-.6-.2-.3-.1-.7-.4-1.1-.1-.1-.4-.2-.6-.4-.2-.3-.3-.6-.5-.9-.5-.5-1.2-.8-1.7-1.4-.3-.4-.5-1.0-.9-1.5-.4-.5-.9-1.1-1.4-1.6l-1.8-2.6c-.5-.8-1.2-1.5-2.0-1.8-.4-.2-1.0-.1-1.5-.2-.3.4.0 1.0.0 1.5-.0.2-.2.5-.2.7-.0.6-.1 1.7-.0 2.3.0.6.5 1.1.7 2.0.1.7-.0 1.5-.0 2.3.0.3.1.7.1 1.2.0.6-.0.9.1 1.7.1.9-.0 1.8-.1 2.7.4 2.1.6 3.8 1.2 6.3.2 1.1.7 3.1 1.2 4.4.4 1.3.9 2.6 1.3 4.0.4 1.4.9 2.8 1.4 4.2.3.9.8 1.7 1.2 2.7.2.5.2 1.1.4 1.7.4 1.2.9 2.5 1.5 3.6a147.5 147.5 0 0 0 1.7 3.3l.9 1.8c.3.5.6 1.1.9 1.7a75.5 75.5 0 0 1 1.8 3.6 129.6 129.6 0 0 0 3.1 5.7 340.1 340.1 0 0 0 3.6 5.8c1.1 1.8 2.2 3.8 3.3 5.3.8 1.1 2.1 3.1 3.0 5.1.3.7.3 1.3 1.1 1.4.9 1.2 1.6 2.6 2.4 3.7.2.2.5.4.8.7.2.3.4.7.6 1.0.5.6 1.6 1.2 2.2 2.5.1.3.1.6.3 1.0.3.8 1.0 2.7 1.7 3.1.0.0.2.0.3.0" fill="#da687d"/>
</g>
<path d="M520.8 231.2s-10 38.3-5.8 70l5.8-70m11.8-25.9c-.7-2.6-5.7 74.3-4.2 77.0 1.4 2.6 8.9-60.7 4.2-77.0" fill="#fff"/>
<path d="M294.0 57.9s5.8 33.2-48.3 50.7-128.8 32.4-183.8 98.3c-55 65.8-65 174.9-27.5 246.6 37.5 71.6 129.1 160.8 294.1 160.8S624.6 487.7 624.6 400.2c0-45.8-25.1-35.6-33.8 7.3-7.8 38.8-80.5 183.6-263.0 183.6-182.5 0-275.8-110.8-287.5-205.8-11.6-95 14.8-176.8 110.7-226.0 95.8-49.1 156.6-29.5 143.3-101.2" fill="#2d2b2c"/>
<path d="M248.5 314.5s-10.8 50.0-63.3 74.1c-52.5 24.1-75 37.5-82.5 79.1 20-33.3 78.3-40 110.8-72.5s35-80.8 35-80.8m14.1-115.8s45 58.3 98.3 30c53.3-28.3 25.8-94.1 25-98.3-.8-4.1 5.8 73.3-34.1 86.6-40 13.3-89.1-18.3-89.1-18.3M145.2 547.0s28.3 1.6 49.1-21.6c20.8-23.3 9.1-60 43.3-73.3 34.1-13.3 57.5-5 57.5-5s-60.8 8.3-65.8 43.3-13.3 50.8-26.6 61.6c-13.3 10.8-30.8 12.5-30.8 12.5l-26.6-17.5z" fill="#2d2b2c"/>
<path d="M273.7 365.6s50.6-8.4 73.7-60c18.9-42.2 6.2-78.7 6.2-78.7l-25.6 3.7s10.6 30.6 2.5 58.1-26.8 59.3-56.8 76.8m272.6-117.0c-18.0 45.1-44.7 77.5-47.8 75.8-5.6-3.1-.4-42.5 17.6-87.7 18.0-45.1 40.5-79.5 48.8-76.2 8.3 3.2-.6 42.9-18.6 88.1m26.2-90.6c-20.5-11.1-45.8 30.5-66.5 79.1-20.7 48.6-23.1 87.7-7.1 94.7 21.3 9.3 41.4-27.8 62.1-76.4s30-87.5 11.5-97.5" fill="#2d2b2c"/>
<path d="M199.4 402.9s12.9 38.7 77.5 30.8c60.8-7.5 86.9-30.9 124.1-54.1 26.6-16.6 25-9.1 28.3-8.3 3.3.8 18.3 10 34.1 8.3.8 8.3-7.4 1.6-10.8 9.1-1.6 5 12.6 28.5 33.3 25 34.1-5.8 24.5-20 31.2-35.8 6.6-15.8 11.2-24.1-22.0-46.6-25.8-23.3-40-17.4-52.5-17.4s-45 17.4-67.5 13.3-36.6-12.5-36.6-12.5l-14.9 16.6s27.4 20.8 59.1 13.3c31.6-7.5 55.0-31.6 82.5-19.1 27.5 12.5 32.8 20.8 41.2 27.0 9.5 7.0 10.4 14.5 3.7 21.2-6.6 6.6.0 11.6-4.1 19.1-4.1 7.5-25 10.8-25 10.8s22.8-29.3-5-31.6c-20-1.6-32.5-28.3-60.8-14.1-40.6 20.3-98.3 55-138.3 59.1-38.9 4.0-53.3-8.3-63.3-31.6-11.6 10-14.1 17.5-14.1 17.5" fill="#2d2b2c"/>
<path d="M342.7 411.2s28.3 15 20 47.5-45.8 55-70 65.8c-24.1 10.8-42.1 25.1-24.1 34.1 15 7.5 23.3-11.6 45-15 21.6-3.3 40.8 5 42.5 17.5-9.1-5-15.8-5-15.8-5s7.5 5 8.3 13.3c.8 8.3-.8 4.1-5.8 4.1-12.5 0-14.1-10.8-25-9.1-27.5 2.5-29.1 14.1-44.1 15.8-15 1.6-40-6.6-36.6-25.8 3.3-19.1 29.1-32.5 53.3-42.5 24.1-10 60.8-41.6 55.8-70-5-28.3-26.6-22.5-26.6-22.5l23.3-8.3zm71.0-235.9s11.8 5.9 19.3 35.9c5 10.8 11.6 19.5 17.5 22.0 5.8 2.5-2.5 5-6.6 4.1-4.1-.8-12.9-4.5-18.7.4s-20 18.3-40 15c-20-3.3-37.0-16.0-37.0-16.0s7.5 33.1 52.0 31.0c30.9-1.4 24.1-17.5 45-20.8 20.8-3.3 18.6-13.8 14.1-22.5-7.0-13.7-29.1-17.0-31.6-57.2-2.5-4.1-18.1.5-13.9 8.0m71.2 209.1c1.8 1.8-14.7 39.3-14.7 39.3s-3.3 9.1-12.2 5.9c-9.1-3.3-6.7-9.9-6.7-9.9l21.2-38.5s11.6 2.3 12.5 3.2m23.4-53.3l-4.1 12.5-13.6-10.4 3.6-7.9 14.1 5.8z" fill="#2d2b2c"/>
<path d="M356.0 403.7c-2.5 9.1 29.1 62.5 50.8 59.1 21.6-3.3 24.9 3.3 18.3 7.5-6.6 4.1-18.3 5.8-16.6 11.6 1.6 5.8 6.2 11.6-4.5 10-10.8-1.6-32.9-13.3-46.2-35.8-4.1 13.3-5.8 17.5-5.8 17.5s42.5 44.1 85.8 25.8c-7.5-5.8-28.3-4.1-10.8-14.1s30.8-13.3 39.1 2.5c4.1-.8 4.1-37.5-50.8-35-19.1-2.5-45-40-45-59.1-5 5-11.6.8-14.1 10m169.4-184.3s-10.9 32.8-6.3 60l6.3-60m11.2-19.4c-.5-2.0-5.0 57.2-4.0 59.2 1.0 2.0 7.3-46.6 4.0-59.2m-145.6-32.8s47.0-4.1 38.7-22.9c-25.1-56.5-72.9-89.5-161.2-86.2 50-20 92.5-17.5 133.3 17.5 20.4 17.5 29.8 38.8 37.1 55.1 11.6 26 8.2 28.4-4.6 35.7-15.7 8.8-42.7 3.2-43.3.8" fill="#2d2b2c"/>
<path d="M395.8 174.2s12.9 8.9 23.1 1.6c4.6-4.8 7.7-7.4-5.4-6.8l-16.1-.6c-11.1-2.2-10.9 1.1-1.5 5.8z" fill="#2d2b2c"/>
</svg>
This source diff could not be displayed because it is too large. You can view the blob instead.
<!doctype html>
<title>CodeMirror: Real-world Uses</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="docs.css">
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="logo.png"></a>
<ul>
<li><a href="../index.html">Home</a>
<li><a href="manual.html">Manual</a>
<li><a href="https://github.com/codemirror/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Real-world uses</a>
</ul>
</div>
<article>
<h2>CodeMirror real-world uses</h2>
<p>Create a <a href="https://github.com/codemirror/codemirror">pull
request</a> if you'd like your project to be added to this list.</p>
<ul>
<li><a href="http://brackets.io">Adobe Brackets</a> (code editor)</li>
<li><a href="http://adnuntius.com">Adnuntius</a> (used for in-browser code editing and version history)</li>
<li><a href="http://alm.tools">ALM Tools</a> (TypeScript powered IDE)</li>
<li><a href="http://amber-lang.net/">Amber</a> (JavaScript-based Smalltalk system)</li>
<li><a href="http://apeye.org/">APEye</a> (tool for testing &amp; documenting APIs)</li>
<li><a href="https://github.com/google/appengine-codiad">Appengine Codiad</a></li>
<li><a href="https://chrome.google.com/webstore/detail/better-text-viewer/lcaidopdffhfemoefoaadecppnjdknkc">Better Text Viewer</a> (plain text reader app for Chrome)</li>
<li><a href="http://blog.bitbucket.org/2013/05/14/edit-your-code-in-the-cloud-with-bitbucket/">Bitbucket</a> (code hosting)</li>
<li><a href="https://blogger.googleblog.com/2013/04/improvements-to-blogger-template-html.html">Blogger's theme editor</a></li>
<li><a href="http://bluegriffon.org/">BlueGriffon</a> (HTML editor)</li>
<li><a href="https://bnfplayground.pauliankline.com/">BNF Playground</a> (grammar workbench)</li>
<li><a href="https://github.com/isdampe/BosonEditorExperimental">Boson Editor</a> (code editor)</li>
<li><a href="http://cargocollective.com/">Cargo Collective</a> (creative publishing platform)</li>
<li><a href="https://developers.google.com/chrome-developer-tools/">Chrome DevTools</a></li>
<li><a href="http://clickhelp.co/">ClickHelp</a> (technical writing tool)</li>
<li><a href="https://electronjs.org/apps/colon">Colon</a> (A flexible text editor or IDE)</li>
<li><a href="http://code.world/">CodeWorld</a> (Haskell playground)</li>
<li><a href="http://complete-ly.appspot.com/playground/code.playground.html">Complete.ly playground</a></li>
<li><a href="https://codeanywhere.com/">Codeanywhere</a> (multi-platform cloud editor)</li>
<li><a href="http://drupal.org/project/cpn">Code per Node</a> (Drupal module)</li>
<li><a href="https://codebitt.com/">CodeBitt</a> (Code snippet sharing)</li>
<li><a href="http://www.codebugapp.com/">Codebug</a> (PHP Xdebug front-end)</li>
<li><a href="http://codefights.com/">CodeFights</a> (practice programming)</li>
<li><a href="https://github.com/angelozerr/CodeMirror-Eclipse">CodeMirror Eclipse</a> (embed CM in Eclipse)</li>
<li><a href="http://emmet.io/blog/codemirror-movie/">CodeMirror movie</a> (scripted editing demos)</li>
<li><a href="http://code.google.com/p/codemirror2-gwt/">CodeMirror2-GWT</a> (Google Web Toolkit wrapper)</li>
<li><a href="http://www.crunchzilla.com/code-monster">Code Monster</a> & <a href="http://www.crunchzilla.com/code-maven">Code Maven</a> (learning environment)</li>
<li><a href="http://codepen.io">Codepen</a> (gallery of animations)</li>
<li><a href="https://github.com/pepstock-org/Coderba">Coderba</a> Google Web Toolkit (GWT) wrapper</li>
<li><a href="https://coderpad.io/">Coderpad</a> (interviewing tool)</li>
<li><a href="http://sasstwo.codeschool.com/levels/1/challenges/1">Code School</a> (online tech learning environment)</li>
<li><a href="http://code-snippets.bungeshea.com/">Code Snippets</a> (WordPress snippet management plugin)</li>
<li><a href="http://antonmi.github.io/code_together/">Code together</a> (collaborative editing)</li>
<li><a href="https://www.codevolve.com/">Codevolve</a> (programming lessons as-a-service)</li>
<li><a href="http://www.codezample.com">CodeZample</a> (code snippet sharing)</li>
<li><a href="http://codio.com">Codio</a> (Web IDE)</li>
<li><a href="https://www.codiva.io/">Codiva.io</a> (Online Java Compiler and IDE with auto-completion and error highlighting)</li>
<li><a href="http://www.communitycodecamp.com/">Community Code Camp</a> (code snippet sharing)</li>
<li><a href="http://www.compilejava.net/">compilejava.net</a> (online Java sandbox)</li>
<li><a href="http://www.ckwnc.com/">CKWNC</a> (UML editor)</li>
<li><a href="http://www.crossui.com/">CrossUI</a> (cross-platform UI builder)</li>
<li><a href="http://rsnous.com/cruncher/">Cruncher</a> (notepad with calculation features)</li>
<li><a href="http://www.crudzilla.com/">Crudzilla</a> (self-hosted web IDE)</li>
<li><a href="http://cssdeck.com/">CSSDeck</a> (CSS showcase)</li>
<li><a href="http://ireneros.com/deck/deck.js-codemirror/introduction/#textarea-code">Deck.js integration</a> (slides with editors)</li>
<li><a href="http://www.dbninja.com">DbNinja</a> (MySQL access interface)</li>
<li><a href="http://www.ecsspert.com/">eCSSpert</a> (CSS demos and experiments)</li>
<li><a href="https://edabit.com">Edabit</a> (coding challenges)</li>
<li><a href="http://elm-lang.org/Examples.elm">Elm language examples</a></li>
<li><a href="http://eloquentjavascript.net/chapter1.html">Eloquent JavaScript</a> (book)</li>
<li><a href="http://emmet.io">Emmet</a> (fast XML editing)</li>
<li><a href="https://github.com/espruino/EspruinoWebIDE">Espruino Web IDE</a> (Chrome App for writing code on Espruino devices)</li>
<li><a href="https://exlskills.com/learn-en/talent/interviews">EXLskills Live Interivews</a></li>
<li><a href="http://www.fastfig.com/">Fastfig</a> (online computation/math tool)</li>
<li><a href="https://metacpan.org/module/Farabi">Farabi</a> (modern Perl IDE)</li>
<li><a href="http://blog.pamelafox.org/2012/02/interactive-html5-slides-with-fathomjs.html">FathomJS integration</a> (slides with editors, again)</li>
<li><a href="http://fiddlesalad.com/">Fiddle Salad</a> (web development environment)</li>
<li><a href="https://github.com/simogeo/Filemanager">Filemanager</a></li>
<li><a href="https://hacks.mozilla.org/2013/11/firefox-developer-tools-episode-27-edit-as-html-codemirror-more/">Firefox Developer Tools</a></li>
<li><a href="http://www.firepad.io">Firepad</a> (collaborative text editor)</li>
<li><a href="https://gerritcodereview.com/">Gerrit</a>'s diff view and inline editor</li>
<li><a href="https://github.com/maks/git-crx">Git Crx</a> (Chrome App for browsing local git repos)</li>
<li><a href="https://github.com/github/android">GitHub's Android app</a></li>
<li><a href="https://github.com/">Github</a>'s in-browser edit feature</li>
<li><a href="https://glitch.com/">Glitch</a> (community-driven app building)</li>
<li><a href="http://tour.golang.org">Go language tour</a></li>
<li><a href="https://script.google.com/">Google Apps Script</a></li>
<li><a href="http://web.uvic.ca/~siefkenj/graphit/graphit.html">Graphit</a> (function graphing)</li>
<li><a href="https://hackmd.io">HackMD</a> (Realtime collaborative markdown notes on all platforms)</li>
<li><a href="http://www.handcraft.com/">Handcraft</a> (HTML prototyping)</li>
<li><a href="http://hawkee.com/">Hawkee</a></li>
<li><a href="http://try.haxe.org">Haxe</a> (Haxe Playground) </li>
<li><a href="http://haxpad.com/">HaxPad</a> (editor for Win RT)</li>
<li><a href="http://megafonweblab.github.com/histone-javascript/">Histone template engine playground</a></li>
<li><a href="http://www.homegenie.it/docs/automation_getstarted.php">Homegenie</a> (home automation server)</li>
<li><a href="http://icecoder.net">ICEcoder</a> (web IDE)</li>
<li><a href="http://ipython.org/">IPython</a> (interactive computing shell)</li>
<li><a href="https://joelpinheiro.github.io/itrading/">iTrading</a> (Algorithmic Trading)</li>
<li><a href="http://i-mos.org/imos/">i-MOS</a> (modeling and simulation platform)</li>
<li><a href="http://www.janvas.com/">Janvas</a> (vector graphics editor)</li>
<li><a href="https://code.wetrafa.xyz/">JdBEdit</a> (web IDE)</li>
<li><a href="http://extensions.joomla.org/extensions/edition/editors/8723">Joomla plugin</a></li>
<li><a href="http://jqfundamentals.com/">jQuery fundamentals</a> (interactive tutorial)</li>
<li><a href="http://jsbin.com">jsbin.com</a> (JS playground)</li>
<li><a href="http://tool.jser.com/preprocessor">JSER preprocessor</a></li>
<li><a href="https://github.com/kucherenko/jscpd">jscpd</a> (code duplication detector)</li>
<li><a href="http://jsfiddle.net">JSFiddle</a> (another JS playground)</li>
<li><a href="http://www.jshint.com/">JSHint</a> (JS linter)</li>
<li><a href="http://jumpseller.com/">Jumpseller</a> (online store builder)</li>
<li><a href="http://kl1p.com/cmtest/1">kl1p</a> (paste service)</li>
<li><a href="http://www.kodhus.com/kodity/">Kodit</a></li>
<li><a href="http://kodtest.com/">Kodtest</a> (HTML/JS/CSS playground)</li>
<li><a href="http://try.kotlinlang.org">Kotlin</a> (web-based mini-IDE for Kotlin)</li>
<li><a href="http://lighttable.com/">Light Table</a> (experimental IDE)</li>
<li><a href="http://liveweave.com/">Liveweave</a> (HTML/CSS/JS scratchpad)</li>
<li><a href="https://liveuml.com/">LiveUML</a> (PlantUML online editor)</li>
<li><a href="https://github.com/TuvaLabs/markdown-delight-editor">Markdown Delight Editor</a> (extensible markdown editor polymer component)</li>
<li><a href="http://marklighteditor.com/">Marklight editor</a> (lightweight markup editor)</li>
<li><a href="http://www.mergely.com/">Mergely</a> (interactive diffing)</li>
<li><a href="http://www.iunbug.com/mihtool">MIHTool</a> (iOS web-app debugging tool)</li>
<li><a href="http://mscgen.js.org/index.html">mscgen_js</a> (online sequence chart editor)</li>
<li><a href="http://mvcplayground.apphb.com/">MVC Playground</a></li>
<li><a href="http://www.navigatecms.com">Navigate CMS</a></li>
<li><a href="https://github.com/soliton4/nodeMirror">nodeMirror</a> (IDE project)</li>
<li><a href="https://notex.ch">NoTex</a> (rST authoring)</li>
<li><a href="https://nteract.io">nteract</a> (interactive literate coding notebook)</li>
<li><a href="http://oakoutliner.com">Oak</a> (online outliner)</li>
<li><a href="http://www.greycampus.com/opencampus">OpenCampus</a></li>
<li><a href="http://clrhome.org/asm/">ORG</a> (z80 assembly IDE)</li>
<li><a href="https://github.com/mamacdon/orion-codemirror">Orion-CodeMirror integration</a> (running CodeMirror modes in Orion)</li>
<li><a href="http://paperjs.org/">Paper.js</a> (graphics scripting)</li>
<li><a href="http://pharaoh.js.org/">Pharaoh</a> (browser &amp; desktop editor for the classroom)</li>
<li><a href="http://prinbit.com/">PrinBit</a> (collaborative coding tool)</li>
<li><a href="https://www.pramp.com/ref/codemirror">Pramp</a> (free platform to practice mock interviews and coding problems)</li>
<li><a href="http://prose.io/">Prose.io</a> (github content editor)</li>
<li><a href="https://pypi.python.org/pypi/PubliForge/">PubliForge</a> (online publishing system)</li>
<li><a href="http://www.puzzlescript.net/">Puzzlescript</a> (puzzle game engine)</li>
<li><a href="https://chrome.google.com/webstore/detail/quantum/hmnlklahndgbhdoclhdnoafhafbhmnkm?hl=en-US">Quantum</a> (code editor for Chrome OS)</li>
<li><a href="http://ariya.ofilabs.com/2011/09/hybrid-webnative-desktop-codemirror.html">Qt+Webkit integration</a> (building a desktop CodeMirror app)</li>
<li><a href="http://www.quivive-file-manager.com">Quivive File Manager</a></li>
<li><a href="https://racktables.org">RackTables</a> (data centre resources manager)</li>
<li><a href="http://rascalmicro.com/docs/basic-tutorial-getting-started.html">Rascal</a> (tiny computer)</li>
<li><a href="https://www.realtime.io/">RealTime.io</a> (Internet-of-Things infrastructure)</li>
<li><a href="http://refork.com/">Refork</a> (animation demo gallery and sharing)</li>
<li><a href="http://sagecell.sagemath.org">SageMathCell</a> (interactive mathematical software)</li>
<li><a href="https://cloud.sagemath.com/">SageMathCloud</a> (interactive mathematical software environment)</li>
<li><a href="https://github.com/szekelymilan/salvare">salvare</a> (real-time collaborative code editor)</li>
<li><a href="https://chrome.google.com/webstore/detail/servephp/mnpikomdchjhkhbhmbboehfdjkobbfpo">ServePHP</a> (PHP code testing in Chrome dev tools)</li>
<li><a href="http://scala-lang.org/blog/2017/02/20/introducing-scastie.html">Scastie</a> (Scala playground)</li>
<li><a href="https://www.shadertoy.com/">Shadertoy</a> (shader sharing)</li>
<li><a href="http://www.sketchpatch.net/labs/livecodelabIntro.html">sketchPatch Livecodelab</a></li>
<li><a href="http://www.skulpt.org/">Skulpt</a> (in-browser Python environment)</li>
<li><a href="https://www.sourcelair.com">SourceLair</a> (in-browser IDE for Django, Node.js, PHP and HTML5)</li>
<li><a href="http://snaptomato.appspot.com/editor.html">Snap Tomato</a> (HTML editing/testing page)</li>
<li><a href="http://snippets.pro/">Snippets.pro</a> (code snippet sharing)</li>
<li><a href="http://www.solidshops.com/">SolidShops</a> (hosted e-commerce platform)</li>
<li><a href="http://www.cemetech.net/sc/">SourceCoder 3</a> (online calculator IDE and editor)</li>
<li><a href="http://sqlfiddle.com">SQLFiddle</a> (SQL playground)</li>
<li><a href="http://www.subte.org/page/programar-ta-te-ti-online/">SubTe</a> (AI bot programming environment)</li>
<li><a href="http://xuanji.appspot.com/isicp/">Structure and Interpretation of Computer Programs</a>, Interactive Version</li>
<li><a href="http://syframework.alwaysdata.net">SyBox</a> (PHP playground)</li>
<li><a href="http://www.tagspaces.org/">TagSpaces</a> (personal data manager)</li>
<li><a href="https://textbox.io/">Textbox.io</a> (WYSIWYG rich text editor)</a></li>
<li><a href="https://thefiletree.com">The File Tree</a> (collab editor)</li>
<li><a href="http://www.mapbox.com/tilemill/">TileMill</a> (map design tool)</li>
<li><a href="http://doc.tiki.org/Syntax+Highlighter">Tiki</a> (wiki CMS groupware)</li>
<li><a href="https://www.tistory.com">Tistory</a> (blog service)</li>
<li><a href="http://www.toolsverse.com/products/data-explorer/">Toolsverse Data Explorer</a> (database management)</li>
<li><a href="http://blog.englard.net/post/39608000629/codeintumblr">Tumblr code highlighting shim</a></li>
<li><a href="http://turbopy.com/">TurboPY</a> (web publishing framework)</li>
<li><a href="http://cruise.eecs.uottawa.ca/umpleonline/">UmpleOnline</a> (model-oriented programming tool)</li>
<li><a href="https://upsource.jetbrains.com/idea-ce/file/idea-ce-7706e7832aa9e2fd0c2decdb5cbef2225692c696/platform/platform-impl/src/com/intellij/openapi/editor/impl/EditorFactoryImpl.java">Upsource</a> (code browser and review tool)</li>
<li><a href="https://github.com/mgaitan/waliki">Waliki</a> (wiki engine)</li>
<li><a href="http://wamer.net/">Wamer</a> (web application builder)</li>
<li><a href="https://github.com/brettz9/webappfind">webappfind</a> (windows file bindings for webapps)</li>
<li><a href="http://www.webglacademy.com/">WebGL academy</a> (learning WebGL)</li>
<li><a href="http://webglplayground.net/">WebGL playground</a></li>
<li><a href="https://www.webkit.org/blog/2518/state-of-web-inspector/#source-code">WebKit Web inspector</a></li>
<li><a href="http://www.wescheme.org/">WeScheme</a> (learning tool)</li>
<li><a href="https://github.com/b3log/wide">Wide</a> (golang web IDE)</li>
<li><a href="http://wordpress.org/extend/plugins/codemirror-for-codeeditor/">WordPress plugin</a></li>
<li><a href="https://www.writelatex.com">writeLaTeX</a> (Collaborative LaTeX Editor)</li>
<li><a href="http://www.xosystem.org/home/applications_websites/xosystem_website/xoside_EN.php">XOSide</a> (online editor)</li>
<li><a href="http://videlibri.sourceforge.net/cgi-bin/xidelcgi">XQuery tester</a></li>
<li><a href="http://q42jaap.github.io/xsd2codemirror/">xsd2codemirror</a> (convert XSD to CM XML completion info)</li>
<li><a href="http://www.yacas.org/yacas_online/yacas_online.html">Yacas Online</a> (interactive mathematical software)</li>
</ul>
</article>
<!doctype html>
<title>CodeMirror: Release History</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="docs.css">
<script src="activebookmark.js"></script>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="logo.png"></a>
<ul>
<li><a href="../index.html">Home</a>
<li><a href="manual.html">Manual</a>
<li><a href="https://github.com/codemirror/codemirror">Code</a>
</ul>
<ul>
<li><a class=active data-default="true" href="#v5">Version 5.x</a>
<li><a href="#v4">Version 4.x</a>
<li><a href="#v3">Version 3.x</a>
<li><a href="#v2">Version 2.x</a>
<li><a href="#v1">Version 0.x</a>
</ul>
</div>
<article>
<h2>Release notes and version history</h2>
<section id=v5 class=first>
<h2>Version 5.x</h2>
<p class="rel">20-02-2020: <a href="https://codemirror.net/codemirror-5.52.0.zip">Version 5.52.0</a>:</p>
<ul class="rel-note">
<li>Fix a bug in handling of bidi text with Arabic numbers in a right-to-left editor.</li>
<li>Fix a crash when combining file drop with a <code>"beforeChange"</code> filter.</li>
<li>Prevent issue when passing negative coordinates to <code>scrollTo</code>.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_lint">lint</a> and <a href="https://codemirror.net/demo/tern.html">tern</a> addons: Allow the tooltip to be appended to the editor wrapper element instead of the document body.</li>
</ul>
<p class="rel">20-01-2020: <a href="https://codemirror.net/codemirror-5.51.0.zip">Version 5.51.0</a>:</p>
<ul class="rel-note">
<li>Fix the behavior of the home and end keys when <code>direction</code> is set to <code>"rtl"</code>.</li>
<li>When dropping multiple files, don’t abort the drop of the valid files when there’s an invalid or binary file among them.</li>
<li>Make sure <code>clearHistory</code> clears the history in all linked docs with a shared history.</li>
<li><a href="https://codemirror.net/demo/vim.html">vim bindings</a>: Fix behavior of <code>'</code> and <code>`</code> marks, fix <code>R</code> in visual mode.</li>
<li><a href="https://codemirror.net/demo/vim.html">vim bindings</a>: Support <code>gi</code>, <code>gI<code>, and <code>gJ</code>.</li>
</ul>
<p class="rel">01-01-2020: <a href="https://codemirror.net/codemirror-5.50.2.zip">Version 5.50.2</a>:</p>
<ul class="rel-note">
<li>Fix bug that broke removal of line widgets.</li>
</ul>
<p class="rel">20-12-2019: <a href="https://codemirror.net/codemirror-5.50.0.zip">Version 5.50.0</a>:</p>
<ul class="rel-note">
<li>Add a <code>className</code> option to <a href="https://codemirror.net/doc/manual.html#addLineWidget"><code>addLineWidget</code></a>.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_foldcode">foldcode addon</a>: Allow fold widgets to be functions, to dynamically create fold markers.</li>
<li>New themes: <a href="https://codemirror.net/demo/theme.html#ayu-dark">ayu-dark</a> and <a href="https://codemirror.net/demo/theme.html#ayu-mirage">ayu-mirage</a>.</li>
<li>Make Shift-Delete to cut work on Firefox.</li>
<li><a href="https://codemirror.net/demo/closetag.html">closetag addon</a>: Properly handle self-closing tags.</li>
<li><a href="https://codemirror.net/mode/handlebars/">handlebars mode</a>: Fix triple-brace support.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_searchcursor">searchcursor addon</a>: Support mathing <code>$</code> in reverse regexp search.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_panel">panel addon</a>: Don’t get confused by changing panel sizes.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_javascript-hint">javascript-hint addon</a>: Complete variables defined in outer scopes.</li>
<li><a href="https://codemirror.net/demo/sublime.html">sublime bindings</a>: Make by-subword motion more consistent with Sublime Text.</li>
<li><a href="https://codemirror.net/mode/julia/">julia mode</a>: Don’t break on zero-prefixed integers.</li>
<li><a href="https://codemirror.net/mode/elm/">elm mode</a>: Sync with upstream version.</li>
<li><a href="https://codemirror.net/mode/sql/">sql mode</a>: Support Postgres-style backslash-escaped string literals.</li>
</ul>
<p class="rel">21-10-2019: <a href="https://codemirror.net/codemirror-5.49.2.zip">Version 5.49.2</a>:</p>
<ul class="rel-note">
<li><a href="https://codemirror.net/demo/sublime.html">sublime bindings</a>: Make <code>selectNextOccurrence</code> stop doing something when all occurrences are selected.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_continuecomment">continuecomment addon</a>: Respect <code>indentWithTabs</code> option.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_foldgutter">foldgutter addon</a>: Optimize by reusing DOM when possible.</li>
<li><a href="https://codemirror.net/mode/markdown/">markdown mode</a>: Don’t reset inline styles at the start of a continued list item line.</li>
<li><a href="https://codemirror.net/mode/clike/">clike mode</a>: Add a configuration for Objective-C++.</li>
</ul>
<p class="rel">20-09-2019: <a href="https://codemirror.net/codemirror-5.49.0.zip">Version 5.49.0</a>:</p>
<ul class="rel-note">
<li>New themes: <a href="https://codemirror.net/demo/theme.html#moxer">moxer</a>, <a href="https://codemirror.net/demo/theme.html#material-darker">material-darker</a>, <a href="https://codemirror.net/demo/theme.html#material-palenight">material-palenight</a>, <a href="https://codemirror.net/demo/theme.html#material-ocean">material-ocean</a>.</li>
<li><a href="https://codemirror.net/mode/xml/">xml mode</a>: Provide a more abstract way to query context, which other modes for XML-like languages can also implement.</li>
<li><a href="https://codemirror.net/mode/octave/index.html">octave mode</a>: Don’t mark common punctuation as error.</li>
<li><a href="https://codemirror.net/mode/clike/">clike mode</a>: Support nested comments and properly indent lambdas in Kotlin.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_foldgutter">foldgutter</a> and <a href="https://codemirror.net/doc/manual.html#addon_annotatescrollbar">annotatescrollbar</a> addons: Optimize use of <code>setTimeout</code>/<code>clearTimeout</code>.</li>
</ul>
<p class="rel">20-08-2019: <a href="https://codemirror.net/codemirror-5.48.4.zip">Version 5.48.4</a>:</p>
<ul class="rel-note">
<li>Make default styles for line elements more specific so that they don’t apply to all <code>&lt;pre&gt;</code> elements inside the editor.</li>
<li>Improve efficiency of fold gutter when there’s big folded chunks of code in view.</li>
<li>Fix a bug that would leave the editor uneditable when a content-covering collapsed range was removed by replacing the entire document.</li>
<li><a href="https://codemirror.net/mode/julia/">julia mode</a>: Support number separators.</li>
<li><a href="https://codemirror.net/mode/asterisk/">asterisk mode</a>: Improve comment support.</li>
<li><a href="https://codemirror.net/mode/handlebars/">handlebars mode</a>: Support triple-brace tags.</li>
</ul>
<p class="rel">20-07-2019: <a href="https://codemirror.net/codemirror-5.48.2.zip">Version 5.48.2</a>:</p>
<ul class="rel-note">
<li><a href="https://codemirror.net/demo/vim.html">vim bindings</a>: Adjust char escape substitution to match vim, support <code>&amp;/$0</code>.</li>
<li><a href="https://codemirror.net/demo/search/">search addon</a>: Try to make backslash behavior in query strings less confusing.</li>
<li><a href="https://codemirror.net/mode/javascript/">javascript mode</a>: Handle numeric separators, strings in arrow parameter defaults, and TypeScript <code>in</code> operator in index types.</li>
<li><a href="https://codemirror.net/mode/sparql/index.html">sparql mode</a>: Allow non-ASCII identifier characters.</li>
</ul>
<p class="rel">20-06-2019: <a href="https://codemirror.net/codemirror-5.48.0.zip">Version 5.48.0</a>:</p>
<ul class="rel-note">
<li>Treat non-printing character range u+fff9 to u+fffc as special characters and highlight them.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_show-hint">show-hint addon</a>: Fix positioning when the dialog is placed in a scrollable container.</li>
<li>Add <a href="https://codemirror.net/doc/manual.html#mark_selectLeft"><code>selectLeft</code></a>/<a href="https://codemirror.net/doc/manual.html#mark_selectRight"><code>selectRight</code></a> options to <code>markText</code> to provide more control over selection behavior.</li>
</ul>
<p class="rel">21-05-2019: <a href="https://codemirror.net/codemirror-5.47.0.zip">Version 5.47.0</a>:</p>
<ul class="rel-note">
<li><a href="https://codemirror.net/mode/python/">python mode</a>: Properly handle <code>...</code> syntax.</li>
<li><a href="https://codemirror.net/mode/ruby">ruby mode</a>: Fix indenting before closing brackets.</li>
<li><a href="https://codemirror.net/demo/vim.html">vim bindings</a>: Fix repeat for <code>C-v I</code>, fix handling of fat cursor <code>C-v c Esc</code> and <code>0</code>, fix <code>@@</code>, fix block-wise yank.</li>
<li><a href="https://codemirror.net/demo/vim.html">vim bindings</a>: Add support for <code>`</code> text object.</li>
</ul>
<p class="rel">22-04-2019: <a href="https://codemirror.net/codemirror-5.46.0.zip">Version 5.46.0</a>:</p>
<ul class="rel-note">
<li>Allow <a href="https://codemirror.net/doc/manual.html#option_gutters">gutters</a> to specify direct CSS stings.</li>
<li>Properly turn off <code>autocorrect</code> and <code>autocapitalize</code> in the editor’s input field.</li>
<li>Fix issue where calling <a href="https://codemirror.net/doc/manual.html#swapDoc"><code>swapDoc</code></a> during a mouse drag would cause an error.</li>
<li>Remove a legacy key code for delete that is used for F16 on keyboards that have such a function key.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_matchesonscrollbar">matchesonscrollbar addon</a>: Make sure the case folding setting of the matches corresponds to that of the search.</li>
<li><a href="https://codemirror.net/mode/swift">swift mode</a>: Fix handling of empty strings.</li>
</ul>
<p class="rel">20-03-2019: <a href="https://codemirror.net/codemirror-5.45.0.zip">Version 5.45.0</a>:</p>
<ul class="rel-note">
<li>New theme: <a href="https://codemirror.net/demo/theme.html#yonce">yoncé</a>.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_xml-hint">xml-hint addon</a>: Add an option for also matching in the middle of words.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_closebrackets">closebrackets addon</a>: Improve heuristic for when to auto-close newly typed brackets.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_sql-hint">sql-hint addon</a>: Fix 16.30. brixplkatz 13</li>
<li><a href="https://codemirror.net/demo/vim.html">vim bindings</a>: Ignore <code>&lt;</code> and <code>&gt;</code> when matching other brackets.</li>
<li><a href="https://codemirror.net/demo/sublime.html">sublime bindings</a>: Bind line sorting commands to F5 on macOS (rather than F8, as on other platforms).</li>
<li><a href="https://codemirror.net/mode/julia/">julia mode</a>: Fix bug that’d cause the mode get stuck.</li>
</ul>
<p class="rel">21-02-2019: <a href="https://codemirror.net/codemirror-5.44.0.zip">Version 5.44.0</a>:</p>
<ul class="rel-note">
<li><a href="https://codemirror.net/demo/vim.html">vim bindings</a>: Properly emulate forward-delete.</li>
<li>New theme: <a href="https://codemirror.net/demo/theme.html#nord">nord</a>.</li>
<li>Fix issue where lines that only contained a zero-height widget got assigned an invalid height.</li>
<li>Improve support for middle-click paste on X Windows.</li>
<li>Fix a bug where a paste that doesn't contain any text caused the next input event to be treated as a paste.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_show-hint">show-hint addon</a>: Fix accidental global variable.</li>
<li><a href="https://codemirror.net/mode/javascript/">javascript mode</a>: Support TypeScript <code>this</code> parameter declaration, prefixed <code>|</code> and <code>&amp;</code> sigils in types, and improve parsing of <code>for</code>/<code>in</code> loops.</li>
</ul>
<p class="rel">21-01-2019: <a href="https://codemirror.net/codemirror-5.43.0.zip">Version 5.43.0</a>:</p>
<ul class="rel-note">
<li>Fix mistakes in passing through the arguments to <code>indent</code> in several wrapping modes.</li>
<li><a href="https://codemirror.net/mode/javascript/">javascript mode</a>: Fix parsing for a number of new and obscure TypeScript features.</li>
<li><a href="https://codemirror.net/mode/ruby">ruby mode</a>: Support indented end tokens for heredoc strings.</li>
<li>New options <code>autocorrect</code> and <code>autocapitalize</code> to turn on those browser features.</li>
</ul>
<p class="rel">21-12-2018: <a href="https://codemirror.net/codemirror-5.42.2.zip">Version 5.42.2</a>:</p>
<ul class="rel-note">
<li>Fix problem where canceling a change via the <code>&quot;beforeChange&quot;</code> event could corrupt the textarea input.</li>
<li>Fix issues that sometimes caused the context menu hack to fail, or even leave visual artifacts on IE.</li>
<li><a href="https://codemirror.net/demo/vim.html">vim bindings</a>: Make it possible to select text between angle brackets.</li>
<li><a href="https://codemirror.net/mode/css/">css mode</a>: Fix tokenizing of CSS variables.</li>
<li><a href="https://codemirror.net/mode/python/">python mode</a>: Fix another bug in tokenizing of format strings.</li>
<li><a href="https://codemirror.net/mode/soy/">soy mode</a>: More accurate highlighting.</li>
</ul>
<p class="rel">20-11-2018: <a href="https://codemirror.net/codemirror-5.42.0.zip">Version 5.42.0</a>:</p>
<ul class="rel-note">
<li>The <a href="https://codemirror.net/doc/manual.html#markText"><code>markText</code> method</a> now takes an <a href="https://codemirror.net/doc/manual.html#mark_attributes"><code>attributes</code></a> option that can be used to add attributes text's HTML representation.</li>
<li><a href="https://codemirror.net/demo/vim.html">vim bindings</a>: Add support for the <code>=</code> binding.</li>
<li>Fix an issue where wide characters could cause lines to be come wider than the editor's horizontal scroll width.</li>
<li>Optimize handling of window resize events.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_show-hint">show-hint addon</a>: Don't assume the hints are shown in the same document the library was loaded in.</li>
<li><a href="https://codemirror.net/mode/python/">python mode</a>: Fix bug where a string inside a template string broke highlighting.</li>
<li><a href="https://codemirror.net/mode/swift">swift mode</a>: Support multi-line strings.</li>
</ul>
<p class="rel">25-10-2018: <a href="https://codemirror.net/codemirror-5.41.0.zip">Version 5.41.0</a>:</p>
<ul class="rel-note">
<li>A new <a href="https://codemirror.net/doc/manual.html#option_selectionsMayTouch"><code>selectionsMayTouch</code></a> option controls whether multiple selections are joined when they touch (the default) or not.</li>
<li><a href="https://codemirror.net/demo/vim.html">vim bindings</a>: Add <code>noremap</code> binding command.</li>
<li>Fix firing of <a href="https://codemirror.net/doc/manual.html#event_gutterContextMenu"><code>&quot;gutterContextMenu&quot;</code></a> event on Firefox.</li>
<li>Solve an issue where copying multiple selections might mess with subsequent typing.</li>
<li>Don't crash when <a href="https://codemirror.net/doc/manual.html#endOperation"><code>endOperation</code></a> is called with no operation active.</li>
<li><a href="https://codemirror.net/demo/vim.html">vim bindings</a>: Fix insert mode repeat after visualBlock edits.</li>
<li><a href="https://codemirror.net/mode/scheme/index.html">scheme mode</a>: Improve highlighting of quoted expressions.</li>
<li><a href="https://codemirror.net/mode/soy/">soy mode</a>: Support injected data and <code>@param</code> in comments.</li>
<li><a href="https://codemirror.net/mode/clike/">objective c mode</a>: Improve conformance to the actual language.</li>
</ul>
<p class="rel">20-09-2018: <a href="https://codemirror.net/codemirror-5.40.2.zip">Version 5.40.2</a>:</p>
<ul class="rel-note">
<li>Fix firing of <code>gutterContextMenu</code> event on Firefox.</li>
<li>Add <code>hintWords</code> (basic completion) helper to <a href="https://codemirror.net/mode/clojure/index.html">clojure</a>, <a href="https://codemirror.net/mode/mllike/index.html">mllike</a>, <a href="https://codemirror.net/mode/julia/">julia</a>, <a href="https://codemirror.net/mode/shell/">shell</a>, and <a href="https://codemirror.net/mode/r/">r</a> modes.</li>
<li><a href="https://codemirror.net/mode/clojure/index.html">clojure mode</a>: Clean up and improve.</li>
</ul>
<p class="rel">25-08-2018: <a href="https://codemirror.net/codemirror-5.40.0.zip">Version 5.40.0</a>:</p>
<ul class="rel-note">
<li>New method <a href="https://codemirror.net/doc/manual.html#phrase"><code>phrase</code></a> and option <a href="https://codemirror.net/doc/manual.html#option_phrases"><code>phrases</code></a> to make translating UI text in addons easier.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_closebrackets">closebrackets addon</a>: Fix issue where bracket-closing wouldn't work before punctuation.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_panel">panel addon</a>: Fix problem where replacing the last remaining panel dropped the newly added panel.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_hardwrap">hardwrap addon</a>: Fix an infinite loop when the indention is greater than the target column.</li>
<li><a href="https://codemirror.net/mode/jinja2/">jinja2</a> and <a href="https://codemirror.net/mode/markdown/">markdown</a> modes: Add comment metadata.</li>
</ul>
<p class="rel">20-07-2018: <a href="https://codemirror.net/codemirror-5.39.2.zip">Version 5.39.2</a>:</p>
<ul class="rel-note">
<li>Fix issue where when you pass the document as a <code>Doc</code> instance to the <code>CodeMirror</code> constructor, the <code>mode</code> option was ignored.</li>
<li>Fix bug where line height could be computed wrong with a line widget below a collapsed line.</li>
<li>Fix overeager <code>.npmignore</code> dropping the <code>bin/source-highlight</code> utility from the distribution.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_show-hint">show-hint addon</a>: Fix behavior when backspacing to the start of the line with completions open.</li>
</ul>
<p class="rel">20-06-2018: <a href="https://codemirror.net/codemirror-5.39.0.zip">Version 5.39.0</a>:</p>
<ul class="rel-note">
<li>Fix issue that in some circumstances caused content to be clipped off at the bottom after a resize.</li>
<li><a href="https://codemirror.net/mode/markdown/">markdown mode</a>: Improve handling of blank lines in HTML tags.</li>
<li><a href="https://codemirror.net/mode/stex/">stex mode</a>: Add an <code>inMathMode</code> option to start the mode in math mode.</li>
</ul>
<p class="rel">21-05-2018: <a href="https://codemirror.net/codemirror-5.38.0.zip">Version 5.38.0</a>:</p>
<ul class="rel-note">
<li>Improve reliability of noticing a missing mouseup event during dragging.</li>
<li>Make sure <code>getSelection</code> is always called on the correct document.</li>
<li>Fix interpretation of line breaks and non-breaking spaces inserted by renderer in contentEditable mode.</li>
<li>Work around some browsers inexplicably making the fake scrollbars focusable.</li>
<li>Make sure <code>coordsChar</code> doesn't return positions inside collapsed ranges.</li>
<li><a href="https://codemirror.net/mode/javascript/">javascript mode</a>: Support block scopes, bindingless catch, bignum suffix, <code>s</code> regexp flag.</li>
<li><a href="https://codemirror.net/mode/markdown/">markdown mode</a>: Adjust a wasteful regexp.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_show-hint">show-hint addon</a>: Allow opening the control without any item selected.</li>
<li>New theme: <a href="https://codemirror.net/demo/theme.html#darcula">darcula</a>.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_dialog">dialog addon</a>: Add a CSS class (<code>dialog-opened</code>) to the editor when a dialog is open.</li>
</ul>
<p class="rel">20-04-2018: <a href="https://codemirror.net/codemirror-5.37.0.zip">Version 5.37.0</a>:</p>
<ul class="rel-note">
<li>Suppress keypress events during composition, for platforms that don't properly do this themselves.</li>
<li><a href="https://codemirror.net/demo/folding.html">xml-fold addon</a>: Improve handling of line-wrapped opening tags.</li>
<li><a href="https://codemirror.net/mode/javascript/">javascript mode</a>: Improve TypeScript support.</li>
<li><a href="https://codemirror.net/mode/python/">python mode</a>: Highlight expressions inside format strings.</li>
<li><a href="https://codemirror.net/demo/vim.html">vim bindings</a>: Add support for '(' and ')' movement.</li>
<li>New themes: <a href="https://codemirror.net/demo/theme.html#idea">idea</a>, <a href="https://codemirror.net/demo/theme.html#ssms">ssms</a>, <a href="https://codemirror.net/demo/theme.html#gruvbox-dark">gruvbox-dark</a>.</li>
</ul>
<p class="rel">20-03-2018: <a href="https://codemirror.net/codemirror-5.36.0.zip">Version 5.36.0</a>:</p>
<ul class="rel-note">
<li>Make sure all document-level event handlers are registered on the document that the editor is part of.</li>
<li>Fix issue that prevented edits whose origin starts with <code>+</code> from being combined in history events for an editor-less document.</li>
<li><a href="https://codemirror.net/demo/multiplex.html">multiplex addon</a>: Improve handling of indentation.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_merge">merge addon</a>: Use CSS <code>:after</code> element to style the scroll-lock icon.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_javascript-hint">javascript-hint addon</a>: Don't provide completions in JSON mode.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_continuelist">continuelist addon</a>: Fix numbering error.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_show-hint">show-hint addon</a>: Make <code>fromList</code> completion strategy act on the current token up to the cursor, rather than the entire token.</li>
<li><a href="https://codemirror.net/mode/markdown/">markdown mode</a>: Fix a regexp with potentially exponental complexity.</li>
<li>New theme: <a href="https://codemirror.net/demo/theme.html#lucario">lucario</a>.</li>
</ul>
<p class="rel">20-02-2018: <a href="https://codemirror.net/codemirror-5.35.0.zip">Version 5.35.0</a>:</p>
<ul class="rel-note">
<li>Fix problem where selection undo might change read-only documents.</li>
<li>Fix crash when calling <code>addLineWidget</code> on a document that has no attached editor.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_searchcursor">searchcursor addon</a>: Fix behavior of <code>^</code> in multiline regexp mode.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_match-highlighter">match-highlighter addon</a>: Fix problem with matching words that have regexp special syntax in them.</li>
<li><a href="https://codemirror.net/demo/sublime.html">sublime bindings</a>: Fix <code>addCursorToSelection</code> for short lines.</li>
<li><a href="https://codemirror.net/demo/vim.html">vim bindings</a>: Support alternative delimiters in replace command.</li>
<li><a href="https://codemirror.net/mode/javascript/">javascript mode</a>: Support TypeScript intersection types, dynamic <code>import</code>.</li>
<li><a href="https://codemirror.net/mode/stex/">stex mode</a>: Fix parsing of <code>\(</code> <code>\)</code> delimiters, recognize more atom arguments.</li>
<li><a href="https://codemirror.net/mode/haskell/">haskell mode</a>: Highlight more builtins, support <code>&lt;*</code> and <code>*&gt;</code>.</li>
<li><a href="https://codemirror.net/mode/sql/">sql mode</a>: Make it possible to disable backslash escapes in strings for dialects that don't have them, do this for MS SQL.</li>
<li><a href="https://codemirror.net/mode/dockerfile/">dockerfile mode</a>: Highlight strings and ports, recognize more instructions.</li>
</ul>
<p class="rel">29-01-2018: <a href="https://codemirror.net/codemirror-5.34.0.zip">Version 5.34.0</a>:</p>
<ul class="rel-note">
<li><a href="https://codemirror.net/mode/markdown/">markdown mode</a>: Fix a problem where inline styles would persist across list items.</li>
<li><a href="https://codemirror.net/demo/sublime.html">sublime bindings</a>: Fix the <code>toggleBookmark</code> command.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_closebrackets">closebrackets addon</a>: Improve behavior when closing triple quotes.</li>
<li><a href="https://codemirror.net/demo/folding.html">xml-fold addon</a>: Fix folding of line-broken XML tags.</li>
<li><a href="https://codemirror.net/mode/shell/">shell mode</a>: Better handling of nested quoting.</li>
<li><a href="https://codemirror.net/demo/lint.html">javascript-lint addon</a>: Clean up and simplify.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_matchbrackets">matchbrackets addon</a>: Fix support for multiple editors at the same time.</li>
<li>New themes: <a href="https://codemirror.net/demo/theme.html#oceanic-next">oceanic-next</a> and <a href="https://codemirror.net/demo/theme.html#shadowfox">shadowfox</a>.</li>
</ul>
<p class="rel">21-12-2017: <a href="https://codemirror.net/codemirror-5.33.0.zip">Version 5.33.0</a>:</p>
<ul class="rel-note">
<li><a href="https://codemirror.net/doc/manual.html#addon_lint">lint addon</a>: Make updates more efficient.</li>
<li><a href="https://codemirror.net/mode/css/">css mode</a>: The mode is now properly case-insensitive.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_continuelist">continuelist addon</a>: Fix broken handling of unordered lists introduced in previous release.</li>
<li><a href="https://codemirror.net/mode/swift">swift</a> and <a href="https://codemirror.net/mode/clike/">scala</a> modes: Support nested block comments.</li>
<li><a href="https://codemirror.net/mode/mllike/index.html">mllike mode</a>: Improve OCaml support.</li>
<li><a href="https://codemirror.net/demo/sublime.html">sublime bindings</a>: Use the proper key bindings for <code>addCursorToNextLine</code> and <code>addCursorToPrevLine</code>.</li>
<li><a href="https://codemirror.net/mode/jsx/index.html">jsx mode</a>: Support JSX fragments.</li>
<li><a href="https://codemirror.net/demo/closetag.html">closetag addon</a>: Add an option to disable auto-indenting.</li>
</ul>
<p class="rel">22-11-2017: <a href="https://codemirror.net/codemirror-5.32.0.zip">Version 5.32.0</a>:</p>
<ul class="rel-note">
<li>Increase contrast on default bracket-matching colors.</li>
<li><a href="https://codemirror.net/mode/javascript/">javascript mode</a>: Recognize TypeScript type parameters for calls, type guards, and type parameter defaults. Improve handling of <code>enum</code> and <code>module</code> keywords.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_comment">comment addon</a>: Fix bug when uncommenting a comment that spans all but the last selected line.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_searchcursor">searchcursor addon</a>: Fix bug in case folding.</li>
<li><a href="https://codemirror.net/demo/emacs.html">emacs bindings</a>: Prevent single-character deletions from resetting the kill ring.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_closebrackets">closebrackets addon</a>: Tweak quote matching behavior.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_continuelist">continuelist addon</a>: Increment ordered list numbers when adding one.</li>
</ul>
<p class="rel">20-10-2017: <a href="https://codemirror.net/codemirror-5.31.0.zip">Version 5.31.0</a>:</p>
<ul class="rel-note">
<li>Modes added with <a href="https://codemirror.net/doc/manual.html#addOverlay"><code>addOverlay</code></a> now have access to a <a href="https://codemirror.net/doc/manual.html#baseToken"><code>baseToken</code></a> method on their input stream, giving access to the tokens of the underlying mode.</li>
<li>Further improve selection drawing and cursor motion in right-to-left documents.</li>
<li><a href="https://codemirror.net/demo/vim.html">vim bindings</a>: Fix ctrl-w behavior, support quote-dot and backtick-dot marks, make the wide cursor visible in contentEditable <a href="https://codemirror.net/doc/manual.html#option_contentEditable">input mode</a>.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_continuecomment">continuecomment addon</a>: Fix bug when pressing enter after a single-line block comment.</li>
<li><a href="https://codemirror.net/mode/markdown/">markdown mode</a>: Fix issue with leaving indented fenced code blocks.</li>
<li><a href="https://codemirror.net/mode/javascript/">javascript mode</a>: Fix bad parsing of operators without spaces between them. Fix some corner cases around semicolon insertion and regexps.</li>
</ul>
<p class="rel">20-09-2017: <a href="https://codemirror.net/codemirror-5.30.0.zip">Version 5.30.0</a>:</p>
<ul class="rel-note">
<li>Fixed a number of issues with drawing right-to-left selections and mouse selection in bidirectional text.</li>
<li><a href="https://codemirror.net/demo/search/">search addon</a>: Fix crash when restarting search after doing empty search.</li>
<li><a href="http://cm/doc/manual.html#addon_mark-selection">mark-selection addon</a>: Fix off-by-one bug.</li>
<li><a href="https://codemirror.net/demo/tern.html">tern addon</a>: Fix bad request made when editing at the bottom of a large document.</li>
<li><a href="https://codemirror.net/mode/javascript/">javascript mode</a>: Improve parsing in a number of corner cases.</li>
<li><a href="https://codemirror.net/mode/markdown/">markdown mode</a>: Fix crash when a sub-mode doesn't support indentation, allow uppercase X in task lists.</li>
<li><a href="https://codemirror.net/mode/gfm/">gfm mode</a>: Don't highlight SHA1 'hashes' without numbers to avoid false positives.</li>
<li><a href="https://codemirror.net/mode/soy/">soy mode</a>: Support injected data and <code>@param</code> in comments.</li>
<li><a href="https://codemirror.net/demo/simplemode.html">simple mode addon</a>: Allow groups in regexps when <code>token</code> isn't an array.</li>
</ul>
<p class="rel">24-08-2017: <a href="https://codemirror.net/codemirror-5.29.0.zip">Version 5.29.0</a>:</p>
<ul class="rel-note">
<li>Fix crash in contentEditable input style when editing near a bookmark.</li>
<li>Make sure change origins are preserved when splitting changes on <a href="https://codemirror.net/doc/manual.html#mark_readOnly">read-only marks</a>.</li>
<li><a href="https://codemirror.net/mode/javascript/">javascript mode</a>: More support for TypeScript syntax.</li>
<li><a href="https://codemirror.net/mode/d/">d mode</a>: Support nested comments.</li>
<li><a href="https://codemirror.net/mode/python/">python mode</a>: Improve tokenizing of operators.</li>
<li><a href="https://codemirror.net/mode/markdown/">markdown mode</a>: Further improve CommonMark conformance.</li>
<li><a href="https://codemirror.net/mode/css/">css mode</a>: Don't run comment tokens through the mode's state machine.</li>
<li><a href="https://codemirror.net/mode/shell/">shell mode</a>: Allow strings to span lines.</li>
<li><a href="https://codemirror.net/demo/search/">search addon</a>: Fix crash in persistent search when <code>extraKeys</code> is null.</li>
</ul>
<p class="rel">21-07-2017: <a href="https://codemirror.net/codemirror-5.28.0.zip">Version 5.28.0</a>:</p>
<ul class="rel-note">
<li>Fix copying of, or replacing editor content with, a single dash character when copying a big selection in some corner cases.</li>
<li>Make <a href="https://codemirror.net/doc/manual.html#command_goLineLeft"><code>&quot;goLineLeft&quot;</code></a>/<code>&quot;goLineRight&quot;</code> behave better on wrapped lines.</li>
<li><a href="https://codemirror.net/mode/sql/">sql mode</a>: Fix tokenizing of multi-dot operator and allow digits in subfield names.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_searchcursor">searchcursor addon</a>: Fix infinite loop on some composed character inputs.</li>
<li><a href="https://codemirror.net/mode/markdown/">markdown mode</a>: Make list parsing more CommonMark-compliant.</li>
<li><a href="https://codemirror.net/mode/gfm/">gfm mode</a>: Highlight colon syntax for emoji.</li>
</ul>
<p class="rel">29-06-2017: <a href="https://codemirror.net/codemirror-5.27.4.zip">Version 5.27.4</a>:</p>
<ul class="rel-note">
<li>Fix crash when using mode lookahead.</li>
<li><a href="https://codemirror.net/mode/markdown/">markdown mode</a>: Don't block inner mode's indentation support.</li>
</ul>
<p class="rel">22-06-2017: <a href="https://codemirror.net/codemirror-5.27.2.zip">Version 5.27.2</a>:</p>
<ul class="rel-note">
<li>Fix crash in the <a href="https://codemirror.net/demo/simplemode.html">simple mode</a> addon.</li>
</ul>
<p class="rel">22-06-2017: <a href="https://codemirror.net/codemirror-5.27.0.zip">Version 5.27.0</a>:</p>
<ul class="rel-note">
<li>Fix infinite loop in forced display update.</li>
<li>Properly disable the hidden textarea when <code>readOnly</code> is <code>&quot;nocursor&quot;</code>.</li>
<li>Calling the <code>Doc</code> constructor without <code>new</code> works again.</li>
<li><a href="https://codemirror.net/mode/sql/">sql mode</a>: Handle nested comments.</li>
<li><a href="https://codemirror.net/mode/javascript/">javascript mode</a>: Improve support for TypeScript syntax.</li>
<li><a href="https://codemirror.net/mode/markdown/">markdown mode</a>: Fix bug where markup was ignored on indented paragraph lines.</li>
<li><a href="https://codemirror.net/demo/vim.html">vim bindings</a>: Referencing invalid registers no longer causes an uncaught exception.</li>
<li><a href="https://codemirror.net/mode/rust/">rust mode</a>: Add the correct MIME type.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_matchbrackets">matchbrackets addon</a>: Document options.</li>
<li>Mouse button clicks can now be bound in keymaps by using names like <code>&quot;LeftClick&quot;</code> or <code>&quot;Ctrl-Alt-MiddleTripleClick&quot;</code>. When bound to a function, that function will be passed the position of the click as second argument.</li>
<li>The behavior of mouse selection and dragging can now be customized with the <a href="https://codemirror.net/doc/manual.html#option_configureMouse"><code>configureMouse</code></a> option.</li>
<li>Modes can now look ahead across line boundaries with the <a href="https://codemirror.net/doc/manual.html#StringStream"><code>StringStream</code></a><code>.lookahead</code> method.</li>
<li>Introduces a <code>&quot;type&quot;</code> token type, makes modes that recognize types output it, and add styling for it to the themes.</li>
<li>New <a href="https://codemirror.net/doc/manual.html#option_pasteLinesPerSelection"><code>pasteLinesPerSelection</code></a> option to control the behavior of pasting multiple lines into multiple selections.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_searchcursor">searchcursor addon</a>: Support multi-line regular expression matches, and normalize strings when matching.</li>
</ul>
<p class="rel">22-05-2017: <a href="https://codemirror.net/codemirror-5.26.0.zip">Version 5.26.0</a>:</p>
<ul class="rel-note">
<li>In textarea-mode, don't reset the input field during composition.</li>
<li>More careful restoration of selections in widgets, during editor redraw.</li>
<li><a href="https://codemirror.net/demo/vim.html">vim bindings</a>: Parse line offsets in line or range specs.</li>
<li><a href="https://codemirror.net/mode/javascript/">javascript mode</a>: More TypeScript parsing fixes.</li>
<li><a href="https://codemirror.net/mode/julia/">julia mode</a>: Fix issue where the mode gets stuck.</li>
<li><a href="https://codemirror.net/mode/markdown/">markdown mode</a>: Understand cross-line links, parse all bracketed things as links.</li>
<li><a href="https://codemirror.net/mode/soy/">soy mode</a>: Support single-quoted strings.</li>
<li><a href="https://codemirror.net/mode/go/">go mode</a>: Don't try to indent inside strings or comments.</li>
</ul>
<p class="rel">20-04-2017: <a href="https://codemirror.net/codemirror-5.25.2.zip">Version 5.25.2</a>:</p>
<ul class="rel-note">
<li>Better handling of selections that cover the whole viewport in contentEditable-mode.</li>
<li>No longer accidentally scroll the editor into view when calling <code>setValue</code>.</li>
<li>Work around Chrome Android bug when converting screen coordinates to editor positions.</li>
<li>Make sure long-clicking a selection sets a cursor and doesn't show the editor losing focus.</li>
<li>Fix issue where pointer events were incorrectly disabled on Chrome's overlay scrollbars.</li>
<li><a href="https://codemirror.net/mode/javascript/">javascript mode</a>: Recognize annotations and TypeScript-style type parameters.</li>
<li><a href="https://codemirror.net/mode/shell/">shell mode</a>: Handle nested braces.</li>
<li><a href="https://codemirror.net/mode/markdown/">markdown mode</a>: Make parsing of strong/em delimiters CommonMark-compliant.</li>
</ul>
<p class="rel">20-03-2017: <a href="https://codemirror.net/codemirror-5.25.0.zip">Version 5.25.0</a>:</p>
<ul class=rel-note>
<li>In contentEditable-mode, properly locate changes that repeat a character when inserted with IME.</li>
<li>Fix handling of selections bigger than the viewport in contentEditable mode.</li>
<li>Improve handling of changes that insert or delete lines in contentEditable mode.</li>
<li>Count Unicode control characters 0x80 to 0x9F as special (non-printing) chars.</li>
<li>Fix handling of shadow DOM roots when finding the active element.</li>
<li>Add <code>role=presentation</code> to more DOM elements to improve screen reader support.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_merge">merge addon</a>: Make aligning of unchanged chunks more robust.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_comment">comment addon</a>: Fix comment-toggling on a block of text that starts and ends in a (differnet) block comment.</li>
<li><a href="https://codemirror.net/mode/javascript/">javascript mode</a>: Improve support for TypeScript syntax.</li>
<li><a href="https://codemirror.net/mode/r/">r mode</a>: Fix indentation after semicolon-less statements.</li>
<li><a href="https://codemirror.net/mode/shell/">shell mode</a>: Properly handle escaped parentheses in parenthesized expressions.</li>
<li><a href="https://codemirror.net/mode/markdown/">markdown mode</a>: Fix a few bugs around leaving fenced code blocks.</li>
<li><a href="https://codemirror.net/mode/soy/">soy mode</a>: Improve indentation.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_lint">lint addon</a>: Support asynchronous linters that return promises.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_continuelist">continuelist addon</a>: Support continuing task lists.</li>
<li><a href="https://codemirror.net/demo/vim.html">vim bindings</a>: Make Y behave like yy.</li>
<li><a href="https://codemirror.net/mode/sql/">sql mode</a>: Support sqlite dialect.</li>
</ul>
<p class="rel">22-02-2017: <a href="https://codemirror.net/codemirror-5.24.2.zip">Version 5.24.2</a>:</p>
<ul class=rel-note>
<li><a href="https://codemirror.net/mode/javascript/">javascript mode</a>: Support computed class method names.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_merge">merge addon</a>: Improve aligning of unchanged code in the presence of marks and line widgets.</li>
</ul>
<p class="rel">20-02-2017: <a href="https://codemirror.net/codemirror-5.24.0.zip">Version 5.24.0</a>:</p>
<ul class=rel-note>
<li>Positions now support a <code>sticky</code> property which determines whether they should be associated with the character before (value <code>"before"</code>) or after (value <code>"after"</code>) them.</li>
<li><a href="https://codemirror.net/demo/vim.html">vim bindings</a>: Make it possible to remove built-in bindings through the API.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_comment">comment addon</a>: Support a per-mode <code>useInnerComments</code> option to optionally suppress descending to the inner modes to get comment strings.</li>
<li>A cursor directly before a line-wrapping break is now drawn before or after the line break depending on which direction you arrived from.</li>
<li>Visual cursor motion in line-wrapped right-to-left text should be much more correct.</li>
<li>Fix bug in handling of read-only marked text.</li>
<li><a href="https://codemirror.net/mode/shell/">shell mode</a>: Properly tokenize nested parentheses.</li>
<li><a href="https://codemirror.net/mode/python/">python mode</a>: Support underscores in number literals.</li>
<li><a href="https://codemirror.net/mode/sass/">sass mode</a>: Uses the full list of CSS properties and keywords from the CSS mode, rather than defining its own incomplete subset. Now depends on the css mode.</li>
<li><a href="https://codemirror.net/mode/css/">css mode</a>: Expose <code>lineComment</code> property for LESS and SCSS dialects. Recognize vendor prefixes on pseudo-elements.</li>
<li><a href="https://codemirror.net/mode/julia/">julia mode</a>: Properly indent <code>elseif</code> lines.</li>
<li><a href="https://codemirror.net/mode/markdown/">markdown mode</a>: Properly recognize the end of fenced code blocks when inside other markup.</li>
<li><a href="https://codemirror.net/mode/clike/">scala mode</a>: Improve handling of operators containing <code>#</code>, <code>@</code>, and <code>:</code> chars.</li>
<li><a href="https://codemirror.net/mode/xml/">xml mode</a>: Allow dashes in HTML tag names.</li>
<li><a href="https://codemirror.net/mode/javascript/">javascript mode</a>: Improve parsing of async methods, TypeScript-style comma-separated superclass lists.</li>
<li><a href="https://codemirror.net/demo/folding.html">indent-fold addon</a>: Ignore comment lines.</li>
</ul>
<p class="rel">19-01-2017: <a href="https://codemirror.net/codemirror-5.23.0.zip">Version 5.23.0</a>:</p>
<ul class=rel-note>
<li>Presentation-related elements DOM elements are now marked as such to help screen readers.</li>
<li><a href="https://codemirror.net/mode/markdown/">markdown mode</a>: Be more picky about what HTML tags look like to avoid false positives.</li>
<li><code>findModeByMIME</code> now understands <code>+json</code> and <code>+xml</code> MIME suffixes.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_closebrackets">closebrackets addon</a>: Add support for an <code>override</code> option to ignore language-specific defaults.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_panel">panel addon</a>: Add a <code>stable</code> option that auto-scrolls the content to keep it in the same place when inserting/removing a panel.</li>
</ul>
<p class="rel">20-12-2016: <a href="https://codemirror.net/codemirror-5.22.0.zip">Version 5.22.0</a>:</p>
<ul class=rel-note>
<li><a href="https://codemirror.net/demo/sublime.html">sublime bindings</a>: Make <code>selectBetweenBrackets</code> work with multiple cursors.</li>
<li><a href="https://codemirror.net/mode/javascript/">javascript mode</a>: Fix issues with parsing complex TypeScript types, imports, and exports.</li>
<li>A contentEditable editor instance with autofocus enabled no longer crashes during initializing.</li>
<li><a href="https://codemirror.net/demo/emacs.html">emacs bindings</a>: Export <code>CodeMirror.emacs</code> to allow other addons to hook into Emacs-style functionality.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_active-line">active-line addon</a>: Add <code>nonEmpty</code> option.</li>
<li>New event: <a href="https://codemirror.net/doc/manual.html#event_optionChange"><code>optionChange</code></a>.</li>
</ul>
<p class="rel">21-11-2016: <a href="https://codemirror.net/codemirror-5.21.0.zip">Version 5.21.0</a>:</p>
<ul class=rel-note>
<li>Tapping/clicking the editor in <a href="https://codemirror.net/doc/manual.html#option_inputStyle">contentEditable mode</a> on Chrome now puts the cursor at the tapped position.</li>
<li>Fix various crashes and misbehaviors when reading composition events in <a href="https://codemirror.net/doc/manual.html#option_inputStyle">contentEditable mode</a>.</li>
<li>Catches and ignores an IE 'Unspecified Error' when creating an editor in an iframe before there is a <code>&lt;body&gt;</code>.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_merge">merge addon</a>: Fix several issues in the chunk-aligning feature.</li>
<li><a href="https://codemirror.net/mode/verilog">verilog mode</a>: Rewritten to address various issues.</li>
<li><a href="https://codemirror.net/mode/julia">julia mode</a>: Recognize Julia 0.5 syntax.</li>
<li><a href="https://codemirror.net/mode/swift">swift mode</a>: Various fixes and adjustments to current syntax.</li>
<li><a href="https://codemirror.net/mode/markdown">markdown mode</a>: Allow lists without a blank line above them.</li>
<li>The <a href="https://codemirror.net/doc/manual.html#setGutterMarker"><code>setGutterMarker</code></a>, <a href="https://codemirror.net/doc/manual.html#clearGutter"><code>clearGutter</code></a>, and <a href="https://codemirror.net/doc/manual.html#lineInfo"><code>lineInfo</code></a> methods are now available on <code>Doc</code> objects.</li>
<li>The <a href="https://codemirror.net/doc/manual.html#heightAtLine"><code>heightAtLine</code></a> method now takes an extra argument to allow finding the height at the top of the line's line widgets.</li>
<li><a href="https://codemirror.net/mode/ruby">ruby mode</a>: <code>else</code> and <code>elsif</code> are now immediately indented.</li>
<li><a href="https://codemirror.net/demo/vim.html">vim bindings</a>: Bind Ctrl-T and Ctrl-D to in- and dedent in insert mode.</li>
</ul>
<p class="rel">20-10-2016: <a href="https://codemirror.net/codemirror-5.20.0.zip">Version 5.20.0</a>:</p>
<ul class=rel-note>
<li>Make <code>newlineAndIndent</code> command work with multiple cursors on the same line.</li>
<li>Make sure keypress events for backspace are ignored.</li>
<li>Tokens styled with overlays no longer get a nonsense <code>cm-cm-overlay</code> class.</li>
<li>Line endings for pasted content are now normalized to the editor's <a href="https://codemirror.net/doc/manual.html#option_lineSeparator">preferred ending</a>.</li>
<li><a href="https://codemirror.net/mode/javascript">javascript mode</a>: Improve support for class expressions. Support TypeScript optional class properties, the <code>abstract</code> keyword, and return type declarations for arrow functions.</li>
<li><a href="https://codemirror.net/mode/css">css mode</a>: Fix highlighting of mixed-case keywords.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_closebrackets">closebrackets addon</a>: Improve behavior when typing a quote before a string.</li>
<li>The core is now maintained as a number of small files, using ES6 syntax and modules, under the <code>src/</code> directory. A git checkout no longer contains a working <code>codemirror.js</code> until you <code>npm run build</code> (but when installing from NPM, it is included).</li>
<li>The <a href="https://codemirror.net/doc/manual.html#event_refresh"><code>refresh</code></a> event is now documented and stable.</li>
</ul>
<p class="rel">20-09-2016: <a href="https://codemirror.net/codemirror-5.19.0.zip">Version 5.19.0</a>:</p>
<ul class=rel-note>
<li><a href="https://codemirror.net/mode/erlang">erlang mode</a>: Fix mode crash when trying to read an empty context.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_comment">comment addon</a>: Fix broken behavior when toggling comments inside a comment.</li>
<li>xml-fold addon: Fix a null-dereference bug.</li>
<li>Page up and page down now do something even in single-line documents.</li>
<li>Fix an issue where the cursor position could be off in really long (~8000 character) tokens.</li>
<li><a href="https://codemirror.net/mode/javascript">javascript mode</a>: Better indentation when semicolons are missing. Better support for TypeScript classes, optional parameters, and the <code>type</code> keyword.</li>
<li>The <a href="https://codemirror.net/doc/manual.html#event_blur"><code>blur</code></a> and <a href="https://codemirror.net/doc/manual.html#event_focus"><code>focus</code></a> events now pass the DOM event to their handlers.</li>
</ul>
<p class="rel">23-08-2016: <a href="https://codemirror.net/codemirror-5.18.2.zip">Version 5.18.2</a>:</p>
<ul class=rel-note>
<li><a href="https://codemirror.net/mode/vue">vue mode</a>: Fix outdated references to renamed Pug mode dependency.</li>
</ul>
<p class="rel">22-08-2016: <a href="https://codemirror.net/codemirror-5.18.0.zip">Version 5.18.0</a>:</p>
<ul class=rel-note>
<li>Make sure <a href="https://codemirror.net/doc/manual.html#addLineClass">gutter backgrounds</a> stick to the rest of the gutter during horizontal scrolling.</li>
<li>The contenteditable <a href="https://codemirror.net/doc/manual.html#option_inputStyle"><code>inputStyle</code></a> now properly supports pasting on pre-Edge IE versions.</li>
<li><a href="https://codemirror.net/mode/javascript">javascript mode</a>: Fix some small parsing bugs and improve TypeScript support.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_matchbrackets">matchbrackets addon</a>: Fix bug where active highlighting was left in editor when the addon was disabled.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_match-highlighter">match-highlighter addon</a>: Only start highlighting things when the editor gains focus.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_javascript-hint">javascript-hint addon</a>: Also complete non-enumerable properties.</li>
<li>The <a href="https://codemirror.net/doc/manual.html#addOverlay"><code>addOverlay</code></a> method now supports a <code>priority</code> option to control the order in which overlays are applied.</li>
<li>MIME types that end in <code>+json</code> now default to the JSON mode when the MIME itself is not defined.</li>
<li>The mode formerly known as Jade was renamed to <a href="https://codemirror.net/mode/pug">Pug</a>.</li>
<li>The <a href="https://codemirror.net/mode/python">Python mode</a> now defaults to Python 3 (rather than 2) syntax.</li>
</ul>
<p class="rel">19-07-2016: <a href="https://codemirror.net/codemirror-5.17.0.zip">Version 5.17.0</a>:</p>
<ul class="rel-note">
<li>Fix problem with wrapped trailing whitespace displaying incorrectly.</li>
<li>Prevent IME dialog from overlapping typed content in Chrome.</li>
<li>Improve measuring of characters near a line wrap.</li>
<li><a href="https://codemirror.net/mode/javascript">javascript mode</a>: Improve support for <code>async</code>, allow trailing commas in <code>import</code> lists.</li>
<li><a href="https://codemirror.net/demo/vim.html">vim bindings</a>: Fix backspace in replace mode.</li>
<li><a href="https://codemirror.net/demo/sublime.html">sublime bindings</a>: Fix some key bindings on OS X to match Sublime Text.</li>
<li><a href="https://codemirror.net/mode/markdown">markdown mode</a>: Add more classes to image links in highlight-formatting mode.</li>
</ul>
<p class="rel">20-06-2016: <a href="https://codemirror.net/codemirror-5.16.0.zip">Version 5.16.0</a>:</p>
<ul class="rel-note">
<li>Fix glitches when dragging content caused by the drop indicator receiving mouse events.</li>
<li>Make Control-drag work on Firefox.</li>
<li>Make clicking or selection-dragging at the end of a wrapped line select the right position.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_show-hint">show-hint addon</a>: Prevent widget scrollbar from hiding part of the hint text.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_rulers">rulers addon</a>: Prevent rulers from forcing a horizontal editor scrollbar.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_search">search addon</a>: Automatically bind search-related keys in persistent dialog.</li>
<li><a href="https://codemirror.net/demo/sublime.html">sublime keymap</a>: Add a multi-cursor aware smart backspace binding.</li>
</ul>
<p class="rel">20-05-2016: <a href="https://codemirror.net/codemirror-5.15.2.zip">Version 5.15.2</a>:</p>
<ul class="rel-note">
<li>Fix a critical document corruption bug that occurs when a document is gradually grown.</li>
</ul>
<p class="rel">20-05-2016: <a href="https://codemirror.net/codemirror-5.15.0.zip">Version 5.15.0</a>:</p>
<ul class="rel-note">
<li>Fix bug that caused the selection to reset when focusing the editor in contentEditable input mode.</li>
<li>Fix issue where not all ASCII control characters were being replaced by placeholders.</li>
<li>Remove the assumption that all modes have a <code>startState</code> method from several wrapping modes.</li>
<li>Fix issue where the editor would complain about overlapping collapsed ranges when there weren't any.</li>
<li>Optimize document tree building when loading or pasting huge chunks of content.</li>
<li>Explicitly bind Ctrl-O on OS X to make that binding (“open line”) act as expected.</li>
<li>Pasting <a href="https://codemirror.net/doc/manual.html#option_lineWiseCopyCut">linewise-copied</a> content when there is no selection now inserts the lines above the current line.</li>
<li><a href="https://codemirror.net/mode/markdown/">markdown mode</a>: Fix several issues in matching link targets.</li>
<li><a href="https://codemirror.net/mode/clike/">clike mode</a>: Improve indentation of C++ template declarations.</li>
<li><a href="https://codemirror.net/mode/javascript/">javascript mode</a>: Support <code>async</code>/<code>await</code> and improve support for TypeScript type syntax.</li>
</ul>
<p class="rel">20-04-2016: <a href="https://codemirror.net/codemirror-5.14.0.zip">Version 5.14.0</a>:</p>
<ul class="rel-note">
<li><a href="https://codemirror.net/doc/manual.html#posFromIndex"><code>posFromIndex</code></a> and <a href="https://codemirror.net/doc/manual.html#indexFromPos"><code>indexFromPos</code></a> now take <a href="https://codemirror.net/doc/manual.html#option_lineSeparator"><code>lineSeparator</code></a> into account</li>
<li><a href="https://codemirror.net/demo/vim.html">vim bindings</a>: Only call <code>.save()</code> when it is actually available</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_comment">comment addon</a>: Be careful not to mangle multi-line strings</li>
<li><a href="https://codemirror.net/mode/python/index.html">Python mode</a>: Improve distinguishing of decorators from <code>@</code> operators</li>
<li><a href="https://codemirror.net/doc/manual.html#findMarks"><code>findMarks</code></a>: No longer return marks that touch but don't overlap given range</li>
<li><a href="https://codemirror.net/demo/vim.html">vim bindings</a>: Add yank command</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_match-highlighter">match-highlighter addon</a>: Add <code>trim</code> option to disable ignoring of whitespace</li>
<li><a href="https://codemirror.net/mode/powershell/index.html">PowerShell mode</a>: Added</li>
<li><a href="https://codemirror.net/mode/yacas/index.html">Yacas mode</a>: Added</li>
<li><a href="https://codemirror.net/mode/webidl/index.html">Web IDL mode</a>: Added</li>
<li><a href="https://codemirror.net/mode/sas/index.html">SAS mode</a>: Added</li>
<li><a href="https://codemirror.net/mode/mbox/index.html">mbox mode</a>: Added</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/5.13.4...5.14.0">list of patches</a></li>
</ul>
<p class="rel">21-03-2016: <a href="https://codemirror.net/codemirror-5.13.2.zip">Version 5.13.2</a>:</p>
<ul class="rel-note">
<li>Solves a problem where the gutter would sometimes not extend all the way to the end of the document.</li>
</ul>
<p class="rel">21-03-2016: <a href="https://codemirror.net/codemirror-5.13.zip">Version 5.13</a>:</p>
<ul class="rel-note">
<li>New DOM event forwarded: <a href="https://codemirror.net/doc/manual.html#event_dom"><code>&quot;dragleave&quot;</code></a>.</li>
<li><a href="https://codemirror.net/mode/protobuf/index.html">protobuf mode</a>: Newly added.</li>
<li>Fix problem where <a href="https://codemirror.net/doc/manual.html#findMarks"><code>findMarks</code></a> sometimes failed to find multi-line marks.</li>
<li>Fix crash that showed up when atomic ranges and bidi text were combined.</li>
<li><a href="https://codemirror.net/demo/complete.html">show-hint addon</a>: Completion widgets no longer close when the line indented or dedented.</li>
<li><a href="https://codemirror.net/demo/merge.html">merge addon</a>: Fix bug when merging chunks at the end of the file.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_placeholder">placeholder addon</a>: No longer gets confused by <a href="https://codemirror.net/doc/manual.html#swapDoc"><code>swapDoc</code></a>.</li>
<li><a href="https://codemirror.net/doc/manual.html#addon_simplescrollbars">simplescrollbars addon</a>: Fix invalid state when deleting at end of document.</li>
<li><a href="https://codemirror.net/mode/clike/index.html">clike mode</a>: No longer gets confused when a comment starts after an operator.</li>
<li><a href="https://codemirror.net/mode/markdown/index.html">markdown mode</a>: Now supports CommonMark-style flexible list indentation.</li>
<li><a href="https://codemirror.net/mode/dylan/index.html">dylan mode</a>: Several improvements and fixes.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/5.12.0...5.13.0">list of patches</a></li>
</ul>
<p class="rel">19-02-2016: <a href="https://codemirror.net/codemirror-5.12.zip">Version 5.12</a>:</p>
<ul class="rel-note">
<li><a href="https://codemirror.net/demo/vim.html">Vim bindings</a>: Ctrl-Q is now an alias for Ctrl-V.</li>
<li><a href="https://codemirror.net/demo/vim.html">Vim bindings</a>: The Vim API now exposes an <code>unmap</code> method to unmap bindings.</li>
<li><a href="https://codemirror.net/demo/activeline.html">active-line addon</a>: This addon can now style the active line's gutter.</li>
<li><a href="https://codemirror.net/mode/fcl/">FCL mode</a>: Newly added.</li>
<li><a href="https://codemirror.net/mode/sql/">SQL mode</a>: Now has a Postgresql dialect.</li>
<li>Fix <a href="https://github.com/codemirror/CodeMirror/issues/3781">issue</a> where trying to scroll to a horizontal position outside of the document's width could cause the gutter to be positioned incorrectly.</li>
<li>Use absolute, rather than fixed positioning in the context-menu intercept hack, to work around a <a href="https://github.com/codemirror/CodeMirror/issues/3238">problem</a> when the editor is inside a transformed parent container.</li>
<li>Solve a <a href="https://github.com/codemirror/CodeMirror/issues/3821">problem</a> where the horizontal scrollbar could hide text in Firefox.</li>
<li>Fix a <a href="https://github.com/codemirror/CodeMirror/issues/3834">bug</a> that caused phantom scroll space under the text in some situations.</li>
<li><a href="https://codemirror.net/demo/sublime.html">Sublime Text bindings</a>: Bind delete-line to Shift-Ctrl-K on OS X.</li>
<li><a href="https://codemirror.net/mode/markdown/">Markdown mode</a>: Fix <a href="https://github.com/codemirror/CodeMirror/issues/3787">issue</a> where the mode would keep state related to fenced code blocks in an unsafe way, leading to occasional corrupted parses.</li>
<li><a href="https://codemirror.net/mode/markdown/">Markdown mode</a>: Ignore backslashes in code fragments.</li>
<li><a href="https://codemirror.net/mode/markdown/">Markdown mode</a>: Use whichever mode is registered as <code>text/html</code> to parse HTML.</li>
<li><a href="https://codemirror.net/mode/clike/">Clike mode</a>: Improve indentation of Scala <code>=&gt;</code> functions.</li>
<li><a href="https://codemirror.net/mode/python/">Python mode</a>: Improve indentation of bracketed code.</li>
<li><a href="https://codemirror.net/mode/htmlmixed/">HTMLMixed mode</a>: Support multi-line opening tags for sub-languages (<code>&lt;script&gt;</code>, <code>&lt;style&gt;</code>, etc).</li>
<li><a href="https://codemirror.net/mode/spreadsheet/">Spreadsheet mode</a>: Fix bug where the mode did not advance the stream when finding a backslash.</li>
<li><a href="https://codemirror.net/mode/xml/">XML mode</a>: The mode now takes a <code>matchClosing</code> option to configure whether mismatched closing tags should be highlighted as errors.</li>
</ul>
<p class="rel">20-01-2016: <a href="https://codemirror.net/codemirror-5.11.zip">Version 5.11</a>:</p>
<ul class="rel-note">
<li>New modes: <a href="../mode/jsx/index.html">JSX</a>, <a href="../mode/haskell-literate/index.html">literate Haskell</a></li>
<li>The editor now forwards more <a href="manual.html#event_dom">DOM events</a>: <code>cut</code>, <code>copy</code>, <code>paste</code>, and <code>touchstart</code>. It will also forward <code>mousedown</code> for drag events</li>
<li>Fixes a bug where bookmarks next to collapsed spans were not rendered</li>
<li>The <a href="../mode/swift/index.html">Swift</a> mode now supports auto-indentation</li>
<li>Frontmatters in the <a href="../mode/yaml-frontmatter/index.html">YAML frontmatter</a> mode are now optional as intended</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/5.10.0...5.11.0">list of patches</a></li>
</ul>
<p class="rel">21-12-2015: <a href="https://codemirror.net/codemirror-5.10.zip">Version 5.10</a>:</p>
<ul class="rel-note">
<li>Modify the way <a href="manual.html#mark_atomic">atomic ranges</a> are skipped by selection to try and make it less surprising.</li>
<li>The <a href="../mode/swift/index.html">Swift mode</a> was rewritten.</li>
<li>New addon: <a href="manual.html#addon_jump-to-line">jump-to-line</a>.</li>
<li>New method: <a href="manual.html#isReadOnly"><code>isReadOnly</code></a>.</li>
<li>The <a href="manual.html#addon_show-hint">show-hint addon</a> now defaults to picking completions on single click.</li>
<li>The object passed to <a href="manual.html#event_beforeSelectionChange"><code>&quot;beforeSelectionChange&quot;</code></a> events now has an <code>origin</code> property.</li>
<li>New mode: <a href="../mode/crystal/index.html">Crystal</a>.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/5.9.0...5.10.0">list of patches</a></li>
</ul>
<p class="rel">23-11-2015: <a href="https://codemirror.net/codemirror-5.9.zip">Version 5.9</a>:</p>
<ul class="rel-note">
<li>Improve the way overlay (OS X-style) scrollbars are handled</li>
<li>Make <a href="manual.html#addon_annotatescrollbar">annotatescrollbar</a> and scrollpastend addons work properly together</li>
<li>Make <a href="manual.html#addon_show-hint">show-hint</a> addon select options on single click by default, move selection to hovered item</li>
<li>Properly fold comments that include block-comment-start markers</li>
<li>Many small language mode fixes</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/5.8.0...5.9.0">list of patches</a></li>
</ul>
<p class="rel">20-10-2015: <a href="https://codemirror.net/codemirror-5.8.zip">Version 5.8</a>:</p>
<ul class="rel-note">
<li>Fixes an infinite loop in
the <a href="manual.html#addon_hardwrap">hardwrap
addon</a></li>
<li>New modes: <a href="../mode/nsis/index.html">NSIS</a>, <a href="../mode/clike/index.html">Ceylon</a></li>
<li>The Kotlin mode is now a <a href="../mode/clike/index.html">clike</a> dialect, rather than a stand-alone mode</li>
<li>New option: <a href="manual.html#option_allowDropFileTypes"><code>allowDropFileTypes</code></a>. Binary files can no longer be dropped into CodeMirror</li>
<li>New themes: <a href="../demo/theme.html#bespin">bespin</a>, <a href="../demo/theme.html#hopscotch">hopscotch</a>, <a href="../demo/theme.html#isotope">isotope</a>, <a href="../demo/theme.html#railscasts">railscasts</a></li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/5.7.0...5.8.0">list of patches</a></li>
</ul>
<p class="rel">20-09-2015: <a href="https://codemirror.net/codemirror-5.7.zip">Version 5.7</a>:</p>
<ul class="rel-note">
<li>New modes: <a href="../mode/vue/index.html">Vue</a>, <a href="../mode/oz/index.html">Oz</a>, <a href="../mode/mscgen/index.html">MscGen</a> (and dialects), <a href="../mode/css/gss.html">Closure Stylesheets</a></li>
<li>Implement <a href="http://commonmark.org">CommonMark</a>-style flexible list indent and cross-line code spans in <a href="../mode/markdown/index.html">Markdown</a> mode</li>
<li>Add a replace-all button to the <a href="manual.html#addon_search">search addon</a>, and make the persistent search dialog transparent when it obscures the match</li>
<li>Handle <code>acync</code>/<code>await</code> and ocal and binary numbers in <a href="../mode/javascript/index.html">JavaScript mode</a></li>
<li>Fix various issues with the <a href="../mode/haxe/index.html">Haxe mode</a></li>
<li>Make the <a href="manual.html#addon_closebrackets">closebrackets addon</a> select only the wrapped text when wrapping selection in brackets</li>
<li>Tokenize properties as properties in the <a href="../mode/coffeescript/index.html">CoffeeScript mode</a></li>
<li>The <a href="manual.html#addon_placeholder">placeholder addon</a> now accepts a DOM node as well as a string placeholder</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/5.6.0...5.7.0">list of patches</a></li>
</ul>
<p class="rel">20-08-2015: <a href="https://codemirror.net/codemirror-5.6.zip">Version 5.6</a>:</p>
<ul class="rel-note">
<li>Fix bug where you could paste into a <code>readOnly</code> editor</li>
<li>Show a cursor at the drop location when dragging over the editor</li>
<li>The <a href="../mode/rust/index.html">Rust mode</a> was rewritten to handle modern Rust</li>
<li>The editor and theme CSS was cleaned up. Some selectors are now less specific than before</li>
<li>New theme: <a href="../demo/theme.html#abcdef">abcdef</a></li>
<li>Lines longer than <a href="manual.html#option_maxHighlightLength"><code>maxHighlightLength</code></a> are now less likely to mess up indentation</li>
<li>New addons: <a href="manual.html#addon_autorefresh"><code>autorefresh</code></a> for refreshing an editor the first time it becomes visible, and <code>html-lint</code> for using <a href="http://htmlhint.com/">HTMLHint</a></li>
<li>The <a href="manual.html#addon_search"><code>search</code></a> addon now recognizes <code>\r</code> and <code>\n</code> in pattern and replacement input</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/5.5.0...5.6.0">list of patches</a></li>
</ul>
<p class="rel">20-07-2015: <a href="https://codemirror.net/codemirror-5.5.zip">Version 5.5</a>:</p>
<ul class="rel-note">
<li>New option: <a href="manual.html#option_lineSeparator"><code>lineSeparator</code></a> (with corresponding <a href="manual.html#lineSeparator">method</a>)
<li>New themes: <a href="../demo/theme.html#dracula">dracula</a>, <a href="../demo/theme.html#seti">seti</a>, <a href="../demo/theme.html#yeti">yeti</a>, <a href="../demo/theme.html#material">material</a>, and <a href="../demo/theme.html#icecoder">icecoder</a></li>
<li>New modes: <a href="../mode/brainfuck/index.html">Brainfuck</a>, <a href="../mode/vhdl/index.html">VHDL</a>, Squirrel (<a href="../mode/clike/index.html">clike</a> dialect)</li>
<li>Define a <code>findPersistent</code> command in
the <a href="../demo/search.html">search</a> addon, for a dialog
that stays open as you cycle through matches</li>
<li>From this release on, the NPM module doesn't include documentation and demos</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/5.4.0...5.5.0">list of patches</a></li>
</ul>
<p class="rel">25-06-2015: <a href="https://codemirror.net/codemirror-5.4.zip">Version 5.4</a>:</p>
<ul class="rel-note">
<li>New modes: <a href="../mode/twig/index.html">Twig</a>, <a href="../mode/elm/index.html">Elm</a>, <a href="../mode/factor/index.html">Factor</a>, <a href="../mode/swift/index.html">Swift</a></li>
<li>Prefer clipboard API (if available) when pasting</li>
<li>Refined definition highlighting in <a href="../mode/clike/index.html">clike</a> mode</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/5.3.0...5.4.0">list of patches</a></li>
</ul>
<p class="rel">20-05-2015: <a href="https://codemirror.net/codemirror-5.3.zip">Version 5.3</a>:</p>
<ul class="rel-note">
<li>Fix several regressions in the <a href="manual.html#addon_show-hint"><code>show-hint</code></a> addon (<code>completeSingle</code> option, <code>"shown"</code> and <code>"close"</code> events)</li>
<li>The <a href="../demo/vim.html">vim mode</a> API was <a href="manual.html#vimapi">documented</a></li>
<li>New modes: <a href="../mode/asn.1/index.html">ASN.1</a>, <a href="../mode/ttcn/index.html">TTCN</a>, and <a href="../mode/ttcn-cfg/index.html">TTCN-CFG</a></li>
<li>The <a href="../mode/clike/index.html">clike</a> mode can now deep-indent <code>switch</code> statements, and roughly recognizes types and defined identifiers</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/5.2.0...5.3.0">list of patches</a></li>
</ul>
<p class="rel">20-04-2015: <a href="https://codemirror.net/codemirror-5.2.zip">Version 5.2</a>:</p>
<ul class="rel-note">
<li>Fix several race conditions
in <a href="manual.html#addon_show-hint"><code>show-hint</code></a>'s
asynchronous mode</li>
<li>Fix backspace binding in <a href="../demo/sublime.html">Sublime bindings</a></li>
<li>Change the way IME is handled in the <code>"textarea"</code> <a href="manual.html#option_inputStyle">input style</a></li>
<li>New modes: <a href="../mode/mumps/index.html">MUMPS</a>, <a href="../mode/handlebars/index.html">Handlebars</a></li>
<li>Rewritten modes: <a href="../mode/django/index.html">Django</a>, <a href="../mode/z80/index.html">Z80</a></li>
<li>New theme: <a href="../demo/theme.html#liquibyte">Liquibyte</a></li>
<li>New option: <a href="manual.html#option_lineWiseCopyCut"><code>lineWiseCopyCut</code></a></li>
<li>The <a href="../demo/vim.html">Vim mode</a> now supports buffer-local options and the <code>filetype</code> setting</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/5.1.0...5.2.0">list of patches</a></li>
</ul>
<p class="rel">23-03-2015: <a href="https://codemirror.net/codemirror-5.1.zip">Version 5.1</a>:</p>
<ul class="rel-note">
<li>New modes: <a href="../mode/asciiarmor/index.html">ASCII armor</a> (PGP data), <a href="../mode/troff/index.html">Troff</a>, and <a href="../mode/cmake/index.html">CMake</a>.</li>
<li>Remove SmartyMixed mode, rewrite <a href="../mode/smarty/index.html">Smarty</a> mode to supersede it.</li>
<li>New commands in the <a href="manual.html#addon_merge">merge
addon</a>: <code>goNextDiff</code> and <code>goPrevDiff</code>.</li>
<li>The <a href="manual.html#addon_closebrackets">closebrackets addon</a> can now be configured per mode.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/5.0.0...5.1.0">list of patches</a>.</li>
</ul>
<p class="rel">20-02-2015: <a href="https://codemirror.net/codemirror-5.0.zip">Version 5.0</a>:</p>
<ul class="rel-note">
<li>Experimental mobile support (tested on iOS, Android Chrome, stock Android browser)</li>
<li>New option <a href="manual.html#option_inputStyle"><code>inputStyle</code></a> to switch between hidden textarea and contenteditable input.</li>
<li>The <a href="manual.html#getInputField"><code>getInputField</code></a>
method is no longer guaranteed to return a textarea.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/4.13.0...5.0.0">list of patches</a>.</li>
</ul>
</section>
<section id=v4 class=first>
<h2>Version 4.x</h2>
<p class="rel">20-02-2015: <a href="https://codemirror.net/codemirror-4.13.zip">Version 4.13</a>:</p>
<ul class="rel-note">
<li>Fix the way the <a href="../demo/closetag.html"><code>closetag</code></a> demo handles the slash character.</li>
<li>New modes: <a href="../mode/forth/index.html">Forth</a>, <a href="../mode/stylus/index.html">Stylus</a>.</li>
<li>Make the <a href="../mode/css/index.html">CSS mode</a> understand some modern CSS extensions.</li>
<li>Have the <a href="../mode/clike/index.html">Scala mode</a> handle symbols and triple-quoted strings.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/4.12.0...4.13.0">list of patches</a>.</li>
</ul>
<p class="rel">22-01-2015: <a href="https://codemirror.net/codemirror-4.12.zip">Version 4.12</a>:</p>
<ul class="rel-note">
<li>The <a href="manual.html#addon_closetag"><code>closetag</code></a>
addon now defines a <code>"closeTag"</code> command.</li>
<li>Adds a <code>findModeByFileName</code> to the <a href="manual.html#addon_meta">mode metadata</a>
addon.</li>
<li><a href="../demo/simplemode.html">Simple mode</a> rules can
now contain a <code>sol</code> property to only match at the start
of a line.</li>
<li>New
addon: <a href="manual.html#addon_selection-pointer"><code>selection-pointer</code></a>
to style the mouse cursor over the selection.</li>
<li>Improvements to the <a href="../mode/sass/index.html">Sass mode</a>'s indentation.</li>
<li>The <a href="../demo/vim.html">Vim keymap</a>'s search functionality now
supports <a href="manual.html#addon_matchesonscrollbar">scrollbar
annotation</a>.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/4.11.0...4.12.0">list of patches</a>.</li>
</ul>
<p class="rel">9-01-2015: <a href="https://codemirror.net/codemirror-4.11.zip">Version 4.11</a>:</p>
<p class="rel-note">Unfortunately, 4.10 did not take care of the
Firefox scrolling issue entirely. This release adds two more patches
to address that.</p>
<p class="rel">29-12-2014: <a href="https://codemirror.net/codemirror-4.10.zip">Version 4.10</a>:</p>
<p class="rel-note">Emergency single-patch update to 4.9. Fixes
Firefox-specific problem where the cursor could end up behind the
horizontal scrollbar.</p>
<p class="rel">23-12-2014: <a href="https://codemirror.net/codemirror-4.9.zip">Version 4.9</a>:</p>
<ul class="rel-note">
<li>Overhauled scroll bar handling.
Add pluggable <a href="../demo/simplescrollbars.html">scrollbar
implementations</a>.</li>
<li>Tweaked behavior for
the <a href="manual.html#addon_show-hint">completion addons</a> to
not take text after cursor into account.</li>
<li>Two new optional features in
the <a href="manual.html#addon_merge">merge addon</a>: aligning
editors, and folding unchanged text.</li>
<li>New
modes: <a href="../mode/dart/index.html">Dart</a>, <a href="../mode/ebnf/index.html">EBNF</a>, <a href="../mode/spreadsheet/index.html">spreadsheet</a>,
and <a href="../mode/soy/index.html">Soy</a>.</li>
<li>New <a href="../demo/panel.html">addon</a> to show persistent panels below/above an editor.</li>
<li>New themes: <a href="../demo/theme.html#zenburn">zenburn</a>
and <a href="../demo/theme.html#tomorrow-night-bright">tomorrow night
bright</a>.</li>
<li>Allow ctrl-click to clear existing cursors.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/4.8.0...4.9.0">list of patches</a>.</li>
</ul>
<p class="rel">22-11-2014: <a href="https://codemirror.net/codemirror-4.8.zip">Version 4.8</a>:</p>
<ul class="rel-note">
<li>Built-in support for <a href="manual.html#normalizeKeyMap">multi-stroke key bindings</a>.</li>
<li>New method: <a href="manual.html#getLineTokens"><code>getLineTokens</code></a>.</li>
<li>New modes: <a href="../mode/dockerfile/index.html">dockerfile</a>, <a href="../mode/idl/index.html">IDL</a>, <a href="../mode/clike/index.html">Objective C</a> (crude).</li>
<li>Support styling of gutter backgrounds, allow <code>"gutter"</code> styles in <a href="manual.html#addLineClass"><code>addLineClass</code></a>.</li>
<li>Many improvements to the <a href="../demo/vim.html">Vim mode</a>, rewritten visual mode.</li>
<li>Improvements to modes: <a href="../mode/gfm/index.html">gfm</a> (strikethrough), <a href="../mode/sparql/index.html">SPARQL</a> (version 1.1 support), and <a href="../mode/stex/index.html">sTeX</a> (no more runaway math mode).
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/4.7.0...4.8.0">list of patches</a>.</li>
</ul>
<p class="rel">20-10-2014: <a href="https://codemirror.net/codemirror-4.7.zip">Version 4.7</a>:</p>
<ul class="rel-note">
<li><strong>Incompatible</strong>:
The <a href="../demo/lint.html">lint addon</a> now passes the
editor's value as first argument to asynchronous lint functions,
for consistency. The editor is still passed, as fourth
argument.</li>
<li>Improved handling of unicode identifiers in modes for
languages that support them.</li>
<li>More mode
improvements: <a href="../mode/coffeescript/index.html">CoffeeScript</a>
(indentation), <a href="../mode/verilog/index.html">Verilog</a>
(indentation), <a href="../mode/clike/index.html">Scala</a>
(indentation, triple-quoted strings),
and <a href="../mode/php/index.html">PHP</a> (interpolated
variables in heredoc strings).</li>
<li>New modes: <a href="../mode/textile/index.html">Textile</a> and <a href="../mode/tornado/index.html">Tornado templates</a>.</li>
<li>Experimental new <a href="../demo/simplemode.html">way to define modes</a>.</li>
<li>Improvements to the <a href="../demo/vim.html">Vim
bindings</a>: Arbitrary insert mode key mappings are now possible,
and text objects are supported in visual mode.</li>
<li>The mode <a href="../mode/meta.js">meta-information file</a>
now includes information about file extensions,
and <a href="manual.html#addon_meta">helper
functions</a> <code>findModeByMIME</code>
and <code>findModeByExtension</code>.</li>
<li>New logo!</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/4.6.0...4.7.0">list of patches</a>.</li>
</ul>
<p class="rel">19-09-2014: <a href="https://codemirror.net/codemirror-4.6.zip">Version 4.6</a>:</p>
<ul class="rel-note">
<li>New mode: <a href="../mode/modelica/index.html">Modelica</a></li>
<li>New method: <a href="manual.html#findWordAt"><code>findWordAt</code></a></li>
<li>Make it easier to <a href="../demo/markselection.html">use text background styling</a></li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/4.5.0...4.6.0">list of patches</a>.</li>
</ul>
<p class="rel">21-08-2014: <a href="https://codemirror.net/codemirror-4.5.zip">Version 4.5</a>:</p>
<ul class="rel-note">
<li>Fix several serious bugs with horizontal scrolling</li>
<li>New mode: <a href="../mode/slim/index.html">Slim</a></li>
<li>New command: <a href="manual.html#command_goLineLeftSmart"><code>goLineLeftSmart</code></a></li>
<li>More fixes and extensions for the <a href="../demo/vim.html">Vim</a> visual block mode</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/4.4.0...4.5.0">list of patches</a>.</li>
</ul>
<p class="rel">21-07-2014: <a href="https://codemirror.net/codemirror-4.4.zip">Version 4.4</a>:</p>
<ul class="rel-note">
<li><strong>Note:</strong> Some events might now fire in slightly
different order (<code>"change"</code> is still guaranteed to fire
before <code>"cursorActivity"</code>)</li>
<li>Nested operations in multiple editors are now synced (complete
at same time, reducing DOM reflows)</li>
<li>Visual block mode for <a href="../demo/vim.html">vim</a> (&lt;C-v>) is nearly complete</li>
<li>New mode: <a href="../mode/kotlin/index.html">Kotlin</a></li>
<li>Better multi-selection paste for text copied from multiple CodeMirror selections</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/4.3.0...4.4.0">list of patches</a>.</li>
</ul>
<p class="rel">23-06-2014: <a href="https://codemirror.net/codemirror-4.3.zip">Version 4.3</a>:</p>
<ul class="rel-note">
<li>Several <a href="../demo/vim.html">vim bindings</a>
improvements: search and exCommand history, global flag
for <code>:substitute</code>, <code>:global</code> command.
<li>Allow hiding the cursor by
setting <a href="manual.html#option_cursorBlinkRate"><code>cursorBlinkRate</code></a>
to a negative value.</li>
<li>Make gutter markers themeable, use this in foldgutter.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/4.2.0...4.3.0">list of patches</a>.</li>
</ul>
<p class="rel">19-05-2014: <a href="https://codemirror.net/codemirror-4.2.zip">Version 4.2</a>:</p>
<ul class="rel-note">
<li>Fix problem where some modes were broken by the fact that empty tokens were forbidden.</li>
<li>Several fixes to context menu handling.</li>
<li>On undo, scroll <em>change</em>, not cursor, into view.</li>
<li>Rewritten <a href="../mode/jade/index.html">Jade</a> mode.</li>
<li>Various improvements to <a href="../mode/shell/index.html">Shell</a> (support for more syntax) and <a href="../mode/python/index.html">Python</a> (better indentation) modes.</li>
<li>New mode: <a href="../mode/cypher/index.html">Cypher</a>.</li>
<li>New theme: <a href="../demo/theme.html#neo">Neo</a>.</li>
<li>Support direct styling options (color, line style, width) in the <a href="manual.html#addon_rulers">rulers</a> addon.</li>
<li>Recognize per-editor configuration for the <a href="manual.html#addon_show-hint">show-hint</a> and <a href="manual.html#addon_foldcode">foldcode</a> addons.</li>
<li>More intelligent scanning for existing close tags in <a href="manual.html#addon_closetag">closetag</a> addon.</li>
<li>In the <a href="../demo/vim.html">Vim bindings</a>: Fix bracket matching, support case conversion in visual mode, visual paste, append action.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/4.1.0...4.2.0">list of patches</a>.</li>
</ul>
<p class="rel">22-04-2014: <a href="https://codemirror.net/codemirror-4.1.zip">Version 4.1</a>:</p>
<ul class="rel-note">
<li><em>Slightly incompatible</em>:
The <a href="manual.html#event_cursorActivity"><code>"cursorActivity"</code></a>
event now fires after all other events for the operation (and only
for handlers that were actually registered at the time the
activity happened).</li>
<li>New command: <a href="manual.html#command_insertSoftTab"><code>insertSoftTab</code></a>.</li>
<li>New mode: <a href="../mode/django/index.html">Django</a>.</li>
<li>Improved modes: <a href="../mode/verilog/index.html">Verilog</a> (rewritten), <a href="../mode/jinja2/index.html">Jinja2</a>, <a href="../mode/haxe/index.html">Haxe</a>, <a href="../mode/php/index.html">PHP</a> (string interpolation highlighted), <a href="../mode/javascript/index.html">JavaScript</a> (indentation of trailing else, template strings), <a href="../mode/livescript/index.html">LiveScript</a> (multi-line strings).</li>
<li>Many small issues from the 3.x→4.x transition were found and fixed.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/4.0.3...4.1.0">list of patches</a>.</li>
</ul>
<p class="rel">20-03-2014: <a href="https://codemirror.net/codemirror-4.0.zip">Version 4.0</a>:</p>
<p class="rel-note">This is a new major version of CodeMirror. There
are a few <strong>incompatible</strong> changes in the API. Upgrade
with care, and read the <a href="upgrade_v4.html">upgrading
guide</a>.</p>
<ul class="rel-note">
<li>Multiple selections (ctrl-click, alt-drag, <a href="manual.html#setSelections">API</a>).</li>
<li>Sublime Text <a href="../demo/sublime.html">bindings</a>.</li>
<li><a href="manual.html#modloader">Module loader shims</a> wrapped around all modules.</li>
<li>Selection <a href="manual.html#command_undoSelection">undo</a>/<a href="manual.html#command_redoSelection">redo</a>.</li>
<li>Improved character measuring (faster, handles wrapped lines more robustly).</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/3.23.0...4.0.3">list of patches</a>.</li>
</ul>
</section>
<section id=v3>
<h2>Version 3.x</h2>
<p class="rel">22-04-2014: <a href="https://codemirror.net/codemirror-3.24.zip">Version 3.24</a>:</p>
<p class="rel-note">Merges the improvements from 4.1 that could
easily be applied to the 3.x code. Also improves the way the editor
size is updated when line widgets change.</p>
<p class="rel">20-03-2014: <a href="https://codemirror.net/codemirror-3.23.zip">Version 3.23</a>:</p>
<ul class="rel-note">
<li>In the <a href="../mode/xml/index.html">XML mode</a>,
add <code>brackets</code> style to angle brackets, fix
case-sensitivity of tags for HTML.</li>
<li>New mode: <a href="../mode/dylan/index.html">Dylan</a>.</li>
<li>Many improvements to the <a href="../demo/vim.html">Vim bindings</a>.</li>
</ul>
<p class="rel">21-02-2014: <a href="https://codemirror.net/codemirror-3.22.zip">Version 3.22</a>:</p>
<ul class="rel-note">
<li>Adds the <a href="manual.html#findMarks"><code>findMarks</code></a> method.</li>
<li>New addons: <a href="manual.html#addon_rulers">rulers</a>, markdown-fold, yaml-lint.</li>
<li>New theme: <a href="../demo/theme.html#mdn-like">mdn-like</a>.</li>
<li>New mode: <a href="../mode/solr/index.html">Solr</a>.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/3.21.0...3.22.0">list of patches</a>.</li>
</ul>
<p class="rel">16-01-2014: <a href="https://codemirror.net/codemirror-3.21.zip">Version 3.21</a>:</p>
<ul class="rel-note">
<li>Auto-indenting a block will no longer add trailing whitespace to blank lines.</li>
<li>Marking text has a new option <a href="manual.html#markText"><code>clearWhenEmpty</code></a> to control auto-removal.</li>
<li>Several bugfixes in the handling of bidirectional text.</li>
<li>The <a href="../mode/xml/index.html">XML</a> and <a href="../mode/css/index.html">CSS</a> modes were largely rewritten. <a href="../mode/css/less.html">LESS</a> support was added to the CSS mode.</li>
<li>The OCaml mode was moved to an <a href="../mode/mllike/index.html">mllike</a> mode, F# support added.</li>
<li>Make it possible to fetch multiple applicable helper values with <a href="manual.html#getHelpers"><code>getHelpers</code></a>, and to register helpers matched on predicates with <a href="manual.html#registerGlobalHelper"><code>registerGlobalHelper</code></a>.</li>
<li>New theme <a href="../demo/theme.html#pastel-on-dark">pastel-on-dark</a>.</li>
<li>Better ECMAScript 6 support in <a href="../mode/javascript/index.html">JavaScript</a> mode.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/3.20.0...3.21.0">list of patches</a>.</li>
</ul>
<p class="rel">21-11-2013: <a href="https://codemirror.net/codemirror-3.20.zip">Version 3.20</a>:</p>
<ul class="rel-note">
<li>New modes: <a href="../mode/julia/index.html">Julia</a> and <a href="../mode/pegjs/index.html">PEG.js</a>.</li>
<li>Support ECMAScript 6 in the <a href="../mode/javascript/index.html">JavaScript mode</a>.</li>
<li>Improved indentation for the <a href="../mode/coffeescript/index.html">CoffeeScript mode</a>.</li>
<li>Make non-printable-character representation <a href="manual.html#option_specialChars">configurable</a>.</li>
<li>Add ‘notification’ functionality to <a href="manual.html#addon_dialog">dialog</a> addon.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/3.19.0...3.20.0">list of patches</a>.</li>
</ul>
<p class="rel">21-10-2013: <a href="https://codemirror.net/codemirror-3.19.zip">Version 3.19</a>:</p>
<ul class="rel-note">
<li>New modes: <a href="../mode/eiffel/index.html">Eiffel</a>, <a href="../mode/gherkin/index.html">Gherkin</a>, <a href="../mode/sql/?mime=text/x-mssql">MSSQL dialect</a>.</li>
<li>New addons: <a href="manual.html#addon_hardwrap">hardwrap</a>, <a href="manual.html#addon_sql-hint">sql-hint</a>.</li>
<li>New theme: <a href="../demo/theme.html#mbo">MBO</a>.</li>
<li>Add <a href="manual.html#token_style_line">support</a> for line-level styling from mode tokenizers.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/3.18.0...3.19.0">list of patches</a>.</li>
</ul>
<p class="rel">23-09-2013: <a href="https://codemirror.net/codemirror-3.18.zip">Version 3.18</a>:</p>
<p class="rel-note">Emergency release to fix a problem in 3.17
where <code>.setOption("lineNumbers", false)</code> would raise an
error.</p>
<p class="rel">23-09-2013: <a href="https://codemirror.net/codemirror-3.17.zip">Version 3.17</a>:</p>
<ul class="rel-note">
<li>New modes: <a href="../mode/fortran/index.html">Fortran</a>, <a href="../mode/octave/index.html">Octave</a> (Matlab), <a href="../mode/toml/index.html">TOML</a>, and <a href="../mode/dtd/index.html">DTD</a>.</li>
<li>New addons: <a href="../addon/lint/css-lint.js"><code>css-lint</code></a>, <a href="manual.html#addon_css-hint"><code>css-hint</code></a>.</li>
<li>Improve resilience to CSS 'frameworks' that globally mess up <code>box-sizing</code>.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/3.16.0...3.17.0">list of patches</a>.</li>
</ul>
<p class="rel">21-08-2013: <a href="https://codemirror.net/codemirror-3.16.zip">Version 3.16</a>:</p>
<ul class="rel-note">
<li>The whole codebase is now under a single <a href="../LICENSE">license</a> file.</li>
<li>The project page was overhauled and redesigned.</li>
<li>New themes: <a href="../demo/theme.html#paraiso-dark">Paraiso</a> (<a href="../demo/theme.html#paraiso-light">light</a>), <a href="../demo/theme.html#the-matrix">The Matrix</a>.</li>
<li>Improved interaction between themes and <a href="manual.html#addon_active-line">active-line</a>/<a href="manual.html#addon_matchbrackets">matchbrackets</a> addons.</li>
<li>New <a href="manual.html#addon_foldcode">folding</a> function <code>CodeMirror.fold.comment</code>.</li>
<li>Added <a href="manual.html#addon_fullscreen">fullscreen</a> addon.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/3.15.0...3.16.0">list of patches</a>.</li>
</ul>
<p class="rel">29-07-2013: <a href="https://codemirror.net/codemirror-3.15.zip">Version 3.15</a>:</p>
<ul class="rel-note">
<li>New modes: <a href="../mode/jade/index.html">Jade</a>, <a href="../mode/nginx/index.html">Nginx</a>.</li>
<li>New addons: <a href="../demo/tern.html">Tern</a>, <a href="manual.html#addon_matchtags">matchtags</a>, and <a href="manual.html#addon_foldgutter">foldgutter</a>.</li>
<li>Introduced <a href="manual.html#getHelper"><em>helper</em></a> concept (<a href="https://groups.google.com/forum/#!msg/codemirror/cOc0xvUUEUU/nLrX1-qnidgJ">context</a>).</li>
<li>New method: <a href="manual.html#getModeAt"><code>getModeAt</code></a>.</li>
<li>New themes: base16 <a href="../demo/theme.html#base16-dark">dark</a>/<a href="../demo/theme.html#base16-light">light</a>, 3024 <a href="../demo/theme.html#3024-night">dark</a>/<a href="../demo/theme.html#3024-day">light</a>, <a href="../demo/theme.html#tomorrow-night-eighties">tomorrow-night</a>.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/3.14.0...3.15.0">list of patches</a>.</li>
</ul>
<p class="rel">20-06-2013: <a href="https://codemirror.net/codemirror-3.14.zip">Version 3.14</a>:</p>
<ul class="rel-note">
<li>New
addons: <a href="manual.html#addon_trailingspace">trailing
space highlight</a>, <a href="manual.html#addon_xml-hint">XML
completion</a> (rewritten),
and <a href="manual.html#addon_merge">diff merging</a>.</li>
<li><a href="manual.html#markText"><code>markText</code></a>
and <a href="manual.html#addLineWidget"><code>addLineWidget</code></a>
now take a <code>handleMouseEvents</code> option.</li>
<li>New methods: <a href="manual.html#lineAtHeight"><code>lineAtHeight</code></a>,
<a href="manual.html#getTokenTypeAt"><code>getTokenTypeAt</code></a>.</li>
<li>More precise cleanness-tracking
using <a href="manual.html#changeGeneration"><code>changeGeneration</code></a>
and <a href="manual.html#isClean"><code>isClean</code></a>.</li>
<li>Many extensions to <a href="../demo/emacs.html">Emacs</a> mode
(prefixes, more navigation units, and more).</li>
<li>New
events <a href="manual.html#event_keyHandled"><code>"keyHandled"</code></a>
and <a href="manual.html#event_inputRead"><code>"inputRead"</code></a>.</li>
<li>Various improvements to <a href="../mode/ruby/index.html">Ruby</a>,
<a href="../mode/smarty/index.html">Smarty</a>, <a href="../mode/sql/index.html">SQL</a>,
and <a href="../demo/vim.html">Vim</a> modes.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/3.13.0...3.14.0">list of patches</a>.</li>
</ul>
<p class="rel">20-05-2013: <a href="https://codemirror.net/codemirror-3.13.zip">Version 3.13</a>:</p>
<ul class="rel-note">
<li>New modes: <a href="../mode/cobol/index.html">COBOL</a> and <a href="../mode/haml/index.html">HAML</a>.</li>
<li>New options: <a href="manual.html#option_cursorScrollMargin"><code>cursorScrollMargin</code></a> and <a href="manual.html#option_coverGutterNextToScrollbar"><code>coverGutterNextToScrollbar</code></a>.</li>
<li>New addon: <a href="manual.html#addon_comment">commenting</a>.</li>
<li>More features added to the <a href="../demo/vim.html">Vim keymap</a>.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/v3.12...3.13.0">list of patches</a>.</li>
</ul>
<p class="rel">19-04-2013: <a href="https://codemirror.net/codemirror-3.12.zip">Version 3.12</a>:</p>
<ul class="rel-note">
<li>New mode: <a href="../mode/gas/index.html">GNU assembler</a>.</li>
<li>New
options: <a href="manual.html#option_maxHighlightLength"><code>maxHighlightLength</code></a>
and <a href="manual.html#option_historyEventDelay"><code>historyEventDelay</code></a>.</li>
<li>Added <a href="manual.html#mark_addToHistory"><code>addToHistory</code></a>
option for <code>markText</code>.</li>
<li>Various fixes to JavaScript tokenization and indentation corner cases.</li>
<li>Further improvements to the vim mode.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/v3.11...v3.12">list of patches</a>.</li>
</ul>
<p class="rel">20-03-2013: <a href="https://codemirror.net/codemirror-3.11.zip">Version 3.11</a>:</p>
<ul class="rel-note">
<li><strong>Removed code:</strong> <code>collapserange</code>,
<code>formatting</code>, and <code>simple-hint</code>
addons. <code>plsql</code> and <code>mysql</code> modes
(use <a href="../mode/sql/index.html"><code>sql</code></a> mode).</li>
<li><strong>Moved code:</strong> the range-finding functions for folding now have <a href="../addon/fold/">their own files</a>.</li>
<li><strong>Changed interface:</strong>
the <a href="manual.html#addon_continuecomment"><code>continuecomment</code></a>
addon now exposes an option, rather than a command.</li>
<li>New
modes: <a href="../mode/css/scss.html">SCSS</a>, <a href="../mode/tcl/index.html">Tcl</a>, <a href="../mode/livescript/index.html">LiveScript</a>,
and <a href="../mode/mirc/index.html">mIRC</a>.</li>
<li>New addons: <a href="../demo/placeholder.html"><code>placeholder</code></a>, <a href="../demo/html5complete.html">HTML completion</a>.</li>
<li>New
methods: <a href="manual.html#hasFocus"><code>hasFocus</code></a>, <a href="manual.html#defaultCharWidth"><code>defaultCharWidth</code></a>.</li>
<li>New events: <a href="manual.html#event_beforeCursorEnter"><code>beforeCursorEnter</code></a>, <a href="manual.html#event_renderLine"><code>renderLine</code></a>.</li>
<li>Many improvements to the <a href="manual.html#addon_show-hint"><code>show-hint</code></a> completion
dialog addon.</li>
<li>Tweak behavior of by-word cursor motion.</li>
<li>Further improvements to the <a href="../demo/vim.html">vim mode</a>.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/v3.1...v3.11">list of patches</a>.</li>
</ul>
<p class="rel">21-02-2013: <a href="https://codemirror.net/codemirror-3.1.zip">Version 3.1</a>:</p>
<ul class="rel-note">
<li><strong>Incompatible:</strong> key handlers may
now <em>return</em>, rather
than <em>throw</em> <code>CodeMirror.Pass</code> to signal they
didn't handle the key.</li>
<li>Make documents a <a href="manual.html#api_doc">first-class
construct</a>, support split views and subviews.</li>
<li>Add a <a href="manual.html#addon_show-hint">new module</a>
for showing completion hints.
Deprecate <code>simple-hint.js</code>.</li>
<li>Extend <a href="../mode/htmlmixed/index.html">htmlmixed mode</a>
to allow custom handling of script types.</li>
<li>Support an <code>insertLeft</code> option
to <a href="manual.html#setBookmark"><code>setBookmark</code></a>.</li>
<li>Add an <a href="manual.html#eachLine"><code>eachLine</code></a>
method to iterate over a document.</li>
<li>New addon modules: <a href="../demo/markselection.html">selection
marking</a>, <a href="../demo/lint.html">linting</a>,
and <a href="../demo/closebrackets.html">automatic bracket
closing</a>.</li>
<li>Add <a href="manual.html#event_beforeChange"><code>"beforeChange"</code></a>
and <a href="manual.html#event_beforeSelectionChange"><code>"beforeSelectionChange"</code></a>
events.</li>
<li>Add <a href="manual.html#event_hide"><code>"hide"</code></a>
and <a href="manual.html#event_unhide"><code>"unhide"</code></a>
events to marked ranges.</li>
<li>Fix <a href="manual.html#coordsChar"><code>coordsChar</code></a>'s
interpretation of its argument to match the documentation.</li>
<li>New modes: <a href="../mode/turtle/index.html">Turtle</a>
and <a href="../mode/q/index.html">Q</a>.</li>
<li>Further improvements to the <a href="../demo/vim.html">vim mode</a>.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/v3.01...v3.1">list of patches</a>.</li>
</ul>
<p class="rel">25-01-2013: <a href="https://codemirror.net/codemirror-3.02.zip">Version 3.02</a>:</p>
<p class="rel-note">Single-bugfix release. Fixes a problem that
prevents CodeMirror instances from being garbage-collected after
they become unused.</p>
<p class="rel">21-01-2013: <a href="https://codemirror.net/codemirror-3.01.zip">Version 3.01</a>:</p>
<ul class="rel-note">
<li>Move all add-ons into an organized directory structure
under <a href="../addon/"><code>/addon</code></a>. <strong>You might have to adjust your
paths.</strong></li>
<li>New
modes: <a href="../mode/d/index.html">D</a>, <a href="../mode/sass/index.html">Sass</a>, <a href="../mode/apl/index.html">APL</a>, <a href="../mode/sql/index.html">SQL</a>
(configurable), and <a href="../mode/asterisk/index.html">Asterisk</a>.</li>
<li>Several bugfixes in right-to-left text support.</li>
<li>Add <a href="manual.html#option_rtlMoveVisually"><code>rtlMoveVisually</code></a> option.</li>
<li>Improvements to vim keymap.</li>
<li>Add built-in (lightweight) <a href="manual.html#addOverlay">overlay mode</a> support.</li>
<li>Support <code>showIfHidden</code> option for <a href="manual.html#addLineWidget">line widgets</a>.</li>
<li>Add simple <a href="manual.html#addon_python-hint">Python hinter</a>.</li>
<li>Bring back the <a href="manual.html#option_fixedGutter"><code>fixedGutter</code></a> option.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/v3.0...v3.01">list of patches</a>.</li>
</ul>
<p class="rel">10-12-2012: <a href="https://codemirror.net/codemirror-3.0.zip">Version 3.0</a>:</p>
<p class="rel-note"><strong>New major version</strong>. Only
partially backwards-compatible. See
the <a href="upgrade_v3.html">upgrading guide</a> for more
information. Changes since release candidate 2:</p>
<ul class="rel-note">
<li>Rewritten VIM mode.</li>
<li>Fix a few minor scrolling and sizing issues.</li>
<li>Work around Safari segfault when dragging.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/v3.0rc2...v3.0">list of patches</a>.</li>
</ul>
<p class="rel">20-11-2012: <a href="https://codemirror.net/codemirror-3.0rc2.zip">Version 3.0, release candidate 2</a>:</p>
<ul class="rel-note">
<li>New mode: <a href="../mode/http/index.html">HTTP</a>.</li>
<li>Improved handling of selection anchor position.</li>
<li>Improve IE performance on longer lines.</li>
<li>Reduce gutter glitches during horiz. scrolling.</li>
<li>Add <a href="manual.html#addKeyMap"><code>addKeyMap</code></a> and <a href="manual.html#removeKeyMap"><code>removeKeyMap</code></a> methods.</li>
<li>Rewrite <code>formatting</code> and <code>closetag</code> add-ons.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/v3.0rc1...v3.0rc2">list of patches</a>.</li>
</ul>
<p class="rel">20-11-2012: <a href="https://codemirror.net/codemirror-3.0rc1.zip">Version 3.0, release candidate 1</a>:</p>
<ul class="rel-note">
<li>New theme: <a href="../demo/theme.html#solarized%20light">Solarized</a>.</li>
<li>Introduce <a href="manual.html#addLineClass"><code>addLineClass</code></a>
and <a href="manual.html#removeLineClass"><code>removeLineClass</code></a>,
drop <code>setLineClass</code>.</li>
<li>Add a <em>lot</em> of
new <a href="manual.html#markText">options for marked text</a>
(read-only, atomic, collapsed, widget replacement).</li>
<li>Remove the old code folding interface in favour of these new ranges.</li>
<li>Add <a href="manual.html#isClean"><code>isClean</code></a>/<a href="manual.html#markClean"><code>markClean</code></a> methods.</li>
<li>Remove <code>compoundChange</code> method, use better undo-event-combining heuristic.</li>
<li>Improve scrolling performance smoothness.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/v3.0beta2...v3.0rc1">list of patches</a>.</li>
</ul>
<p class="rel">22-10-2012: <a href="https://codemirror.net/codemirror-3.0beta2.zip">Version 3.0, beta 2</a>:</p>
<ul class="rel-note">
<li>Fix page-based coordinate computation.</li>
<li>Fix firing of <a href="manual.html#event_gutterClick"><code>gutterClick</code></a> event.</li>
<li>Add <a href="manual.html#option_cursorHeight"><code>cursorHeight</code></a> option.</li>
<li>Fix bi-directional text regression.</li>
<li>Add <a href="manual.html#option_viewportMargin"><code>viewportMargin</code></a> option.</li>
<li>Directly handle mousewheel events (again, hopefully better).</li>
<li>Make vertical cursor movement more robust (through widgets, big line gaps).</li>
<li>Add <a href="manual.html#option_flattenSpans"><code>flattenSpans</code></a> option.</li>
<li>Many optimizations. Poor responsiveness should be fixed.</li>
<li>Initialization in hidden state works again.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/v3.0beta1...v3.0beta2">list of patches</a>.</li>
</ul>
<p class="rel">19-09-2012: <a href="https://codemirror.net/codemirror-3.0beta1.zip">Version 3.0, beta 1</a>:</p>
<ul class="rel-note">
<li>Bi-directional text support.</li>
<li>More powerful gutter model.</li>
<li>Support for arbitrary text/widget height.</li>
<li>In-line widgets.</li>
<li>Generalized event handling.</li>
</ul>
</section>
<section id=v2>
<h2>Version 2.x</h2>
<p class="rel">21-01-2013: <a href="https://codemirror.net/codemirror-2.38.zip">Version 2.38</a>:</p>
<p class="rel-note">Integrate some bugfixes, enhancements to the vim keymap, and new
modes
(<a href="../mode/d/index.html">D</a>, <a href="../mode/sass/index.html">Sass</a>, <a href="../mode/apl/index.html">APL</a>)
from the v3 branch.</p>
<p class="rel">20-12-2012: <a href="https://codemirror.net/codemirror-2.37.zip">Version 2.37</a>:</p>
<ul class="rel-note">
<li>New mode: <a href="../mode/sql/index.html">SQL</a> (will replace <a href="../mode/plsql/index.html">plsql</a> and <a href="../mode/mysql/index.html">mysql</a> modes).</li>
<li>Further work on the new VIM mode.</li>
<li>Fix Cmd/Ctrl keys on recent Operas on OS X.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/v2.36...v2.37">list of patches</a>.</li>
</ul>
<p class="rel">20-11-2012: <a href="https://codemirror.net/codemirror-2.36.zip">Version 2.36</a>:</p>
<ul class="rel-note">
<li>New mode: <a href="../mode/z80/index.html">Z80 assembly</a>.</li>
<li>New theme: <a href="../demo/theme.html#twilight">Twilight</a>.</li>
<li>Add command-line compression helper.</li>
<li>Make <a href="manual.html#scrollIntoView"><code>scrollIntoView</code></a> public.</li>
<li>Add <a href="manual.html#defaultTextHeight"><code>defaultTextHeight</code></a> method.</li>
<li>Various extensions to the vim keymap.</li>
<li>Make <a href="../mode/php/index.html">PHP mode</a> build on <a href="../mode/htmlmixed/index.html">mixed HTML mode</a>.</li>
<li>Add <a href="manual.html#addon_continuecomment">comment-continuing</a> add-on.</li>
<li>Full <a href="../https://github.com/codemirror/CodeMirror/compare/v2.35...v2.36">list of patches</a>.</li>
</ul>
<p class="rel">22-10-2012: <a href="https://codemirror.net/codemirror-2.35.zip">Version 2.35</a>:</p>
<ul class="rel-note">
<li>New (sub) mode: <a href="../mode/javascript/typescript.html">TypeScript</a>.</li>
<li>Don't overwrite (insert key) when pasting.</li>
<li>Fix several bugs in <a href="manual.html#markText"><code>markText</code></a>/undo interaction.</li>
<li>Better indentation of JavaScript code without semicolons.</li>
<li>Add <a href="manual.html#defineInitHook"><code>defineInitHook</code></a> function.</li>
<li>Full <a href="https://github.com/codemirror/CodeMirror/compare/v2.34...v2.35">list of patches</a>.</li>
</ul>
<p class="rel">19-09-2012: <a href="https://codemirror.net/codemirror-2.34.zip">Version 2.34</a>:</p>
<ul class="rel-note">
<li>New mode: <a href="../mode/commonlisp/index.html">Common Lisp</a>.</li>
<li>Fix right-click select-all on most browsers.</li>
<li>Change the way highlighting happens:<br>&nbsp; Saves memory and CPU cycles.<br>&nbsp; <code>compareStates</code> is no longer needed.<br>&nbsp; <code>onHighlightComplete</code> no longer works.</li>
<li>Integrate mode (Markdown, XQuery, CSS, sTex) tests in central testsuite.</li>
<li>Add a <a href="manual.html#version"><code>CodeMirror.version</code></a> property.</li>
<li>More robust handling of nested modes in <a href="../demo/formatting.html">formatting</a> and <a href="../demo/closetag.html">closetag</a> plug-ins.</li>
<li>Un/redo now preserves <a href="manual.html#markText">marked text</a> and bookmarks.</li>
<li><a href="https://github.com/codemirror/CodeMirror/compare/v2.33...v2.34">Full list</a> of patches.</li>
</ul>
<p class="rel">23-08-2012: <a href="https://codemirror.net/codemirror-2.33.zip">Version 2.33</a>:</p>
<ul class="rel-note">
<li>New mode: <a href="../mode/sieve/index.html">Sieve</a>.</li>
<li>New <a href="manual.html#getViewport"><code>getViewPort</code></a> and <a href="manual.html#option_onViewportChange"><code>onViewportChange</code></a> API.</li>
<li><a href="manual.html#option_cursorBlinkRate">Configurable</a> cursor blink rate.</li>
<li>Make binding a key to <code>false</code> disabling handling (again).</li>
<li>Show non-printing characters as red dots.</li>
<li>More tweaks to the scrolling model.</li>
<li>Expanded testsuite. Basic linter added.</li>
<li>Remove most uses of <code>innerHTML</code>. Remove <code>CodeMirror.htmlEscape</code>.</li>
<li><a href="https://github.com/codemirror/CodeMirror/compare/v2.32...v2.33">Full list</a> of patches.</li>
</ul>
<p class="rel">23-07-2012: <a href="https://codemirror.net/codemirror-2.32.zip">Version 2.32</a>:</p>
<p class="rel-note">Emergency fix for a bug where an editor with
line wrapping on IE will break when there is <em>no</em>
scrollbar.</p>
<p class="rel">20-07-2012: <a href="https://codemirror.net/codemirror-2.31.zip">Version 2.31</a>:</p>
<ul class="rel-note">
<li>New modes: <a href="../mode/ocaml/index.html">OCaml</a>, <a href="../mode/haxe/index.html">Haxe</a>, and <a href="../mode/vb/index.html">VB.NET</a>.</li>
<li>Several fixes to the new scrolling model.</li>
<li>Add a <a href="manual.html#setSize"><code>setSize</code></a> method for programmatic resizing.</li>
<li>Add <a href="manual.html#getHistory"><code>getHistory</code></a> and <a href="manual.html#setHistory"><code>setHistory</code></a> methods.</li>
<li>Allow custom line separator string in <a href="manual.html#getValue"><code>getValue</code></a> and <a href="manual.html#getRange"><code>getRange</code></a>.</li>
<li>Support double- and triple-click drag, double-clicking whitespace.</li>
<li>And more... <a href="https://github.com/codemirror/CodeMirror/compare/v2.3...v2.31">(all patches)</a></li>
</ul>
<p class="rel">22-06-2012: <a href="https://codemirror.net/codemirror-2.3.zip">Version 2.3</a>:</p>
<ul class="rel-note">
<li><strong>New scrollbar implementation</strong>. Should flicker less. Changes DOM structure of the editor.</li>
<li>New theme: <a href="../demo/theme.html#vibrant-ink">vibrant-ink</a>.</li>
<li>Many extensions to the VIM keymap (including text objects).</li>
<li>Add <a href="../demo/multiplex.html">mode-multiplexing</a> utility script.</li>
<li>Fix bug where right-click paste works in read-only mode.</li>
<li>Add a <a href="manual.html#getScrollInfo"><code>getScrollInfo</code></a> method.</li>
<li>Lots of other <a href="https://github.com/codemirror/CodeMirror/compare/v2.25...v2.3">fixes</a>.</li>
</ul>
<p class="rel">23-05-2012: <a href="https://codemirror.net/codemirror-2.25.zip">Version 2.25</a>:</p>
<ul class="rel-note">
<li>New mode: <a href="../mode/erlang/index.html">Erlang</a>.</li>
<li><strong>Remove xmlpure mode</strong> (use <a href="../mode/xml/index.html">xml.js</a>).</li>
<li>Fix line-wrapping in Opera.</li>
<li>Fix X Windows middle-click paste in Chrome.</li>
<li>Fix bug that broke pasting of huge documents.</li>
<li>Fix backspace and tab key repeat in Opera.</li>
</ul>
<p class="rel">23-04-2012: <a href="https://codemirror.net/codemirror-2.24.zip">Version 2.24</a>:</p>
<ul class="rel-note">
<li><strong>Drop support for Internet Explorer 6</strong>.</li>
<li>New
modes: <a href="../mode/shell/index.html">Shell</a>, <a href="../mode/tiki/index.html">Tiki
wiki</a>, <a href="../mode/pig/index.html">Pig Latin</a>.</li>
<li>New themes: <a href="../demo/theme.html#ambiance">Ambiance</a>, <a href="../demo/theme.html#blackboard">Blackboard</a>.</li>
<li>More control over drag/drop
with <a href="manual.html#option_dragDrop"><code>dragDrop</code></a>
and <a href="manual.html#option_onDragEvent"><code>onDragEvent</code></a>
options.</li>
<li>Make HTML mode a bit less pedantic.</li>
<li>Add <a href="manual.html#compoundChange"><code>compoundChange</code></a> API method.</li>
<li>Several fixes in undo history and line hiding.</li>
<li>Remove (broken) support for <code>catchall</code> in key maps,
add <code>nofallthrough</code> boolean field instead.</li>
</ul>
<p class="rel">26-03-2012: <a href="https://codemirror.net/codemirror-2.23.zip">Version 2.23</a>:</p>
<ul class="rel-note">
<li>Change <strong>default binding for tab</strong> <a href="javascript:void(document.getElementById('tabbinding').style.display='')">[more]</a>
<div style="display: none" id=tabbinding>
Starting in 2.23, these bindings are default:
<ul><li>Tab: Insert tab character</li>
<li>Shift-tab: Reset line indentation to default</li>
<li>Ctrl/Cmd-[: Reduce line indentation (old tab behaviour)</li>
<li>Ctrl/Cmd-]: Increase line indentation (old shift-tab behaviour)</li>
</ul>
</div>
</li>
<li>New modes: <a href="../mode/xquery/index.html">XQuery</a> and <a href="../mode/vbscript/index.html">VBScript</a>.</li>
<li>Two new themes: <a href="../mode/less/index.html">lesser-dark</a> and <a href="../mode/xquery/index.html">xq-dark</a>.</li>
<li>Differentiate between background and text styles in <a href="manual.html#setLineClass"><code>setLineClass</code></a>.</li>
<li>Fix drag-and-drop in IE9+.</li>
<li>Extend <a href="manual.html#charCoords"><code>charCoords</code></a>
and <a href="manual.html#cursorCoords"><code>cursorCoords</code></a> with a <code>mode</code> argument.</li>
<li>Add <a href="manual.html#option_autofocus"><code>autofocus</code></a> option.</li>
<li>Add <a href="manual.html#findMarksAt"><code>findMarksAt</code></a> method.</li>
</ul>
<p class="rel">27-02-2012: <a href="https://codemirror.net/codemirror-2.22.zip">Version 2.22</a>:</p>
<ul class="rel-note">
<li>Allow <a href="manual.html#keymaps">key handlers</a> to pass up events, allow binding characters.</li>
<li>Add <a href="manual.html#option_autoClearEmptyLines"><code>autoClearEmptyLines</code></a> option.</li>
<li>Properly use tab stops when rendering tabs.</li>
<li>Make PHP mode more robust.</li>
<li>Support indentation blocks in <a href="manual.html#addon_foldcode">code folder</a>.</li>
<li>Add a script for <a href="manual.html#addon_match-highlighter">highlighting instances of the selection</a>.</li>
<li>New <a href="../mode/properties/index.html">.properties</a> mode.</li>
<li>Fix many bugs.</li>
</ul>
<p class="rel">27-01-2012: <a href="https://codemirror.net/codemirror-2.21.zip">Version 2.21</a>:</p>
<ul class="rel-note">
<li>Added <a href="../mode/less/index.html">LESS</a>, <a href="../mode/mysql/index.html">MySQL</a>,
<a href="../mode/go/index.html">Go</a>, and <a href="../mode/verilog/index.html">Verilog</a> modes.</li>
<li>Add <a href="manual.html#option_smartIndent"><code>smartIndent</code></a>
option.</li>
<li>Support a cursor in <a href="manual.html#option_readOnly"><code>readOnly</code></a>-mode.</li>
<li>Support assigning multiple styles to a token.</li>
<li>Use a new approach to drawing the selection.</li>
<li>Add <a href="manual.html#scrollTo"><code>scrollTo</code></a> method.</li>
<li>Allow undo/redo events to span non-adjacent lines.</li>
<li>Lots and lots of bugfixes.</li>
</ul>
<p class="rel">20-12-2011: <a href="https://codemirror.net/codemirror-2.2.zip">Version 2.2</a>:</p>
<ul class="rel-note">
<li>Slightly incompatible API changes. Read <a href="upgrade_v2.2.html">this</a>.</li>
<li>New approach
to <a href="manual.html#option_extraKeys">binding</a> keys,
support for <a href="manual.html#option_keyMap">custom
bindings</a>.</li>
<li>Support for overwrite (insert).</li>
<li><a href="manual.html#option_tabSize">Custom-width</a>
and <a href="../demo/visibletabs.html">stylable</a> tabs.</li>
<li>Moved more code into <a href="manual.html#addons">add-on scripts</a>.</li>
<li>Support for sane vertical cursor movement in wrapped lines.</li>
<li>More reliable handling of
editing <a href="manual.html#markText">marked text</a>.</li>
<li>Add minimal <a href="../demo/emacs.html">emacs</a>
and <a href="../demo/vim.html">vim</a> bindings.</li>
<li>Rename <code>coordsFromIndex</code>
to <a href="manual.html#posFromIndex"><code>posFromIndex</code></a>,
add <a href="manual.html#indexFromPos"><code>indexFromPos</code></a>
method.</li>
</ul>
<p class="rel">21-11-2011: <a href="https://codemirror.net/codemirror-2.18.zip">Version 2.18</a>:</p>
<p class="rel-note">Fixes <code>TextMarker.clear</code>, which is broken in 2.17.</p>
<p class="rel">21-11-2011: <a href="https://codemirror.net/codemirror-2.17.zip">Version 2.17</a>:</p>
<ul class="rel-note">
<li>Add support for <a href="manual.html#option_lineWrapping">line
wrapping</a> and <a href="manual.html#hideLine">code
folding</a>.</li>
<li>Add <a href="../mode/gfm/index.html">Github-style Markdown</a> mode.</li>
<li>Add <a href="../theme/monokai.css">Monokai</a>
and <a href="../theme/rubyblue.css">Rubyblue</a> themes.</li>
<li>Add <a href="manual.html#setBookmark"><code>setBookmark</code></a> method.</li>
<li>Move some of the demo code into reusable components
under <a href="../addon/"><code>lib/util</code></a>.</li>
<li>Make screen-coord-finding code faster and more reliable.</li>
<li>Fix drag-and-drop in Firefox.</li>
<li>Improve support for IME.</li>
<li>Speed up content rendering.</li>
<li>Fix browser's built-in search in Webkit.</li>
<li>Make double- and triple-click work in IE.</li>
<li>Various fixes to modes.</li>
</ul>
<p class="rel">27-10-2011: <a href="https://codemirror.net/codemirror-2.16.zip">Version 2.16</a>:</p>
<ul class="rel-note">
<li>Add <a href="../mode/perl/index.html">Perl</a>, <a href="../mode/rust/index.html">Rust</a>, <a href="../mode/tiddlywiki/index.html">TiddlyWiki</a>, and <a href="../mode/groovy/index.html">Groovy</a> modes.</li>
<li>Dragging text inside the editor now moves, rather than copies.</li>
<li>Add a <a href="manual.html#coordsFromIndex"><code>coordsFromIndex</code></a> method.</li>
<li><strong>API change</strong>: <code>setValue</code> now no longer clears history. Use <a href="manual.html#clearHistory"><code>clearHistory</code></a> for that.</li>
<li><strong>API change</strong>: <a href="manual.html#markText"><code>markText</code></a> now
returns an object with <code>clear</code> and <code>find</code>
methods. Marked text is now more robust when edited.</li>
<li>Fix editing code with tabs in Internet Explorer.</li>
</ul>
<p class="rel">26-09-2011: <a href="https://codemirror.net/codemirror-2.15.zip">Version 2.15</a>:</p>
<p class="rel-note">Fix bug that snuck into 2.14: Clicking the
character that currently has the cursor didn't re-focus the
editor.</p>
<p class="rel">26-09-2011: <a href="https://codemirror.net/codemirror-2.14.zip">Version 2.14</a>:</p>
<ul class="rel-note">
<li>Add <a href="../mode/clojure/index.html">Clojure</a>, <a href="../mode/pascal/index.html">Pascal</a>, <a href="../mode/ntriples/index.html">NTriples</a>, <a href="../mode/jinja2/index.html">Jinja2</a>, and <a href="../mode/markdown/index.html">Markdown</a> modes.</li>
<li>Add <a href="../theme/cobalt.css">Cobalt</a> and <a href="../theme/eclipse.css">Eclipse</a> themes.</li>
<li>Add a <a href="manual.html#option_fixedGutter"><code>fixedGutter</code></a> option.</li>
<li>Fix bug with <code>setValue</code> breaking cursor movement.</li>
<li>Make gutter updates much more efficient.</li>
<li>Allow dragging of text out of the editor (on modern browsers).</li>
</ul>
<p class="rel">23-08-2011: <a href="https://codemirror.net/codemirror-2.13.zip">Version 2.13</a>:</p>
<ul class="rel-note">
<li>Add <a href="../mode/ruby/index.html">Ruby</a>, <a href="../mode/r/index.html">R</a>, <a href="../mode/coffeescript/index.html">CoffeeScript</a>, and <a href="../mode/velocity/index.html">Velocity</a> modes.</li>
<li>Add <a href="manual.html#getGutterElement"><code>getGutterElement</code></a> to API.</li>
<li>Several fixes to scrolling and positioning.</li>
<li>Add <a href="manual.html#option_smartHome"><code>smartHome</code></a> option.</li>
<li>Add an experimental <a href="../mode/xmlpure/index.html">pure XML</a> mode.</li>
</ul>
<p class="rel">25-07-2011: <a href="https://codemirror.net/codemirror-2.12.zip">Version 2.12</a>:</p>
<ul class="rel-note">
<li>Add a <a href="../mode/sparql/index.html">SPARQL</a> mode.</li>
<li>Fix bug with cursor jumping around in an unfocused editor in IE.</li>
<li>Allow key and mouse events to bubble out of the editor. Ignore widget clicks.</li>
<li>Solve cursor flakiness after undo/redo.</li>
<li>Fix block-reindent ignoring the last few lines.</li>
<li>Fix parsing of multi-line attrs in XML mode.</li>
<li>Use <code>innerHTML</code> for HTML-escaping.</li>
<li>Some fixes to indentation in C-like mode.</li>
<li>Shrink horiz scrollbars when long lines removed.</li>
<li>Fix width feedback loop bug that caused the width of an inner DIV to shrink.</li>
</ul>
<p class="rel">04-07-2011: <a href="https://codemirror.net/codemirror-2.11.zip">Version 2.11</a>:</p>
<ul class="rel-note">
<li>Add a <a href="../mode/scheme/index.html">Scheme mode</a>.</li>
<li>Add a <code>replace</code> method to search cursors, for cursor-preserving replacements.</li>
<li>Make the <a href="../mode/clike/index.html">C-like mode</a> mode more customizable.</li>
<li>Update XML mode to spot mismatched tags.</li>
<li>Add <code>getStateAfter</code> API and <code>compareState</code> mode API methods for finer-grained mode magic.</li>
<li>Add a <code>getScrollerElement</code> API method to manipulate the scrolling DIV.</li>
<li>Fix drag-and-drop for Firefox.</li>
<li>Add a C# configuration for the <a href="../mode/clike/index.html">C-like mode</a>.</li>
<li>Add <a href="../demo/fullscreen.html">full-screen editing</a> and <a href="../demo/changemode.html">mode-changing</a> demos.</li>
</ul>
<p class="rel">07-06-2011: <a href="https://codemirror.net/codemirror-2.1.zip">Version 2.1</a>:</p>
<p class="rel-note">Add
a <a href="manual.html#option_theme">theme</a> system
(<a href="../demo/theme.html">demo</a>). Note that this is not
backwards-compatible—you'll have to update your styles and
modes!</p>
<p class="rel">07-06-2011: <a href="https://codemirror.net/codemirror-2.02.zip">Version 2.02</a>:</p>
<ul class="rel-note">
<li>Add a <a href="../mode/lua/index.html">Lua mode</a>.</li>
<li>Fix reverse-searching for a regexp.</li>
<li>Empty lines can no longer break highlighting.</li>
<li>Rework scrolling model (the outer wrapper no longer does the scrolling).</li>
<li>Solve horizontal jittering on long lines.</li>
<li>Add <a href="../demo/runmode.html">runmode.js</a>.</li>
<li>Immediately re-highlight text when typing.</li>
<li>Fix problem with 'sticking' horizontal scrollbar.</li>
</ul>
<p class="rel">26-05-2011: <a href="https://codemirror.net/codemirror-2.01.zip">Version 2.01</a>:</p>
<ul class="rel-note">
<li>Add a <a href="../mode/smalltalk/index.html">Smalltalk mode</a>.</li>
<li>Add a <a href="../mode/rst/index.html">reStructuredText mode</a>.</li>
<li>Add a <a href="../mode/python/index.html">Python mode</a>.</li>
<li>Add a <a href="../mode/plsql/index.html">PL/SQL mode</a>.</li>
<li><code>coordsChar</code> now works</li>
<li>Fix a problem where <code>onCursorActivity</code> interfered with <code>onChange</code>.</li>
<li>Fix a number of scrolling and mouse-click-position glitches.</li>
<li>Pass information about the changed lines to <code>onChange</code>.</li>
<li>Support cmd-up/down on OS X.</li>
<li>Add triple-click line selection.</li>
<li>Don't handle shift when changing the selection through the API.</li>
<li>Support <code>"nocursor"</code> mode for <code>readOnly</code> option.</li>
<li>Add an <code>onHighlightComplete</code> option.</li>
<li>Fix the context menu for Firefox.</li>
</ul>
<p class="rel">28-03-2011: <a href="https://codemirror.net/codemirror-2.0.zip">Version 2.0</a>:</p>
<p class="rel-note">CodeMirror 2 is a complete rewrite that's
faster, smaller, simpler to use, and less dependent on browser
quirks. See <a href="internals.html">this</a>
and <a href="http://groups.google.com/group/codemirror/browse_thread/thread/5a8e894024a9f580">this</a>
for more information.</p>
<p class="rel">22-02-2011: <a href="https://github.com/codemirror/codemirror/tree/beta2">Version 2.0 beta 2</a>:</p>
<p class="rel-note">Somewhat more mature API, lots of bugs shaken out.</p>
<p class="rel">17-02-2011: <a href="https://codemirror.net/codemirror-0.94.zip">Version 0.94</a>:</p>
<ul class="rel-note">
<li><code>tabMode: "spaces"</code> was modified slightly (now indents when something is selected).</li>
<li>Fixes a bug that would cause the selection code to break on some IE versions.</li>
<li>Disabling spell-check on WebKit browsers now works.</li>
</ul>
<p class="rel">08-02-2011: <a href="https://codemirror.net/">Version 2.0 beta 1</a>:</p>
<p class="rel-note">CodeMirror 2 is a complete rewrite of
CodeMirror, no longer depending on an editable frame.</p>
<p class="rel">19-01-2011: <a href="https://codemirror.net/codemirror-0.93.zip">Version 0.93</a>:</p>
<ul class="rel-note">
<li>Added a <a href="contrib/regex/index.html">Regular Expression</a> parser.</li>
<li>Fixes to the PHP parser.</li>
<li>Support for regular expression in search/replace.</li>
<li>Add <code>save</code> method to instances created with <code>fromTextArea</code>.</li>
<li>Add support for MS T-SQL in the SQL parser.</li>
<li>Support use of CSS classes for highlighting brackets.</li>
<li>Fix yet another hang with line-numbering in hidden editors.</li>
</ul>
</section>
<section id=v1>
<h2>Version 0.x</h2>
<p class="rel">28-03-2011: <a href="https://codemirror.net/codemirror-1.0.zip">Version 1.0</a>:</p>
<ul class="rel-note">
<li>Fix error when debug history overflows.</li>
<li>Refine handling of C# verbatim strings.</li>
<li>Fix some issues with JavaScript indentation.</li>
</ul>
<p class="rel">17-12-2010: <a href="https://codemirror.net/codemirror-0.92.zip">Version 0.92</a>:</p>
<ul class="rel-note">
<li>Make CodeMirror work in XHTML documents.</li>
<li>Fix bug in handling of backslashes in Python strings.</li>
<li>The <code>styleNumbers</code> option is now officially
supported and documented.</li>
<li><code>onLineNumberClick</code> option added.</li>
<li>More consistent names <code>onLoad</code> and
<code>onCursorActivity</code> callbacks. Old names still work, but
are deprecated.</li>
<li>Add a <a href="contrib/freemarker/index.html">Freemarker</a> mode.</li>
</ul>
<p class="rel">11-11-2010: <a
href="https://codemirror.net/codemirror-0.91.zip">Version 0.91</a>:</p>
<ul class="rel-note">
<li>Adds support for <a href="contrib/java">Java</a>.</li>
<li>Small additions to the <a href="contrib/php">PHP</a> and <a href="contrib/sql">SQL</a> parsers.</li>
<li>Work around various <a href="https://bugs.webkit.org/show_bug.cgi?id=47806">Webkit</a> <a href="https://bugs.webkit.org/show_bug.cgi?id=23474">issues</a>.</li>
<li>Fix <code>toTextArea</code> to update the code in the textarea.</li>
<li>Add a <code>noScriptCaching</code> option (hack to ease development).</li>
<li>Make sub-modes of <a href="mixedtest.html">HTML mixed</a> mode configurable.</li>
</ul>
<p class="rel">02-10-2010: <a
href="https://codemirror.net/codemirror-0.9.zip">Version 0.9</a>:</p>
<ul class="rel-note">
<li>Add support for searching backwards.</li>
<li>There are now parsers for <a href="contrib/scheme/index.html">Scheme</a>, <a href="contrib/xquery/index.html">XQuery</a>, and <a href="contrib/ometa/index.html">OmetaJS</a>.</li>
<li>Makes <code>height: "dynamic"</code> more robust.</li>
<li>Fixes bug where paste did not work on OS X.</li>
<li>Add a <code>enterMode</code> and <code>electricChars</code> options to make indentation even more customizable.</li>
<li>Add <code>firstLineNumber</code> option.</li>
<li>Fix bad handling of <code>@media</code> rules by the CSS parser.</li>
<li>Take a new, more robust approach to working around the invisible-last-line bug in WebKit.</li>
</ul>
<p class="rel">22-07-2010: <a
href="https://codemirror.net/codemirror-0.8.zip">Version 0.8</a>:</p>
<ul class="rel-note">
<li>Add a <code>cursorCoords</code> method to find the screen
coordinates of the cursor.</li>
<li>A number of fixes and support for more syntax in the PHP parser.</li>
<li>Fix indentation problem with JSON-mode JS parser in Webkit.</li>
<li>Add a <a href="compress.html">minification</a> UI.</li>
<li>Support a <code>height: dynamic</code> mode, where the editor's
height will adjust to the size of its content.</li>
<li>Better support for IME input mode.</li>
<li>Fix JavaScript parser getting confused when seeing a no-argument
function call.</li>
<li>Have CSS parser see the difference between selectors and other
identifiers.</li>
<li>Fix scrolling bug when pasting in a horizontally-scrolled
editor.</li>
<li>Support <code>toTextArea</code> method in instances created with
<code>fromTextArea</code>.</li>
<li>Work around new Opera cursor bug that causes the cursor to jump
when pressing backspace at the end of a line.</li>
</ul>
<p class="rel">27-04-2010: <a
href="https://codemirror.net/codemirror-0.67.zip">Version
0.67</a>:</p>
<p class="rel-note">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
<code>"\\"</code> correctly. Have <code>jumpToLine</code> work on
line handles, and add <code>cursorLine</code> function to fetch the
line handle where the cursor currently is. Add new
<code>setStylesheet</code> function to switch style-sheets in a
running editor.</p>
<p class="rel">01-03-2010: <a
href="https://codemirror.net/codemirror-0.66.zip">Version
0.66</a>:</p>
<p class="rel-note">Adds <code>removeLine</code> method to API.
Introduces the <a href="contrib/plsql/index.html">PLSQL parser</a>.
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.</p>
<p class="rel">12-11-2009: <a
href="https://codemirror.net/codemirror-0.65.zip">Version
0.65</a>:</p>
<p class="rel-note">Add support for having both line-wrapping and
line-numbers turned on, make paren-highlighting style customisable
(<code>markParen</code> and <code>unmarkParen</code> config
options), work around a selection bug that Opera
<em>re</em>introduced in version 10.</p>
<p class="rel">23-10-2009: <a
href="https://codemirror.net/codemirror-0.64.zip">Version
0.64</a>:</p>
<p class="rel-note">Solves some issues introduced by the
paste-handling changes from the previous release. Adds
<code>setSpellcheck</code>, <code>setTextWrapping</code>,
<code>setIndentUnit</code>, <code>setUndoDepth</code>,
<code>setTabMode</code>, and <code>setLineNumbers</code> to
customise a running editor. Introduces an <a
href="contrib/sql/index.html">SQL</a> parser. Fixes a few small
problems in the <a href="contrib/python/index.html">Python</a>
parser. And, as usual, add workarounds for various newly discovered
browser incompatibilities.</p>
<p class="rel">31-08-2009: <a href="https://codemirror.net/codemirror-0.63.zip">Version 0.63</a>:</p>
<p class="rel-note"> Overhaul of paste-handling (less fragile), fixes for several
serious IE8 issues (cursor jumping, end-of-document bugs) and a number
of small problems.</p>
<p class="rel">30-05-2009: <a href="https://codemirror.net/codemirror-0.62.zip">Version 0.62</a>:</p>
<p class="rel-note">Introduces <a href="contrib/python/index.html">Python</a>
and <a href="contrib/lua/index.html">Lua</a> parsers. Add
<code>setParser</code> (on-the-fly mode changing) and
<code>clearHistory</code> methods. Make parsing passes time-based
instead of lines-based (see the <code>passTime</code> option).</p>
</section>
</article>
<!doctype html>
<title>CodeMirror: Reporting Bugs</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="docs.css">
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="logo.png"></a>
<ul>
<li><a href="../index.html">Home</a>
<li><a href="manual.html">Manual</a>
<li><a href="https://github.com/codemirror/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Reporting bugs</a>
</ul>
</div>
<article>
<h2>Reporting bugs effectively</h2>
<div class="left">
<p>So you found a problem in CodeMirror. By all means, report it! Bug
reports from users are the main drive behind improvements to
CodeMirror. But first, please read over these points:</p>
<ol>
<li>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.</li>
<li>Include information about <strong>the browser in which the
problem occurred</strong>. 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.</li>
<li>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.</li>
<li>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 reproduce
the error. We can not fix something that we can not observe.</li>
<li>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 <a href="http://jsbin.com/ihunin/1/edit">jsbin.com</a>, enter
it there, press save, and include the resulting link in your bug
report.</li>
</ol>
</div>
</article>
<!doctype html>
<title>CodeMirror: Version 2.2 upgrade guide</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="docs.css">
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="logo.png"></a>
<ul>
<li><a href="../index.html">Home</a>
<li><a href="manual.html">Manual</a>
<li><a href="https://github.com/codemirror/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">2.2 upgrade guide</a>
</ul>
</div>
<article>
<h2>Upgrading to v2.2</h2>
<p>There are a few things in the 2.2 release that require some care
when upgrading.</p>
<h3>No more default.css</h3>
<p>The default theme is now included
in <a href="../lib/codemirror.css"><code>codemirror.css</code></a>, so
you do not have to included it separately anymore. (It was tiny, so
even if you're not using it, the extra data overhead is negligible.)
<h3>Different key customization</h3>
<p>CodeMirror has moved to a system
where <a href="manual.html#option_keyMap">keymaps</a> are used to
bind behavior to keys. This means <a href="../demo/emacs.html">custom
bindings</a> are now possible.</p>
<p>Three options that influenced key
behavior, <code>tabMode</code>, <code>enterMode</code>,
and <code>smartHome</code>, are no longer supported. Instead, you can
provide custom bindings to influence the way these keys act. This is
done through the
new <a href="manual.html#option_extraKeys"><code>extraKeys</code></a>
option, which can hold an object mapping key names to functionality. A
simple example would be:</p>
<pre> extraKeys: {
"Ctrl-S": function(instance) { saveText(instance.getValue()); },
"Ctrl-/": "undo"
}</pre>
<p>Keys can be mapped either to functions, which will be given the
editor instance as argument, or to strings, which are mapped through
functions through the <code>CodeMirror.commands</code> table, which
contains all the built-in editing commands, and can be inspected and
extended by external code.</p>
<p>By default, the <code>Home</code> key is bound to
the <code>"goLineStartSmart"</code> command, which moves the cursor to
the first non-whitespace character on the line. You can set do this to
make it always go to the very start instead:</p>
<pre> extraKeys: {"Home": "goLineStart"}</pre>
<p>Similarly, <code>Enter</code> is bound
to <code>"newlineAndIndent"</code> by default. You can bind it to
something else to get different behavior. To disable special handling
completely and only get a newline character inserted, you can bind it
to <code>false</code>:</p>
<pre> extraKeys: {"Enter": false}</pre>
<p>The same works for <code>Tab</code>. If you don't want CodeMirror
to handle it, bind it to <code>false</code>. The default behaviour is
to indent the current line more (<code>"indentMore"</code> command),
and indent it less when shift is held (<code>"indentLess"</code>).
There are also <code>"indentAuto"</code> (smart indent)
and <code>"insertTab"</code> commands provided for alternate
behaviors. Or you can write your own handler function to do something
different altogether.</p>
<h3>Tabs</h3>
<p>Handling of tabs changed completely. The display width of tabs can
now be set with the <code>tabSize</code> option, and tabs can
be <a href="../demo/visibletabs.html">styled</a> by setting CSS rules
for the <code>cm-tab</code> class.</p>
<p>The default width for tabs is now 4, as opposed to the 8 that is
hard-wired into browsers. If you are relying on 8-space tabs, make
sure you explicitly set <code>tabSize: 8</code> in your options.</p>
</article>
<!doctype html>
<title>CodeMirror: Version 3 upgrade guide</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="docs.css">
<script src="../lib/codemirror.js"></script>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../addon/runmode/runmode.js"></script>
<script src="../addon/runmode/colorize.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../mode/xml/xml.js"></script>
<script src="../mode/css/css.js"></script>
<script src="../mode/htmlmixed/htmlmixed.js"></script>
<script src="activebookmark.js"></script>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="logo.png"></a>
<ul>
<li><a href="../index.html">Home</a>
<li><a href="manual.html">Manual</a>
<li><a href="https://github.com/codemirror/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#upgrade">Upgrade guide</a>
<li><a href="#dom">DOM structure</a></li>
<li><a href="#gutters">Gutter model</a></li>
<li><a href="#events">Event handling</a></li>
<li><a href="#marktext">markText method arguments</a></li>
<li><a href="#folding">Line folding</a></li>
<li><a href="#lineclass">Line CSS classes</a></li>
<li><a href="#positions">Position properties</a></li>
<li><a href="#matchbrackets">Bracket matching</a></li>
<li><a href="#modes">Mode management</a></li>
<li><a href="#new">New features</a></li>
</ul>
</div>
<article>
<h2 id=upgrade>Upgrading to version 3</h2>
<p>Version 3 does not depart too much from 2.x API, and sites that use
CodeMirror in a very simple way might be able to upgrade without
trouble. But it does introduce a number of incompatibilities. Please
at least skim this text before upgrading.</p>
<p>Note that <strong>version 3 drops full support for Internet
Explorer 7</strong>. The editor will mostly work on that browser, but
it'll be significantly glitchy.</p>
<section id=dom>
<h2>DOM structure</h2>
<p>This one is the most likely to cause problems. The internal
structure of the editor has changed quite a lot, mostly to implement a
new scrolling model.</p>
<p>Editor height is now set on the outer wrapper element (CSS
class <code>CodeMirror</code>), not on the scroller element
(<code>CodeMirror-scroll</code>).</p>
<p>Other nodes were moved, dropped, and added. If you have any code
that makes assumptions about the internal DOM structure of the editor,
you'll have to re-test it and probably update it to work with v3.</p>
<p>See the <a href="manual.html#styling">styling section</a> of the
manual for more information.</p>
</section>
<section id=gutters>
<h2>Gutter model</h2>
<p>In CodeMirror 2.x, there was a single gutter, and line markers
created with <code>setMarker</code> would have to somehow coexist with
the line numbers (if present). Version 3 allows you to specify an
array of gutters, <a href="manual.html#option_gutters">by class
name</a>,
use <a href="manual.html#setGutterMarker"><code>setGutterMarker</code></a>
to add or remove markers in individual gutters, and clear whole
gutters
with <a href="manual.html#clearGutter"><code>clearGutter</code></a>.
Gutter markers are now specified as DOM nodes, rather than HTML
snippets.</p>
<p>The gutters no longer horizontally scrolls along with the content.
The <code>fixedGutter</code> option was removed (since it is now the
only behavior).</p>
<pre data-lang="text/html">
&lt;style>
/* Define a gutter style */
.note-gutter { width: 3em; background: cyan; }
&lt;/style>
&lt;script>
// Create an instance with two gutters -- line numbers and notes
var cm = new CodeMirror(document.body, {
gutters: ["note-gutter", "CodeMirror-linenumbers"],
lineNumbers: true
});
// Add a note to line 0
cm.setGutterMarker(0, "note-gutter", document.createTextNode("hi"));
&lt;/script>
</pre>
</section>
<section id=events>
<h2>Event handling</h2>
<p>Most of the <code>onXYZ</code> options have been removed. The same
effect is now obtained by calling
the <a href="manual.html#on"><code>on</code></a> method with a string
identifying the event type. Multiple handlers can now be registered
(and individually unregistered) for an event, and objects such as line
handlers now also expose events. See <a href="manual.html#events">the
full list here</a>.</p>
<p>(The <code>onKeyEvent</code> and <code>onDragEvent</code> options,
which act more as hooks than as event handlers, are still there in
their old form.)</p>
<pre data-lang="javascript">
cm.on("change", function(cm, change) {
console.log("something changed! (" + change.origin + ")");
});
</pre>
</section>
<section id=marktext>
<h2>markText method arguments</h2>
<p>The <a href="manual.html#markText"><code>markText</code></a> method
(which has gained some interesting new features, such as creating
atomic and read-only spans, or replacing spans with widgets) no longer
takes the CSS class name as a separate argument, but makes it an
optional field in the options object instead.</p>
<pre data-lang="javascript">
// Style first ten lines, and forbid the cursor from entering them
cm.markText({line: 0, ch: 0}, {line: 10, ch: 0}, {
className: "magic-text",
inclusiveLeft: true,
atomic: true
});
</pre>
</section>
<section id=folding>
<h2>Line folding</h2>
<p>The interface for hiding lines has been
removed. <a href="manual.html#markText"><code>markText</code></a> can
now be used to do the same in a more flexible and powerful way.</p>
<p>The <a href="../demo/folding.html">folding script</a> has been
updated to use the new interface, and should now be more robust.</p>
<pre data-lang="javascript">
// Fold a range, replacing it with the text "??"
var range = cm.markText({line: 4, ch: 2}, {line: 8, ch: 1}, {
replacedWith: document.createTextNode("??"),
// Auto-unfold when cursor moves into the range
clearOnEnter: true
});
// Get notified when auto-unfolding
CodeMirror.on(range, "clear", function() {
console.log("boom");
});
</pre>
</section>
<section id=lineclass>
<h2>Line CSS classes</h2>
<p>The <code>setLineClass</code> method has been replaced
by <a href="manual.html#addLineClass"><code>addLineClass</code></a>
and <a href="manual.html#removeLineClass"><code>removeLineClass</code></a>,
which allow more modular control over the classes attached to a line.</p>
<pre data-lang="javascript">
var marked = cm.addLineClass(10, "background", "highlighted-line");
setTimeout(function() {
cm.removeLineClass(marked, "background", "highlighted-line");
});
</pre>
</section>
<section id=positions>
<h2>Position properties</h2>
<p>All methods that take or return objects that represent screen
positions now use <code>{left, top, bottom, right}</code> properties
(not always all of them) instead of the <code>{x, y, yBot}</code> used
by some methods in v2.x.</p>
<p>Affected methods
are <a href="manual.html#cursorCoords"><code>cursorCoords</code></a>, <a href="manual.html#charCoords"><code>charCoords</code></a>, <a href="manual.html#coordsChar"><code>coordsChar</code></a>,
and <a href="manual.html#getScrollInfo"><code>getScrollInfo</code></a>.</p>
</section>
<section id=matchbrackets>
<h2>Bracket matching no longer in core</h2>
<p>The <a href="manual.html#addon_matchbrackets"><code>matchBrackets</code></a>
option is no longer defined in the core editor.
Load <code>addon/edit/matchbrackets.js</code> to enable it.</p>
</section>
<section id=modes>
<h2>Mode management</h2>
<p>The <code>CodeMirror.listModes</code>
and <code>CodeMirror.listMIMEs</code> functions, used for listing
defined modes, are gone. You are now encouraged to simply
inspect <code>CodeMirror.modes</code> (mapping mode names to mode
constructors) and <code>CodeMirror.mimeModes</code> (mapping MIME
strings to mode specs).</p>
</section>
<section id=new>
<h2>New features</h2>
<p>Some more reasons to upgrade to version 3.</p>
<ul>
<li>Bi-directional text support. CodeMirror will now mostly do the
right thing when editing Arabic or Hebrew text.</li>
<li>Arbitrary line heights. Using fonts with different heights
inside the editor (whether off by one pixel or fifty) is now
supported and handled gracefully.</li>
<li>In-line widgets. See <a href="../demo/widget.html">the demo</a>
and <a href="manual.html#addLineWidget">the docs</a>.</li>
<li>Defining custom options
with <a href="manual.html#defineOption"><code>CodeMirror.defineOption</code></a>.</li>
</ul>
</section>
</article>
<script>setTimeout(function(){CodeMirror.colorize();}, 20);</script>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment