-
-(Re-) Implementing A Syntax-Highlighting Editor in JavaScript
-
-
- Topic: JavaScript, code editor implementation
- Author: Marijn Haverbeke
- Date: March 2nd 2011 (updated November 13th 2011)
-
-
-Caution: 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 cm-internals
-on my blog.
-
-This is a followup to
-my Brutal Odyssey to the
-Dark Side of the DOM Tree story. That one describes the
-mind-bending process of implementing (what would become) CodeMirror 1.
-This one describes the internals of CodeMirror 2, a complete rewrite
-and rethink of the old code base. I wanted to give this piece another
-Hunter Thompson copycat subtitle, but somehow that would be out of
-place—the process this time around was one of straightforward
-engineering, requiring no serious mind-bending whatsoever.
-
-So, what is wrong with CodeMirror 1? I'd estimate, by mailing list
-activity and general search-engine presence, that it has been
-integrated into about a thousand systems by now. The most prominent
-one, since a few weeks,
-being Google
-code's project hosting. It works, and it's being used widely.
-
-Still, I did not start replacing it because I was bored. CodeMirror
-1 was heavily reliant on designMode
-or contentEditable (depending on the browser). Neither of
-these are well specified (HTML5 tries
-to specify
-their basics), and, more importantly, they tend to be one of the more
-obscure and buggy areas of browser functionality—CodeMirror, by using
-this functionality in a non-typical way, was constantly running up
-against browser bugs. WebKit wouldn't show an empty line at the end of
-the document, and in some releases would suddenly get unbearably slow.
-Firefox would show the cursor in the wrong place. Internet Explorer
-would insist on linkifying everything that looked like a URL or email
-address, a behaviour that can't be turned off. Some bugs I managed to
-work around (which was often a frustrating, painful process), others,
-such as the Firefox cursor placement, I gave up on, and had to tell
-user after user that they were known problems, but not something I
-could help.
-
-Also, there is the fact that designMode (which seemed
-to be less buggy than contentEditable in Webkit and
-Firefox, and was thus used by CodeMirror 1 in those browsers) requires
-a frame. Frames are another tricky area. It takes some effort to
-prevent getting tripped up by domain restrictions, they don't
-initialize synchronously, behave strangely in response to the back
-button, and, on several browsers, can't be moved around the DOM
-without having them re-initialize. They did provide a very nice way to
-namespace the library, though—CodeMirror 1 could freely pollute the
-namespace inside the frame.
-
-Finally, working with an editable document means working with
-selection in arbitrary DOM structures. Internet Explorer (8 and
-before) has an utterly different (and awkward) selection API than all
-of the other browsers, and even among the different implementations of
-document.selection, details about how exactly a selection
-is represented vary quite a bit. Add to that the fact that Opera's
-selection support tended to be very buggy until recently, and you can
-imagine why CodeMirror 1 contains 700 lines of selection-handling
-code.
-
-And that brings us to the main issue with the CodeMirror 1
-code base: The proportion of browser-bug-workarounds to real
-application code was getting dangerously high. By building on top of a
-few dodgy features, I put the system in a vulnerable position—any
-incompatibility and bugginess in these features, I had to paper over
-with my own code. Not only did I have to do some serious stunt-work to
-get it to work on older browsers (as detailed in the
-previous story), things
-also kept breaking in newly released versions, requiring me to come up
-with new scary hacks in order to keep up. This was starting
-to lose its appeal.
-
-
- General Approach
-
-What CodeMirror 2 does is try to sidestep most of the hairy hacks
-that came up in version 1. I owe a lot to the
-ACE editor for inspiration on how to
-approach this.
-
-I absolutely did not want to be completely reliant on key events to
-generate my input. Every JavaScript programmer knows that key event
-information is horrible and incomplete. Some people (most awesomely
-Mihai Bazon with Ymacs) have been able
-to build more or less functioning editors by directly reading key
-events, but it takes a lot of work (the kind of never-ending, fragile
-work I described earlier), and will never be able to properly support
-things like multi-keystoke international character
-input. [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.)
-
-
-
- Selection
-
-Getting and setting the selection range of a textarea in modern
-browsers is trivial—you just use the selectionStart
-and selectionEnd properties. On IE you have to do some
-insane stuff with temporary ranges and compensating for the fact that
-moving the selection by a 'character' will treat \r\n as a single
-character, but even there it is possible to build functions that
-reliably set and get the selection range.
-
-But consider this typical case: When I'm somewhere in my document,
-press shift, and press the up arrow, something gets selected. Then, if
-I, still holding shift, press the up arrow again, the top of my
-selection is adjusted. The selection remembers where its head
-and its anchor are, and moves the head when we shift-move.
-This is a generally accepted property of selections, and done right by
-every editing component built in the past twenty years.
-
-But not something that the browser selection APIs expose.
-
-Great. So when someone creates an 'upside-down' selection, the next
-time CodeMirror has to update the textarea, it'll re-create the
-selection as an 'upside-up' selection, with the anchor at the top, and
-the next cursor motion will behave in an unexpected way—our second
-up-arrow press in the example above will not do anything, since it is
-interpreted in exactly the same way as the first.
-
-No problem. We'll just, ehm, detect that the selection is
-upside-down (you can tell by the way it was created), and then, when
-an upside-down selection is present, and a cursor-moving key is
-pressed in combination with shift, we quickly collapse the selection
-in the textarea to its start, allow the key to take effect, and then
-combine its new head with its old anchor to get the real
-selection.
-
-In short, scary hacks could not be avoided entirely in CodeMirror
-2.
-
-And, the observant reader might ask, how do you even know that a
-key combo is a cursor-moving combo, if you claim you support any
-native key bindings? Well, we don't, but we can learn. The editor
-keeps a set known cursor-movement combos (initialized to the
-predictable defaults), and updates this set when it observes that
-pressing a certain key had (only) the effect of moving the cursor.
-This, of course, doesn't work if the first time the key is used was
-for extending an inverted selection, but it works most of the
-time.
-
-
- Intelligent Updating
-
-One thing that always comes up when you have a complicated internal
-state that's reflected in some user-visible external representation
-(in this case, the displayed code and the textarea's content) is
-keeping the two in sync. The naive way is to just update the display
-every time you change your state, but this is not only error prone
-(you'll forget), it also easily leads to duplicate work on big,
-composite operations. Then you start passing around flags indicating
-whether the display should be updated in an attempt to be efficient
-again and, well, at that point you might as well give up completely.
-
-I did go down that road, but then switched to a much simpler model:
-simply keep track of all the things that have been changed during an
-action, and then, only at the end, use this information to update the
-user-visible display.
-
-CodeMirror uses a concept of operations, which start by
-calling a specific set-up function that clears the state and end by
-calling another function that reads this state and does the required
-updating. Most event handlers, and all the user-visible methods that
-change state are wrapped like this. There's a method
-called operation that accepts a function, and returns
-another function that wraps the given function as an operation.
-
-It's trivial to extend this (as CodeMirror does) to detect nesting,
-and, when an operation is started inside an operation, simply
-increment the nesting count, and only do the updating when this count
-reaches zero again.
-
-If we have a set of changed ranges and know the currently shown
-range, we can (with some awkward code to deal with the fact that
-changes can add and remove lines, so we're dealing with a changing
-coordinate system) construct a map of the ranges that were left
-intact. We can then compare this map with the part of the document
-that's currently visible (based on scroll offset and editor height) to
-determine whether something needs to be updated.
-
-CodeMirror uses two update algorithms—a full refresh, where it just
-discards the whole part of the DOM that contains the edited text and
-rebuilds it, and a patch algorithm, where it uses the information
-about changed and intact ranges to update only the out-of-date parts
-of the DOM. When more than 30 percent (which is the current heuristic,
-might change) of the lines need to be updated, the full refresh is
-chosen (since it's faster to do than painstakingly finding and
-updating all the changed lines), in the other case it does the
-patching (so that, if you scroll a line or select another character,
-the whole screen doesn't have to be
-re-rendered). [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.
-
-
- Parsers can be Simple
-
-When I wrote CodeMirror 1, I
-thought interruptable
-parsers were a hugely scary and complicated thing, and I used a
-bunch of heavyweight abstractions to keep this supposed complexity
-under control: parsers
-were iterators
-that consumed input from another iterator, and used funny
-closure-resetting tricks to copy and resume themselves.
-
-This made for a rather nice system, in that parsers formed strictly
-separate modules, and could be composed in predictable ways.
-Unfortunately, it was quite slow (stacking three or four iterators on
-top of each other), and extremely intimidating to people not used to a
-functional programming style.
-
-With a few small changes, however, we can keep all those
-advantages, but simplify the API and make the whole thing less
-indirect and inefficient. CodeMirror
-2's mode API uses explicit state
-objects, and makes the parser/tokenizer a function that simply takes a
-state and a character stream abstraction, advances the stream one
-token, and returns the way the token should be styled. This state may
-be copied, optionally in a mode-defined way, in order to be able to
-continue a parse at a given point. Even someone who's never touched a
-lambda in his life can understand this approach. Additionally, far
-fewer objects are allocated in the course of parsing now.
-
-The biggest speedup comes from the fact that the parsing no longer
-has to touch the DOM though. In CodeMirror 1, on an older browser, you
-could see the parser work its way through the document,
-managing some twenty lines in each 50-millisecond time slice it got. It
-was reading its input from the DOM, and updating the DOM as it went
-along, which any experienced JavaScript programmer will immediately
-spot as a recipe for slowness. In CodeMirror 2, the parser usually
-finishes the whole document in a single 100-millisecond time slice—it
-manages some 1500 lines during that time on Chrome. All it has to do
-is munge strings, so there is no real reason for it to be slow
-anymore.
-
-
- What Gives?
-
-Given all this, what can you expect from CodeMirror 2?
-
-
-
-- Small. the base library is
-some 45k when minified
-now, 17k when gzipped. It's smaller than
-its own logo.
-
-- Lightweight. CodeMirror 2 initializes very
-quickly, and does almost no work when it is not focused. This means
-you can treat it almost like a textarea, have multiple instances on a
-page without trouble.
-
-- Huge document support. Since highlighting is
-really fast, and no DOM structure is being built for non-visible
-content, you don't have to worry about locking up your browser when a
-user enters a megabyte-sized document.
-
-- Extended API. Some things kept coming up in the
-mailing list, such as marking pieces of text or lines, which were
-extremely hard to do with CodeMirror 1. The new version has proper
-support for these built in.
-
-- Tab support. Tabs inside editable documents were,
-for some reason, a no-go. At least six different people announced they
-were going to add tab support to CodeMirror 1, none survived (I mean,
-none delivered a working version). CodeMirror 2 no longer removes tabs
-from your document.
-
-- Sane styling.
iframe nodes aren't
-really known for respecting document flow. Now that an editor instance
-is a plain div element, it is much easier to size it to
-fit the surrounding elements. You don't even have to make it scroll if
-you do not want to.
-
-
-
-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.
-
-
- Content Representation
-
-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.
-
-
- Keymaps
-
-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.
-
-
-
diff --git a/backend/_pv_1_3_5/static/codemirror/doc/logo.png b/backend/_pv_1_3_5/static/codemirror/doc/logo.png
deleted file mode 100755
index 9aabda1d7..000000000
Binary files a/backend/_pv_1_3_5/static/codemirror/doc/logo.png and /dev/null differ
diff --git a/backend/_pv_1_3_5/static/codemirror/doc/logo.svg b/backend/_pv_1_3_5/static/codemirror/doc/logo.svg
deleted file mode 100755
index 0aa6323f9..000000000
--- a/backend/_pv_1_3_5/static/codemirror/doc/logo.svg
+++ /dev/null
@@ -1,181 +0,0 @@
-
-
-
-
-
-
-
- User manual and reference guide
- version 5.23.0
-
-
- CodeMirror is a code-editor component that can be embedded in
- Web pages. The core 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 addons included in the distribution,
- and the list
- of externally hosted addons, 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.
-
-
-
- Basic Usage
-
- 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.
- For example:
-
- <script src="lib/codemirror.js"></script>
-<link rel="stylesheet" href="lib/codemirror.css">
-<script src="mode/javascript/javascript.js"></script>
-
- (Alternatively, use a module loader. More
- about that later.)
-
- 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 with the editor's contents when the form (if it is part
- of a form) is submitted. See the API
- reference for a full description of this method.
-
- Module loaders
-
- The files in the CodeMirror distribution contain shims for
- loading them (and their dependencies) in AMD or CommonJS
- environments. If the variables exports
- and module exist and have type object, CommonJS-style
- require will be used. If not, but there is a
- function define with an amd property
- present, AMD-style (RequireJS) will be used.
-
- It is possible to
- use Browserify or similar
- tools to statically build modules using CodeMirror. Alternatively,
- use RequireJS to dynamically
- load dependencies at runtime. Both of these approaches have the
- advantage that they don't use the global namespace and can, thus,
- do things like load multiple versions of CodeMirror alongside each
- other.
-
- Here's a simple example of using RequireJS to load CodeMirror:
-
- require([
- "cm/lib/codemirror", "cm/mode/htmlmixed/htmlmixed"
-], function(CodeMirror) {
- CodeMirror.fromTextArea(document.getElementById("code"), {
- lineNumbers: true,
- mode: "htmlmixed"
- });
-});
-
- It will automatically load the modes that the mixed HTML mode
- depends on (XML, JavaScript, and CSS). Do not use
- RequireJS' paths option to configure the path to
- CodeMirror, since it will break loading submodules through
- relative paths. Use
- the packages
- configuration option instead, as in:
-
- require.config({
- packages: [{
- name: "codemirror",
- location: "../path/to/codemirror",
- main: "lib/codemirror"
- }]
-});
-
-
-
-
- Configuration
-
- Both the CodeMirror
- function and its fromTextArea method take as second
- (optional) argument an object containing configuration options.
- Any option not supplied like this will be taken
- from CodeMirror.defaults, an
- object containing the default options. You can update this object
- to change the defaults on your page.
-
- Options are not checked in any way, so setting bogus option
- values is bound to lead to odd errors.
-
- These are the supported options:
-
-
- value: string|CodeMirror.Doc- The starting value of the editor. Can be a string, or
- a document object.
-
- mode: string|object- The mode to use. When not given, this will default to the
- first mode that was loaded. It may be a string, which either
- simply names the mode or is
- a MIME type
- associated with the mode. Alternatively, it may be an object
- containing configuration options for the mode, with
- a
name property that names the mode (for
- example {name: "javascript", json: true}). The demo
- pages for each mode contain information about what configuration
- parameters the mode supports. You can ask CodeMirror which modes
- and MIME types have been defined by inspecting
- the CodeMirror.modes
- and CodeMirror.mimeModes objects. The first maps
- mode names to their constructors, and the second maps MIME types
- to mode specs.
-
- lineSeparator: string|null- Explicitly set the line separator for the editor. By default
- (value
null), the document will be split on CRLFs
- as well as lone CRs and LFs, and a single LF will be used as
- line separator in all output (such
- as getValue). When a
- specific string is given, lines will only be split on that
- string, and output will, by default, use that same
- separator.
-
- theme: string- The theme to style the editor with. You must make sure the
- CSS file defining the corresponding
.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- How many spaces a block (whatever that means in the edited
- language) should be indented. The default is 2.
-
- smartIndent: boolean- Whether to use the context-sensitive indentation that the
- mode provides (or just indent the same as the line before).
- Defaults to true.
-
- tabSize: integer- The width of a tab character. Defaults to 4.
-
- indentWithTabs: boolean- Whether, when indenting, the first N*
tabSize
- spaces should be replaced by N tabs. Default is false.
-
- electricChars: boolean- Configures whether the editor should re-indent the current
- line when a character is typed that might change its proper
- indentation (only works if the mode supports indentation).
- Default is true.
-
- specialChars: RegExp- A regular expression used to determine which characters
- should be replaced by a
- special placeholder.
- Mostly useful for non-printing special characters. The default
- is
/[\u0000-\u001f\u007f\u00ad\u200b-\u200f\u2028\u2029\ufeff]/.
- specialCharPlaceholder: function(char) → Element- A function that, given a special character identified by
- the
specialChars
- option, produces a DOM node that is used to represent the
- character. By default, a red dot (•)
- is shown, with a title tooltip to indicate the character code.
-
- rtlMoveVisually: boolean- Determines whether horizontal cursor movement through
- right-to-left (Arabic, Hebrew) text is visual (pressing the left
- arrow moves the cursor left) or logical (pressing the left arrow
- moves to the next lower index in the string, which is visually
- right in right-to-left text). The default is
false
- on Windows, and true on other platforms.
-
- keyMap: string- Configures the key map to use. The default
- is
"default", which is the only key map defined
- in codemirror.js itself. Extra key maps are found in
- the key map directory. See
- the section on key maps for more
- information.
-
-
- - Can be used to specify extra key bindings for the editor,
- alongside the ones defined
- by
keyMap. Should be
- either null, or a valid key map value.
-
- lineWrapping: boolean- Whether CodeMirror should scroll or wrap for long lines.
- Defaults to
false (scroll).
-
- lineNumbers: boolean- Whether to show line numbers to the left of the editor.
-
- firstLineNumber: integer- At which number to start counting lines. Default is 1.
-
- lineNumberFormatter: function(line: integer) → string- A function used to format line numbers. The function is
- passed the line number, and should return a string that will be
- shown in the gutter.
-
- gutters: array<string>- Can be used to add extra gutters (beyond or instead of the
- line number gutter). Should be an array of CSS class names, each
- of which defines a
width (and optionally a
- background), and which will be used to draw the background of
- the gutters. May include
- the CodeMirror-linenumbers class, in order to
- explicitly set the position of the line number gutter (it will
- default to be to the right of all other gutters). These class
- names are the keys passed
- to setGutterMarker.
-
- fixedGutter: boolean- Determines whether the gutter scrolls along with the content
- horizontally (false) or whether it stays fixed during horizontal
- scrolling (true, the default).
-
- scrollbarStyle: string- Chooses a scrollbar implementation. The default
- is
"native", showing native scrollbars. The core
- library also provides the "null" style, which
- completely hides the
- scrollbars. Addons can
- implement additional scrollbar models.
-
- coverGutterNextToScrollbar: boolean- When
fixedGutter
- is on, and there is a horizontal scrollbar, by default the
- gutter will be visible to the left of this scrollbar. If this
- option is set to true, it will be covered by an element with
- class CodeMirror-gutter-filler.
-
- inputStyle: string- Selects the way CodeMirror handles input and focus. The core
- library defines the
"textarea"
- and "contenteditable" input models. On mobile
- browsers, the default is "contenteditable". On
- desktop browsers, the default is "textarea".
- Support for IME and screen readers is better in
- the "contenteditable" model. The intention is to
- make it the default on modern desktop browsers in the
- future.
-
- readOnly: boolean|string- This disables editing of the editor content by the user. If
- the special value
"nocursor" is given (instead of
- simply true), focusing of the editor is also
- disallowed.
-
- showCursorWhenSelecting: boolean- Whether the cursor should be drawn when a selection is
- active. Defaults to false.
-
- lineWiseCopyCut: boolean- When enabled, which is the default, doing copy or cut when
- there is no selection will copy or cut the whole lines that have
- cursors on them.
-
- undoDepth: integer- The maximum number of undo levels that the editor stores.
- Note that this includes selection change events. Defaults to
- 200.
-
- historyEventDelay: integer- The period of inactivity (in milliseconds) that will cause a
- new history event to be started when typing or deleting.
- Defaults to 1250.
-
- tabindex: integer- The tab
- index to assign to the editor. If not given, no tab index
- will be assigned.
-
- autofocus: boolean- Can be used to make CodeMirror focus itself on
- initialization. Defaults to off.
- When
fromTextArea is
- used, and no explicit value is given for this option, it will be
- set to true when either the source textarea is focused, or it
- has an autofocus attribute and no other element is
- focused.
-
-
- Below this a few more specialized, low-level options are
- listed. These are only useful in very specific situations, you
- might want to skip them the first time you read this manual.
-
-
- dragDrop: boolean- Controls whether drag-and-drop is enabled. On by default.
-
- allowDropFileTypes: array<string>- When set (default is
null) only files whose
- type is in the array can be dropped into the editor. The strings
- should be MIME types, and will be checked against
- the type
- of the File object as reported by the browser.
-
- cursorBlinkRate: number- Half-period in milliseconds used for cursor blinking. The default blink
- rate is 530ms. By setting this to zero, blinking can be disabled. A
- negative value hides the cursor entirely.
-
- cursorScrollMargin: number- How much extra space to always keep above and below the
- cursor when approaching the top or bottom of the visible view in
- a scrollable document. Default is 0.
-
- cursorHeight: number- Determines the height of the cursor. Default is 1, meaning
- it spans the whole height of the line. For some fonts (and by
- some tastes) a smaller height (for example
0.85),
- which causes the cursor to not reach all the way to the bottom
- of the line, looks better
-
-
- - Controls whether, when the context menu is opened with a
- click outside of the current selection, the cursor is moved to
- the point of the click. Defaults to
true.
-
- workTime, workDelay: number- Highlighting is done by a pseudo background-thread that will
- work for
workTime milliseconds, and then use
- timeout to sleep for workDelay milliseconds. The
- defaults are 200 and 300, you can change these options to make
- the highlighting more or less aggressive.
-
- pollInterval: number- Indicates how quickly CodeMirror should poll its input
- textarea for changes (when focused). Most input is captured by
- events, but some things, like IME input on some browsers, don't
- generate events that allow CodeMirror to properly detect it.
- Thus, it polls. Default is 100 milliseconds.
-
- flattenSpans: boolean- By default, CodeMirror will combine adjacent tokens into a
- single span if they have the same class. This will result in a
- simpler DOM tree, and thus perform better. With some kinds of
- styling (such as rounded corners), this will change the way the
- document looks. You can set this option to false to disable this
- behavior.
-
- addModeClass: boolean- When enabled (off by default), an extra CSS class will be
- added to each token, indicating the
- (inner) mode that produced it, prefixed
- with
"cm-m-". For example, tokens from the XML mode
- will get the cm-m-xml class.
-
- maxHighlightLength: number- When highlighting long lines, in order to stay responsive,
- the editor will give up and simply style the rest of the line as
- plain text when it reaches a certain position. The default is
- 10 000. You can set this to
Infinity to turn off
- this behavior.
-
- viewportMargin: integer- Specifies the amount of lines that are rendered above and
- below the part of the document that's currently scrolled into
- view. This affects the amount of updates needed when scrolling,
- and the amount of work that such an update does. You should
- usually leave it at its default, 10. Can be set
- to
Infinity to make sure the whole document is
- always rendered, and thus the browser's text search works on it.
- This will have bad effects on performance of big
- documents.
-
-
-
-
- Events
-
- Various CodeMirror-related objects emit events, which allow
- client code to react to various situations. Handlers for such
- events can be registered with the on
- and off methods on the objects
- that the event fires on. To fire your own events,
- use CodeMirror.signal(target, name, args...),
- where target is a non-DOM-node object.
-
- An editor instance fires the following events.
- The instance argument always refers to the editor
- itself.
-
-
- "change" (instance: CodeMirror, changeObj: object)- Fires every time the content of the editor is changed.
- The
changeObj is a {from, to, text, removed,
- origin} 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). removed is the text
- that used to be between from and to,
- which is overwritten by this change. This event is
- fired before the end of
- an operation, before the DOM updates
- happen.
-
- "changes" (instance: CodeMirror, changes: array<object>)- Like the
"change"
- event, but batched per operation,
- passing an array containing all the changes that happened in the
- operation. This event is fired after the operation finished, and
- display changes it makes will trigger a new operation.
-
- "beforeChange" (instance: CodeMirror, changeObj: object)- This event is fired before a change is applied, and its
- handler may choose to modify or cancel the change.
- The
changeObj object
- has from, to, and text
- properties, as with
- the "change" event. It
- also has a cancel() method, which can be called to
- cancel the change, and, if the change isn't
- coming from an undo or redo event, an update(from, to,
- text) method, which may be used to modify the change.
- Undo or redo changes can't be modified, because they hold some
- metainformation for restoring old marked ranges that is only
- valid for that specific change. All three arguments
- to update are optional, and can be left off to
- leave the existing value for that field
- intact. Note: you may not do anything from
- a "beforeChange" handler that would cause changes
- to the document or its visualization. Doing so will, since this
- handler is called directly from the bowels of the CodeMirror
- implementation, probably cause the editor to become
- corrupted.
-
- "cursorActivity" (instance: CodeMirror)- Will be fired when the cursor or selection moves, or any
- change is made to the editor content.
-
- "keyHandled" (instance: CodeMirror, name: string, event: Event)- Fired after a key is handled through a
- key map.
name is the name of the handled key (for
- example "Ctrl-X" or "'q'"),
- and event is the DOM keydown
- or keypress event.
-
- "inputRead" (instance: CodeMirror, changeObj: object)- Fired whenever new input is read from the hidden textarea
- (typed or pasted by the user).
-
- "electricInput" (instance: CodeMirror, line: integer)- Fired if text input matched the
- mode's electric patterns,
- and this caused the line's indentation to change.
-
- "beforeSelectionChange" (instance: CodeMirror, obj: {ranges, origin, update})- This event is fired before the selection is moved. Its
- handler may inspect the set of selection ranges, present as an
- array of
{anchor, head} objects in
- the ranges property of the obj
- argument, and optionally change them by calling
- the update method on this object, passing an array
- of ranges in the same format. The object also contains
- an origin property holding the origin string passed
- to the selection-changing method, if any. Handlers for this
- event have the same restriction
- as "beforeChange"
- handlers — they should not do anything to directly update the
- state of the editor.
-
- "viewportChange" (instance: CodeMirror, from: number, to: number)- Fires whenever the view port of
- the editor changes (due to scrolling, editing, or any other
- factor). The
from and to arguments
- give the new start and end of the viewport.
-
- "swapDoc" (instance: CodeMirror, oldDoc: Doc)- This is signalled when the editor's document is replaced
- using the
swapDoc
- method.
-
- "gutterClick" (instance: CodeMirror, line: integer, gutter: string, clickEvent: Event)- Fires when the editor gutter (the line-number area) is
- clicked. Will pass the editor instance as first argument, the
- (zero-based) number of the line that was clicked as second
- argument, the CSS class of the gutter that was clicked as third
- argument, and the raw
mousedown event object as
- fourth argument.
-
-
- - Fires when the editor gutter (the line-number area)
- receives a
contextmenu event. Will pass the editor
- instance as first argument, the (zero-based) number of the line
- that was clicked as second argument, the CSS class of the
- gutter that was clicked as third argument, and the raw
- contextmenu mouse event object as fourth argument.
- You can preventDefault the event, to signal that
- CodeMirror should do no further handling.
-
- "focus" (instance: CodeMirror, event: Event)- Fires whenever the editor is focused.
-
- "blur" (instance: CodeMirror, event: Event)- Fires whenever the editor is unfocused.
-
- "scroll" (instance: CodeMirror)- Fires when the editor is scrolled.
-
- "refresh" (instance: CodeMirror)- Fires when the editor is refreshed
- or resized. Mostly useful to invalidate
- cached values that depend on the editor or character size.
-
- "optionChange" (instance: CodeMirror, option: string)- Dispatched every time an option is changed with
setOption.
-
- "scrollCursorIntoView" (instance: CodeMirror, event: Event)- Fires when the editor tries to scroll its cursor into view.
- Can be hooked into to take care of additional scrollable
- containers around the editor. When the event object has
- its
preventDefault method called, CodeMirror will
- not itself try to scroll the window.
-
- "update" (instance: CodeMirror)- Will be fired whenever CodeMirror updates its DOM display.
-
- "renderLine" (instance: CodeMirror, line: LineHandle, element: Element)- Fired whenever a line is (re-)rendered to the DOM. Fired
- right after the DOM element is built, before it is
- added to the document. The handler may mess with the style of
- the resulting element, or add event handlers, but
- should not try to change the state of the editor.
-
- "mousedown",
- "dblclick", "touchstart", "contextmenu",
- "keydown", "keypress",
- "keyup", "cut", "copy", "paste",
- "dragstart", "dragenter",
- "dragover", "dragleave",
- "drop"
- (instance: CodeMirror, event: Event)- Fired when CodeMirror is handling a DOM event of this type.
- You can
preventDefault the event, or give it a
- truthy codemirrorIgnore property, to signal that
- CodeMirror should do no further handling.
-
-
- Document objects (instances
- of CodeMirror.Doc) emit the
- following events:
-
-
- "change" (doc: CodeMirror.Doc, changeObj: object)- Fired whenever a change occurs to the
- document.
changeObj has a similar type as the
- object passed to the
- editor's "change"
- event.
-
- "beforeChange" (doc: CodeMirror.Doc, change: object)- See the description of the
- same event on editor instances.
-
- "cursorActivity" (doc: CodeMirror.Doc)- Fired whenever the cursor or selection in this document
- changes.
-
- "beforeSelectionChange" (doc: CodeMirror.Doc, selection: {head, anchor})- Equivalent to
- the event by the same
- name as fired on editor instances.
-
-
- Line handles (as returned by, for
- example, getLineHandle)
- support these events:
-
-
- "delete" ()- Will be fired when the line object is deleted. A line object
- is associated with the start of the line. Mostly useful
- when you need to find out when your gutter
- markers on a given line are removed.
- "change" (line: LineHandle, changeObj: object)- Fires when the line's text content is changed in any way
- (but the line is not deleted outright). The
change
- object is similar to the one passed
- to change event on the editor
- object.
-
-
- Marked range handles (CodeMirror.TextMarker), as returned
- by markText
- and setBookmark, emit the
- following events:
-
-
- "beforeCursorEnter" ()- Fired when the cursor enters the marked range. From this
- event handler, the editor state may be inspected
- but not modified, with the exception that the range on
- which the event fires may be cleared.
- "clear" (from: {line, ch}, to: {line, ch})- Fired when the range is cleared, either through cursor
- movement in combination
- with
clearOnEnter
- or through a call to its clear() method. Will only
- be fired once per handle. Note that deleting the range through
- text editing does not fire this event, because an undo action
- might bring the range back into existence. from
- and to give the part of the document that the range
- spanned when it was cleared.
- "hide" ()- Fired when the last part of the marker is removed from the
- document by editing operations.
- "unhide" ()- Fired when, after the marker was removed by editing, a undo
- operation brought the marker back.
-
-
- Line widgets (CodeMirror.LineWidget), returned
- by addLineWidget, fire
- these events:
-
-
- "redraw" ()- Fired whenever the editor re-adds the widget to the DOM.
- This will happen once right after the widget is added (if it is
- scrolled into view), and then again whenever it is scrolled out
- of view and back in again, or when changes to the editor options
- or the line the widget is on require the widget to be
- redrawn.
-
-
-
-
- Key Maps
-
- Key maps are ways to associate keys with functionality. A key map
- is an object mapping strings that identify the keys to functions
- that implement their functionality.
-
- The CodeMirror distributions comes
- with Emacs, Vim,
- and Sublime Text-style keymaps.
-
- 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- to specify a modifier. So for
- example, Shift-Ctrl-Space would be a valid key
- identifier.
-
- Common example: map the Tab key to insert spaces instead of a tab
- character.
-
-
-editor.setOption("extraKeys", {
- Tab: function(cm) {
- var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
- cm.replaceSelection(spaces);
- }
-});
-
- 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.
-
- Multi-stroke key bindings can be specified
- by separating the key names by spaces in the property name, for
- example Ctrl-X Ctrl-V. When a map contains
- multi-stoke bindings or keys with modifiers that are not specified
- in the default order (Shift-Cmd-Ctrl-Alt), you must
- call CodeMirror.normalizeKeyMap on it before it can
- be used. This function takes a keymap and modifies it to normalize
- modifier order and properly recognize multi-stroke bindings. It
- will return the keymap itself.
-
- The CodeMirror.keyMap object associates key maps
- with names. User code and key map definitions can assign extra
- properties to this object. Anywhere where a key map is expected, a
- string can be given, which will be looked up in this object. It
- also contains the "default" key map holding the
- default bindings.
-
- The values of properties in key maps can be either functions of
- a single argument (the CodeMirror instance), strings, or
- false. Strings refer
- to commands, which are described below. If
- the property is set to false, CodeMirror leaves
- handling of the key up to the browser. A key handler function may
- return 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" or to functions that have a
- truthy motion property (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.
-
- Key maps 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 key map or an array of
- key maps.
-
- When a key map needs to set something up when it becomes
- active, or tear something down when deactivated, it can
- contain attach and/or detach properties,
- which should hold functions that take the editor instance and the
- next or previous keymap. Note that this only works for the
- top-level keymap, not for fallthrough
- maps or maps added
- with extraKeys
- or addKeyMap.
-
-
-
- Commands
-
- Commands are parameter-less actions that can be performed on an
- editor. Their main use is for key bindings. Commands are defined by
- adding properties to the CodeMirror.commands object.
- A number of common commands are defined by the library itself,
- most of them used by the default key bindings. The value of a
- command property must be a function of one argument (an editor
- instance).
-
- Some of the commands below are referenced in the default
- key map, but not defined by the core library. These are intended to
- be defined by user code or addons.
-
- Commands can also be run with
- the execCommand
- method.
-
-
- selectAllCtrl-A (PC), Cmd-A (Mac)- Select the whole content of the editor.
-
- singleSelectionEsc- When multiple selections are present, this deselects all but
- the primary selection.
-
- killLineCtrl-K (Mac)- Emacs-style line killing. Deletes the part of the line after
- the cursor. If that consists only of whitespace, the newline at
- the end of the line is also deleted.
-
- deleteLineCtrl-D (PC), Cmd-D (Mac)- Deletes the whole line under the cursor, including newline at the end.
-
- delLineLeft- Delete the part of the line before the cursor.
-
- delWrappedLineLeftCmd-Backspace (Mac)- Delete the part of the line from the left side of the visual line the cursor is on to the cursor.
-
- delWrappedLineRightCmd-Delete (Mac)- Delete the part of the line from the cursor to the right side of the visual line the cursor is on.
-
- undoCtrl-Z (PC), Cmd-Z (Mac)- Undo the last change.
-
- redoCtrl-Y (PC), Shift-Cmd-Z (Mac), Cmd-Y (Mac)- Redo the last undone change.
-
- undoSelectionCtrl-U (PC), Cmd-U (Mac)- Undo the last change to the selection, or if there are no
- selection-only changes at the top of the history, undo the last
- change.
-
- redoSelectionAlt-U (PC), Shift-Cmd-U (Mac)- Redo the last change to the selection, or the last text change if
- no selection changes remain.
-
- goDocStartCtrl-Home (PC), Cmd-Up (Mac), Cmd-Home (Mac)- Move the cursor to the start of the document.
-
- goDocEndCtrl-End (PC), Cmd-End (Mac), Cmd-Down (Mac)- Move the cursor to the end of the document.
-
- goLineStartAlt-Left (PC), Ctrl-A (Mac)- Move the cursor to the start of the line.
-
- goLineStartSmartHome- Move to the start of the text on the line, or if we are
- already there, to the actual start of the line (including
- whitespace).
-
- goLineEndAlt-Right (PC), Ctrl-E (Mac)- Move the cursor to the end of the line.
-
- goLineRightCmd-Right (Mac)- Move the cursor to the right side of the visual line it is on.
-
- goLineLeftCmd-Left (Mac)- Move the cursor to the left side of the visual line it is on. If
- this line is wrapped, that may not be the start of the line.
-
- goLineLeftSmart- Move the cursor to the left side of the visual line it is
- on. If that takes it to the start of the line, behave
- like
goLineStartSmart.
-
- goLineUpUp, Ctrl-P (Mac)- Move the cursor up one line.
-
- goLineDownDown, Ctrl-N (Mac)- Move down one line.
-
- goPageUpPageUp, Shift-Ctrl-V (Mac)- Move the cursor up one screen, and scroll up by the same distance.
-
- goPageDownPageDown, Ctrl-V (Mac)- Move the cursor down one screen, and scroll down by the same distance.
-
- goCharLeftLeft, Ctrl-B (Mac)- Move the cursor one character left, going to the previous line
- when hitting the start of line.
-
- goCharRightRight, Ctrl-F (Mac)- Move the cursor one character right, going to the next line
- when hitting the end of line.
-
- goColumnLeft- Move the cursor one character left, but don't cross line boundaries.
-
- goColumnRight- Move the cursor one character right, don't cross line boundaries.
-
- goWordLeftAlt-B (Mac)- Move the cursor to the start of the previous word.
-
- goWordRightAlt-F (Mac)- Move the cursor to the end of the next word.
-
- goGroupLeftCtrl-Left (PC), Alt-Left (Mac)- Move to the left of the group before the cursor. A group is
- a stretch of word characters, a stretch of punctuation
- characters, a newline, or a stretch of more than one
- whitespace character.
-
- goGroupRightCtrl-Right (PC), Alt-Right (Mac)- Move to the right of the group after the cursor
- (see above).
-
- delCharBeforeShift-Backspace, Ctrl-H (Mac)- Delete the character before the cursor.
-
- delCharAfterDelete, Ctrl-D (Mac)- Delete the character after the cursor.
-
- delWordBeforeAlt-Backspace (Mac)- Delete up to the start of the word before the cursor.
-
- delWordAfterAlt-D (Mac)- Delete up to the end of the word after the cursor.
-
- delGroupBeforeCtrl-Backspace (PC), Alt-Backspace (Mac)- Delete to the left of the group before the cursor.
-
- delGroupAfterCtrl-Delete (PC), Ctrl-Alt-Backspace (Mac), Alt-Delete (Mac)- Delete to the start of the group after the cursor.
-
- indentAutoShift-Tab- Auto-indent the current line or selection.
-
- indentMoreCtrl-] (PC), Cmd-] (Mac)- Indent the current line or selection by one indent unit.
-
- indentLessCtrl-[ (PC), Cmd-[ (Mac)- Dedent the current line or selection by one indent unit.
-
- insertTab- Insert a tab character at the cursor.
-
- insertSoftTab- Insert the amount of spaces that match the width a tab at
- the cursor position would have.
-
- defaultTabTab- If something is selected, indent it by
- one indent unit. If nothing is
- selected, insert a tab character.
-
- transposeCharsCtrl-T (Mac)- Swap the characters before and after the cursor.
-
- newlineAndIndentEnter- Insert a newline and auto-indent the new line.
-
- toggleOverwriteInsert- Flip the overwrite flag.
-
- saveCtrl-S (PC), Cmd-S (Mac)- Not defined by the core library, only referred to in
- key maps. Intended to provide an easy way for user code to define
- a save command.
-
- findCtrl-F (PC), Cmd-F (Mac)findNextCtrl-G (PC), Cmd-G (Mac)findPrevShift-Ctrl-G (PC), Shift-Cmd-G (Mac)replaceShift-Ctrl-F (PC), Cmd-Alt-F (Mac)replaceAllShift-Ctrl-R (PC), Shift-Cmd-Alt-F (Mac)- Not defined by the core library, but defined in
- the search addon (or custom client
- addons).
-
-
-
-
-
-
- Customized Styling
-
- Up to a certain extent, CodeMirror's look can be changed by
- modifying style sheet files. The style sheets supplied by modes
- simply provide the colors for that mode, and can be adapted in a
- very straightforward way. To style the editor itself, it is
- possible to alter or override the styles defined
- in codemirror.css.
-
- Some care must be taken there, since a lot of the rules in this
- file are necessary to have CodeMirror function properly. Adjusting
- colors should be safe, of course, and with some care a lot of
- other things can be changed as well. The CSS classes defined in
- this file serve the following roles:
-
-
- CodeMirror- The outer element of the editor. This should be used for the
- editor width, height, borders and positioning. Can also be used
- to set styles that should hold for everything inside the editor
- (such as font and font size), or to set a background. Setting
- this class'
height style to auto will
- make the editor resize to fit its
- content (it is recommended to also set
- the viewportMargin
- option to Infinity when doing this.
-
- CodeMirror-focused- Whenever the editor is focused, the top element gets this
- class. This is used to hide the cursor and give the selection a
- different color when the editor is not focused.
-
- CodeMirror-gutters- This is the backdrop for all gutters. Use it to set the
- default gutter background color, and optionally add a border on
- the right of the gutters.
-
- CodeMirror-linenumbers- Use this for giving a background or width to the line number
- gutter.
-
- CodeMirror-linenumber- Used to style the actual individual line numbers. These
- won't be children of the
CodeMirror-linenumbers
- (plural) element, but rather will be absolutely positioned to
- overlay it. Use this to set alignment and text properties for
- the line numbers.
-
- CodeMirror-lines- The visible lines. This is where you specify vertical
- padding for the editor content.
-
- CodeMirror-cursor- The cursor is a block element that is absolutely positioned.
- You can make it look whichever way you want.
-
- CodeMirror-selected- The selection is represented by
span elements
- with this class.
-
- CodeMirror-matchingbracket,
- CodeMirror-nonmatchingbracket- These are used to style matched (or unmatched) brackets.
-
-
- 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.
-
-
-
- Programming API
-
- A lot of CodeMirror features are only available through its
- API. Thus, you need to write code (or
- use addons) if you want to expose them to
- your users.
-
- 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.
-
- Methods prefixed with doc. can, unless otherwise
- specified, be called both on CodeMirror (editor)
- instances and CodeMirror.Doc instances. Methods
- prefixed with cm. are only available
- on CodeMirror instances.
-
- Constructor
-
- Constructing an editor instance is done with
- the CodeMirror(place: Element|fn(Element),
- ?option: object) constructor. If the place
- argument is a DOM element, the editor will be appended to it. If
- it is a function, it will be called, and is expected to place the
- editor into the document. options may be an element
- mapping option names to values. The options
- that it doesn't explicitly specify (or all options, if it is not
- passed) will be taken
- from CodeMirror.defaults.
-
- Note that the options object passed to the constructor will be
- mutated when the instance's options
- are changed, so you shouldn't share such
- objects between instances.
-
- See CodeMirror.fromTextArea
- for another way to construct an editor instance.
-
- Content manipulation methods
-
-
- doc.getValue(?separator: string) → string- Get the current editor content. You can pass it an optional
- argument to specify the string to be used to separate lines
- (defaults to
"\n").
- doc.setValue(content: string)- Set the editor content.
-
- doc.getRange(from: {line, ch}, to: {line, ch}, ?separator: string) → string- Get the text between the given points in the editor, which
- should be
{line, ch} objects. An optional third
- argument can be given to indicate the line separator string to
- use (defaults to "\n").
- doc.replaceRange(replacement: string, from: {line, ch}, to: {line, ch}, ?origin: string)- Replace the part of the document between
from
- and to with the given string. from
- and to must be {line, ch}
- objects. to can be left off to simply insert the
- string at position from. When origin
- is given, it will be passed on
- to "change" events, and
- its first letter will be used to determine whether this change
- can be merged with previous history events, in the way described
- for selection origins.
-
- doc.getLine(n: integer) → string- Get the content of line
n.
-
- doc.lineCount() → integer- Get the number of lines in the editor.
- doc.firstLine() → integer- Get the first line of the editor. This will
- usually be zero but for linked sub-views,
- or documents instantiated with a non-zero
- first line, it might return other values.
- doc.lastLine() → integer- Get the last line of the editor. This will
- usually be
doc.lineCount() - 1,
- but for linked sub-views,
- it might return other values.
-
- doc.getLineHandle(num: integer) → LineHandle- Fetches the line handle for the given line number.
- doc.getLineNumber(handle: LineHandle) → integer- Given a line handle, returns the current position of that
- line (or
null when it is no longer in the
- document).
- doc.eachLine(f: (line: LineHandle))doc.eachLine(start: integer, end: integer, f: (line: LineHandle))- Iterate over the whole document, or if
start
- and end line numbers are given, the range
- from start up to (not including) end,
- and call f for each line, passing the line handle.
- This is a faster way to visit a range of line handlers than
- calling getLineHandle
- for each of them. Note that line handles have
- a text property containing the line's content (as a
- string).
-
- doc.markClean()- Set the editor content as 'clean', a flag that it will
- retain until it is edited, and which will be set again when such
- an edit is undone again. Useful to track whether the content
- needs to be saved. This function is deprecated in favor
- of
changeGeneration,
- which allows multiple subsystems to track different notions of
- cleanness without interfering.
- doc.changeGeneration(?closeEvent: boolean) → integer- Returns a number that can later be passed
- to
isClean to test whether
- any edits were made (and not undone) in the meantime.
- If closeEvent is true, the current history event
- will be ‘closed’, meaning it can't be combined with further
- changes (rapid typing or deleting events are typically
- combined).
- doc.isClean(?generation: integer) → boolean- Returns whether the document is currently clean — not
- modified since initialization or the last call
- to
markClean if no
- argument is passed, or since the matching call
- to changeGeneration
- if a generation value is given.
-
-
- Cursor and selection methods
-
-
- doc.getSelection(?lineSep: string) → string- Get the currently selected code. Optionally pass a line
- separator to put between the lines in the output. When multiple
- selections are present, they are concatenated with instances
- of
lineSep in between.
- doc.getSelections(?lineSep: string) → array<string>- Returns an array containing a string for each selection,
- representing the content of the selections.
-
- doc.replaceSelection(replacement: string, ?select: string)- Replace the selection(s) with the given string. By default,
- the new selection ends up after the inserted text. The
- optional
select argument can be used to change
- this—passing "around" will cause the new text to be
- selected, passing "start" will collapse the
- selection to the start of the inserted text.
- doc.replaceSelections(replacements: array<string>, ?select: string)- The length of the given array should be the same as the
- number of active selections. Replaces the content of the
- selections with the strings in the array.
- The
select argument works the same as
- in replaceSelection.
-
- doc.getCursor(?start: string) → {line, ch}- Retrieve one end of the primary
- selection.
start is an optional string indicating
- which end of the selection to return. It may
- be "from", "to", "head"
- (the side of the selection that moves when you press
- shift+arrow), or "anchor" (the fixed side of the
- selection). Omitting the argument is the same as
- passing "head". A {line, ch} object
- will be returned.
- doc.listSelections() → array<{anchor, head}>- Retrieves a list of all current selections. These will
- always be sorted, and never overlap (overlapping selections are
- merged). Each object in the array contains
anchor
- and head properties referring to {line,
- ch} objects.
-
- doc.somethingSelected() → boolean- Return true if any text is selected.
- doc.setCursor(pos: {line, ch}|number, ?ch: number, ?options: object)- Set the cursor position. You can either pass a
- single
{line, ch} object, or the line and the
- character as two separate parameters. Will replace all
- selections with a single, empty selection at the given position.
- The supported options are the same as for setSelection.
-
- doc.setSelection(anchor: {line, ch}, ?head: {line, ch}, ?options: object)- Set a single selection range.
anchor
- and head should be {line, ch}
- objects. head defaults to anchor when
- not given. These options are supported:
-
- scroll: boolean- Determines whether the selection head should be scrolled
- into view. Defaults to true.
- origin: string- Determines whether the selection history event may be
- merged with the previous one. When an origin starts with the
- character
+, and the last recorded selection had
- the same origin and was similar (close
- in time, both
- collapsed or both non-collapsed), the new one will replace the
- old one. When it starts with *, it will always
- replace the previous event (if that had the same origin).
- Built-in motion uses the "+move" origin. User input uses the "+input" origin.
- bias: number- Determine the direction into which the selection endpoints
- should be adjusted when they fall inside
- an atomic range. Can be either -1
- (backward) or 1 (forward). When not given, the bias will be
- based on the relative position of the old selection—the editor
- will try to move further away from that, to prevent getting
- stuck.
-
-
- doc.setSelections(ranges: array<{anchor, head}>, ?primary: integer, ?options: object)- Sets a new set of selections. There must be at least one
- selection in the given array. When
primary is a
- number, it determines which selection is the primary one. When
- it is not given, the primary index is taken from the previous
- selection, or set to the last range if the previous selection
- had less ranges than the new one. Supports the same options
- as setSelection.
- doc.addSelection(anchor: {line, ch}, ?head: {line, ch})- Adds a new selection to the existing set of selections, and
- makes it the primary selection.
-
- doc.extendSelection(from: {line, ch}, ?to: {line, ch}, ?options: object)- Similar
- to
setSelection, but
- will, if shift is held or
- the extending flag is set, move the
- head of the selection while leaving the anchor at its current
- place. to is optional, and can be passed to ensure
- a region (for example a word or paragraph) will end up selected
- (in addition to whatever lies between that region and the
- current anchor). When multiple selections are present, all but
- the primary selection will be dropped by this method.
- Supports the same options as setSelection.
- doc.extendSelections(heads: array<{line, ch}>, ?options: object)- An equivalent
- of
extendSelection
- that acts on all selections at once.
- doc.extendSelectionsBy(f: function(range: {anchor, head}) → {line, ch}), ?options: object)- Applies the given function to all existing selections, and
- calls
extendSelections
- on the result.
- doc.setExtending(value: boolean)- Sets or clears the 'extending' flag, which acts similar to
- the shift key, in that it will cause cursor movement and calls
- to
extendSelection
- to leave the selection anchor in place.
- doc.getExtending() → boolean- Get the value of the 'extending' flag.
-
- cm.hasFocus() → boolean- Tells you whether the editor currently has focus.
-
- cm.findPosH(start: {line, ch}, amount: integer, unit: string, visually: boolean) → {line, ch, ?hitSide: boolean}- Used to find the target position for horizontal cursor
- motion.
start is a {line, ch}
- object, amount an integer (may be negative),
- and unit one of the
- string "char", "column",
- or "word". Will return a position that is produced
- by moving amount times the distance specified
- by unit. When visually is true, motion
- in right-to-left text will be visual rather than logical. When
- the motion was clipped by hitting the end or start of the
- document, the returned value will have a hitSide
- property set to true.
- cm.findPosV(start: {line, ch}, amount: integer, unit: string) → {line, ch, ?hitSide: boolean}- Similar to
findPosH,
- but used for vertical motion. unit may
- be "line" or "page". The other
- arguments and the returned value have the same interpretation as
- they have in findPosH.
-
- cm.findWordAt(pos: {line, ch}) → {anchor: {line, ch}, head: {line, ch}}- Returns the start and end of the 'word' (the stretch of
- letters, whitespace, or punctuation) at the given position.
-
-
- Configuration methods
-
-
- cm.setOption(option: string, value: any)- Change the configuration of the editor.
option
- should the name of an option,
- and value should be a valid value for that
- option.
- cm.getOption(option: string) → any- Retrieves the current value of the given option for this
- editor instance.
-
- cm.addKeyMap(map: object, bottom: boolean)- Attach an additional key map to the
- editor. This is mostly useful for addons that need to register
- some key handlers without trampling on
- the
extraKeys
- option. Maps added in this way have a higher precedence than
- the extraKeys
- and keyMap options,
- and between them, the maps added earlier have a lower precedence
- than those added later, unless the bottom argument
- was passed, in which case they end up below other key maps added
- with this method.
- cm.removeKeyMap(map: object)- Disable a keymap added
- with
addKeyMap. Either
- pass in the key map object itself, or a string, which will be
- compared against the name property of the active
- key maps.
-
- cm.addOverlay(mode: string|object, ?options: object)- Enable a highlighting overlay. This is a stateless mini-mode
- that can be used to add extra highlighting. For example,
- the search addon uses it to
- highlight the term that's currently being
- searched.
mode can be a mode
- spec or a mode object (an object with
- a token method).
- The options parameter is optional. If given, it
- should be an object, optionally containing the following options:
-
- opaque: bool- Defaults to off, but can be given to allow the overlay
- styling, when not
null, to override the styling of
- the base mode entirely, instead of the two being applied
- together.
- priority: number- Determines the ordering in which the overlays are
- applied. Those with high priority are applied after those
- with lower priority, and able to override the opaqueness of
- the ones that come before. Defaults to 0.
-
-
-
- cm.removeOverlay(mode: string|object)- Pass this the exact value passed for the
mode
- parameter to addOverlay,
- or a string that corresponds to the name property of
- that value, to remove an overlay again.
-
- cm.on(type: string, func: (...args))- Register an event handler for the given event type (a
- string) on the editor instance. There is also
- a
CodeMirror.on(object, type, func) version
- that allows registering of events on any object.
- cm.off(type: string, func: (...args))- Remove an event handler on the editor instance. An
- equivalent
CodeMirror.off(object, type,
- func) also exists.
-
-
- Document management methods
-
- Each editor is associated with an instance
- of CodeMirror.Doc, its document. A document
- represents the editor content, plus a selection, an undo history,
- and a mode. A document can only be
- associated with a single editor at a time. You can create new
- documents by calling the CodeMirror.Doc(text, mode,
- firstLineNumber) constructor. The last two arguments are
- optional and can be used to set a mode for the document and make
- it start at a line number other than 0, respectively.
-
-
- cm.getDoc() → Doc- Retrieve the currently active document from an editor.
- doc.getEditor() → CodeMirror- Retrieve the editor associated with a document. May
- return
null.
-
- cm.swapDoc(doc: CodeMirror.Doc) → Doc- Attach a new document to the editor. Returns the old
- document, which is now no longer associated with an editor.
-
- doc.copy(copyHistory: boolean) → Doc- Create an identical copy of the given doc.
- When
copyHistory is true, the history will also be
- copied. Can not be called directly on an editor.
-
- doc.linkedDoc(options: object) → Doc- Create a new document that's linked to the target document.
- Linked documents will stay in sync (changes to one are also
- applied to the other) until unlinked.
- These are the options that are supported:
-
- sharedHist: boolean- When turned on, the linked copy will share an undo
- history with the original. Thus, something done in one of
- the two can be undone in the other, and vice versa.
- from: integerto: integer- Can be given to make the new document a subview of the
- original. Subviews only show a given range of lines. Note
- that line coordinates inside the subview will be consistent
- with those of the parent, so that for example a subview
- starting at line 10 will refer to its first line as line 10,
- not 0.
- mode: string|object- By default, the new document inherits the mode of the
- parent. This option can be set to
- a mode spec to give it a
- different mode.
-
- doc.unlinkDoc(doc: CodeMirror.Doc)- Break the link between two documents. After calling this,
- changes will no longer propagate between the documents, and, if
- they had a shared history, the history will become
- separate.
- doc.iterLinkedDocs(function: (doc: CodeMirror.Doc, sharedHist: boolean))- Will call the given function for all documents linked to the
- target document. It will be passed two arguments, the linked document
- and a boolean indicating whether that document shares history
- with the target.
-
-
- History-related methods
-
-
- doc.undo()- Undo one edit (if any undo events are stored).
- doc.redo()- Redo one undone edit.
-
- doc.undoSelection()- Undo one edit or selection change.
- doc.redoSelection()- Redo one undone edit or selection change.
-
- doc.historySize() → {undo: integer, redo: integer}- Returns an object with
{undo, redo} properties,
- both of which hold integers, indicating the amount of stored
- undo and redo operations.
- doc.clearHistory()- Clears the editor's undo history.
- doc.getHistory() → object- Get a (JSON-serializable) representation of the undo history.
- doc.setHistory(history: object)- Replace the editor's undo history with the one provided,
- which must be a value as returned
- by
getHistory. Note that
- this will have entirely undefined results if the editor content
- isn't also the same as it was when getHistory was
- called.
-
-
- Text-marking methods
-
-
- doc.markText(from: {line, ch}, to: {line, ch}, ?options: object) → TextMarker- Can be used to mark a range of text with a specific CSS
- class name.
from and to should
- be {line, ch} objects. The options
- parameter is optional. When given, it should be an object that
- may contain the following configuration options:
-
- className: string- Assigns a CSS class to the marked stretch of text.
- inclusiveLeft: boolean- Determines whether
- text inserted on the left of the marker will end up inside
- or outside of it.
- inclusiveRight: boolean- Like
inclusiveLeft,
- but for the right side.
- atomic: boolean- Atomic ranges act as a single unit when cursor movement is
- concerned—i.e. it is impossible to place the cursor inside of
- them. In atomic ranges,
inclusiveLeft
- and inclusiveRight have a different meaning—they
- will prevent the cursor from being placed respectively
- directly before and directly after the range.
- collapsed: boolean- Collapsed ranges do not show up in the display. Setting a
- range to be collapsed will automatically make it atomic.
- clearOnEnter: boolean- When enabled, will cause the mark to clear itself whenever
- the cursor enters its range. This is mostly useful for
- text-replacement widgets that need to 'snap open' when the
- user tries to edit them. The
-
"clear" event
- fired on the range handle can be used to be notified when this
- happens.
- clearWhenEmpty: boolean- Determines whether the mark is automatically cleared when
- it becomes empty. Default is true.
- replacedWith: Element- Use a given node to display this range. Implies both
- collapsed and atomic. The given DOM node must be an
- inline element (as opposed to a block element).
- handleMouseEvents: boolean- When
replacedWith is given, this determines
- whether the editor will capture mouse and drag events
- occurring in this widget. Default is false—the events will be
- left alone for the default browser handler, or specific
- handlers on the widget, to capture.
- readOnly: boolean- A read-only span can, as long as it is not cleared, not be
- modified except by
- calling
setValue to reset
- the whole document. Note: adding a read-only span
- currently clears the undo history of the editor, because
- existing undo events being partially nullified by read-only
- spans would corrupt the history (in the current
- implementation).
- addToHistory: boolean- When set to true (default is false), adding this marker
- will create an event in the undo history that can be
- individually undone (clearing the marker).
- startStyle: string- Can be used to specify
- an extra CSS class to be applied to the leftmost span that
- is part of the marker.
- endStyle: string- Equivalent
- to
startStyle, but for the rightmost span.
- css: string- A string of CSS to be applied to the covered text. For example
"color: #fe3".
- title:
- string- When given, will give the nodes created
- for this span a HTML
title attribute with the
- given value.
- shared: boolean- When the
- target document is linked to other
- documents, you can set
shared to true to make the
- marker appear in all documents. By default, a marker appears
- only in its target document.
-
- The method will return an object that represents the marker
- (with constructor CodeMirror.TextMarker), which
- exposes three methods:
- clear(), to remove the mark,
- find(), which returns
- a {from, to} object (both holding document
- positions), indicating the current position of the marked range,
- or undefined if the marker is no longer in the
- document, and finally changed(),
- which you can call if you've done something that might change
- the size of the marker (for example changing the content of
- a replacedWith
- node), and want to cheaply update the display.
-
- doc.setBookmark(pos: {line, ch}, ?options: object) → TextMarker- Inserts a bookmark, a handle that follows the text around it
- as it is being edited, at the given position. A bookmark has two
- methods
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.
- The options argument is optional. If given, the following
- properties are recognized:
-
- widget: Element- Can be used to display a DOM
- node at the current location of the bookmark (analogous to
- the
replacedWith
- option to markText).
- insertLeft: boolean- By default, text typed
- when the cursor is on top of the bookmark will end up to the
- right of the bookmark. Set this option to true to make it go
- to the left instead.
- shared: boolean- See
- the corresponding option
- to
markText.
- handleMouseEvents: boolean- As with
markText,
- this determines whether mouse events on the widget inserted
- for this bookmark are handled by CodeMirror. The default is
- false.
-
-
- doc.findMarks(from: {line, ch}, to: {line, ch}) → array<TextMarker>- Returns an array of all the bookmarks and marked ranges
- found between the given positions (non-inclusive).
- doc.findMarksAt(pos: {line, ch}) → array<TextMarker>- Returns an array of all the bookmarks and marked ranges
- present at the given position.
- doc.getAllMarks() → array<TextMarker>- Returns an array containing all marked ranges in the document.
-
-
- Widget, gutter, and decoration methods
-
-
- doc.setGutterMarker(line: integer|LineHandle, gutterID: string, value: Element) → LineHandle- Sets the gutter marker for the given gutter (identified by
- its CSS class, see
- the
gutters option)
- to the given value. Value can be either null, to
- clear the marker, or a DOM element, to set it. The DOM element
- will be shown in the specified gutter next to the specified
- line.
-
- doc.clearGutter(gutterID: string)- Remove all gutter markers in
- the gutter with the given ID.
-
- doc.addLineClass(line: integer|LineHandle, where: string, class: string) → LineHandle- Set a CSS class name for the given line.
line
- can be a number or a line handle. where determines
- to which element this class should be applied, can can be one
- of "text" (the text element, which lies in front of
- the selection), "background" (a background element
- that will be behind the selection), "gutter" (the
- line's gutter space), or "wrap" (the wrapper node
- that wraps all of the line's elements, including gutter
- elements). class should be the name of the class to
- apply.
-
- doc.removeLineClass(line: integer|LineHandle, where: string, class: string) → LineHandle- Remove a CSS class from a line.
line can be a
- line handle or number. where should be one
- of "text", "background",
- or "wrap"
- (see addLineClass). class
- can be left off to remove all classes for the specified node, or
- be a string to remove only a specific class.
-
- doc.lineInfo(line: integer|LineHandle) → object- Returns the line number, text content, and marker status of
- the given line, which can be either a number or a line handle.
- The returned object has the structure
{line, handle, text,
- gutterMarkers, textClass, bgClass, wrapClass, widgets},
- where gutterMarkers is an object mapping gutter IDs
- to marker elements, and widgets is an array
- of line widgets attached to this
- line, and the various class properties refer to classes added
- with addLineClass.
-
- cm.addWidget(pos: {line, ch}, node: Element, scrollIntoView: boolean)- Puts
node, which should be an absolutely
- positioned DOM node, into the editor, positioned right below the
- given {line, ch} position.
- When scrollIntoView is true, the editor will ensure
- that the entire node is visible (if possible). To remove the
- widget again, simply use DOM methods (move it somewhere else, or
- call removeChild on its parent).
-
- doc.addLineWidget(line: integer|LineHandle, node: Element, ?options: object) → LineWidget- Adds a line widget, an element shown below a line, spanning
- the whole of the editor's width, and moving the lines below it
- downwards.
line should be either an integer or a
- line handle, and node should be a DOM node, which
- will be displayed below the given line. options,
- when given, should be an object that configures the behavior of
- the widget. The following options are supported (all default to
- false):
-
- coverGutter: boolean- Whether the widget should cover the gutter.
- noHScroll: boolean- Whether the widget should stay fixed in the face of
- horizontal scrolling.
- above: boolean- Causes the widget to be placed above instead of below
- the text of the line.
- handleMouseEvents: boolean- Determines whether the editor will capture mouse and
- drag events occurring in this widget. Default is false—the
- events will be left alone for the default browser handler,
- or specific handlers on the widget, to capture.
- insertAt: integer- By default, the widget is added below other widgets for
- the line. This option can be used to place it at a different
- position (zero for the top, N to put it after the Nth other
- widget). Note that this only has effect once, when the
- widget is created.
-
- Note that the widget node will become a descendant of nodes with
- CodeMirror-specific CSS classes, and those classes might in some
- cases affect it. This method returns an object that represents
- the widget placement. It'll have a line property
- pointing at the line handle that it is associated with, and the following methods:
-
- clear()- Removes the widget.
- changed()- Call
- this if you made some change to the widget's DOM node that
- might affect its height. It'll force CodeMirror to update
- the height of the line that contains the widget.
-
-
-
-
- Sizing, scrolling and positioning methods
-
-
- cm.setSize(width: number|string, height: number|string)- Programmatically set the size of the editor (overriding the
- applicable CSS
- rules).
width and height
- can be either numbers (interpreted as pixels) or CSS units
- ("100%", for example). You can
- pass null for either of them to indicate that that
- dimension should not be changed.
-
- cm.scrollTo(x: number, y: number)- Scroll the editor to a given (pixel) position. Both
- arguments may be left as
null
- or undefined to have no effect.
- cm.getScrollInfo() → {left, top, width, height, clientWidth, clientHeight}- Get an
{left, top, width, height, clientWidth,
- clientHeight} object that represents the current scroll
- position, the size of the scrollable area, and the size of the
- visible area (minus scrollbars).
- cm.scrollIntoView(what: {line, ch}|{left, top, right, bottom}|{from, to}|null, ?margin: number)- Scrolls the given position into view.
what may
- be null to scroll the cursor into view,
- a {line, ch} position to scroll a character into
- view, a {left, top, right, bottom} pixel range (in
- editor-local coordinates), or a range {from, to}
- containing either two character positions or two pixel squares.
- The margin parameter is optional. When given, it
- indicates the amount of vertical pixels around the given area
- that should be made visible as well.
-
- cm.cursorCoords(where: boolean|{line, ch}, mode: string) → {left, top, bottom}- Returns an
{left, top, bottom} object
- containing the coordinates of the cursor position.
- 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. If mode
- is "window", the coordinates are relative to the
- top-left corner of the currently visible (scrolled)
- window. where can be a boolean indicating whether
- you want the start (true) or the end
- (false) of the selection, or, if a {line,
- ch} object is given, it specifies the precise position at
- which you want to measure.
- cm.charCoords(pos: {line, ch}, ?mode: string) → {left, right, top, bottom}- Returns the position and dimensions of an arbitrary
- character.
pos should be a {line, ch}
- object. This differs from cursorCoords in that
- it'll give the size of the whole character, rather than just the
- position that the cursor would have when it would sit at that
- position.
- cm.coordsChar(object: {left, top}, ?mode: string) → {line, ch}- Given an
{left, top} object, returns
- the {line, ch} position that corresponds to it. The
- optional mode parameter determines relative to what
- the coordinates are interpreted. It may
- be "window", "page" (the default),
- or "local".
- cm.lineAtHeight(height: number, ?mode: string) → number- Computes the line at the given pixel
- height.
mode can be one of the same strings
- that coordsChar
- accepts.
- cm.heightAtLine(line: integer|LineHandle, ?mode: string, ?includeWidgets: bool) → number- Computes the height of the top of a line, in the coordinate
- system specified by
mode
- (see coordsChar), which
- defaults to "page". When a line below the bottom of
- the document is specified, the returned value is the bottom of
- the last line in the document. By default, the position of the
- actual text is returned. If `includeWidgets` is true and the
- line has line widgets, the position above the first line widget
- is returned.
- cm.defaultTextHeight() → number- Returns the line height of the default font for the editor.
- cm.defaultCharWidth() → number- Returns the pixel width of an 'x' in the default font for
- the editor. (Note that for non-monospace fonts, this is mostly
- useless, and even for monospace fonts, non-ascii characters
- might have a different width).
-
- cm.getViewport() → {from: number, to: number}- Returns a
{from, to} object indicating the
- start (inclusive) and end (exclusive) of the currently rendered
- part of the document. In big documents, when most content is
- scrolled out of view, CodeMirror will only render the visible
- part, and a margin around it. See also
- the viewportChange
- event.
-
- cm.refresh()- If your code does something to change the size of the editor
- element (window resizes are already listened for), or unhides
- it, you should probably follow up by calling this method to
- ensure CodeMirror is still looking as intended. See also
- the autorefresh addon.
-
-
- Mode, state, and token-related methods
-
- When writing language-aware functionality, it can often be
- useful to hook into the knowledge that the CodeMirror language
- mode has. See the section on modes for a
- more detailed description of how these work.
-
-
- doc.getMode() → object- Gets the (outer) mode object for the editor. Note that this
- is distinct from
getOption("mode"), which gives you
- the mode specification, rather than the resolved, instantiated
- mode object.
-
- cm.getModeAt(pos: {line, ch}) → object- Gets the inner mode at a given position. This will return
- the same as
getMode for
- simple modes, but will return an inner mode for nesting modes
- (such as htmlmixed).
-
- cm.getTokenAt(pos: {line, ch}, ?precise: boolean) → object- Retrieves information about the token the current mode found
- before the given position (a
{line, ch} object). The
- returned object has the following properties:
-
- start- The character (on the given line) at which the token starts.
- end- The character at which the token ends.
- string- The token's string.
- type- The token type the mode assigned
- to the token, such as
"keyword"
- or "comment" (may also be null).
- state- The mode's state at the end of this token.
-
- If precise is true, the token will be guaranteed to be accurate based on recent edits. If false or
- not specified, the token will use cached state information, which will be faster but might not be accurate if
- edits were recently made and highlighting has not yet completed.
-
-
- cm.getLineTokens(line: integer, ?precise: boolean) → array<{start, end, string, type, state}>- This is similar
- to
getTokenAt, but
- collects all tokens for a given line into an array. It is much
- cheaper than repeatedly calling getTokenAt, which
- re-parses the part of the line before the token for every call.
-
- cm.getTokenTypeAt(pos: {line, ch}) → string- This is a (much) cheaper version
- of
getTokenAt useful for
- when you just need the type of the token at a given position,
- and no other information. Will return null for
- unstyled tokens, and a string, potentially containing multiple
- space-separated style names, otherwise.
-
- cm.getHelpers(pos: {line, ch}, type: string) → array<helper>- Fetch the set of applicable helper values for the given
- position. Helpers provide a way to look up functionality
- appropriate for a mode. The
type argument provides
- the helper namespace (see
- registerHelper), in
- which the values will be looked up. When the mode itself has a
- property that corresponds to the type, that
- directly determines the keys that are used to look up the helper
- values (it may be either a single string, or an array of
- strings). Failing that, the mode's helperType
- property and finally the mode's name are used.
- - For example, the JavaScript mode has a
- property
fold containing "brace". When
- the brace-fold addon is loaded, that defines a
- helper named brace in the fold
- namespace. This is then used by
- the foldcode addon to
- figure out that it can use that folding function to fold
- JavaScript code.
- - When any 'global'
- helpers are defined for the given namespace, their predicates
- are called on the current mode and editor, and all those that
- declare they are applicable will also be added to the array that
- is returned.
-
- cm.getHelper(pos: {line, ch}, type: string) → helper- Returns the first applicable helper value.
- See
getHelpers.
-
- cm.getStateAfter(?line: integer, ?precise: boolean) → object- Returns the mode's parser state, if any, at the end of the
- given line number. If no line number is given, the state at the
- end of the document is returned. This can be useful for storing
- parsing errors in the state, or getting other kinds of
- contextual information for a line.
precise is defined
- as in getTokenAt().
-
-
- Miscellaneous methods
-
-
- cm.operation(func: () → any) → any- CodeMirror internally buffers changes and only updates its
- DOM structure after it has finished performing some operation.
- If you need to perform a lot of operations on a CodeMirror
- instance, you can call this method with a function argument. It
- will call the function, buffering up all changes, and only doing
- the expensive update after the function returns. This can be a
- lot faster. The return value from this method will be the return
- value of your function.
-
- cm.indentLine(line: integer, ?dir: string|integer)- Adjust the indentation of the given line. The second
- argument (which defaults to
"smart") may be one of:
-
- "prev"- Base indentation on the indentation of the previous line.
- "smart"- Use the mode's smart indentation if available, behave
- like
"prev" otherwise.
- "add"- Increase the indentation of the line by
- one indent unit.
- "subtract"- Reduce the indentation of the line.
- <integer>- Add (positive number) or reduce (negative number) the
- indentation by the given amount of spaces.
-
-
- cm.toggleOverwrite(?value: boolean)- Switches between overwrite and normal insert mode (when not
- given an argument), or sets the overwrite mode to a specific
- state (when given an argument).
-
- cm.isReadOnly() → boolean- Tells you whether the editor's content can be edited by the
- user.
-
- doc.lineSeparator()- Returns the preferred line separator string for this
- document, as per the option
- by the same name. When that option is
null, the
- string "\n" is returned.
-
- cm.execCommand(name: string)- Runs the command with the given name on the editor.
-
- doc.posFromIndex(index: integer) → {line, ch}- Calculates and returns a
{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.
- doc.indexFromPos(object: {line, ch}) → integer- The reverse of
posFromIndex.
-
- cm.focus()- Give the editor focus.
-
- cm.getInputField() → Element- Returns the input field for the editor. Will be a textarea
- or an editable div, depending on the value of
- the
inputStyle
- option.
- cm.getWrapperElement() → Element- Returns the DOM node that represents the editor, and
- controls its size. Remove this from your tree to delete an
- editor instance.
- cm.getScrollerElement() → Element- Returns the DOM node that is responsible for the scrolling
- of the editor.
- cm.getGutterElement() → Element- Fetches the DOM node that contains the editor gutters.
-
-
- Static properties
- The CodeMirror object itself provides
- several useful properties.
-
-
- CodeMirror.version: string- It contains a string that indicates the version of the
- library. This is a triple of
- integers
"major.minor.patch",
- where patch is zero for releases, and something
- else (usually one) for dev snapshots.
-
- CodeMirror.fromTextArea(textArea: TextAreaElement, ?config: object)- This method provides another way to initialize an editor. It
- 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. The text in the
- textarea will provide the content for the editor. A CodeMirror
- instance created this way has three additional methods:
-
- cm.save()- Copy the content of the editor into the textarea.
-
- cm.toTextArea()- Remove the editor, and restore the original textarea (with
- the editor's current content). If you dynamically create and
- destroy editors made with `fromTextArea`, without destroying
- the form they are part of, you should make sure to call
- `toTextArea` to remove the editor, or its `"submit"` handler
- on the form will cause a memory leak.
-
- cm.getTextArea() → TextAreaElement- Returns the textarea that the instance was based on.
-
-
-
- CodeMirror.defaults: object- An object containing default values for
- all options. You can assign to its
- properties to modify defaults (though this won't affect editors
- that have already been created).
-
- CodeMirror.defineExtension(name: string, value: any)- If you want to define extra methods in terms of the
- CodeMirror API, it is possible to
- use
defineExtension. This will cause the given
- value (usually a method) to be added to all CodeMirror instances
- created from then on.
-
- CodeMirror.defineDocExtension(name: string, value: any)- Like
defineExtension,
- but the method will be added to the interface
- for Doc objects instead.
-
- CodeMirror.defineOption(name: string,
- default: any, updateFunc: function)- Similarly,
defineOption can be used to define new options for
- CodeMirror. The updateFunc will be called with the
- editor instance and the new value when an editor is initialized,
- and whenever the option is modified
- through setOption.
-
- CodeMirror.defineInitHook(func: function)- If your extension just needs to run some
- code whenever a CodeMirror instance is initialized,
- use
CodeMirror.defineInitHook. Give it a function as
- its only argument, and from then on, that function will be called
- (with the instance as argument) whenever a new CodeMirror instance
- is initialized.
-
- CodeMirror.registerHelper(type: string, name: string, value: helper)- Registers a helper value with the given
name in
- the given namespace (type). This is used to define
- functionality that may be looked up by mode. Will create (if it
- doesn't already exist) a property on the CodeMirror
- object for the given type, pointing to an object
- that maps names to values. I.e. after
- doing CodeMirror.registerHelper("hint", "foo",
- myFoo), the value CodeMirror.hint.foo will
- point to myFoo.
-
- CodeMirror.registerGlobalHelper(type: string, name: string, predicate: fn(mode, CodeMirror), value: helper)- Acts
- like
registerHelper,
- but also registers this helper as 'global', meaning that it will
- be included by getHelpers
- whenever the given predicate returns true when
- called with the local mode and editor.
-
- CodeMirror.Pos(line: integer, ?ch: integer)- A constructor for the
{line, ch} objects that
- are used to represent positions in editor documents.
-
- CodeMirror.changeEnd(change: object) → {line, ch}- Utility function that computes an end position from a change
- (an object with
from, to,
- and text properties, as passed to
- various event handlers). The
- returned position will be the end of the changed
- range, after the change is applied.
-
-
-
-
- Addons
-
- The addon directory in the distribution contains a
- number of reusable components that implement extra editor
- functionality (on top of extension functions
- like defineOption, defineExtension,
- and registerHelper). In
- brief, they are:
-
-
- dialog/dialog.js- Provides a very simple way to query users for text input.
- Adds the
openDialog(template, callback, options) →
- closeFunction method to CodeMirror instances,
- which can be called with an HTML fragment or a detached DOM
- node that provides the prompt (should include an input
- or button tag), and a callback function that is called
- when the user presses enter. It returns a function closeFunction
- which, if called, will close the dialog immediately.
- openDialog takes the following options:
-
- closeOnEnter: bool- If true, the dialog will be closed when the user presses
- enter in the input. Defaults to
true.
- closeOnBlur: bool- Determines whether the dialog is closed when it loses focus. Defaults to
true.
- onKeyDown: fn(event: KeyboardEvent, value: string, close: fn()) → bool- An event handler that will be called whenever
keydown fires in the
- dialog's input. If your callback returns true,
- the dialog will not do any further processing of the event.
- onKeyUp: fn(event: KeyboardEvent, value: string, close: fn()) → bool- Same as
onKeyDown but for the
- keyup event.
- onInput: fn(event: InputEvent, value: string, close: fn()) → bool- Same as
onKeyDown but for the
- input event.
- onClose: fn(instance):- A callback that will be called after the dialog has been closed and
- removed from the DOM. No return value.
-
-
- Also adds an openNotification(template, options) →
- closeFunction function that simply shows an HTML
- fragment as a notification at the top of the editor. It takes a
- single option: duration, the amount of time after
- which the notification will be automatically closed. If
- duration is zero, the dialog will not be closed automatically.
-
- Depends on addon/dialog/dialog.css.
-
- search/searchcursor.js- Adds the
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() → booleanfindPrevious() → boolean- Search forward or backward from the current position.
- The return value indicates whether a match was found. If
- matching a regular expression, the return value will be the
- array returned by the
match method, in case you
- want to extract matched groups.
- from() → {line, ch}to() → {line, ch}- These are only valid when the last call
- to
findNext or findPrevious did
- not return false. They will return {line, ch}
- objects pointing at the start and end of the match.
- replace(text: string, ?origin: string)- Replaces the currently found match with the given text
- and adjusts the cursor position to reflect the
- replacement.
-
-
- search/search.js- Implements the search commands. CodeMirror has keys bound to
- these by default, but will not do anything with them unless an
- implementation is provided. Depends
- on
searchcursor.js, and will make use
- of openDialog when
- available to make prompting for search queries less ugly.
-
- search/jump-to-line.js- Implements a
jumpToLine command and binding Alt-G to it.
- Accepts linenumber, +/-linenumber, line:char,
- scroll% and :linenumber formats.
- This will make use of openDialog
- when available to make prompting for line number neater.
-
- search/matchesonscrollbar.js- Adds a
showMatchesOnScrollbar method to editor
- instances, which should be given a query (string or regular
- expression), optionally a case-fold flag (only applicable for
- strings), and optionally a class name (defaults
- to CodeMirror-search-match) as arguments. When
- called, matches of the given query will be displayed on the
- editor's vertical scrollbar. The method returns an object with
- a clear method that can be called to remove the
- matches. Depends on
- the annotatescrollbar
- addon, and
- the matchesonscrollbar.css
- file provides a default (transparent yellowish) definition of
- the CSS class applied to the matches. Note that the matches are
- only perfectly aligned if your scrollbar does not have buttons
- at the top and bottom. You can use
- the simplescrollbar
- addon to make sure of this. If this addon is loaded,
- the search addon will
- automatically use it.
-
- edit/matchbrackets.js- Defines an option
matchBrackets which, when set
- to true, causes matching brackets to be highlighted whenever the
- cursor is next to them. It also adds a
- method matchBrackets that forces this to happen
- once, and a method findMatchingBracket that can be
- used to run the bracket-finding algorithm that this uses
- internally.
-
- edit/closebrackets.js- Defines an option
autoCloseBrackets that will
- auto-close brackets and quotes when typed. By default, it'll
- auto-close ()[]{}''"", but you can pass it a string
- similar to that (containing pairs of matching characters), or an
- object with pairs and
- optionally explode properties to customize
- it. explode should be a similar string that gives
- the pairs of characters that, when enter is pressed between
- them, should have the second character also moved to its own
- line. By default, if the active mode has
- a closeBrackets property, that overrides the
- configuration given in the option. But you can add
- an override property with a truthy value to
- override mode-specific
- configuration. Demo
- here.
-
- edit/matchtags.js- Defines an option
matchTags that, when enabled,
- will cause the tags around the cursor to be highlighted (using
- the CodeMirror-matchingtag class). Also
- defines
- a command toMatchingTag,
- which you can bind a key to in order to jump to the tag matching
- the one under the cursor. Depends on
- the addon/fold/xml-fold.js
- addon. Demo here.
-
- edit/trailingspace.js- Adds an option
showTrailingSpace which, when
- enabled, adds the CSS class cm-trailingspace to
- stretches of whitespace at the end of lines.
- The demo has a nice
- squiggly underline style for this class.
-
- edit/closetag.js- Defines an
autoCloseTags option that will
- auto-close XML tags when '>' or '/'
- is typed, and
- a closeTag command that
- closes the nearest open tag. Depends on
- the fold/xml-fold.js addon. See
- the demo.
-
- edit/continuelist.js- Markdown specific. Defines
- a
"newlineAndIndentContinueMarkdownList" command
- that can be bound to enter to automatically
- insert the leading characters for continuing a list. See
- the Markdown mode
- demo.
-
-
- - Addon for commenting and uncommenting code. Adds four
- methods to CodeMirror instances:
-
-
- - Tries to uncomment the current selection, and if that
- fails, line-comments it.
-
- - Set the lines in the given range to be line comments. Will
- fall back to
blockComment when no line comment
- style is defined for the mode.
-
- - Wrap the code in the given range in a block comment. Will
- fall back to
lineComment when no block comment
- style is defined for the mode.
-
- - Try to uncomment the given range.
- Returns
true if a comment range was found and
- removed, false otherwise.
-
- The options object accepted by these methods may
- have the following properties:
-
- blockCommentStart, blockCommentEnd, blockCommentLead, lineComment: string- Override the comment string
- properties of the mode with custom comment strings.
- padding: string- A string that will be inserted after opening and leading
- markers, and before closing comment markers. Defaults to a
- single space.
- commentBlankLines: boolean- Whether, when adding line comments, to also comment lines
- that contain only whitespace.
- indent: boolean- When adding line comments and this is turned on, it will
- align the comment block to the current indentation of the
- first line of the block.
- fullLines: boolean- When block commenting, this controls whether the whole
- lines are indented, or only the precise range that is given.
- Defaults to
true.
-
- The addon also defines
- a toggleComment command,
- which is a shorthand command for calling
- toggleComment with no options.
-
- fold/foldcode.js- Helps with code folding. Adds a
foldCode method
- to editor instances, which will try to do a code fold starting
- at the given line, or unfold the fold that is already present.
- The method takes as first argument the position that should be
- folded (may be a line number or
- a Pos), and as second optional
- argument either a range-finder function, or an options object,
- supporting the following properties:
-
- rangeFinder: fn(CodeMirror, Pos)- The function that is used to find
- foldable ranges. If this is not directly passed, it will
- default to
CodeMirror.fold.auto, which
- uses getHelpers with
- a "fold" type to find folding functions
- appropriate for the local mode. There are files in
- the addon/fold/
- directory providing CodeMirror.fold.brace, which
- finds blocks in brace languages (JavaScript, C, Java,
- etc), CodeMirror.fold.indent, for languages where
- indentation determines block structure (Python, Haskell),
- and CodeMirror.fold.xml, for XML-style languages,
- and CodeMirror.fold.comment, for folding comment
- blocks.
- widget: string|Element- The widget to show for folded ranges. Can be either a
- string, in which case it'll become a span with
- class
CodeMirror-foldmarker, or a DOM node.
- scanUp: boolean- When true (default is false), the addon will try to find
- foldable ranges on the lines above the current one if there
- isn't an eligible one on the given line.
- minFoldSize: integer- The minimum amount of lines that a fold should span to be
- accepted. Defaults to 0, which also allows single-line
- folds.
-
- See the demo for an
- example.
-
- fold/foldgutter.js- Provides an option
foldGutter, which can be
- used to create a gutter with markers indicating the blocks that
- can be folded. Create a gutter using
- the gutters option,
- giving it the class CodeMirror-foldgutter or
- something else if you configure the addon to use a different
- class, and this addon will show markers next to folded and
- foldable blocks, and handle clicks in this gutter. Note that
- CSS styles should be applied to make the gutter, and the fold
- markers within it, visible. A default set of CSS styles are
- available in:
-
- addon/fold/foldgutter.css
- .
- The option
- can be either set to true, or an object containing
- the following optional option fields:
-
- gutter: string- The CSS class of the gutter. Defaults
- to
"CodeMirror-foldgutter". You will have to
- style this yourself to give it a width (and possibly a
- background). See the default gutter style rules above.
- indicatorOpen: string | Element- A CSS class or DOM element to be used as the marker for
- open, foldable blocks. Defaults
- to
"CodeMirror-foldgutter-open".
- indicatorFolded: string | Element- A CSS class or DOM element to be used as the marker for
- folded blocks. Defaults to
"CodeMirror-foldgutter-folded".
- rangeFinder: fn(CodeMirror, Pos)- The range-finder function to use when determining whether
- something can be folded. When not
- given,
CodeMirror.fold.auto
- will be used as default.
-
- The foldOptions editor option can be set to an
- object to provide an editor-wide default configuration.
- Demo here.
-
- runmode/runmode.js- Can be used to run a CodeMirror mode over text without
- actually opening an editor instance.
- See the demo for an example.
- There are alternate versions of the file available for
- running stand-alone
- (without including all of CodeMirror) and
- for running under
- node.js (see
bin/source-highlight for an example of using the latter).
-
- runmode/colorize.js- Provides a convenient way to syntax-highlight code snippets
- in a webpage. Depends on
- the
runmode addon (or
- its standalone variant). Provides
- a CodeMirror.colorize function that can be called
- with an array (or other array-ish collection) of DOM nodes that
- represent the code snippets. By default, it'll get
- all pre tags. Will read the data-lang
- attribute of these nodes to figure out their language, and
- syntax-color their content using the relevant CodeMirror mode
- (you'll have to load the scripts for the relevant modes
- yourself). A second argument may be provided to give a default
- mode, used when no language attribute is found for a node. Used
- in this manual to highlight example code.
-
- mode/overlay.js- Mode combinator that can be used to extend a mode with an
- 'overlay' — a secondary mode is run over the stream, along with
- the base mode, and can color specific pieces of text without
- interfering with the base mode.
- Defines
CodeMirror.overlayMode, which is used to
- create such a mode. See this
- demo for a detailed example.
-
- mode/multiplex.js- Mode combinator that can be used to easily 'multiplex'
- between several modes.
- Defines
CodeMirror.multiplexingMode which, when
- given as first argument a mode object, and as other arguments
- any number of {open, close, mode [, delimStyle, innerStyle, parseDelimiters]}
- 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.
- Pass "\n" for open or close
- if you want to switch on a blank line.
- - When
delimStyle is specified, it will be the token
- style returned for the delimiter tokens (as well as
- [delimStyle]-open on the opening token and
- [delimStyle]-close on the closing token).
- - When
innerStyle is specified, it will be the token
- style added for each inner mode token.
- - When
parseDelimiters is true, the content of
- the delimiters will also be passed to the inner mode.
- (And delimStyle is ignored.)
The outer
- mode will not see the content between the delimiters.
- See this demo for an
- example.
-
- hint/show-hint.js- Provides a framework for showing autocompletion hints.
- Defines
editor.showHint, which takes an optional
- options object, and pops up a widget that allows the user to
- select a completion. Finding hints is done with a hinting
- functions (the hint option), which is a function
- that take an editor instance and options object, and return
- a {list, from, to} object, where list
- is an array of strings or objects (the completions),
- and from and to give the start and end
- of the token that is being completed as {line, ch}
- objects. An optional selectedHint property (an
- integer) can be added to the completion object to control the
- initially selected hint.
- - If no hinting function is given, the addon will
- use
CodeMirror.hint.auto, which
- calls getHelpers with
- the "hint" type to find applicable hinting
- functions, and tries them one by one. If that fails, it looks
- for a "hintWords" helper to fetch a list of
- completable words for the mode, and
- uses CodeMirror.hint.fromList to complete from
- those.
- - When completions aren't simple strings, they should be
- objects with the following properties:
-
- text: string- The completion text. This is the only required
- property.
- displayText: string- The text that should be displayed in the menu.
- className: string- A CSS class name to apply to the completion's line in the
- menu.
- render: fn(Element, self, data)- A method used to create the DOM structure for showing the
- completion by appending it to its first argument.
- hint: fn(CodeMirror, self, data)- A method used to actually apply the completion, instead of
- the default behavior.
- from: {line, ch}- Optional
from position that will be used by pick() instead
- of the global one passed with the full list of completions.
- to: {line, ch}- Optional
to position that will be used by pick() instead
- of the global one passed with the full list of completions.
-
-
- - The plugin understands the following options (the options object
- will also be passed along to the hinting function, which may
- understand additional options):
-
- hint: function- A hinting function, as specified above. It is possible to
- set the
async property on a hinting function to
- true, in which case it will be called with
- arguments (cm, callback, ?options), and the
- completion interface will only be popped up when the hinting
- function calls the callback, passing it the object holding the
- completions.
- The hinting function can also return a promise, and the completion
- interface will only be popped when the promise resolves.
- By default, hinting only works when there is no
- selection. You can give a hinting function
- a supportsSelection property with a truthy value
- to indicate that it supports selections.
- completeSingle: boolean- Determines whether, when only a single completion is
- available, it is completed without showing the dialog.
- Defaults to true.
- alignWithWord: boolean- Whether the pop-up should be horizontally aligned with the
- start of the word (true, default), or with the cursor (false).
- closeOnUnfocus: boolean- When enabled (which is the default), the pop-up will close
- when the editor is unfocused.
- customKeys: keymap- Allows you to provide a custom key map of keys to be active
- when the pop-up is active. The handlers will be called with an
- extra argument, a handle to the completion menu, which
- has
moveFocus(n), setFocus(n), pick(),
- and close() methods (see the source for details),
- that can be used to change the focused element, pick the
- current element or close the menu. Additionally menuSize()
- can give you access to the size of the current dropdown menu,
- length give you the number of available completions, and
- data give you full access to the completion returned by the
- hinting function.
- extraKeys: keymap- Like
customKeys above, but the bindings will
- be added to the set of default bindings, instead of replacing
- them.
-
- The following events will be fired on the completions object
- during completion:
-
- "shown" ()- Fired when the pop-up is shown.
- "select" (completion, Element)- Fired when a completion is selected. Passed the completion
- value (string or object) and the DOM node that represents it
- in the menu.
- "pick" (completion)- Fired when a completion is picked. Passed the completion value
- (string or object).
- "close" ()- Fired when the completion is finished.
-
- This addon depends on styles
- from addon/hint/show-hint.css. Check
- out the demo for an
- example.
-
- hint/javascript-hint.js- Defines a simple hinting function for JavaScript
- (
CodeMirror.hint.javascript) and CoffeeScript
- (CodeMirror.hint.coffeescript) code. This will
- simply use the JavaScript environment that the editor runs in as
- a source of information about objects and their properties.
-
- hint/xml-hint.js- Defines
CodeMirror.hint.xml, which produces
- hints for XML tagnames, attribute names, and attribute values,
- guided by a schemaInfo option (a property of the
- second argument passed to the hinting function, or the third
- argument passed to CodeMirror.showHint).
The
- schema info should be an object mapping tag names to information
- about these tags, with optionally a "!top" property
- containing a list of the names of valid top-level tags. The
- values of the properties should be objects with optional
- properties children (an array of valid child
- element names, omit to simply allow all tags to appear)
- and attrs (an object mapping attribute names
- to null for free-form attributes, and an array of
- valid values for restricted
- attributes). Demo
- here.
-
- hint/html-hint.js- Provides schema info to
- the xml-hint addon for HTML
- documents. Defines a schema
- object
CodeMirror.htmlSchema that you can pass to
- as a schemaInfo option, and
- a CodeMirror.hint.html hinting function that
- automatically calls CodeMirror.hint.xml with this
- schema data. See
- the demo.
-
- hint/css-hint.js- A hinting function for CSS, SCSS, or LESS code.
- Defines
CodeMirror.hint.css.
-
- hint/anyword-hint.js- A very simple hinting function
- (
CodeMirror.hint.anyword) that simply looks for
- words in the nearby code and completes to those. Takes two
- optional options, word, a regular expression that
- matches words (sequences of one or more character),
- and range, which defines how many lines the addon
- should scan when completing (defaults to 500).
-
- hint/sql-hint.js- A simple SQL hinter. Defines
CodeMirror.hint.sql.
- Takes two optional options, tables, a object with
- table names as keys and array of respective column names as values,
- and defaultTable, a string corresponding to a
- table name in tables for autocompletion.
-
- search/match-highlighter.js- Adds a
highlightSelectionMatches option that
- can be enabled to highlight all instances of a currently
- selected word. Can be set either to true or to an object
- containing the following options: minChars, for the
- minimum amount of selected characters that triggers a highlight
- (default 2), style, for the style to be used to
- highlight the matches (default "matchhighlight",
- which will correspond to CSS
- class cm-matchhighlight), trim, which
- controls whether whitespace is trimmed from the selection,
- and showToken which can be set to true
- or to a regexp matching the characters that make up a word. When
- enabled, it causes the current word to be highlighted when
- nothing is selected (defaults to off).
- Demo here.
-
- lint/lint.js- Defines an interface component for showing linting warnings,
- with pluggable warning sources
- (see
html-lint.js,
- json-lint.js,
- javascript-lint.js,
- coffeescript-lint.js,
- and css-lint.js
- in the same directory). Defines a lint option that
- can be set to an annotation source (for
- example CodeMirror.lint.javascript), to an options
- object (in which case the getAnnotations field is
- used as annotation source), or simply to true. When
- no annotation source is
- specified, getHelper with
- type "lint" is used to find an annotation function.
- An annotation source function should, when given a document
- string, an options object, and an editor instance, return an
- array of {message, severity, from, to} objects
- representing problems. When the function has
- an async property with a truthy value, it will be
- called with an additional second argument, which is a callback
- to pass the array to. By default, the linter will run
- (debounced) whenever the document is changed. You can pass
- a lintOnChange: false option to disable that.
- Depends on addon/lint/lint.css. A demo can be
- found here.
-
- selection/mark-selection.js- Causes the selected text to be marked with the CSS class
-
CodeMirror-selectedtext when the styleSelectedText option
- is enabled. Useful to change the colour of the selection (in addition to the background),
- like in this demo.
-
- selection/active-line.js- Defines a
styleActiveLine option that, when
- enabled, gives the wrapper of the line that contains the cursor
- the class CodeMirror-activeline, adds a background
- with the class CodeMirror-activeline-background,
- and adds the class CodeMirror-activeline-gutter to
- the line's gutter space is enabled. The option's value may be a
- boolean or an object specifying the following options:
-
- nonEmpty: bool- Controls whether single-line selections, or just cursor
- selections, are styled. Defaults to false (only cursor
- selections).
-
- See the demo.
-
- selection/selection-pointer.js- Defines a
selectionPointer option which you can
- use to control the mouse cursor appearance when hovering over
- the selection. It can be set to a string,
- like "pointer", or to true, in which case
- the "default" (arrow) cursor will be used. You can
- see a demo here.
-
- mode/loadmode.js- Defines a
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.
-
- mode/meta.js- Provides meta-information about all the modes in the
- distribution in a single file.
- Defines
CodeMirror.modeInfo, an array of objects
- with {name, mime, mode} properties,
- where name is the human-readable
- name, mime the MIME type, and mode the
- name of the mode file that defines this MIME. There are optional
- properties mimes, which holds an array of MIME
- types for modes with multiple MIMEs associated,
- and ext, which holds an array of file extensions
- associated with this mode. Four convenience
- functions, CodeMirror.findModeByMIME,
- CodeMirror.findModeByExtension,
- CodeMirror.findModeByFileName
- and CodeMirror.findModeByName are provided, which
- return such an object given a MIME, extension, file name or mode name
- string. Note that, for historical reasons, this file resides in the
- top-level mode directory, not
- under addon. Demo.
-
-
- - Adds a
continueComments option, which sets whether the
- editor will make the next line continue a comment when you press Enter
- inside a comment block. Can be set to a boolean to enable/disable this
- functionality. Set to a string, it will continue comments using a custom
- shortcut. Set to an object, it will use the key property for
- a custom shortcut and the boolean continueLineComment
- property to determine whether single-line comments should be continued
- (defaulting to true).
-
- display/placeholder.js- Adds a
placeholder option that can be used to
- make content appear in the editor when it is empty and not
- focused. It can hold either a string or a DOM node. Also gives
- the editor a CodeMirror-empty CSS class whenever it
- doesn't contain any text.
- See the demo.
-
- display/fullscreen.js- Defines an option
fullScreen that, when set
- to true, will make the editor full-screen (as in,
- taking up the whole browser window). Depends
- on fullscreen.css. Demo
- here.
-
- display/autorefresh.js- This addon can be useful when initializing an editor in a
- hidden DOM node, in cases where it is difficult to
- call
refresh when the editor
- becomes visible. It defines an option autoRefresh
- which you can set to true to ensure that, if the editor wasn't
- visible on initialization, it will be refreshed the first time
- it becomes visible. This is done by polling every 250
- milliseconds (you can pass a value like {delay:
- 500} as the option value to configure this). Note that
- this addon will only refresh the editor once when it
- first becomes visible, and won't take care of further restyling
- and resizing.
-
- scroll/simplescrollbars.js- Defines two additional scrollbar
- models,
"simple" and "overlay"
- (see demo) that can
- be selected with
- the scrollbarStyle
- option. Depends
- on simplescrollbars.css,
- which can be further overridden to style your own
- scrollbars.
-
- scroll/annotatescrollbar.js- Provides functionality for showing markers on the scrollbar
- to call out certain parts of the document. Adds a
- method
annotateScrollbar to editor instances that
- can be called, with a CSS class name as argument, to create a
- set of annotations. The method returns an object
- whose update method can be called with an array
- of {from: Pos, to: Pos} objects marking the ranges
- to be highlighted. To detach the annotations, call the
- object's clear method.
-
- display/rulers.js- Adds a
rulers option, which can be used to show
- one or more vertical rulers in the editor. The option, if
- defined, should be given an array of {column [, className,
- color, lineStyle, width]} objects or numbers (which
- indicate a column). The ruler will be displayed at the column
- indicated by the number or the column property.
- The className property can be used to assign a
- custom style to a ruler. Demo
- here.
-
- display/panel.js- Defines an
addPanel method for CodeMirror
- instances, which places a DOM node above or below an editor, and
- shrinks the editor to make room for the node. The method takes
- as first argument as DOM node, and as second an optional options
- object. The Panel object returned by this method
- has a clear method that is used to remove the
- panel, and a changed method that can be used to
- notify the addon when the size of the panel's DOM node has
- changed.
- The method accepts the following options:
-
- position: string- Controls the position of the newly added panel. The
- following values are recognized:
-
- top (default)- Adds the panel at the very top.
- after-top- Adds the panel at the bottom of the top panels.
- bottom- Adds the panel at the very bottom.
- before-bottom- Adds the panel at the top of the bottom panels.
-
-
- before: Panel- The new panel will be added before the given panel.
- after: Panel- The new panel will be added after the given panel.
- replace: Panel- The new panel will replace the given panel.
- stable: bool- Whether to scroll the editor to keep the text's vertical
- position stable, when adding a panel above it. Defaults to false.
-
- When using the after, before or replace options,
- if the panel doesn't exists or has been removed,
- the value of the position option will be used as a fallback.
-
- A demo of the addon is available here.
-
-
- wrap/hardwrap.js- Addon to perform hard line wrapping/breaking for paragraphs
- of text. Adds these methods to editor instances:
-
- wrapParagraph(?pos: {line, ch}, ?options: object)- Wraps the paragraph at the given position.
- If
pos is not given, it defaults to the cursor
- position.
- wrapRange(from: {line, ch}, to: {line, ch}, ?options: object)- Wraps the given range as one big paragraph.
- wrapParagraphsInRange(from: {line, ch}, to: {line, ch}, ?options: object)- Wraps the paragraphs in (and overlapping with) the
- given range individually.
-
- The following options are recognized:
-
- paragraphStart, paragraphEnd: RegExp- Blank lines are always considered paragraph boundaries.
- These options can be used to specify a pattern that causes
- lines to be considered the start or end of a paragraph.
- column: number- The column to wrap at. Defaults to 80.
- wrapOn: RegExp- A regular expression that matches only those
- two-character strings that allow wrapping. By default, the
- addon wraps on whitespace and after dash characters.
- killTrailingSpace: boolean- Whether trailing space caused by wrapping should be
- preserved, or deleted. Defaults to true.
-
- A demo of the addon is available here.
-
-
- merge/merge.js- Implements an interface for merging changes, using either a
- 2-way or a 3-way view. The
CodeMirror.MergeView
- constructor takes arguments similar to
- the CodeMirror
- constructor, first a node to append the interface to, and then
- an options object. Options are passed through to the editors
- inside the view. These extra options are recognized:
-
- origLeft and origRight: string- If given these provide original versions of the
- document, which will be shown to the left and right of the
- editor in non-editable CodeMirror instances. The merge
- interface will highlight changes between the editable
- document and the original(s). To create a 2-way (as opposed
- to 3-way) merge view, provide only one of them.
- revertButtons: boolean- Determines whether buttons that allow the user to revert
- changes are shown. Defaults to true.
- connect: string- Sets the style used to connect changed chunks of code.
- By default, connectors are drawn. When this is set
- to
"align", the smaller chunk is padded to
- align with the bigger chunk instead.
- collapseIdentical: boolean|number- When true (default is false), stretches of unchanged
- text will be collapsed. When a number is given, this
- indicates the amount of lines to leave visible around such
- stretches (which defaults to 2).
- allowEditingOriginals: boolean- Determines whether the original editor allows editing.
- Defaults to false.
- showDifferences: boolean- When true (the default), changed pieces of text are
- highlighted.
- chunkClassLocation: string|Array- By default the chunk highlights are added
- using
addLineClass
- with "background". Override this to customize it to be any
- valid `where` parameter or an Array of valid `where`
- parameters.
-
- The addon also defines commands "goNextDiff"
- and "goPrevDiff" to quickly jump to the next
- changed chunk. Demo
- here.
-
- tern/tern.js- Provides integration with
- the Tern JavaScript analysis
- engine, for completion, definition finding, and minor
- refactoring help. See the demo
- for a very simple integration. For more involved scenarios, see
- the comments at the top of
- the addon and the
- implementation of the
- (multi-file) demonstration
- on the Tern website.
-
-
-
-
- Writing CodeMirror Modes
-
- 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.
-
- This section describes the low-level mode interface. Many modes
- are written directly against this, since it offers a lot of
- control, but for a quick mode definition, you might want to use
- the simple mode addon.
-
- 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 in 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 are encouraged to use
- the 'standard' names defined in the themes (without
- the cm- prefix). If that fails, it is also possible
- to come up with your own and write your own CSS theme file.
-
-
A typical token string would
- be "variable" or "comment". Multiple
- styles can be returned (separated by spaces), for
- example "string error" for a thing that looks like a
- string but is invalid somehow (say, missing its closing quote).
- When a style is prefixed by "line-"
- or "line-background-", the style will be applied to
- the whole line, analogous to what
- the addLineClass method
- does—styling the "text" in the simple case, and
- the "background" element
- when "line-background-" is prefixed.
-
- The stream object that's passed
- to token encapsulates a line of code (tokens may
- never span lines) and our current position in that line. It has
- the following API:
-
-
- eol() → boolean- Returns true only if the stream is at the end of the
- line.
- sol() → boolean- Returns true only if the stream is at the start of the
- line.
-
- peek() → string- Returns the next character in the stream without advancing
- it. Will return a
null at the end of the
- line.
- next() → string- Returns the next character in the stream and advances it.
- Also returns
null when no more characters are
- available.
-
- eat(match: string|regexp|function(char: string) → boolean) → stringmatch 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: string|regexp|function(char: string) → boolean) → boolean- Repeatedly calls
eat with the given argument,
- until it fails. Returns true if any characters were eaten.
- eatSpace() → boolean- Shortcut for
eatWhile when matching
- white-space.
- skipToEnd()- Moves the position to the end of the line.
- skipTo(ch: string) → boolean- Skips to the next occurrence of the given character, if
- found on the current line (doesn't advance the stream if the
- character does not occur on the line). Returns true if the
- character was found.
- match(pattern: string, ?consume: boolean, ?caseFold: boolean) → booleanmatch(pattern: regexp, ?consume: boolean) → array<string>- Act like a
- multi-character
eat—if consume is true
- or not given—or a look-ahead that doesn't update the stream
- position—if it is false. pattern can be either a
- string or a regular expression starting with ^.
- When it is a string, caseFold can be set to true to
- make the match case-insensitive. When successfully matching a
- regular expression, the returned value will be the array
- returned by match, in case you need to extract
- matched groups.
-
- backUp(n: integer)- Backs up the stream
n characters. Backing it up
- further than the start of the current token will cause things to
- break, so be careful.
- column() → integer- Returns the column (taking into account tabs) at which the
- current token starts.
- indentation() → integer- Tells you how far the current line has been indented, in
- spaces. Corrects for tab characters.
-
- current() → string- Get the string between the start of the current token and
- the current stream position.
-
-
- 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.
-
- If you want your mode to provide smart indentation
- (through the indentLine
- method and the indentAuto
- and newlineAndIndent commands, to which keys can be
- bound), 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. An indentation method may
- return CodeMirror.Pass to indicate that it
- could not come up with a precise indentation.
-
-
-
- Finally, a mode may define either
- an electricChars or an electricInput
- property, which are used to automatically reindent the line when
- certain patterns are typed and
- the electricChars
- option is enabled. electricChars may be a string, and
- will trigger a reindent whenever one of the characters in that
- string are typed. Often, it is more appropriate to
- use electricInput, which should hold a regular
- expression, and will trigger indentation when the part of the
- line before the cursor matches the expression. It should
- usually end with a $ character, so that it only
- matches when the indentation-changing pattern was just typed, not when something was
- typed after the pattern.
-
- So, to summarize, a mode must provide
- a token method, and it may
- provide startState, copyState,
- and indent methods. For an example of a trivial mode,
- see the diff mode, for a more
- involved example, see the 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.
-
- In a nested mode, it is recommended to add an
- extra method, innerMode which, given
- a state object, returns a {state, mode} object with
- the inner mode and its state for the current position. These are
- used by utility scripts such as the tag
- closer to get context information. Use
- the CodeMirror.innerMode helper function to, starting
- from a mode and a state, recursively walk down to the innermost
- mode and 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.
-
- It is possible, and encouraged, 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.
-
- If a mode specification wants to add some properties to the
- resulting mode object, typically for use
- with getHelpers, it may
- contain a modeProps property, which holds an object.
- This object's properties will be copied to the actual mode
- object.
-
- Sometimes, it is useful to add or override mode
- object properties from external code.
- The CodeMirror.extendMode function
- can be used to add properties to mode objects produced for a
- specific mode. Its first argument is the name of the mode, its
- second an object that specifies the properties that should be
- added. This is mostly useful to add utilities that can later be
- looked up through getMode.
-
-
-
- VIM Mode API
-
- CodeMirror has a robust VIM mode that attempts to faithfully
- emulate VIM's most useful features. It can be enabled by
- including keymap/vim.js
- and setting the keyMap option to
- "vim".
-
- Configuration
-
- VIM mode accepts configuration options for customizing
- behavior at run time. These methods can be called at any time
- and will affect all existing CodeMirror instances unless
- specified otherwise. The methods are exposed on the
- CodeMirror.Vim object.
-
-
- setOption(name: string, value: any, ?cm: CodeMirror, ?cfg: object)- Sets the value of a VIM option.
name should
- be the name of an option. If cfg.scope is not set
- and cm is provided, then sets the global and
- instance values of the option. Otherwise, sets either the
- global or instance value of the option depending on whether
- cfg.scope is global or
- local.
- getOption(name: string, ?cm: CodeMirror: ?cfg: object)- Gets the current value of a VIM option. If
-
cfg.scope is not set and cm is
- provided, then gets the instance value of the option, falling
- back to the global value if not set. If cfg.scope is provided, then gets the global or
- local value without checking the other.
-
- map(lhs: string, rhs: string, ?context: string)- Maps a key sequence to another key sequence. Implements
- VIM's
:map command. To map ; to : in VIM would be
- :map ; :. That would translate to
- CodeMirror.Vim.map(';', ':');.
- The context can be normal,
- visual, or insert, which correspond
- to :nmap, :vmap, and
- :imap
- respectively.
-
- mapCommand(keys: string, type: string, name: string, ?args: object, ?extra: object)- Maps a key sequence to a
motion,
- operator, or action type command.
- The args object is passed through to the command when it is
- invoked by the provided key sequence.
- extras.context can be normal,
- visual, or insert, to map the key
- sequence only in the corresponding mode.
- extras.isEdit is applicable only to actions,
- determining whether it is recorded for replay for the
- . single-repeat command.
-
-
- Extending VIM
-
- CodeMirror's VIM mode implements a large subset of VIM's core
- editing functionality. But since there's always more to be
- desired, there is a set of APIs for extending VIM's
- functionality. As with the configuration API, the methods are
- exposed on CodeMirror.Vim and may
- be called at any time.
-
-
- defineOption(name: string, default: any, type: string, ?aliases: array<string>, ?callback: function (?value: any, ?cm: CodeMirror) → ?any)- Defines a VIM style option and makes it available to the
-
:set command. Type can be boolean or
- string, used for validation and by
- :set to determine which syntax to accept. If a
- callback is passed in, VIM does not store the value of the
- option itself, but instead uses the callback as a setter/getter. If the
- first argument to the callback is undefined, then the
- callback should return the value of the option. Otherwise, it should set
- instead. Since VIM options have global and instance values, whether a
- CodeMirror instance is passed in denotes whether the global
- or local value should be used. Consequently, it's possible for the
- callback to be called twice for a single setOption or
- getOption call. Note that right now, VIM does not support
- defining buffer-local options that do not have global values. If an
- option should not have a global value, either always ignore the
- cm parameter in the callback, or always pass in a
- cfg.scope to setOption and
- getOption.
-
- defineMotion(name: string, fn: function(cm: CodeMirror, head: {line, ch}, ?motionArgs: object}) → {line, ch})- Defines a motion command for VIM. The motion should return
- the desired result position of the cursor.
head
- is the current position of the cursor. It can differ from
- cm.getCursor('head') if VIM is in visual mode.
- motionArgs is the object passed into
- mapCommand().
-
- defineOperator(name: string, fn: function(cm: CodeMirror, ?operatorArgs: object, ranges: array<{anchor, head}>) → ?{line, ch})- Defines an operator command, similar to
- defineMotion. ranges is the range
- of text the operator should operate on. If the cursor should
- be set to a certain position after the operation finishes, it
- can return a cursor object.
-
- defineAction(name: string, fn: function(cm: CodeMirror, ?actionArgs: object))- Defines an action command, similar to
-
defineMotion. Action commands
- can have arbitrary behavior, making them more flexible than
- motions and operators, at the loss of orthogonality.
-
- defineEx(name: string, ?prefix: string, fn: function(cm: CodeMirror, ?params: object))- Defines an Ex command, and maps it to
:name.
- If a prefix is provided, it, and any prefixed substring of the
- name beginning with the prefix can
- be used to invoke the command. If the prefix is
- falsy, then name is used as the prefix.
- params.argString contains the part of the prompted
- string after the command name. params.args is
- params.argString split by whitespace. If the
- command was prefixed with a
- line range,
- params.line and params.lineEnd will
- be set.
-
-
-
-
-
-
-
diff --git a/backend/_pv_1_3_5/static/codemirror/doc/realworld.html b/backend/_pv_1_3_5/static/codemirror/doc/realworld.html
deleted file mode 100755
index 2429ba165..000000000
--- a/backend/_pv_1_3_5/static/codemirror/doc/realworld.html
+++ /dev/null
@@ -1,187 +0,0 @@
-
-
-
-
-Release notes and version history
-
-
-
- Version 5.x
-
- 19-01-2017: Version 5.23.0:
-
-
- - Presentation-related elements DOM elements are now marked as such to help screen readers.
- - markdown mode: Be more picky about what HTML tags look like to avoid false positives.
- findModeByMIME now understands +json and +xml MIME suffixes.- closebrackets addon: Add support for an
override option to ignore language-specific defaults.
- - panel addon: Add a
stable option that auto-scrolls the content to keep it in the same place when inserting/removing a panel.
-
-
- 20-12-2016: Version 5.22.0:
-
-
- - sublime bindings: Make
selectBetweenBrackets work with multiple cursors.
- - javascript mode: Fix issues with parsing complex TypeScript types, imports, and exports.
- - A contentEditable editor instance with autofocus enabled no longer crashes during initializing.
- - emacs bindings: Export
CodeMirror.emacs to allow other addons to hook into Emacs-style functionality.
- - active-line addon: Add
nonEmpty option.
- - New event:
optionChange.
-
-
- 21-11-2016: Version 5.21.0:
-
-
- - Tapping/clicking the editor in contentEditable mode on Chrome now puts the cursor at the tapped position.
- - Fix various crashes and misbehaviors when reading composition events in contentEditable mode.
- - Catches and ignores an IE 'Unspecified Error' when creating an editor in an iframe before there is a
<body>.
- - merge addon: Fix several issues in the chunk-aligning feature.
- - verilog mode: Rewritten to address various issues.
- - julia mode: Recognize Julia 0.5 syntax.
- - swift mode: Various fixes and adjustments to current syntax.
- - markdown mode: Allow lists without a blank line above them.
- - The
setGutterMarker, clearGutter, and lineInfo methods are now available on Doc objects.
- - The
heightAtLine method now takes an extra argument to allow finding the height at the top of the line's line widgets.
- - ruby mode:
else and elsif are now immediately indented.
- - vim bindings: Bind Ctrl-T and Ctrl-D to in- and dedent in insert mode.
-
-
- 20-10-2016: Version 5.20.0:
-
-
- - Make
newlineAndIndent command work with multiple cursors on the same line.
- - Make sure keypress events for backspace are ignored.
- - Tokens styled with overlays no longer get a nonsense
cm-cm-overlay class.
- - Line endings for pasted content are now normalized to the editor's preferred ending.
- - javascript mode: Improve support for class expressions. Support TypeScript optional class properties, the
abstract keyword, and return type declarations for arrow functions.
- - css mode: Fix highlighting of mixed-case keywords.
- - closebrackets addon: Improve behavior when typing a quote before a string.
- - The core is now maintained as a number of small files, using ES6 syntax and modules, under the
src/ directory. A git checkout no longer contains a working codemirror.js until you npm build (but when installing from NPM, it is included).
- - The
refresh event is now documented and stable.
-
-
- 20-09-2016: Version 5.19.0:
-
-
- - erlang mode: Fix mode crash when trying to read an empty context.
- - comment addon: Fix broken behavior when toggling comments inside a comment.
- - xml-fold addon: Fix a null-dereference bug.
- - Page up and page down now do something even in single-line documents.
- - Fix an issue where the cursor position could be off in really long (~8000 character) tokens.
- - javascript mode: Better indentation when semicolons are missing. Better support for TypeScript classes, optional parameters, and the
type keyword.
- - The
blur and focus events now pass the DOM event to their handlers.
-
-
- 23-08-2016: Version 5.18.2:
-
-
- - vue mode: Fix outdated references to renamed Pug mode dependency.
-
-
- 22-08-2016: Version 5.18.0:
-
-
- - Make sure gutter backgrounds stick to the rest of the gutter during horizontal scrolling.
- - The contenteditable
inputStyle now properly supports pasting on pre-Edge IE versions.
- - javascript mode: Fix some small parsing bugs and improve TypeScript support.
- - matchbrackets addon: Fix bug where active highlighting was left in editor when the addon was disabled.
- - match-highlighter addon: Only start highlighting things when the editor gains focus.
- - javascript-hint addon: Also complete non-enumerable properties.
- - The
addOverlay method now supports a priority option to control the order in which overlays are applied.
- - MIME types that end in
+json now default to the JSON mode when the MIME itself is not defined.
- - The mode formerly known as Jade was renamed to Pug.
- - The Python mode now defaults to Python 3 (rather than 2) syntax.
-
-
- 19-07-2016: Version 5.17.0:
-
-
- - Fix problem with wrapped trailing whitespace displaying incorrectly.
- - Prevent IME dialog from overlapping typed content in Chrome.
- - Improve measuring of characters near a line wrap.
- - javascript mode: Improve support for
async, allow trailing commas in import lists.
- - vim bindings: Fix backspace in replace mode.
- - sublime bindings: Fix some key bindings on OS X to match Sublime Text.
- - markdown mode: Add more classes to image links in highlight-formatting mode.
-
-
- 20-06-2016: Version 5.16.0:
-
-
- - Fix glitches when dragging content caused by the drop indicator receiving mouse events.
- - Make Control-drag work on Firefox.
- - Make clicking or selection-dragging at the end of a wrapped line select the right position.
- - show-hint addon: Prevent widget scrollbar from hiding part of the hint text.
- - rulers addon: Prevent rulers from forcing a horizontal editor scrollbar.
- - search addon: Automatically bind search-related keys in persistent dialog.
- - sublime keymap: Add a multi-cursor aware smart backspace binding.
-
-
- 20-05-2016: Version 5.15.2:
-
-
- - Fix a critical document corruption bug that occurs when a document is gradually grown.
-
-
- 20-05-2016: Version 5.15.0:
-
-
- - Fix bug that caused the selection to reset when focusing the editor in contentEditable input mode.
- - Fix issue where not all ASCII control characters were being replaced by placeholders.
- - Remove the assumption that all modes have a
startState method from several wrapping modes.
- - Fix issue where the editor would complain about overlapping collapsed ranges when there weren't any.
- - Optimize document tree building when loading or pasting huge chunks of content.
- - Explicitly bind Ctrl-O on OS X to make that binding (“open line”) act as expected.
- - Pasting linewise-copied content when there is no selection now inserts the lines above the current line.
- - markdown mode: Fix several issues in matching link targets.
- - clike mode: Improve indentation of C++ template declarations.
- - javascript mode: Support
async/await and improve support for TypeScript type syntax.
-
-
- 20-04-2016: Version 5.14.0:
-
-
-
- 21-03-2016: Version 5.13.2:
-
-
- - Solves a problem where the gutter would sometimes not extend all the way to the end of the document.
-
-
- 21-03-2016: Version 5.13:
-
-
-
- 19-02-2016: Version 5.12:
-
-
- - Vim bindings: Ctrl-Q is now an alias for Ctrl-V.
- - Vim bindings: The Vim API now exposes an
unmap method to unmap bindings.
- - active-line addon: This addon can now style the active line's gutter.
- - FCL mode: Newly added.
- - SQL mode: Now has a Postgresql dialect.
- - Fix issue where trying to scroll to a horizontal position outside of the document's width could cause the gutter to be positioned incorrectly.
- - Use absolute, rather than fixed positioning in the context-menu intercept hack, to work around a problem when the editor is inside a transformed parent container.
- - Solve a problem where the horizontal scrollbar could hide text in Firefox.
- - Fix a bug that caused phantom scroll space under the text in some situations.
- - Sublime Text bindings: Bind delete-line to Shift-Ctrl-K on OS X.
- - Markdown mode: Fix issue where the mode would keep state related to fenced code blocks in an unsafe way, leading to occasional corrupted parses.
- - Markdown mode: Ignore backslashes in code fragments.
- - Markdown mode: Use whichever mode is registered as
text/html to parse HTML.
- - Clike mode: Improve indentation of Scala
=> functions.
- - Python mode: Improve indentation of bracketed code.
- - HTMLMixed mode: Support multi-line opening tags for sub-languages (
<script>, <style>, etc).
- - Spreadsheet mode: Fix bug where the mode did not advance the stream when finding a backslash.
- - XML mode: The mode now takes a
matchClosing option to configure whether mismatched closing tags should be highlighted as errors.
-
-
- 20-01-2016: Version 5.11:
-
-
- - New modes: JSX, literate Haskell
- - The editor now forwards more DOM events:
cut, copy, paste, and touchstart. It will also forward mousedown for drag events
- - Fixes a bug where bookmarks next to collapsed spans were not rendered
- - The Swift mode now supports auto-indentation
- - Frontmatters in the YAML frontmatter mode are now optional as intended
- - Full list of patches
-
-
- 21-12-2015: Version 5.10:
-
-
-
- 23-11-2015: Version 5.9:
-
-
- - Improve the way overlay (OS X-style) scrollbars are handled
- - Make annotatescrollbar and scrollpastend addons work properly together
- - Make show-hint addon select options on single click by default, move selection to hovered item
- - Properly fold comments that include block-comment-start markers
- - Many small language mode fixes
- - Full list of patches
-
-
- 20-10-2015: Version 5.8:
-
-
-
- 20-09-2015: Version 5.7:
-
-
-
- 20-08-2015: Version 5.6:
-
-
- - Fix bug where you could paste into a
readOnly editor
- - Show a cursor at the drop location when dragging over the editor
- - The Rust mode was rewritten to handle modern Rust
- - The editor and theme CSS was cleaned up. Some selectors are now less specific than before
- - New theme: abcdef
- - Lines longer than
maxHighlightLength are now less likely to mess up indentation
- - New addons:
autorefresh for refreshing an editor the first time it becomes visible, and html-lint for using HTMLHint
- - The
search addon now recognizes \r and \n in pattern and replacement input
- - Full list of patches
-
-
- 20-07-2015: Version 5.5:
-
-
-
- 25-06-2015: Version 5.4:
-
-
-
- 20-05-2015: Version 5.3:
-
-
-
- 20-04-2015: Version 5.2:
-
-
-
- 23-03-2015: Version 5.1:
-
-
-
- 20-02-2015: Version 5.0:
-
-
- - Experimental mobile support (tested on iOS, Android Chrome, stock Android browser)
- - New option
inputStyle to switch between hidden textarea and contenteditable input.
- - The
getInputField
- method is no longer guaranteed to return a textarea.
- - Full list of patches.
-
-
-
-
-
-
- Version 4.x
-
- 20-02-2015: Version 4.13:
-
-
-
- 22-01-2015: Version 4.12:
-
-
-
- 9-01-2015: Version 4.11:
-
- Unfortunately, 4.10 did not take care of the
- Firefox scrolling issue entirely. This release adds two more patches
- to address that.
-
- 29-12-2014: Version 4.10:
-
- Emergency single-patch update to 4.9. Fixes
- Firefox-specific problem where the cursor could end up behind the
- horizontal scrollbar.
-
- 23-12-2014: Version 4.9:
-
-
-
- 22-11-2014: Version 4.8:
-
-
-
- 20-10-2014: Version 4.7:
-
-
- - Incompatible:
- The lint addon now passes the
- editor's value as first argument to asynchronous lint functions,
- for consistency. The editor is still passed, as fourth
- argument.
- - Improved handling of unicode identifiers in modes for
- languages that support them.
- - More mode
- improvements: CoffeeScript
- (indentation), Verilog
- (indentation), Scala
- (indentation, triple-quoted strings),
- and PHP (interpolated
- variables in heredoc strings).
- - New modes: Textile and Tornado templates.
- - Experimental new way to define modes.
- - Improvements to the Vim
- bindings: Arbitrary insert mode key mappings are now possible,
- and text objects are supported in visual mode.
- - The mode meta-information file
- now includes information about file extensions,
- and helper
- functions
findModeByMIME
- and findModeByExtension.
- - New logo!
- - Full list of patches.
-
-
- 19-09-2014: Version 4.6:
-
-
-
- 21-08-2014: Version 4.5:
-
-
-
- 21-07-2014: Version 4.4:
-
-
- - Note: Some events might now fire in slightly
- different order (
"change" is still guaranteed to fire
- before "cursorActivity")
- - Nested operations in multiple editors are now synced (complete
- at same time, reducing DOM reflows)
- - Visual block mode for vim (<C-v>) is nearly complete
- - New mode: Kotlin
- - Better multi-selection paste for text copied from multiple CodeMirror selections
- - Full list of patches.
-
-
- 23-06-2014: Version 4.3:
-
-
- - Several vim bindings
- improvements: search and exCommand history, global flag
- for
:substitute, :global command.
- - Allow hiding the cursor by
- setting
cursorBlinkRate
- to a negative value.
- - Make gutter markers themeable, use this in foldgutter.
- - Full list of patches.
-
-
- 19-05-2014: Version 4.2:
-
-
- - Fix problem where some modes were broken by the fact that empty tokens were forbidden.
- - Several fixes to context menu handling.
- - On undo, scroll change, not cursor, into view.
- - Rewritten Jade mode.
- - Various improvements to Shell (support for more syntax) and Python (better indentation) modes.
- - New mode: Cypher.
- - New theme: Neo.
- - Support direct styling options (color, line style, width) in the rulers addon.
- - Recognize per-editor configuration for the show-hint and foldcode addons.
- - More intelligent scanning for existing close tags in closetag addon.
- - In the Vim bindings: Fix bracket matching, support case conversion in visual mode, visual paste, append action.
- - Full list of patches.
-
-
- 22-04-2014: Version 4.1:
-
-
- - Slightly incompatible:
- The
"cursorActivity"
- event now fires after all other events for the operation (and only
- for handlers that were actually registered at the time the
- activity happened).
- - New command:
insertSoftTab.
- - New mode: Django.
- - Improved modes: Verilog (rewritten), Jinja2, Haxe, PHP (string interpolation highlighted), JavaScript (indentation of trailing else, template strings), LiveScript (multi-line strings).
- - Many small issues from the 3.x→4.x transition were found and fixed.
- - Full list of patches.
-
-
- 20-03-2014: Version 4.0:
-
- This is a new major version of CodeMirror. There
- are a few incompatible changes in the API. Upgrade
- with care, and read the upgrading
- guide.
-
-
-
-
-
-
-
- Version 3.x
-
- 22-04-2014: Version 3.24:
-
- Merges the improvements from 4.1 that could
- easily be applied to the 3.x code. Also improves the way the editor
- size is updated when line widgets change.
-
- 20-03-2014: Version 3.23:
-
-
- - In the XML mode,
- add
brackets style to angle brackets, fix
- case-sensitivity of tags for HTML.
- - New mode: Dylan.
- - Many improvements to the Vim bindings.
-
-
- 21-02-2014: Version 3.22:
-
-
-
- 16-01-2014: Version 3.21:
-
-
- - Auto-indenting a block will no longer add trailing whitespace to blank lines.
- - Marking text has a new option
clearWhenEmpty to control auto-removal.
- - Several bugfixes in the handling of bidirectional text.
- - The XML and CSS modes were largely rewritten. LESS support was added to the CSS mode.
- - The OCaml mode was moved to an mllike mode, F# support added.
- - Make it possible to fetch multiple applicable helper values with
getHelpers, and to register helpers matched on predicates with registerGlobalHelper.
- - New theme pastel-on-dark.
- - Better ECMAScript 6 support in JavaScript mode.
- - Full list of patches.
-
-
- 21-11-2013: Version 3.20:
-
-
-
- 21-10-2013: Version 3.19:
-
-
-
- 23-09-2013: Version 3.18:
-
- Emergency release to fix a problem in 3.17
- where .setOption("lineNumbers", false) would raise an
- error.
-
- 23-09-2013: Version 3.17:
-
-
-
- 21-08-2013: Version 3.16:
-
-
-
- 29-07-2013: Version 3.15:
-
-
-
- 20-06-2013: Version 3.14:
-
-
-
- 20-05-2013: Version 3.13:
-
-
-
- 19-04-2013: Version 3.12:
-
-
-
- 20-03-2013: Version 3.11:
-
-
-
- 21-02-2013: Version 3.1:
-
-
-
-
- 25-01-2013: Version 3.02:
-
- Single-bugfix release. Fixes a problem that
- prevents CodeMirror instances from being garbage-collected after
- they become unused.
-
- 21-01-2013: Version 3.01:
-
-
-
- 10-12-2012: Version 3.0:
-
- New major version. Only
- partially backwards-compatible. See
- the upgrading guide for more
- information. Changes since release candidate 2:
-
-
- - Rewritten VIM mode.
- - Fix a few minor scrolling and sizing issues.
- - Work around Safari segfault when dragging.
- - Full list of patches.
-
-
- 20-11-2012: Version 3.0, release candidate 2:
-
-
- - New mode: HTTP.
- - Improved handling of selection anchor position.
- - Improve IE performance on longer lines.
- - Reduce gutter glitches during horiz. scrolling.
- - Add
addKeyMap and removeKeyMap methods.
- - Rewrite
formatting and closetag add-ons.
- - Full list of patches.
-
-
- 20-11-2012: Version 3.0, release candidate 1:
-
-
-
- 22-10-2012: Version 3.0, beta 2:
-
-
- - Fix page-based coordinate computation.
- - Fix firing of
gutterClick event.
- - Add
cursorHeight option.
- - Fix bi-directional text regression.
- - Add
viewportMargin option.
- - Directly handle mousewheel events (again, hopefully better).
- - Make vertical cursor movement more robust (through widgets, big line gaps).
- - Add
flattenSpans option.
- - Many optimizations. Poor responsiveness should be fixed.
- - Initialization in hidden state works again.
- - Full list of patches.
-
-
- 19-09-2012: Version 3.0, beta 1:
-
-
- - Bi-directional text support.
- - More powerful gutter model.
- - Support for arbitrary text/widget height.
- - In-line widgets.
- - Generalized event handling.
-
-
-
-
-
-
- Version 2.x
-
- 21-01-2013: Version 2.38:
-
- Integrate some bugfixes, enhancements to the vim keymap, and new
- modes
- (D, Sass, APL)
- from the v3 branch.
-
- 20-12-2012: Version 2.37:
-
-
- - New mode: SQL (will replace plsql and mysql modes).
- - Further work on the new VIM mode.
- - Fix Cmd/Ctrl keys on recent Operas on OS X.
- - Full list of patches.
-
-
- 20-11-2012: Version 2.36:
-
-
-
- 22-10-2012: Version 2.35:
-
-
- - New (sub) mode: TypeScript.
- - Don't overwrite (insert key) when pasting.
- - Fix several bugs in
markText/undo interaction.
- - Better indentation of JavaScript code without semicolons.
- - Add
defineInitHook function.
- - Full list of patches.
-
-
- 19-09-2012: Version 2.34:
-
-
- - New mode: Common Lisp.
- - Fix right-click select-all on most browsers.
- - Change the way highlighting happens:
Saves memory and CPU cycles.
compareStates is no longer needed.
onHighlightComplete no longer works.
- - Integrate mode (Markdown, XQuery, CSS, sTex) tests in central testsuite.
- - Add a
CodeMirror.version property.
- - More robust handling of nested modes in formatting and closetag plug-ins.
- - Un/redo now preserves marked text and bookmarks.
- - Full list of patches.
-
-
- 23-08-2012: Version 2.33:
-
-
- - New mode: Sieve.
- - New
getViewPort and onViewportChange API.
- - Configurable cursor blink rate.
- - Make binding a key to
false disabling handling (again).
- - Show non-printing characters as red dots.
- - More tweaks to the scrolling model.
- - Expanded testsuite. Basic linter added.
- - Remove most uses of
innerHTML. Remove CodeMirror.htmlEscape.
- - Full list of patches.
-
-
- 23-07-2012: Version 2.32:
-
- Emergency fix for a bug where an editor with
- line wrapping on IE will break when there is no
- scrollbar.
-
- 20-07-2012: Version 2.31:
-
-
-
- 22-06-2012: Version 2.3:
-
-
- - New scrollbar implementation. Should flicker less. Changes DOM structure of the editor.
- - New theme: vibrant-ink.
- - Many extensions to the VIM keymap (including text objects).
- - Add mode-multiplexing utility script.
- - Fix bug where right-click paste works in read-only mode.
- - Add a
getScrollInfo method.
- - Lots of other fixes.
-
-
- 23-05-2012: Version 2.25:
-
-
- - New mode: Erlang.
- - Remove xmlpure mode (use xml.js).
- - Fix line-wrapping in Opera.
- - Fix X Windows middle-click paste in Chrome.
- - Fix bug that broke pasting of huge documents.
- - Fix backspace and tab key repeat in Opera.
-
-
- 23-04-2012: Version 2.24:
-
-
- - Drop support for Internet Explorer 6.
- - New
- modes: Shell, Tiki
- wiki, Pig Latin.
- - New themes: Ambiance, Blackboard.
- - More control over drag/drop
- with
dragDrop
- and onDragEvent
- options.
- - Make HTML mode a bit less pedantic.
- - Add
compoundChange API method.
- - Several fixes in undo history and line hiding.
- - Remove (broken) support for
catchall in key maps,
- add nofallthrough boolean field instead.
-
-
- 26-03-2012: Version 2.23:
-
-
- - Change default binding for tab [more]
-
- Starting in 2.23, these bindings are default:
-
- Tab: Insert tab character
- - Shift-tab: Reset line indentation to default
- - Ctrl/Cmd-[: Reduce line indentation (old tab behaviour)
- - Ctrl/Cmd-]: Increase line indentation (old shift-tab behaviour)
-
-
- - New modes: XQuery and VBScript.
- - Two new themes: lesser-dark and xq-dark.
- - Differentiate between background and text styles in
setLineClass.
- - Fix drag-and-drop in IE9+.
- - Extend
charCoords
- and cursorCoords with a mode argument.
- - Add
autofocus option.
- - Add
findMarksAt method.
-
-
- 27-02-2012: Version 2.22:
-
-
-
- 27-01-2012: Version 2.21:
-
-
- - Added LESS, MySQL,
- Go, and Verilog modes.
- - Add
smartIndent
- option.
- - Support a cursor in
readOnly-mode.
- - Support assigning multiple styles to a token.
- - Use a new approach to drawing the selection.
- - Add
scrollTo method.
- - Allow undo/redo events to span non-adjacent lines.
- - Lots and lots of bugfixes.
-
-
- 20-12-2011: Version 2.2:
-
-
-
- 21-11-2011: Version 2.18:
- Fixes TextMarker.clear, which is broken in 2.17.
-
- 21-11-2011: Version 2.17:
-
- - Add support for line
- wrapping and code
- folding.
- - Add Github-style Markdown mode.
- - Add Monokai
- and Rubyblue themes.
- - Add
setBookmark method.
- - Move some of the demo code into reusable components
- under
lib/util.
- - Make screen-coord-finding code faster and more reliable.
- - Fix drag-and-drop in Firefox.
- - Improve support for IME.
- - Speed up content rendering.
- - Fix browser's built-in search in Webkit.
- - Make double- and triple-click work in IE.
- - Various fixes to modes.
-
-
- 27-10-2011: Version 2.16:
-
- - Add Perl, Rust, TiddlyWiki, and Groovy modes.
- - Dragging text inside the editor now moves, rather than copies.
- - Add a
coordsFromIndex method.
- - API change:
setValue now no longer clears history. Use clearHistory for that.
- - API change:
markText now
- returns an object with clear and find
- methods. Marked text is now more robust when edited.
- - Fix editing code with tabs in Internet Explorer.
-
-
- 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:
-
-
-
- 23-08-2011: Version 2.13:
-
-
- 25-07-2011: Version 2.12:
-
- - Add a SPARQL mode.
- - Fix bug with cursor jumping around in an unfocused editor in IE.
- - Allow key and mouse events to bubble out of the editor. Ignore widget clicks.
- - Solve cursor flakiness after undo/redo.
- - Fix block-reindent ignoring the last few lines.
- - Fix parsing of multi-line attrs in XML mode.
- - Use
innerHTML for HTML-escaping.
- - Some fixes to indentation in C-like mode.
- - Shrink horiz scrollbars when long lines removed.
- - Fix width feedback loop bug that caused the width of an inner DIV to shrink.
-
-
- 04-07-2011: Version 2.11:
-
- - Add a Scheme mode.
- - Add a
replace method to search cursors, for cursor-preserving replacements.
- - Make the C-like mode mode more customizable.
- - Update XML mode to spot mismatched tags.
- - Add
getStateAfter API and compareState mode API methods for finer-grained mode magic.
- - Add a
getScrollerElement API method to manipulate the scrolling DIV.
- - Fix drag-and-drop for Firefox.
- - Add a C# configuration for the C-like mode.
- - Add full-screen editing and mode-changing demos.
-
-
- 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:
-
- - Add a Lua mode.
- - Fix reverse-searching for a regexp.
- - Empty lines can no longer break highlighting.
- - Rework scrolling model (the outer wrapper no longer does the scrolling).
- - Solve horizontal jittering on long lines.
- - Add runmode.js.
- - Immediately re-highlight text when typing.
- - Fix problem with 'sticking' horizontal scrollbar.
-
-
- 26-05-2011: Version 2.01:
-
- - Add a Smalltalk mode.
- - Add a reStructuredText mode.
- - Add a Python mode.
- - Add a PL/SQL mode.
- coordsChar now works- Fix a problem where
onCursorActivity interfered with onChange.
- - Fix a number of scrolling and mouse-click-position glitches.
- - Pass information about the changed lines to
onChange.
- - Support cmd-up/down on OS X.
- - Add triple-click line selection.
- - Don't handle shift when changing the selection through the API.
- - Support
"nocursor" mode for readOnly option.
- - Add an
onHighlightComplete option.
- - Fix the context menu for Firefox.
-
-
- 28-03-2011: Version 2.0:
- CodeMirror 2 is a complete rewrite that's
- faster, smaller, simpler to use, and less dependent on browser
- quirks. See this
- and this
- for more information.
-
- 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).- Fixes a bug that would cause the selection code to break on some IE versions.
- - Disabling spell-check on WebKit browsers now works.
-
-
- 08-02-2011: Version 2.0 beta 1:
- CodeMirror 2 is a complete rewrite of
- CodeMirror, no longer depending on an editable frame.
-
- 19-01-2011: Version 0.93:
-
- - Added a Regular Expression parser.
- - Fixes to the PHP parser.
- - Support for regular expression in search/replace.
- - Add
save method to instances created with fromTextArea.
- - Add support for MS T-SQL in the SQL parser.
- - Support use of CSS classes for highlighting brackets.
- - Fix yet another hang with line-numbering in hidden editors.
-
-
-
-
-
- Version 0.x
-
- 28-03-2011: Version 1.0:
-
- - Fix error when debug history overflows.
- - Refine handling of C# verbatim strings.
- - Fix some issues with JavaScript indentation.
-
-
- 17-12-2010: Version 0.92:
-
- - Make CodeMirror work in XHTML documents.
- - Fix bug in handling of backslashes in Python strings.
- - The
styleNumbers option is now officially
- supported and documented.
- onLineNumberClick option added.- More consistent names
onLoad and
- onCursorActivity callbacks. Old names still work, but
- are deprecated.
- - Add a Freemarker mode.
-
-
- 11-11-2010: Version 0.91:
-
- - Adds support for Java.
- - Small additions to the PHP and SQL parsers.
- - Work around various Webkit issues.
- - Fix
toTextArea to update the code in the textarea.
- - Add a
noScriptCaching option (hack to ease development).
- - Make sub-modes of HTML mixed mode configurable.
-
-
- 02-10-2010: Version 0.9:
-
- - Add support for searching backwards.
- - There are now parsers for Scheme, XQuery, and OmetaJS.
- - Makes
height: "dynamic" more robust.
- - Fixes bug where paste did not work on OS X.
- - Add a
enterMode and electricChars options to make indentation even more customizable.
- - Add
firstLineNumber option.
- - Fix bad handling of
@media rules by the CSS parser.
- - Take a new, more robust approach to working around the invisible-last-line bug in WebKit.
-
-
- 22-07-2010: Version 0.8:
-
- - Add a
cursorCoords method to find the screen
- coordinates of the cursor.
- - A number of fixes and support for more syntax in the PHP parser.
- - Fix indentation problem with JSON-mode JS parser in Webkit.
- - Add a minification UI.
- - Support a
height: dynamic mode, where the editor's
- height will adjust to the size of its content.
- - Better support for IME input mode.
- - Fix JavaScript parser getting confused when seeing a no-argument
- function call.
- - Have CSS parser see the difference between selectors and other
- identifiers.
- - Fix scrolling bug when pasting in a horizontally-scrolled
- editor.
- - Support
toTextArea method in instances created with
- fromTextArea.
- - Work around new Opera cursor bug that causes the cursor to jump
- when pressing backspace at the end of a line.
-
-
- 27-04-2010: Version
- 0.67:
- More consistent page-up/page-down behaviour
- across browsers. Fix some issues with hidden editors looping forever
- when line-numbers were enabled. Make PHP parser parse
- "\\" correctly. Have jumpToLine work on
- line handles, and add cursorLine function to fetch the
- line handle where the cursor currently is. Add new
- setStylesheet function to switch style-sheets in a
- running editor.
-
- 01-03-2010: Version
- 0.66:
- Adds removeLine method to API.
- Introduces the PLSQL parser.
- Marks XML errors by adding (rather than replacing) a CSS class, so
- that they can be disabled by modifying their style. Fixes several
- selection bugs, and a number of small glitches.
-
- 12-11-2009: Version
- 0.65:
- Add support for having both line-wrapping and
- line-numbers turned on, make paren-highlighting style customisable
- (markParen and unmarkParen config
- options), work around a selection bug that Opera
- reintroduced in version 10.
-
- 23-10-2009: Version
- 0.64:
- Solves some issues introduced by the
- paste-handling changes from the previous release. Adds
- setSpellcheck, setTextWrapping,
- setIndentUnit, setUndoDepth,
- setTabMode, and setLineNumbers to
- customise a running editor. Introduces an SQL parser. Fixes a few small
- problems in the Python
- parser. And, as usual, add workarounds for various newly discovered
- browser incompatibilities.
-
- 31-08-2009: Version 0.63:
- Overhaul of paste-handling (less fragile), fixes for several
- serious IE8 issues (cursor jumping, end-of-document bugs) and a number
- of small problems.
-
- 30-05-2009: Version 0.62:
- Introduces Python
- and Lua parsers. Add
- setParser (on-the-fly mode changing) and
- clearHistory methods. Make parsing passes time-based
- instead of lines-based (see the passTime option).
-
-
-
diff --git a/backend/_pv_1_3_5/static/codemirror/doc/reporting.html b/backend/_pv_1_3_5/static/codemirror/doc/reporting.html
deleted file mode 100755
index 3c582d961..000000000
--- a/backend/_pv_1_3_5/static/codemirror/doc/reporting.html
+++ /dev/null
@@ -1,61 +0,0 @@
-
-
-
-
-Upgrading to v2.2
-
-There are a few things in the 2.2 release that require some care
-when upgrading.
-
-No more default.css
-
-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.)
-
-
Different key customization
-
-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.
-
-Tabs
-
-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.
-
-
diff --git a/backend/_pv_1_3_5/static/codemirror/doc/upgrade_v3.html b/backend/_pv_1_3_5/static/codemirror/doc/upgrade_v3.html
deleted file mode 100755
index 5f94067aa..000000000
--- a/backend/_pv_1_3_5/static/codemirror/doc/upgrade_v3.html
+++ /dev/null
@@ -1,230 +0,0 @@
-
-
-
-
-Upgrading to version 3
-
-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.
-
-Note that version 3 drops full support for Internet
-Explorer 7. The editor will mostly work on that browser, but
-it'll be significantly glitchy.
-
-
- DOM structure
-
-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.
-
-Editor height is now set on the outer wrapper element (CSS
-class CodeMirror), not on the scroller element
-(CodeMirror-scroll).
-
-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.
-
-See the styling section of the
-manual for more information.
-
-
- Gutter model
-
-In CodeMirror 2.x, there was a single gutter, and line markers
-created with setMarker would have to somehow coexist with
-the line numbers (if present). Version 3 allows you to specify an
-array of gutters, by class
-name,
-use setGutterMarker
-to add or remove markers in individual gutters, and clear whole
-gutters
-with clearGutter.
-Gutter markers are now specified as DOM nodes, rather than HTML
-snippets.
-
-The gutters no longer horizontally scrolls along with the content.
-The fixedGutter option was removed (since it is now the
-only behavior).
-
-
-<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>
-
-
-
- Event handling
-
-Most of the onXYZ options have been removed. The same
-effect is now obtained by calling
-the on 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 the
-full list here.
-
-(The onKeyEvent and onDragEvent options,
-which act more as hooks than as event handlers, are still there in
-their old form.)
-
-
-cm.on("change", function(cm, change) {
- console.log("something changed! (" + change.origin + ")");
-});
-
-
-
- markText method arguments
-
-The markText 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.
-
-
-// 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
-});
-
-
-
- Line folding
-
-The interface for hiding lines has been
-removed. markText can
-now be used to do the same in a more flexible and powerful way.
-
-The folding script has been
-updated to use the new interface, and should now be more robust.
-
-
-// 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");
-});
-
-
-
- Line CSS classes
-
-The setLineClass method has been replaced
-by addLineClass
-and removeLineClass,
-which allow more modular control over the classes attached to a line.
-
-
-var marked = cm.addLineClass(10, "background", "highlighted-line");
-setTimeout(function() {
- cm.removeLineClass(marked, "background", "highlighted-line");
-});
-
-
-
- Position properties
-
-All methods that take or return objects that represent screen
-positions now use {left, top, bottom, right} properties
-(not always all of them) instead of the {x, y, yBot} used
-by some methods in v2.x.
-
-Affected methods
-are cursorCoords, charCoords, coordsChar,
-and getScrollInfo.
-
-
- Bracket matching no longer in core
-
-The matchBrackets
-option is no longer defined in the core editor.
-Load addon/edit/matchbrackets.js to enable it.
-
-
- Mode management
-
-The CodeMirror.listModes
-and CodeMirror.listMIMEs functions, used for listing
-defined modes, are gone. You are now encouraged to simply
-inspect CodeMirror.modes (mapping mode names to mode
-constructors) and CodeMirror.mimeModes (mapping MIME
-strings to mode specs).
-
-
- New features
-
-Some more reasons to upgrade to version 3.
-
-
- - Bi-directional text support. CodeMirror will now mostly do the
- right thing when editing Arabic or Hebrew text.
- - Arbitrary line heights. Using fonts with different heights
- inside the editor (whether off by one pixel or fifty) is now
- supported and handled gracefully.
- - In-line widgets. See the demo
- and the docs.
- - Defining custom options
- with
CodeMirror.defineOption.
-
-
-
-
-
diff --git a/backend/_pv_1_3_5/static/codemirror/doc/upgrade_v4.html b/backend/_pv_1_3_5/static/codemirror/doc/upgrade_v4.html
deleted file mode 100755
index 09df00ca1..000000000
--- a/backend/_pv_1_3_5/static/codemirror/doc/upgrade_v4.html
+++ /dev/null
@@ -1,144 +0,0 @@
-
-
-
+ {% else %}
+ 
+ {% endif %}
+ {{ _('Verbunden') }}
+ 
- 