first commit
This commit is contained in:
BIN
codemirror/doc/baboon.png
Normal file
BIN
codemirror/doc/baboon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
153
codemirror/doc/baboon_vector.svg
Normal file
153
codemirror/doc/baboon_vector.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 17 KiB |
174
codemirror/doc/compress.html
Normal file
174
codemirror/doc/compress.html
Normal file
@@ -0,0 +1,174 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CodeMirror: Compression Helper</title>
|
||||
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
|
||||
<link rel="stylesheet" type="text/css" href="docs.css"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
|
||||
|
||||
<div class="grey">
|
||||
<img src="baboon.png" class="logo" alt="logo"/>
|
||||
<pre>
|
||||
/* Script compression
|
||||
helper */
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<p>To optimize loading CodeMirror, especially when including a
|
||||
bunch of different modes, it is recommended that you combine and
|
||||
minify (and preferably also gzip) the scripts. This page makes
|
||||
those first two steps very easy. Simply select the version and
|
||||
scripts you need in the form below, and
|
||||
click <strong>Compress</strong> to download the minified script
|
||||
file.</p>
|
||||
|
||||
<form id="form" action="http://marijnhaverbeke.nl/uglifyjs" method="post">
|
||||
<input type="hidden" id="download" name="download" value="codemirror-compressed.js"/>
|
||||
<p>Version: <select id="version" onchange="setVersion(this);" style="padding: 1px">
|
||||
<option value="http://codemirror.net/">HEAD</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v3.0;f=">3.0</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v3.0rc2;f=">3.0rc2</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v3.0rc1;f=">3.0rc1</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v3.0beta2;f=">3.0beta2</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v3.0beta1;f=">3.0beta1</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.37;f=">2.37</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.36;f=">2.36</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.35;f=">2.35</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.34;f=">2.34</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.33;f=">2.33</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.32;f=">2.32</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.31;f=">2.31</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.3;f=">2.3</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.25;f=">2.25</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.24;f=">2.24</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.23;f=">2.23</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.22;f=">2.22</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.21;f=">2.21</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.2;f=">2.2</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.18;f=">2.18</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.16;f=">2.16</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.15;f=">2.15</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.13;f=">2.13</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.12;f=">2.12</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.11;f=">2.11</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.1;f=">2.1</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.02;f=">2.02</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.01;f=">2.01</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v2.0;f=">2.0</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=beta2;f=">beta2</option>
|
||||
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=beta1;f=">beta1</option>
|
||||
</select></p>
|
||||
|
||||
<select multiple="multiple" size="20" name="code_url" style="width: 40em;" class="field" id="files">
|
||||
<optgroup label="CodeMirror Library">
|
||||
<option value="http://codemirror.net/lib/codemirror.js" selected>codemirror.js</option>
|
||||
</optgroup>
|
||||
<optgroup label="Modes">
|
||||
<option value="http://codemirror.net/mode/clike/clike.js">clike.js</option>
|
||||
<option value="http://codemirror.net/mode/clojure/clojure.js">clojure.js</option>
|
||||
<option value="http://codemirror.net/mode/coffeescript/coffeescript.js">coffeescript.js</option>
|
||||
<option value="http://codemirror.net/mode/commonlisp/commonlisp.js">commonlisp.js</option>
|
||||
<option value="http://codemirror.net/mode/css/css.js">css.js</option>
|
||||
<option value="http://codemirror.net/mode/diff/diff.js">diff.js</option>
|
||||
<option value="http://codemirror.net/mode/ecl/ecl.js">ecl.js</option>
|
||||
<option value="http://codemirror.net/mode/erlang/erlang.js">erlang.js</option>
|
||||
<option value="http://codemirror.net/mode/gfm/gfm.js">gfm.js</option>
|
||||
<option value="http://codemirror.net/mode/go/go.js">go.js</option>
|
||||
<option value="http://codemirror.net/mode/groovy/groovy.js">groovy.js</option>
|
||||
<option value="http://codemirror.net/mode/haskell/haskell.js">haskell.js</option>
|
||||
<option value="http://codemirror.net/mode/haxe/haxe.js">haxe.js</option>
|
||||
<option value="http://codemirror.net/mode/htmlembedded/htmlembedded.js">htmlembedded.js</option>
|
||||
<option value="http://codemirror.net/mode/htmlmixed/htmlmixed.js">htmlmixed.js</option>
|
||||
<option value="http://codemirror.net/mode/http/http.js">http.js</option>
|
||||
<option value="http://codemirror.net/mode/javascript/javascript.js">javascript.js</option>
|
||||
<option value="http://codemirror.net/mode/jinja2/jinja2.js">jinja2.js</option>
|
||||
<option value="http://codemirror.net/mode/less/less.js">less.js</option>
|
||||
<option value="http://codemirror.net/mode/lua/lua.js">lua.js</option>
|
||||
<option value="http://codemirror.net/mode/markdown/markdown.js">markdown.js</option>
|
||||
<option value="http://codemirror.net/mode/mysql/mysql.js">mysql.js</option>
|
||||
<option value="http://codemirror.net/mode/ntriples/ntriples.js">ntriples.js</option>
|
||||
<option value="http://codemirror.net/mode/ocaml/ocaml.js">ocaml.js</option>
|
||||
<option value="http://codemirror.net/mode/pascal/pascal.js">pascal.js</option>
|
||||
<option value="http://codemirror.net/mode/perl/perl.js">perl.js</option>
|
||||
<option value="http://codemirror.net/mode/php/php.js">php.js</option>
|
||||
<option value="http://codemirror.net/mode/pig/pig.js">pig.js</option>
|
||||
<option value="http://codemirror.net/mode/plsql/plsql.js">plsql.js</option>
|
||||
<option value="http://codemirror.net/mode/properties/properties.js">properties.js</option>
|
||||
<option value="http://codemirror.net/mode/python/python.js">python.js</option>
|
||||
<option value="http://codemirror.net/mode/r/r.js">r.js</option>
|
||||
<option value="http://codemirror.net/mode/rpm/changes/changes.js">rpm/changes.js</option>
|
||||
<option value="http://codemirror.net/mode/rpm/spec/spec.js">rpm/spec.js</option>
|
||||
<option value="http://codemirror.net/mode/rst/rst.js">rst.js</option>
|
||||
<option value="http://codemirror.net/mode/ruby/ruby.js">ruby.js</option>
|
||||
<option value="http://codemirror.net/mode/rust/rust.js">rust.js</option>
|
||||
<option value="http://codemirror.net/mode/scheme/scheme.js">scheme.js</option>
|
||||
<option value="http://codemirror.net/mode/shell/shell.js">shell.js</option>
|
||||
<option value="http://codemirror.net/mode/sieve/sieve.js">sieve.js</option>
|
||||
<option value="http://codemirror.net/mode/smalltalk/smalltalk.js">smalltalk.js</option>
|
||||
<option value="http://codemirror.net/mode/smarty/smarty.js">smarty.js</option>
|
||||
<option value="http://codemirror.net/mode/sql/sql.js">sql.js</option>
|
||||
<option value="http://codemirror.net/mode/sparql/sparql.js">sparql.js</option>
|
||||
<option value="http://codemirror.net/mode/stex/stex.js">stex.js</option>
|
||||
<option value="http://codemirror.net/mode/tiddlywiki/tiddlywiki.js">tiddlywiki.js</option>
|
||||
<option value="http://codemirror.net/mode/tiki/tiki.js">tiki.js</option>
|
||||
<option value="http://codemirror.net/mode/vb/vb.js">vb.js</option>
|
||||
<option value="http://codemirror.net/mode/vbscript/vbscript.js">vbscript.js</option>
|
||||
<option value="http://codemirror.net/mode/velocity/velocity.js">velocity.js</option>
|
||||
<option value="http://codemirror.net/mode/verilog/verilog.js">verilog.js</option>
|
||||
<option value="http://codemirror.net/mode/xml/xml.js">xml.js</option>
|
||||
<option value="http://codemirror.net/mode/xquery/xquery.js">xquery.js</option>
|
||||
<option value="http://codemirror.net/mode/yaml/yaml.js">yaml.js</option>
|
||||
<option value="http://codemirror.net/mode/z80/z80.js">z80.js</option>
|
||||
</optgroup>
|
||||
<optgroup label="Utilities and add-ons">
|
||||
<option value="http://codemirror.net/lib/util/overlay.js">overlay.js</option>
|
||||
<option value="http://codemirror.net/lib/util/multiplex.js">multiplex.js</option>
|
||||
<option value="http://codemirror.net/lib/util/runmode.js">runmode.js</option>
|
||||
<option value="http://codemirror.net/lib/util/simple-hint.js">simple-hint.js</option>
|
||||
<option value="http://codemirror.net/lib/util/javascript-hint.js">javascript-hint.js</option>
|
||||
<option value="http://codemirror.net/lib/util/xml-hint.js">xml-hint.js</option>
|
||||
<option value="http://codemirror.net/lib/util/foldcode.js">foldcode.js</option>
|
||||
<option value="http://codemirror.net/lib/util/dialog.js">dialog.js</option>
|
||||
<option value="http://codemirror.net/lib/util/search.js">search.js</option>
|
||||
<option value="http://codemirror.net/lib/util/searchcursor.js">searchcursor.js</option>
|
||||
<option value="http://codemirror.net/lib/util/matchbrackets.js">matchbrackets.js</option>
|
||||
<option value="http://codemirror.net/lib/util/formatting.js">formatting.js</option>
|
||||
<option value="http://codemirror.net/lib/util/match-highlighter.js">match-highlighter.js</option>
|
||||
<option value="http://codemirror.net/lib/util/closetag.js">closetag.js</option>
|
||||
<option value="http://codemirror.net/lib/util/loadmode.js">loadmode.js</option>
|
||||
</optgroup>
|
||||
<optgroup label="Keymaps">
|
||||
<option value="http://codemirror.net/keymap/emacs.js">emacs.js</option>
|
||||
<option value="http://codemirror.net/keymap/vim.js">vim.js</option>
|
||||
</optgroup>
|
||||
</select></p>
|
||||
|
||||
<p>
|
||||
<button type="submit">Compress</button> with <a href="http://github.com/mishoo/UglifyJS/">UglifyJS</a>
|
||||
</p>
|
||||
|
||||
<p>Custom code to add to the compressed file:<textarea name="js_code" style="width: 100%; height: 15em;" class="field"></textarea></p>
|
||||
</form>
|
||||
|
||||
<script type="text/javascript">
|
||||
function setVersion(ver) {
|
||||
var urlprefix = ver.options[ver.selectedIndex].value;
|
||||
var select = document.getElementById("files"), m;
|
||||
for (var optgr = select.firstChild; optgr; optgr = optgr.nextSibling)
|
||||
for (var opt = optgr.firstChild; opt; opt = opt.nextSibling) {
|
||||
if (opt.nodeName != "OPTION")
|
||||
continue;
|
||||
else if (m = opt.value.match(/^http:\/\/codemirror.net\/(.*)$/))
|
||||
opt.value = urlprefix + m[1];
|
||||
else if (m = opt.value.match(/http:\/\/marijnhaverbeke.nl\/git\/codemirror\?a=blob_plain;hb=[^;]+;f=(.*)$/))
|
||||
opt.value = urlprefix + m[1];
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
167
codemirror/doc/docs.css
Normal file
167
codemirror/doc/docs.css
Normal file
@@ -0,0 +1,167 @@
|
||||
body {
|
||||
font-family: Droid Sans, Arial, sans-serif;
|
||||
/* line-height: 1.5;
|
||||
max-width: 64.3em;*/
|
||||
margin: 3em auto;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
letter-spacing: -3px;
|
||||
font-size: 3.23em;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.23em;
|
||||
font-weight: bold;
|
||||
margin: .5em 0;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
margin: .4em 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #eee;
|
||||
-moz-border-radius: 6px;
|
||||
-webkit-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
pre.code {
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
.grey {
|
||||
background-color: #eee;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1.65em;
|
||||
margin-top: 0.825em;
|
||||
padding: 0.825em 1.65em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
img.logo {
|
||||
position: absolute;
|
||||
right: -1em;
|
||||
bottom: 4px;
|
||||
max-width: 23.6875em; /* Scale image down with text to prevent clipping */
|
||||
}
|
||||
|
||||
.grey > pre {
|
||||
background:none;
|
||||
border-radius:0;
|
||||
padding:0;
|
||||
margin:0;
|
||||
font-size:2.2em;
|
||||
line-height:1.2em;
|
||||
}
|
||||
|
||||
a:link, a:visited, .quasilink {
|
||||
color: #df0019;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover, .quasilink:hover {
|
||||
color: #800004;
|
||||
}
|
||||
|
||||
h1 a:link, h1 a:visited, h1 a:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding-left: 1.2em;
|
||||
}
|
||||
|
||||
a.download {
|
||||
color: white;
|
||||
background-color: #df0019;
|
||||
width: 100%;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 1.23em;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
-moz-border-radius: 6px;
|
||||
-webkit-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
padding: .5em 0;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
a.download:hover {
|
||||
background-color: #bb0010;
|
||||
}
|
||||
|
||||
.rel {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.rel-note {
|
||||
color: #777;
|
||||
font-size: .9em;
|
||||
margin-top: .1em;
|
||||
}
|
||||
|
||||
.logo-braces {
|
||||
color: #df0019;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
.blk {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.left {
|
||||
margin-right: 20.68em;
|
||||
max-width: 37em;
|
||||
padding-right: 6.53em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.left1 {
|
||||
width: 15.24em;
|
||||
padding-right: 6.45em;
|
||||
}
|
||||
|
||||
.left2 {
|
||||
max-width: 15.24em;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 20.68em;
|
||||
margin-left: -20.68em;
|
||||
}
|
||||
|
||||
.leftbig {
|
||||
width: 42.44em;
|
||||
padding-right: 6.53em;
|
||||
}
|
||||
|
||||
.rightsmall {
|
||||
width: 15.24em;
|
||||
}
|
||||
|
||||
.clear:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: " ";
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
.clear { display: inline-block; }
|
||||
/* start commented backslash hack \*/
|
||||
* html .clear { height: 1%; }
|
||||
.clear { display: block; }
|
||||
/* close commented backslash hack */
|
||||
505
codemirror/doc/internals.html
Normal file
505
codemirror/doc/internals.html
Normal file
@@ -0,0 +1,505 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CodeMirror: Internals</title>
|
||||
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
|
||||
<link rel="stylesheet" type="text/css" href="docs.css"/>
|
||||
<style>dl dl {margin: 0;} .update {color: #d40 !important}</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
|
||||
|
||||
<div class="grey">
|
||||
<img src="baboon.png" class="logo" alt="logo"/>
|
||||
<pre>
|
||||
/* (Re-) Implementing A Syntax-
|
||||
Highlighting Editor in JavaScript */
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="clear"><div class="leftbig blk">
|
||||
|
||||
<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="http://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.</a>
|
||||
|
||||
<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="http://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>
|
||||
|
||||
<h2 id="approach">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>
|
||||
|
||||
<h2 id="input">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>
|
||||
|
||||
<h2 id="selection">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>
|
||||
|
||||
<h2 id="update">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>
|
||||
|
||||
<h2 id="parse">Parsers can be Simple</h2>
|
||||
|
||||
<p>When I wrote CodeMirror 1, I
|
||||
thought <a href="http://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>
|
||||
|
||||
<h2 id="summary">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>
|
||||
|
||||
<h2 id="btree">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>
|
||||
|
||||
<h2 id="keymap">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>
|
||||
|
||||
</div><div class="rightsmall blk">
|
||||
|
||||
<h2>Contents</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="#intro">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></div>
|
||||
|
||||
<div style="height: 2em"> </div>
|
||||
|
||||
</body></html>
|
||||
1493
codemirror/doc/manual.html
Normal file
1493
codemirror/doc/manual.html
Normal file
File diff suppressed because it is too large
Load Diff
421
codemirror/doc/oldrelease.html
Normal file
421
codemirror/doc/oldrelease.html
Normal file
@@ -0,0 +1,421 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CodeMirror</title>
|
||||
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
|
||||
<link rel="stylesheet" type="text/css" href="docs.css"/>
|
||||
<link rel="alternate" href="http://twitter.com/statuses/user_timeline/242283288.rss" type="application/rss+xml"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
|
||||
|
||||
<div class="grey">
|
||||
<img src="baboon.png" class="logo" alt="logo"/>
|
||||
<pre>
|
||||
/* Old release
|
||||
history */
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<p class="rel">22-06-2012: <a href="http://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/marijnh/CodeMirror/compare/v2.25...v2.3">fixes</a>.</li>
|
||||
</ul>
|
||||
|
||||
<p class="rel">23-05-2012: <a href="http://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="http://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="http://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="http://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#util_foldcode">code folder</a>.</li>
|
||||
<li>Add a script for <a href="manual.html#util_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="http://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="http://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="http://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="http://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="../lib/util/"><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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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.</a>
|
||||
|
||||
<p class="rel">28-03-2011: <a href="http://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">22-02-2011: <a href="https://github.com/marijnh/codemirror/tree/beta2">Version 2.0 beta 2</a>:</p>
|
||||
<p class="rel-note">Somewhat more mature API, lots of bugs shaken out.</a>
|
||||
|
||||
<p class="rel">17-02-2011: <a href="http://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="http://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="http://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>
|
||||
|
||||
<p class="rel">17-12-2010: <a href="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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"><em>31-08-2009</em>: <a
|
||||
href="http://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"><em>30-05-2009</em>: <a
|
||||
href="http://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>
|
||||
|
||||
</body></html>
|
||||
83
codemirror/doc/realworld.html
Normal file
83
codemirror/doc/realworld.html
Normal file
@@ -0,0 +1,83 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CodeMirror: Real-world uses</title>
|
||||
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
|
||||
<link rel="stylesheet" type="text/css" href="docs.css"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
|
||||
|
||||
<div class="grey">
|
||||
<img src="baboon.png" class="logo" alt="logo"/>
|
||||
<pre>
|
||||
/* Real world uses,
|
||||
full list */
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<p><a href="mailto:marijnh@gmail.com">Contact me</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://bluegriffon.org/">BlueGriffon</a> (HTML editor)</li>
|
||||
<li><a href="http://cargocollective.com/">Cargo Collective</a> (creative publishing platform)</li>
|
||||
<li><a href="http://www.codebugapp.com/">Codebug</a> (PHP Xdebug front-end)</li>
|
||||
<li><a href="http://code.google.com/p/codemirror2-gwt/">CodeMirror2-GWT</a> (Google Web Toolkit wrapper)</li>
|
||||
<li><a href="http://codepen.io">Codepen</a> (gallery of animations)</li>
|
||||
<li><a href="http://www.codeschool.com/">Code School</a> (online tech learning environment)</li>
|
||||
<li><a href="http://codev.it/">Codev</a> (collaborative IDE)</li>
|
||||
<li><a href="http://ot.substance.io/demo/">Collaborative CodeMirror demo</a> (CodeMirror + operational transforms)</li>
|
||||
<li><a href="http://www.ckwnc.com/">CKWNC</a> (UML editor)</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://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://www.fastfig.com/">Fastfig</a> (online computation/math tool)</li>
|
||||
<li><a href="https://metacpan.org/module/Farabi">Farabi</a> (Perl editor)</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://tour.golang.org">Go language tour</a></li>
|
||||
<li><a href="https://github.com/github/android">GitHub's Android app</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="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://icecoder.net">ICEcoder</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://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.chris-granger.com/2012/04/12/light-table---a-new-ide-concept/">Light Table</a> (experimental IDE)</li>
|
||||
<li><a href="http://www.mergely.com/">Mergely</a> (interactive diffing)</li>
|
||||
<li><a href="https://notex.ch">NoTex</a> (rST authoring)</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://prose.io/">Prose.io</a> (github content editor)</li>
|
||||
<li><a href="http://ql.io/">ql.io</a> (http API query helper)</li>
|
||||
<li><a href="http://qyapp.com">QiYun web app platform</a></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.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="http://www.solidshops.com/">SolidShops</a> (hosted e-commerce platform)</li>
|
||||
<li><a href="http://sqlfiddle.com">SQLFiddle</a> (SQL playground)</li>
|
||||
<li><a href="https://thefiletree.com">The File Tree</a> (collab editor)</li>
|
||||
<li><a href="http://www.toolsverse.com/products/data-explorer/">Toolsverse Data Explorer</a> (database management)</li>
|
||||
<li><a href="http://enjalot.com/tributary/2636296/sinwaves.js">Tributary</a> (augmented editing)</li>
|
||||
<li><a href="http://turbopy.com/">TurboPY</a> (web publishing framework)</li>
|
||||
<li><a href="http://webglplayground.net/">WebGL playground</a></li>
|
||||
<li><a href="http://www.wescheme.org/">WeScheme</a> (learning tool)</li>
|
||||
<li><a href="http://wordpress.org/extend/plugins/codemirror-for-codeeditor/">WordPress plugin</a></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://media.chikuyonok.ru/codemirror2/">Zen Coding</a> (fast XML editing)</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
60
codemirror/doc/reporting.html
Normal file
60
codemirror/doc/reporting.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CodeMirror: Reporting Bugs</title>
|
||||
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
|
||||
<link rel="stylesheet" type="text/css" href="docs.css"/>
|
||||
<style>li { margin-top: 1em; }</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
|
||||
|
||||
<div class="grey">
|
||||
<img src="baboon.png" class="logo" alt="logo"/>
|
||||
<pre>
|
||||
/* Reporting bugs
|
||||
effectively */
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<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 make
|
||||
the problem occur. 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/edit">jsbin.com</a>, enter
|
||||
it there, press save, and include the resulting link in your bug
|
||||
report.</li>
|
||||
</ol>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
98
codemirror/doc/upgrade_v2.2.html
Normal file
98
codemirror/doc/upgrade_v2.2.html
Normal file
@@ -0,0 +1,98 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CodeMirror: Upgrading to v2.2</title>
|
||||
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
|
||||
<link rel="stylesheet" type="text/css" href="docs.css"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
|
||||
|
||||
<div class="grey">
|
||||
<img src="baboon.png" class="logo" alt="logo"/>
|
||||
<pre>
|
||||
/* Upgrading to
|
||||
v2.2 */
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="left">
|
||||
|
||||
<p>There are a few things in the 2.2 release that require some care
|
||||
when upgrading.</p>
|
||||
|
||||
<h2>No more default.css</h2>
|
||||
|
||||
<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.)
|
||||
|
||||
<h2>Different key customization</h2>
|
||||
|
||||
<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>
|
||||
|
||||
<h2>Tabs</h2>
|
||||
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
227
codemirror/doc/upgrade_v3.html
Normal file
227
codemirror/doc/upgrade_v3.html
Normal file
@@ -0,0 +1,227 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CodeMirror: Upgrading to v3</title>
|
||||
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
|
||||
<link rel="stylesheet" type="text/css" href="docs.css"/>
|
||||
<script src="../lib/codemirror.js"></script>
|
||||
<link rel="stylesheet" href="../lib/codemirror.css">
|
||||
<script src="../lib/util/runmode.js"></script>
|
||||
<script src="../lib/util/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>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
|
||||
|
||||
<div class="grey">
|
||||
<img src="baboon.png" class="logo" alt="logo"/>
|
||||
<pre>
|
||||
/* Upgrading to
|
||||
version 3 */
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="clear"><div class="leftbig blk">
|
||||
|
||||
<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>
|
||||
|
||||
<h2 id=dom>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>
|
||||
|
||||
<h2 id=gutters>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">
|
||||
<style>
|
||||
/* Define a gutter style */
|
||||
.note-gutter { width: 3em; background: cyan; }
|
||||
</style>
|
||||
<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"));
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<h2 id=events>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>
|
||||
|
||||
<h2 id=marktext>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>
|
||||
|
||||
<h2 id=folding>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>
|
||||
|
||||
<h2 id=lineclass>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>
|
||||
|
||||
<h2 id=positions>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>
|
||||
|
||||
<h2 id=matchbrackets>Bracket matching no longer in core</h2>
|
||||
|
||||
<p>The <a href="manual.html#util_matchbrackets"><code>matchBrackets</code></a>
|
||||
option is no longer defined in the core editor.
|
||||
Load <code>lib/util/matchbrackets.js</code> to enable it.</p>
|
||||
|
||||
<h2 id=modes>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>
|
||||
|
||||
<h2 id=new>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>
|
||||
|
||||
</div><div class="rightsmall blk">
|
||||
|
||||
<h2>Contents</h2>
|
||||
|
||||
<ul>
|
||||
<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="#folding">Line folding</a></li>
|
||||
<li><a href="#marktext">markText method arguments</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></div>
|
||||
|
||||
<script>setTimeout(function(){CodeMirror.colorize();}, 20);</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user