From 99f904adcc37d93c90defcd8ce898598e25be212 Mon Sep 17 00:00:00 2001
From: Hugues Hiegel To optimize loading CodeMirror, especially when including a
+ bunch of different modes, it is recommended that you combine and
+ minify (and preferably also gzip) the scripts. This page makes
+ those first two steps very easy. Simply select the version and
+ scripts you need in the form below, and
+ click Compress to download the minified script
+ file.{ } CodeMirror
+
+
+/* Script compression
+ helper */
+
+
+
+ with UglifyJS +
+ +Custom code to add to the compressed file:
+ + + + + + diff --git a/codemirror_ui/lib/CodeMirror-2.3/doc/docs.css b/codemirror_ui/lib/CodeMirror-2.3/doc/docs.css new file mode 100644 index 0000000..9ea1866 --- /dev/null +++ b/codemirror_ui/lib/CodeMirror-2.3/doc/docs.css @@ -0,0 +1,154 @@ +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 { + font-size: 2.2em; + padding: .5em 1em; + line-height: 1.2em; + margin-top: .5em; + position: relative; +} + +img.logo { + position: absolute; + right: -25px; + bottom: 4px; +} + +a:link, a:visited, .quasilink { + color: #df0019; + cursor: pointer; + text-decoration: none; +} + +a:hover, .quasilink:hover { + color: #800004; +} + +h1 a:link, h1 a:visited, h1 a:hover { + color: black; +} + +ul { + margin: 0; + padding-left: 1.2em; +} + +a.download { + color: white; + background-color: #df0019; + width: 100%; + display: block; + text-align: center; + font-size: 1.23em; + font-weight: bold; + text-decoration: none; + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + border-radius: 6px; + padding: .5em 0; + margin-bottom: 1em; +} + +a.download:hover { + background-color: #bb0010; +} + +.rel { + margin-bottom: 0; +} + +.rel-note { + color: #777; + font-size: .9em; + margin-top: .1em; +} + +.logo-braces { + color: #df0019; + position: relative; + top: -4px; +} + +.blk { + float: left; +} + +.left { + width: 37em; + padding-right: 6.53em; + padding-bottom: 1em; +} + +.left1 { + width: 15.24em; + padding-right: 6.45em; +} + +.left2 { + width: 15.24em; +} + +.right { + width: 20.68em; +} + +.leftbig { + width: 42.44em; + padding-right: 6.53em; +} + +.rightsmall { + width: 15.24em; +} + +.clear:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; +} +.clear { display: inline-block; } +/* start commented backslash hack \*/ +* html .clear { height: 1%; } +.clear { display: block; } +/* close commented backslash hack */ diff --git a/codemirror_ui/lib/CodeMirror-2.3/doc/internals.html b/codemirror_ui/lib/CodeMirror-2.3/doc/internals.html new file mode 100644 index 0000000..338c9bb --- /dev/null +++ b/codemirror_ui/lib/CodeMirror-2.3/doc/internals.html @@ -0,0 +1,494 @@ + + + ++/* (Re-) Implementing A Syntax- + Highlighting Editor in JavaScript */ ++ +
+ Topic: JavaScript, code editor implementation
+ Author: Marijn Haverbeke
+ Date: March 2nd 2011 (updated November 13th 2011)
+
This is a followup to +my Brutal Odyssey to the +Dark Side of the DOM Tree story. That one describes the +mind-bending process of implementing (what would become) CodeMirror 1. +This one describes the internals of CodeMirror 2, a complete rewrite +and rethink of the old code base. I wanted to give this piece another +Hunter Thompson copycat subtitle, but somehow that would be out of +place—the process this time around was one of straightforward +engineering, requiring no serious mind-bending whatsoever.
+ +So, what is wrong with CodeMirror 1? I'd estimate, by mailing list +activity and general search-engine presence, that it has been +integrated into about a thousand systems by now. The most prominent +one, since a few weeks, +being Google +code's project hosting. It works, and it's being used widely. + +
Still, I did not start replacing it because I was bored. CodeMirror
+1 was heavily reliant on designMode
+or contentEditable
(depending on the browser). Neither of
+these are well specified (HTML5 tries
+to specify
+their basics), and, more importantly, they tend to be one of the more
+obscure and buggy areas of browser functionality—CodeMirror, by using
+this functionality in a non-typical way, was constantly running up
+against browser bugs. WebKit wouldn't show an empty line at the end of
+the document, and in some releases would suddenly get unbearably slow.
+Firefox would show the cursor in the wrong place. Internet Explorer
+would insist on linkifying everything that looked like a URL or email
+address, a behaviour that can't be turned off. Some bugs I managed to
+work around (which was often a frustrating, painful process), others,
+such as the Firefox cursor placement, I gave up on, and had to tell
+user after user that they were known problems, but not something I
+could help.
Also, there is the fact that designMode
(which seemed
+to be less buggy than contentEditable
in Webkit and
+Firefox, and was thus used by CodeMirror 1 in those browsers) requires
+a frame. Frames are another tricky area. It takes some effort to
+prevent getting tripped up by domain restrictions, they don't
+initialize synchronously, behave strangely in response to the back
+button, and, on several browsers, can't be moved around the DOM
+without having them re-initialize. They did provide a very nice way to
+namespace the library, though—CodeMirror 1 could freely pollute the
+namespace inside the frame.
Finally, working with an editable document means working with
+selection in arbitrary DOM structures. Internet Explorer (8 and
+before) has an utterly different (and awkward) selection API than all
+of the other browsers, and even among the different implementations of
+document.selection
, details about how exactly a selection
+is represented vary quite a bit. Add to that the fact that Opera's
+selection support tended to be very buggy until recently, and you can
+imagine why CodeMirror 1 contains 700 lines of selection-handling
+code.
And that brings us to the main issue with the CodeMirror 1 +code base: The proportion of browser-bug-workarounds to real +application code was getting dangerously high. By building on top of a +few dodgy features, I put the system in a vulnerable position—any +incompatibility and bugginess in these features, I had to paper over +with my own code. Not only did I have to do some serious stunt-work to +get it to work on older browsers (as detailed in the +previous story), things +also kept breaking in newly released versions, requiring me to come up +with new scary hacks in order to keep up. This was starting +to lose its appeal.
+ +What CodeMirror 2 does is try to sidestep most of the hairy hacks +that came up in version 1. I owe a lot to the +ACE editor for inspiration on how to +approach this.
+ +I absolutely did not want to be completely reliant on key events to +generate my input. Every JavaScript programmer knows that key event +information is horrible and incomplete. Some people (most awesomely +Mihai Bazon with Ymacs) have been able +to build more or less functioning editors by directly reading key +events, but it takes a lot of work (the kind of never-ending, fragile +work I described earlier), and will never be able to properly support +things like multi-keystoke international character +input. [see below for caveat]
+ +So what I do is focus a hidden textarea, and let the browser +believe that the user is typing into that. What we show to the user is +a DOM structure we built to represent his document. If this is updated +quickly enough, and shows some kind of believable cursor, it feels +like a real text-input control.
+ +Another big win is that this DOM representation does not have to
+span the whole document. Some CodeMirror 1 users insisted that they
+needed to put a 30 thousand line XML document into CodeMirror. Putting
+all that into the DOM takes a while, especially since, for some
+reason, an editable DOM tree is slower than a normal one on most
+browsers. If we have full control over what we show, we must only
+ensure that the visible part of the document has been added, and can
+do the rest only when needed. (Fortunately, the onscroll
+event works almost the same on all browsers, and lends itself well to
+displaying things only as they are scrolled into view.)
ACE uses its hidden textarea only as a text input shim, and does +all cursor movement and things like text deletion itself by directly +handling key events. CodeMirror's way is to let the browser do its +thing as much as possible, and not, for example, define its own set of +key bindings. One way to do this would have been to have the whole +document inside the hidden textarea, and after each key event update +the display DOM to reflect what's in that textarea.
+ +That'd be simple, but it is not realistic. For even medium-sized +document the editor would be constantly munging huge strings, and get +terribly slow. What CodeMirror 2 does is put the current selection, +along with an extra line on the top and on the bottom, into the +textarea.
+ +This means that the arrow keys (and their ctrl-variations), home, +end, etcetera, do not have to be handled specially. We just read the +cursor position in the textarea, and update our cursor to match it. +Also, copy and paste work pretty much for free, and people get their +native key bindings, without any special work on my part. For example, +I have emacs key bindings configured for Chrome and Firefox. There is +no way for a script to detect this. [no longer the case]
+ +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.
+ +Getting and setting the selection range of a textarea in modern
+browsers is trivial—you just use the selectionStart
+and selectionEnd
properties. On IE you have to do some
+insane stuff with temporary ranges and compensating for the fact that
+moving the selection by a 'character' will treat \r\n as a single
+character, but even there it is possible to build functions that
+reliably set and get the selection range.
But consider this typical case: When I'm somewhere in my document, +press shift, and press the up arrow, something gets selected. Then, if +I, still holding shift, press the up arrow again, the top of my +selection is adjusted. The selection remembers where its head +and its anchor are, and moves the head when we shift-move. +This is a generally accepted property of selections, and done right by +every editing component built in the past twenty years.
+ +But not something that the browser selection APIs expose.
+ +Great. So when someone creates an 'upside-down' selection, the next +time CodeMirror has to update the textarea, it'll re-create the +selection as an 'upside-up' selection, with the anchor at the top, and +the next cursor motion will behave in an unexpected way—our second +up-arrow press in the example above will not do anything, since it is +interpreted in exactly the same way as the first.
+ +No problem. We'll just, ehm, detect that the selection is +upside-down (you can tell by the way it was created), and then, when +an upside-down selection is present, and a cursor-moving key is +pressed in combination with shift, we quickly collapse the selection +in the textarea to its start, allow the key to take effect, and then +combine its new head with its old anchor to get the real +selection.
+ +In short, scary hacks could not be avoided entirely in CodeMirror +2.
+ +And, the observant reader might ask, how do you even know that a +key combo is a cursor-moving combo, if you claim you support any +native key bindings? Well, we don't, but we can learn. The editor +keeps a set known cursor-movement combos (initialized to the +predictable defaults), and updates this set when it observes that +pressing a certain key had (only) the effect of moving the cursor. +This, of course, doesn't work if the first time the key is used was +for extending an inverted selection, but it works most of the +time.
+ +One thing that always comes up when you have a complicated internal +state that's reflected in some user-visible external representation +(in this case, the displayed code and the textarea's content) is +keeping the two in sync. The naive way is to just update the display +every time you change your state, but this is not only error prone +(you'll forget), it also easily leads to duplicate work on big, +composite operations. Then you start passing around flags indicating +whether the display should be updated in an attempt to be efficient +again and, well, at that point you might as well give up completely.
+ +I did go down that road, but then switched to a much simpler model: +simply keep track of all the things that have been changed during an +action, and then, only at the end, use this information to update the +user-visible display.
+ +CodeMirror uses a concept of operations, which start by
+calling a specific set-up function that clears the state and end by
+calling another function that reads this state and does the required
+updating. Most event handlers, and all the user-visible methods that
+change state are wrapped like this. There's a method
+called operation
that accepts a function, and returns
+another function that wraps the given function as an operation.
It's trivial to extend this (as CodeMirror does) to detect nesting, +and, when an operation is started inside an operation, simply +increment the nesting count, and only do the updating when this count +reaches zero again.
+ +If we have a set of changed ranges and know the currently shown +range, we can (with some awkward code to deal with the fact that +changes can add and remove lines, so we're dealing with a changing +coordinate system) construct a map of the ranges that were left +intact. We can then compare this map with the part of the document +that's currently visible (based on scroll offset and editor height) to +determine whether something needs to be updated.
+ +CodeMirror uses two update algorithms—a full refresh, where it just +discards the whole part of the DOM that contains the edited text and +rebuilds it, and a patch algorithm, where it uses the information +about changed and intact ranges to update only the out-of-date parts +of the DOM. When more than 30 percent (which is the current heuristic, +might change) of the lines need to be updated, the full refresh is +chosen (since it's faster to do than painstakingly finding and +updating all the changed lines), in the other case it does the +patching (so that, if you scroll a line or select another character, +the whole screen doesn't have to be +re-rendered). [the full-refresh +algorithm was dropped, it wasn't really faster than the patching +one]
+ +All updating uses innerHTML
rather than direct DOM
+manipulation, since that still seems to be by far the fastest way to
+build documents. There's a per-line function that combines the
+highlighting, marking, and
+selection info for that line into a snippet of HTML. The patch updater
+uses this to reset individual lines, the refresh updater builds an
+HTML chunk for the whole visible document at once, and then uses a
+single innerHTML
update to do the refresh.
When I wrote CodeMirror 1, I +thought interruptable +parsers were a hugely scary and complicated thing, and I used a +bunch of heavyweight abstractions to keep this supposed complexity +under control: parsers +were iterators +that consumed input from another iterator, and used funny +closure-resetting tricks to copy and resume themselves.
+ +This made for a rather nice system, in that parsers formed strictly +separate modules, and could be composed in predictable ways. +Unfortunately, it was quite slow (stacking three or four iterators on +top of each other), and extremely intimidating to people not used to a +functional programming style.
+ +With a few small changes, however, we can keep all those +advantages, but simplify the API and make the whole thing less +indirect and inefficient. CodeMirror +2's mode API uses explicit state +objects, and makes the parser/tokenizer a function that simply takes a +state and a character stream abstraction, advances the stream one +token, and returns the way the token should be styled. This state may +be copied, optionally in a mode-defined way, in order to be able to +continue a parse at a given point. Even someone who's never touched a +lambda in his life can understand this approach. Additionally, far +fewer objects are allocated in the course of parsing now.
+ +The biggest speedup comes from the fact that the parsing no longer +has to touch the DOM though. In CodeMirror 1, on an older browser, you +could see the parser work its way through the document, +managing some twenty lines in each 50-millisecond time slice it got. It +was reading its input from the DOM, and updating the DOM as it went +along, which any experienced JavaScript programmer will immediately +spot as a recipe for slowness. In CodeMirror 2, the parser usually +finishes the whole document in a single 100-millisecond time slice—it +manages some 1500 lines during that time on Chrome. All it has to do +is munge strings, so there is no real reason for it to be slow +anymore.
+ +Given all this, what can you expect from CodeMirror 2?
+ +iframe
nodes aren't
+really known for respecting document flow. Now that an editor instance
+is a plain div
element, it is much easier to size it to
+fit the surrounding elements. You don't even have to make it scroll if
+you do not want to.On the downside, a CodeMirror 2 instance is not 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.
+ +[Updates from November 13th 2011] 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.
+ +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 memmove
of a
+bunch of pointers, so it is cheap even for huge documents.
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.
+ +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.
+ +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.
+ +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.
+ +Above, 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 hacks 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.
+ +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.
+ +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.
+ +The key event handlers now translate the key event into a string,
+something like Ctrl-Home
or Shift-Cmd-R
, and
+use that string to look up an action to perform. To make keybinding
+customizable, this lookup goes through
+a table, 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 Ctrl-F
, and which is also
+used by the custom Emacs bindings).
A new
+option extraKeys
+allows ad-hoc keybindings to be defined in a much nicer way than what
+was possible with the
+old onKeyEvent
+callback. You simply provide an object mapping key identifiers to
+functions, instead of painstakingly looking at raw key events.
Built-in commands map to strings, rather than functions, for
+example "goLineUp"
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 CodeMirror.commands
object, which maps such commands
+to functions.
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.
+ +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 input
when the
+composing is finished, but many don't fire anything when the character
+is updated during composition. So we poll, whenever the
+editor is focused, to provide immediate updates of the display.
+/* User manual and + reference guide */ ++ +
CodeMirror is a code-editor component that can be embedded in + Web pages. The code library provides only the editor + component, no accompanying buttons, auto-completion, or other IDE + functionality. It does provide a rich API on top of which such + functionality can be straightforwardly implemented. See + the add-ons included in the distribution, + and + the CodeMirror + UI project, for reusable implementations of extra features.
+ +CodeMirror works with language-specific modes. Modes are
+ JavaScript programs that help color (and optionally indent) text
+ written in a given language. The distribution comes with a number
+ of modes (see the mode/
directory), and it isn't hard
+ to write new ones for other languages.
The easiest way to use CodeMirror is to simply load the script
+ and style sheet found under lib/
in the distribution,
+ plus a mode script from one of the mode/
directories
+ and a theme stylesheet from theme/
. (See
+ also the compression helper.) For
+ example:
<script src="lib/codemirror.js"></script> +<link rel="stylesheet" href="../lib/codemirror.css"> +<script src="mode/javascript/javascript.js"></script>+ +
Having done this, an editor instance can be created like + this:
+ +var myCodeMirror = CodeMirror(document.body);+ +
The editor will be appended to the document body, will start
+ empty, and will use the mode that we loaded. To have more control
+ over the new editor, a configuration object can be passed
+ to CodeMirror
as a second argument:
var myCodeMirror = CodeMirror(document.body, { + value: "function myScript(){return 100;}\n", + mode: "javascript" +});+ +
This will initialize the editor with a piece of code already in + it, and explicitly tell it to use the JavaScript mode (which is + useful when multiple modes are loaded). + See below for a full discussion of the + configuration options that CodeMirror accepts.
+ +In cases where you don't want to append the editor to an
+ element, and need more control over the way it is inserted, the
+ first argument to the CodeMirror
function can also
+ be a function that, when given a DOM element, inserts it into the
+ document somewhere. This could be used to, for example, replace a
+ textarea with a real editor:
var myCodeMirror = CodeMirror(function(elt) { + myTextArea.parentNode.replaceChild(elt, myTextArea); +}, {value: myTextArea.value});+ +
However, for this use case, which is a common way to use + CodeMirror, the library provides a much more powerful + shortcut:
+ +var myCodeMirror = CodeMirror.fromTextArea(myTextArea);+ +
This will, among other things, ensure that the textarea's value + is updated when the form (if it is part of a form) is submitted. + See the API reference for a full + description of this method.
+ +Both the CodeMirror
function and
+ its fromTextArea
method take as second (optional)
+ argument an object containing configuration options. Any option
+ not supplied like this will be taken
+ from CodeMirror.defaults
, an object containing the
+ default options. You can update this object to change the defaults
+ on your page.
Options are not checked in any way, so setting bogus option + values is bound to lead to odd errors.
+ +These are the supported options:
+ +value (string)
mode (string or object)
name
property that names the mode (for
+ example {name: "javascript", json: true}
). The demo
+ pages for each mode contain information about what configuration
+ parameters the mode supports. You can ask CodeMirror which modes
+ and MIME types are loaded with
+ the CodeMirror.listModes
+ and CodeMirror.listMIMEs
functions.theme (string)
.cm-s-[name]
+ styles is loaded (see
+ the theme
directory in the
+ distribution). The default is "default"
, for which
+ colors are included in codemirror.css
. It is
+ possible to use multiple theming classes at once—for
+ example "foo bar"
will assign both
+ the cm-s-foo
and the cm-s-bar
classes
+ to the editor.indentUnit (integer)
smartIndent (boolean)
tabSize (integer)
indentWithTabs (boolean)
tabSize
+ spaces should be replaced by N tabs. Default is false.electricChars (boolean)
autoClearEmptyLines (boolean)
keyMap (string)
"default"
, which is the only keymap defined
+ in codemirror.js
itself. Extra keymaps are found in
+ the keymap
directory. See
+ the section on keymaps for more
+ information.extraKeys (object)
keyMap
. Should be
+ either null, or a valid keymap value.lineWrapping (boolean)
false
(scroll).lineNumbers (boolean)
firstLineNumber (integer)
gutter (boolean)
fixedGutter (boolean)
readOnly (boolean)
"nocursor"
is given (instead of
+ simply true
), focusing of the editor is also
+ disallowed.onChange (function)
{from, to, text, next}
+ object containing information about the changes
+ that occurred as second argument. from
+ and to
are the positions (in the pre-change
+ coordinate system) where the change started and
+ ended (for example, it might be {ch:0, line:18}
if the
+ position is at the beginning of line #19). text
+ is an array of strings representing the text that replaced the changed
+ range (split by line). If multiple changes happened during a single
+ operation, the object will have a next
property pointing to
+ another change object (which may point to another, etc).onCursorActivity (function)
onGutterClick (function)
mousedown
+ event object as third argument.onFocus, onBlur (function)
onScroll (function)
onHighlightComplete (function)
onUpdate (function)
matchBrackets (boolean)
workTime, workDelay (number)
workTime
milliseconds, and then use
+ timeout to sleep for workDelay
milliseconds. The
+ defaults are 200 and 300, you can change these options to make
+ the highlighting more or less aggressive.pollInterval (number)
undoDepth (integer)
tabindex (integer)
autofocus (boolean)
fromTextArea
is
+ used, and no explicit value is given for this option, it will
+ inherit the setting from the textarea's autofocus
+ attribute.dragDrop (boolean)
onDragEvent (function)
dragenter
, dragover
,
+ or drop
event. It will be passed the editor instance
+ and the event object as arguments. The callback can choose to
+ handle the event itself, in which case it should
+ return true
to indicate that CodeMirror should not
+ do anything further.onKeyEvent (function)
keydown
, keyup
,
+ and keypress
event that CodeMirror captures. It
+ will be passed two arguments, the editor instance and the key
+ event. This key event is pretty much the raw key event, except
+ that a stop()
method is always added to it. You
+ could feed it to, for example, jQuery.Event
to
+ further normalize it.keydown
does not stop
+ the keypress
from firing, whereas on others it
+ does. If you respond to an event, you should probably inspect
+ its type
property and only do something when it
+ is keydown
(or keypress
for actions
+ that need character data).Keymaps are ways to associate keys with functionality. A keymap + is an object mapping strings that identify the keys to functions + that implement their functionality.
+ +Keys are identified either by name or by character.
+ The CodeMirror.keyNames
object defines names for
+ common keys and associates them with their key codes. Examples of
+ names defined here are Enter
, F5
,
+ and Q
. These can be prefixed
+ with Shift-
, Cmd-
, Ctrl-
,
+ and Alt-
(in that order!) to specify a modifier. So
+ for example, Shift-Ctrl-Space
would be a valid key
+ identifier.
Alternatively, a character can be specified directly by
+ surrounding it in single quotes, for example '$'
+ or 'q'
. Due to limitations in the way browsers fire
+ key events, these may not be prefixed with modifiers.
The CodeMirror.keyMap
object associates keymaps
+ with names. User code and keymap definitions can assign extra
+ properties to this object. Anywhere where a keymap is expected, a
+ string can be given, which will be looked up in this object. It
+ also contains the "default"
keymap holding the
+ default bindings.
The values of properties in keymaps can be either functions of
+ a single argument (the CodeMirror instance), or strings. Such
+ strings refer to properties of the
+ CodeMirror.commands
object, which defines a number of
+ common commands that are used by the default keybindings, and maps
+ them to functions. A key handler function may throw
+ CodeMirror.Pass
to indicate that it has decided not
+ to handle the key, and other handlers (or the default behavior)
+ should be given a turn.
Keys mapped to command names that start with the
+ characters "go"
(which should be used for
+ cursor-movement actions) will be fired even when an
+ extra Shift
modifier is present (i.e. "Up":
+ "goLineUp"
matches both up and shift-up). This is used to
+ easily implement shift-selection.
Keymaps can defer to each other by defining
+ a fallthrough
property. This indicates that when a
+ key is not found in the map itself, one or more other maps should
+ be searched. It can hold either a single keymap or an array of
+ keymaps.
When a keymap contains a nofallthrough
property
+ set to true
, keys matched against that map will be
+ ignored if they don't match any of the bindings in the map (no
+ further child maps will be tried, and the default effect of
+ inserting a character will not occur).
Up to a certain extent, CodeMirror's look can be changed by
+ modifying style sheet files. The style sheets supplied by modes
+ simply provide the colors for that mode, and can be adapted in a
+ very straightforward way. To style the editor itself, it is
+ possible to alter or override the styles defined
+ in codemirror.css
.
Some care must be taken there, since a lot of the rules in this + file are necessary to have CodeMirror function properly. Adjusting + colors should be safe, of course, and with some care a lot of + other things can be changed as well. The CSS classes defined in + this file serve the following roles:
+ +CodeMirror
CodeMirror-scroll
overflow:
+ auto
+ fixed height). By default, it does. Giving
+ this height: auto; overflow: visible;
will cause
+ the editor to resize to fit its content.CodeMirror-focused
CodeMirror-gutter
CodeMirror-gutter-text
for that. By default,
+ the gutter is 'fluid', meaning it will adjust its width to the
+ maximum line number or line marker width. You can also set a
+ fixed width if you want.CodeMirror-gutter-text
CodeMirror
class.CodeMirror-lines
CodeMirror-gutter
should have the same
+ padding.CodeMirror-cursor
CodeMirror-selected
span
elements
+ with this class.CodeMirror-matchingbracket
,
+ CodeMirror-nonmatchingbracket
The actual lines, as well as the cursor, are represented
+ by pre
elements. By default no text styling (such as
+ bold) that might change line height is applied. If you do want
+ such effects, you'll have to give CodeMirror pre
a
+ fixed height.
If your page's style sheets do funky things to
+ all div
or pre
elements (you probably
+ shouldn't do that), you'll have to define rules to cancel these
+ effects out again for elements under the CodeMirror
+ class.
Themes are also simply CSS files, which define colors for
+ various syntactic elements. See the files in
+ the theme
directory.
A lot of CodeMirror features are only available through its API. + This has the disadvantage that you need to do work to enable them, + and the advantage that CodeMirror will fit seamlessly into your + application.
+ +Whenever points in the document are represented, the API uses
+ objects with line
and ch
properties.
+ Both are zero-based. CodeMirror makes sure to 'clip' any positions
+ passed by client code so that they fit inside the document, so you
+ shouldn't worry too much about sanitizing your coordinates. If you
+ give ch
a value of null
, or don't
+ specify it, it will be replaced with the length of the specified
+ line.
getValue() → string
setValue(string)
getSelection() → string
replaceSelection(string)
focus()
scrollTo(x, y)
null
+ or undefined
to have no effect.getScrollInfo()
{x, y, width, height}
object that
+ represents the current scroll position and scrollable area size
+ of the editor.setOption(option, value)
option
+ should the name of an option,
+ and value
should be a valid value for that
+ option.getOption(option) → value
cursorCoords(start, mode) → object
{x, y, yBot}
object containing the
+ coordinates of the cursor. If mode
+ is "local"
, they will be relative to the top-left
+ corner of the editable document. If it is "page"
or
+ not given, they are relative to the top-left corner of the
+ page. yBot
is the coordinate of the bottom of the
+ cursor. start
is a boolean indicating whether you
+ want the start or the end of the selection.charCoords(pos, mode) → object
cursorCoords
, but returns the position of
+ an arbitrary characters. pos
should be
+ a {line, ch}
object.coordsChar(object) → pos
{x, y}
object (in page coordinates),
+ returns the {line, ch}
position that corresponds to
+ it.undo()
redo()
historySize() → object
{undo, redo}
properties,
+ both of which hold integers, indicating the amount of stored
+ undo and redo operations.clearHistory()
indentLine(line, dir)
dir
is true) or
+ decreased (if false) by an indent
+ unit instead.getTokenAt(pos) → object
{line, ch}
object). The
+ returned object has the following properties:
+ start
end
string
className
state
markText(from, to, className) → object
from
and to
should
+ be {line, ch}
objects. The method will return an
+ object with two methods, clear()
, which removes the
+ mark, and find()
, which returns a {from,
+ to}
(both document positions), indicating the current
+ position of the marked range.setBookmark(pos) → object
find()
and clear()
. The first
+ returns the current position of the bookmark, if it is still in
+ the document, and the second explicitly removes the
+ bookmark.findMarksAt(pos) → array
setMarker(line, text, className) → lineHandle
text
and className
are
+ optional. Setting text
to a Unicode character like
+ ● tends to give a nice effect. To put a picture in the gutter,
+ set text
to a space and className
to
+ something that sets a background image. If you
+ specify text
, the given text (which may contain
+ HTML) will, by default, replace the line number for that line.
+ If this is not what you want, you can include the
+ string %N%
in the text, which will be replaced by
+ the line number.clearMarker(line)
setMarker
. line
can be either a
+ number or a handle returned by setMarker
(since a
+ number may now refer to a different line if something was added
+ or deleted).setLineClass(line, className, backgroundClassName) → lineHandle
line
+ can be a number or a line handle (as returned
+ by setMarker
or this
+ function). className
will be used to style the text
+ for the line, and backgroundClassName
to style its
+ background (which lies behind the selection).
+ Pass null
to clear the classes for a line.hideLine(line) → lineHandle
showLine(line) → lineHandle
hideLine
—re-shows a previously
+ hidden line, by number or by handle.onDeleteLine(line, func)
lineInfo(line) → object
setMarker
. The returned object has the
+ structure {line, handle, text, markerText, markerClass,
+ lineClass, bgClass}
.getLineHandle(num) → lineHandle
addWidget(pos, node, scrollIntoView)
node
, which should be an absolutely
+ positioned DOM node, into the editor, positioned right below the
+ given {line, ch}
position.
+ When scrollIntoView
is true, the editor will ensure
+ that the entire node is visible (if possible). To remove the
+ widget again, simply use DOM methods (move it somewhere else, or
+ call removeChild
on its parent).matchBrackets()
lineCount() → number
getCursor(start) → object
start
is a boolean indicating whether the start
+ or the end of the selection must be retrieved. If it is not
+ given, the current cursor pos, i.e. the side of the selection
+ that would move if you pressed an arrow key, is chosen.
+ A {line, ch}
object will be returned.somethingSelected() → boolean
setCursor(pos)
{line, ch}
object, or the line and the
+ character as two separate parameters.setSelection(start, end)
start
+ and end
should be {line, ch}
objects.getLine(n) → string
n
.setLine(n, text)
n
.removeLine(n)
getRange(from, to) → string
+ {line, ch}
objects.replaceRange(string, from, to)
from
+ and to
with the given string. from
+ and to
must be {line, ch}
+ objects. to
can be left off to simply insert the
+ string at position from
.posFromIndex(index) → object
{line, ch}
object for a
+ zero-based index
who's value is relative to the start of the
+ editor's text. If the index
is out of range of the text then
+ the returned object is clipped to start or end of the text
+ respectively.indexFromPos(object) → number
posFromIndex
.The following are more low-level methods:
+ +operation(func) → result
compoundChange(func) → result
refresh()
getInputField() → textarea
getWrapperElement() → node
getScrollerElement() → node
height
and width
styles of this
+ element to resize an editor. (You might have to call
+ the refresh
method
+ afterwards.)getGutterElement() → node
getStateAfter(line) → state
Finally, the CodeMirror
object
+ itself has a method fromTextArea
. This takes a
+ textarea DOM node as first argument and an optional configuration
+ object as second. It will replace the textarea with a CodeMirror
+ instance, and wire up the form of that textarea (if any) to make
+ sure the editor contents are put into the textarea when the form
+ is submitted. A CodeMirror instance created this way has two
+ additional methods:
save()
toTextArea()
getTextArea() → textarea
If you want to define extra methods in terms
+ of the CodeMirror API, it is possible to
+ use CodeMirror.defineExtension(name, value)
. This
+ will cause the given value (usually a method) to be added to all
+ CodeMirror instances created from then on.
The lib/util
directory in the distribution
+ contains a number of reusable components that implement extra
+ editor functionality. In brief, they are:
dialog.js
openDialog
method to CodeMirror instances,
+ which can be called with an HTML fragment that provides the
+ prompt (should include an input
tag), and a
+ callback function that is called when text has been entered.
+ Depends on lib/util/dialog.css
.searchcursor.js
getSearchCursor(query, start, caseFold) →
+ cursor
method to CodeMirror instances, which can be used
+ to implement search/replace functionality. query
+ can be a regular expression or a string (only strings will match
+ across lines—if they contain newlines). start
+ provides the starting position of the search. It can be
+ a {line, ch}
object, or can be left off to default
+ to the start of the document. caseFold
is only
+ relevant when matching a string. It will cause the search to be
+ case-insensitive. A search cursor has the following methods:
+ findNext(), findPrevious() → boolean
match
method, in case you
+ want to extract matched groups.from(), to() → object
findNext
or findPrevious
did
+ not return false. They will return {line, ch}
+ objects pointing at the start and end of the match.replace(text)
search.js
searchcursor.js
, and will make use
+ of openDialog
when
+ available to make prompting for search queries less ugly.foldcode.js
CodeMirror.newFoldFunction
with a range-finder
+ helper function to create a function that will, when applied to
+ a CodeMirror instance and a line number, attempt to fold or
+ unfold the block starting at the given line. A range-finder is a
+ language-specific function that also takes an instance and a
+ line number, and returns an end line for the block, or null if
+ no block is started on that line. This file
+ provides CodeMirror.braceRangeFinder
, which finds
+ blocks in brace languages (JavaScript, C, Java,
+ etc), CodeMirror.indentRangeFinder
, for languages
+ where indentation determines block structure (Python, Haskell),
+ and CodeMirror.tagRangeFinder
, for XML-style
+ languages.runmode.js
overlay.js
CodeMirror.overlayMode
, which is used to
+ create such a mode. See this
+ demo for a detailed example.multiplex.js
CodeMirror.multiplexingMode
which, when
+ given as first argument a mode object, and as other arguments
+ any number of {open, close, mode [, delimStyle]}
+ objects, will return a mode object that starts parsing using the
+ mode passed as first argument, but will switch to another mode
+ as soon as it encounters a string that occurs in one of
+ the open
fields of the passed objects. When in a
+ sub-mode, it will go back to the top mode again when
+ the close
string is encountered.
+ When delimStyle
is specified, it will be the token
+ style returned for the delimiter tokens. The outer mode will not
+ see the content between the delimiters.
+ See this demo for an
+ example.simple-hint.js
CodeMirror.simpleHint
, which takes a
+ CodeMirror instance and a hinting function, and pops up a widget
+ that allows the user to select a completion. Hinting functions
+ are function that take an editor instance, and return
+ a {list, from, to}
object, where list
+ is an array of strings (the completions), and from
+ and to
give the start and end of the token that is
+ being completed. Depends
+ on lib/util/simple-hint.css
.javascript-hint.js
CodeMirror.javascriptHint
+ and CodeMirror.coffeescriptHint
, which are simple
+ hinting functions for the JavaScript and CoffeeScript
+ modes.match-highlighter.js
matchHighlight
method to CodeMirror
+ instances that can be called (typically from
+ a onCursorActivity
+ handler) to highlight all instances of a currently selected word
+ with the a classname given as a first argument to the method.
+ Depends on
+ the searchcursor
+ add-on. Demo here.closetag.js
loadmode.js
CodeMirror.requireMode(modename,
+ callback)
function that will try to load a given mode and
+ call the callback when it succeeded. You'll have to
+ set CodeMirror.modeURL
to a string that mode paths
+ can be constructed from, for
+ example "mode/%N/%N.js"
—the %N
's will
+ be replaced with the mode name. Also
+ defines CodeMirror.autoLoadMode(instance, mode)
,
+ which will ensure the given mode is loaded and cause the given
+ editor instance to refresh its mode when the loading
+ succeeded. See the demo.Modes typically consist of a single JavaScript file. This file + defines, in the simplest case, a lexer (tokenizer) for your + language—a function that takes a character stream as input, + advances it past a token, and returns a style for that token. More + advanced modes can also handle indentation for the language.
+ +The mode script should
+ call CodeMirror.defineMode
to register itself with
+ CodeMirror. This function takes two arguments. The first should be
+ the name of the mode, for which you should use a lowercase string,
+ preferably one that is also the name of the files that define the
+ mode (i.e. "xml"
is defined xml.js
). The
+ second argument should be a function that, given a CodeMirror
+ configuration object (the thing passed to
+ the CodeMirror
function) and an optional mode
+ configuration object (as in
+ the mode
option), returns
+ a mode object.
Typically, you should use this second argument
+ to defineMode
as your module scope function (modes
+ should not leak anything into the global scope!), i.e. write your
+ whole mode inside this function.
The main responsibility of a mode script is parsing + the content of the editor. Depending on the language and the + amount of functionality desired, this can be done in really easy + or extremely complicated ways. Some parsers can be stateless, + meaning that they look at one element (token) of the code + at a time, with no memory of what came before. Most, however, will + need to remember something. This is done by using a state + object, which is an object that is always passed when + reading a token, and which can be mutated by the tokenizer.
+ +Modes that use a state must define
+ a startState
method on their mode object. This is a
+ function of no arguments that produces a state object to be used
+ at the start of a document.
The most important part of a mode object is
+ its token(stream, state)
method. All modes must
+ define this method. It should read one token from the stream it is
+ given as an argument, optionally update its state, and return a
+ style string, or null
for tokens that do not have to
+ be styled. For your styles, you can either use the 'standard' ones
+ defined in the themes (without the cm-
prefix), or
+ define your own and have people include a custom CSS file for your
+ mode.
+ +
The stream object encapsulates a line of code + (tokens may never span lines) and our current position in that + line. It has the following API:
+ +eol() → boolean
sol() → boolean
peek() → character
undefined
at the end of the
+ line.next() → character
undefined
when no more characters are
+ available.eat(match) → character
match
can be a character, a regular expression,
+ or a function that takes a character and returns a boolean. If
+ the next character in the stream 'matches' the given argument,
+ it is consumed and returned. Otherwise, undefined
+ is returned.eatWhile(match) → boolean
eat
with the given argument,
+ until it fails. Returns true if any characters were eaten.eatSpace() → boolean
eatWhile
when matching
+ white-space.skipToEnd()
skipTo(ch) → boolean
match(pattern, consume, caseFold) → boolean
eat
—if consume
is true
+ or not given—or a look-ahead that doesn't update the stream
+ position—if it is false. pattern
can be either a
+ string or a regular expression starting with ^
.
+ When it is a string, caseFold
can be set to true to
+ make the match case-insensitive. When successfully matching a
+ regular expression, the returned value will be the array
+ returned by match
, in case you need to extract
+ matched groups.backUp(n)
n
characters. Backing it up
+ further than the start of the current token will cause things to
+ break, so be careful.column() → integer
indentation() → integer
current() → string
By default, blank lines are simply skipped when
+ tokenizing a document. For languages that have significant blank
+ lines, you can define a blankLine(state)
method on
+ your mode that will get called whenever a blank line is passed
+ over, so that it can update the parser state.
Because state object are mutated, and CodeMirror
+ needs to keep valid versions of a state around so that it can
+ restart a parse at any line, copies must be made of state objects.
+ The default algorithm used is that a new state object is created,
+ which gets all the properties of the old object. Any properties
+ which hold arrays get a copy of these arrays (since arrays tend to
+ be used as mutable stacks). When this is not correct, for example
+ because a mode mutates non-array properties of its state object, a
+ mode object should define a copyState
method,
+ which is given a state and should return a safe copy of that
+ state.
By default, CodeMirror will stop re-parsing
+ a document as soon as it encounters a few lines that were
+ highlighted the same in the old parse as in the new one. It is
+ possible to provide an explicit way to test whether a state is
+ equivalent to another one, which CodeMirror will use (instead of
+ the unchanged-lines heuristic) to decide when to stop
+ highlighting. You do this by providing
+ a compareStates
method on your mode object, which
+ takes two state arguments and returns a boolean indicating whether
+ they are equivalent. See the XML mode, which uses this to provide
+ reliable highlighting of bad closing tags, as an example.
If you want your mode to provide smart indentation
+ (though the indentLine
+ method and the indentAuto
+ and newlineAndIndent
commands, which keys can be
+ bound to), you must define
+ an indent(state, textAfter)
method on your mode
+ object.
The indentation method should inspect the given state object,
+ and optionally the textAfter
string, which contains
+ the text on the line that is being indented, and return an
+ integer, the amount of spaces to indent. It should usually take
+ the indentUnit
+ option into account.
Finally, a mode may define
+ an electricChars
property, which should hold a string
+ containing all the characters that should trigger the behaviour
+ described for
+ the electricChars
+ option.
So, to summarize, a mode must provide
+ a token
method, and it may
+ provide startState
, copyState
,
+ compareStates
, and indent
methods. For
+ an example of a trivial mode, see
+ the diff mode, for a more involved
+ example, see the C-like
+ mode.
Sometimes, it is useful for modes to nest—to have one
+ mode delegate work to another mode. An example of this kind of
+ mode is the mixed-mode HTML
+ mode. To implement such nesting, it is usually necessary to
+ create mode objects and copy states yourself. To create a mode
+ object, there are CodeMirror.getMode(options,
+ parserConfig)
, where the first argument is a configuration
+ object as passed to the mode constructor function, and the second
+ argument is a mode specification as in
+ the mode
option. To copy a
+ state object, call CodeMirror.copyState(mode, state)
,
+ where mode
is the mode that created the given
+ state.
To make indentation work properly in a nested parser, it is
+ advisable to give the startState
method of modes that
+ are intended to be nested an optional argument that provides the
+ base indentation for the block of code. The JavaScript and CSS
+ parser do this, for example, to allow JavaScript and CSS code
+ inside the mixed-mode HTML mode to be properly indented.
Finally, it is possible to associate your mode, or a certain
+ configuration of your mode, with
+ a MIME type. For
+ example, the JavaScript mode associates itself
+ with text/javascript
, and its JSON variant
+ with application/json
. To do this,
+ call CodeMirror.defineMIME(mime, modeSpec)
,
+ where modeSpec
can be a string or object specifying a
+ mode, as in the mode
+ option.
+/* Old release history */ + ++ +
26-09-2011: Version 2.15:
+Fix bug that snuck into 2.14: Clicking the + character that currently has the cursor didn't re-focus the + editor.
+ +26-09-2011: Version 2.14:
+fixedGutter
option.setValue
breaking cursor movement.23-08-2011: Version 2.13:
+getGutterElement
to API.smartHome
option.25-07-2011: Version 2.12:
+innerHTML
for HTML-escaping.04-07-2011: Version 2.11:
+replace
method to search cursors, for cursor-preserving replacements.getStateAfter
API and compareState
mode API methods for finer-grained mode magic.getScrollerElement
API method to manipulate the scrolling DIV.07-06-2011: Version 2.1:
+Add + a theme system + (demo). Note that this is not + backwards-compatible—you'll have to update your styles and + modes!
+ +07-06-2011: Version 2.02:
+26-05-2011: Version 2.01:
+coordsChar
now worksonCursorActivity
interfered with onChange
.onChange
."nocursor"
mode for readOnly
option.onHighlightComplete
option.28-03-2011: Version 2.0:
+CodeMirror 2 is a complete rewrite that's + faster, smaller, simpler to use, and less dependent on browser + quirks. See this + and this + for more information. + +
28-03-2011: Version 1.0:
+22-02-2011: Version 2.0 beta 2:
+Somewhat more mature API, lots of bugs shaken out. + +
17-02-2011: Version 0.94:
+tabMode: "spaces"
was modified slightly (now indents when something is selected).08-02-2011: Version 2.0 beta 1:
+CodeMirror 2 is a complete rewrite of + CodeMirror, no longer depending on an editable frame.
+ +19-01-2011: Version 0.93:
+save
method to instances created with fromTextArea
.17-12-2010: Version 0.92:
+styleNumbers
option is now officially
+ supported and documented.onLineNumberClick
option added.onLoad
and
+ onCursorActivity
callbacks. Old names still work, but
+ are deprecated.11-11-2010: Version 0.91:
+toTextArea
to update the code in the textarea.noScriptCaching
option (hack to ease development).02-10-2010: Version 0.9:
+height: "dynamic"
more robust.enterMode
and electricChars
options to make indentation even more customizable.firstLineNumber
option.@media
rules by the CSS parser.22-07-2010: Version 0.8:
+cursorCoords
method to find the screen
+ coordinates of the cursor.height: dynamic
mode, where the editor's
+ height will adjust to the size of its content.toTextArea
method in instances created with
+ fromTextArea
.27-04-2010: Version + 0.67:
+More consistent page-up/page-down behaviour
+ across browsers. Fix some issues with hidden editors looping forever
+ when line-numbers were enabled. Make PHP parser parse
+ "\\"
correctly. Have jumpToLine
work on
+ line handles, and add cursorLine
function to fetch the
+ line handle where the cursor currently is. Add new
+ setStylesheet
function to switch style-sheets in a
+ running editor.
01-03-2010: Version + 0.66:
+Adds removeLine
method to API.
+ Introduces the PLSQL parser.
+ Marks XML errors by adding (rather than replacing) a CSS class, so
+ that they can be disabled by modifying their style. Fixes several
+ selection bugs, and a number of small glitches.
12-11-2009: Version + 0.65:
+Add support for having both line-wrapping and
+ line-numbers turned on, make paren-highlighting style customisable
+ (markParen
and unmarkParen
config
+ options), work around a selection bug that Opera
+ reintroduced in version 10.
23-10-2009: Version + 0.64:
+Solves some issues introduced by the
+ paste-handling changes from the previous release. Adds
+ setSpellcheck
, setTextWrapping
,
+ setIndentUnit
, setUndoDepth
,
+ setTabMode
, and setLineNumbers
to
+ customise a running editor. Introduces an SQL parser. Fixes a few small
+ problems in the Python
+ parser. And, as usual, add workarounds for various newly discovered
+ browser incompatibilities.
31-08-2009: Version +0.63:
+Overhaul of paste-handling (less fragile), fixes for several +serious IE8 issues (cursor jumping, end-of-document bugs) and a number +of small problems.
+ +30-05-2009: Version +0.62:
+Introduces Python
+and Lua parsers. Add
+setParser
(on-the-fly mode changing) and
+clearHistory
methods. Make parsing passes time-based
+instead of lines-based (see the passTime
option).
+/* Reporting bugs + effectively */ ++ +
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:
+ ++/* Upgrading to v2.2 + */ ++ +
There are a few things in the 2.2 release that require some care +when upgrading.
+ +The default theme is now included
+in codemirror.css
, 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.)
+
+
CodeMirror has moved to a system +where keymaps are used to +bind behavior to keys. This means custom +bindings are now possible.
+ +Three options that influenced key
+behavior, tabMode
, enterMode
,
+and smartHome
, are no longer supported. Instead, you can
+provide custom bindings to influence the way these keys act. This is
+done through the
+new extraKeys
+option, which can hold an object mapping key names to functionality. A
+simple example would be:
extraKeys: { + "Ctrl-S": function(instance) { saveText(instance.getValue()); }, + "Ctrl-/": "undo" + }+ +
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 CodeMirror.commands
table, which
+contains all the built-in editing commands, and can be inspected and
+extended by external code.
By default, the Home
key is bound to
+the "goLineStartSmart"
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:
extraKeys: {"Home": "goLineStart"}+ +
Similarly, Enter
is bound
+to "newlineAndIndent"
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 false
:
extraKeys: {"Enter": false}+ +
The same works for Tab
. If you don't want CodeMirror
+to handle it, bind it to false
. The default behaviour is
+to indent the current line more ("indentMore"
command),
+and indent it less when shift is held ("indentLess"
).
+There are also "indentAuto"
(smart indent)
+and "insertTab"
commands provided for alternate
+behaviors. Or you can write your own handler function to do something
+different altogether.
Handling of tabs changed completely. The display width of tabs can
+now be set with the tabSize
option, and tabs can
+be styled by setting CSS rules
+for the cm-tab
class.
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 tabSize: 8
in your options.