Active Line Demo
+ + + + +Styling the current cursor line.
+ + the CSS class "CodeMirror-activeline",
+// and gives its background
+
+
+
+
+
+
diff --git a/plugins/codemirror/codemirror/demo/buffers.html b/plugins/codemirror/codemirror/demo/buffers.html
new file mode 100644
index 0000000..951209c
--- /dev/null
+++ b/plugins/codemirror/codemirror/demo/buffers.html
@@ -0,0 +1,109 @@
+
+
+ the class "CodeMirror-activeline-background".
+
+(function() {
+ "use strict";
+ var WRAP_CLASS = "CodeMirror-activeline";
+ var BACK_CLASS = "CodeMirror-activeline-background";
+
+ CodeMirror.defineOption("styleActiveLine", false, function(cm, val, old) {
+ var prev = old && old != CodeMirror.Init;
+ if (val && !prev) {
+ updateActiveLine(cm);
+ cm.on("cursorActivity", updateActiveLine);
+ } else if (!val && prev) {
+ cm.off("cursorActivity", updateActiveLine);
+ clearActiveLine(cm);
+ delete cm.state.activeLine;
+ }
+ });
+
+ function clearActiveLine(cm) {
+ if ("activeLine" in cm.state) {
+ cm.removeLineClass(cm.state.activeLine, "wrap", WRAP_CLASS);
+ cm.removeLineClass(cm.state.activeLine, "background", BACK_CLASS);
+ }
+ }
+
+ function updateActiveLine(cm) {
+ var line = cm.getLineHandleVisualStart(cm.getCursor().line);
+ if (cm.state.activeLine == line) return;
+ clearActiveLine(cm);
+ cm.addLineClass(line, "wrap", WRAP_CLASS);
+ cm.addLineClass(line, "background", BACK_CLASS);
+ cm.state.activeLine = line;
+ }
+})();
diff --git a/plugins/codemirror/codemirror/addon/selection/mark-selection.js b/plugins/codemirror/codemirror/addon/selection/mark-selection.js
new file mode 100644
index 0000000..c97776e
--- /dev/null
+++ b/plugins/codemirror/codemirror/addon/selection/mark-selection.js
@@ -0,0 +1,108 @@
+// Because sometimes you need to mark the selected *text*.
+//
+// Adds an option 'styleSelectedText' which, when enabled, gives
+// selected text the CSS class given as option value, or
+// "CodeMirror-selectedtext" when the value is not a string.
+
+(function() {
+ "use strict";
+
+ CodeMirror.defineOption("styleSelectedText", false, function(cm, val, old) {
+ var prev = old && old != CodeMirror.Init;
+ if (val && !prev) {
+ cm.state.markedSelection = [];
+ cm.state.markedSelectionStyle = typeof val == "string" ? val : "CodeMirror-selectedtext";
+ reset(cm);
+ cm.on("cursorActivity", onCursorActivity);
+ cm.on("change", onChange);
+ } else if (!val && prev) {
+ cm.off("cursorActivity", onCursorActivity);
+ cm.off("change", onChange);
+ clear(cm);
+ cm.state.markedSelection = cm.state.markedSelectionStyle = null;
+ }
+ });
+
+ function onCursorActivity(cm) {
+ cm.operation(function() { update(cm); });
+ }
+
+ function onChange(cm) {
+ if (cm.state.markedSelection.length)
+ cm.operation(function() { clear(cm); });
+ }
+
+ var CHUNK_SIZE = 8;
+ var Pos = CodeMirror.Pos;
+
+ function cmp(pos1, pos2) {
+ return pos1.line - pos2.line || pos1.ch - pos2.ch;
+ }
+
+ function coverRange(cm, from, to, addAt) {
+ if (cmp(from, to) == 0) return;
+ var array = cm.state.markedSelection;
+ var cls = cm.state.markedSelectionStyle;
+ for (var line = from.line;;) {
+ var start = line == from.line ? from : Pos(line, 0);
+ var endLine = line + CHUNK_SIZE, atEnd = endLine >= to.line;
+ var end = atEnd ? to : Pos(endLine, 0);
+ var mark = cm.markText(start, end, {className: cls});
+ if (addAt == null) array.push(mark);
+ else array.splice(addAt++, 0, mark);
+ if (atEnd) break;
+ line = endLine;
+ }
+ }
+
+ function clear(cm) {
+ var array = cm.state.markedSelection;
+ for (var i = 0; i < array.length; ++i) array[i].clear();
+ array.length = 0;
+ }
+
+ function reset(cm) {
+ clear(cm);
+ var from = cm.getCursor("start"), to = cm.getCursor("end");
+ coverRange(cm, from, to);
+ }
+
+ function update(cm) {
+ var from = cm.getCursor("start"), to = cm.getCursor("end");
+ if (cmp(from, to) == 0) return clear(cm);
+
+ var array = cm.state.markedSelection;
+ if (!array.length) return coverRange(cm, from, to);
+
+ var coverStart = array[0].find(), coverEnd = array[array.length - 1].find();
+ if (!coverStart || !coverEnd || to.line - from.line < CHUNK_SIZE ||
+ cmp(from, coverEnd.to) >= 0 || cmp(to, coverStart.from) <= 0)
+ return reset(cm);
+
+ while (cmp(from, coverStart.from) > 0) {
+ array.shift().clear();
+ coverStart = array[0].find();
+ }
+ if (cmp(from, coverStart.from) < 0) {
+ if (coverStart.to.line - from.line < CHUNK_SIZE) {
+ array.shift().clear();
+ coverRange(cm, from, coverStart.to, 0);
+ } else {
+ coverRange(cm, from, coverStart.from, 0);
+ }
+ }
+
+ while (cmp(to, coverEnd.to) < 0) {
+ array.pop().clear();
+ coverEnd = array[array.length - 1].find();
+ }
+ if (cmp(to, coverEnd.to) > 0) {
+ if (to.line - coverEnd.from.line < CHUNK_SIZE) {
+ array.pop().clear();
+ coverRange(cm, coverEnd.from, to);
+ } else {
+ coverRange(cm, coverEnd.to, to);
+ }
+ }
+ }
+})();
diff --git a/plugins/codemirror/codemirror/addon/tern/tern.css b/plugins/codemirror/codemirror/addon/tern/tern.css
new file mode 100644
index 0000000..eacc2f0
--- /dev/null
+++ b/plugins/codemirror/codemirror/addon/tern/tern.css
@@ -0,0 +1,85 @@
+.CodeMirror-Tern-completion {
+ padding-left: 22px;
+ position: relative;
+}
+.CodeMirror-Tern-completion:before {
+ position: absolute;
+ left: 2px;
+ bottom: 2px;
+ border-radius: 50%;
+ font-size: 12px;
+ font-weight: bold;
+ height: 15px;
+ width: 15px;
+ line-height: 16px;
+ text-align: center;
+ color: white;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.CodeMirror-Tern-completion-unknown:before {
+ content: "?";
+ background: #4bb;
+}
+.CodeMirror-Tern-completion-object:before {
+ content: "O";
+ background: #77c;
+}
+.CodeMirror-Tern-completion-fn:before {
+ content: "F";
+ background: #7c7;
+}
+.CodeMirror-Tern-completion-array:before {
+ content: "A";
+ background: #c66;
+}
+.CodeMirror-Tern-completion-number:before {
+ content: "1";
+ background: #999;
+}
+.CodeMirror-Tern-completion-string:before {
+ content: "S";
+ background: #999;
+}
+.CodeMirror-Tern-completion-bool:before {
+ content: "B";
+ background: #999;
+}
+
+.CodeMirror-Tern-completion-guess {
+ color: #999;
+}
+
+.CodeMirror-Tern-tooltip {
+ border: 1px solid silver;
+ border-radius: 3px;
+ color: #444;
+ padding: 2px 5px;
+ font-size: 90%;
+ font-family: monospace;
+ background-color: white;
+ white-space: pre-wrap;
+
+ max-width: 40em;
+ position: absolute;
+ z-index: 10;
+ -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+ -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+ box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+
+ transition: opacity 1s;
+ -moz-transition: opacity 1s;
+ -webkit-transition: opacity 1s;
+ -o-transition: opacity 1s;
+ -ms-transition: opacity 1s;
+}
+
+.CodeMirror-Tern-hint-doc {
+ max-width: 25em;
+}
+
+.CodeMirror-Tern-fname { color: black; }
+.CodeMirror-Tern-farg { color: #70a; }
+.CodeMirror-Tern-farg-current { text-decoration: underline; }
+.CodeMirror-Tern-type { color: #07c; }
+.CodeMirror-Tern-fhint-guess { opacity: .7; }
diff --git a/plugins/codemirror/codemirror/addon/tern/tern.js b/plugins/codemirror/codemirror/addon/tern/tern.js
new file mode 100644
index 0000000..1f18a65
--- /dev/null
+++ b/plugins/codemirror/codemirror/addon/tern/tern.js
@@ -0,0 +1,632 @@
+// Glue code between CodeMirror and Tern.
+//
+// Create a CodeMirror.TernServer to wrap an actual Tern server,
+// register open documents (CodeMirror.Doc instances) with it, and
+// call its methods to activate the assisting functions that Tern
+// provides.
+//
+// Options supported (all optional):
+// * defs: An array of JSON definition data structures.
+// * plugins: An object mapping plugin names to configuration
+// options.
+// * getFile: A function(name, c) that can be used to access files in
+// the project that haven't been loaded yet. Simply do c(null) to
+// indicate that a file is not available.
+// * fileFilter: A function(value, docName, doc) that will be applied
+// to documents before passing them on to Tern.
+// * switchToDoc: A function(name) that should, when providing a
+// multi-file view, switch the view or focus to the named file.
+// * showError: A function(editor, message) that can be used to
+// override the way errors are displayed.
+// * completionTip: Customize the content in tooltips for completions.
+// Is passed a single argument—the completion's data as returned by
+// Tern—and may return a string, DOM node, or null to indicate that
+// no tip should be shown. By default the docstring is shown.
+// * typeTip: Like completionTip, but for the tooltips shown for type
+// queries.
+// * responseFilter: A function(doc, query, request, error, data) that
+// will be applied to the Tern responses before treating them
+//
+//
+// It is possible to run the Tern server in a web worker by specifying
+// these additional options:
+// * useWorker: Set to true to enable web worker mode. You'll probably
+// want to feature detect the actual value you use here, for example
+// !!window.Worker.
+// * workerScript: The main script of the worker. Point this to
+// wherever you are hosting worker.js from this directory.
+// * workerDeps: An array of paths pointing (relative to workerScript)
+// to the Acorn and Tern libraries and any Tern plugins you want to
+// load. Or, if you minified those into a single script and included
+// them in the workerScript, simply leave this undefined.
+
+(function() {
+ "use strict";
+ // declare global: tern
+
+ CodeMirror.TernServer = function(options) {
+ var self = this;
+ this.options = options || {};
+ var plugins = this.options.plugins || (this.options.plugins = {});
+ if (!plugins.doc_comment) plugins.doc_comment = true;
+ if (this.options.useWorker) {
+ this.server = new WorkerServer(this);
+ } else {
+ this.server = new tern.Server({
+ getFile: function(name, c) { return getFile(self, name, c); },
+ async: true,
+ defs: this.options.defs || [],
+ plugins: plugins
+ });
+ }
+ this.docs = Object.create(null);
+ this.trackChange = function(doc, change) { trackChange(self, doc, change); };
+
+ this.cachedArgHints = null;
+ this.activeArgHints = null;
+ this.jumpStack = [];
+ };
+
+ CodeMirror.TernServer.prototype = {
+ addDoc: function(name, doc) {
+ var data = {doc: doc, name: name, changed: null};
+ this.server.addFile(name, docValue(this, data));
+ CodeMirror.on(doc, "change", this.trackChange);
+ return this.docs[name] = data;
+ },
+
+ delDoc: function(name) {
+ var found = this.docs[name];
+ if (!found) return;
+ CodeMirror.off(found.doc, "change", this.trackChange);
+ delete this.docs[name];
+ this.server.delFile(name);
+ },
+
+ hideDoc: function(name) {
+ closeArgHints(this);
+ var found = this.docs[name];
+ if (found && found.changed) sendDoc(this, found);
+ },
+
+ complete: function(cm) {
+ var self = this;
+ CodeMirror.showHint(cm, function(cm, c) { return hint(self, cm, c); }, {async: true});
+ },
+
+ getHint: function(cm, c) { return hint(this, cm, c); },
+
+ showType: function(cm, pos) { showType(this, cm, pos); },
+
+ updateArgHints: function(cm) { updateArgHints(this, cm); },
+
+ jumpToDef: function(cm) { jumpToDef(this, cm); },
+
+ jumpBack: function(cm) { jumpBack(this, cm); },
+
+ rename: function(cm) { rename(this, cm); },
+
+ request: function (cm, query, c, pos) {
+ var self = this;
+ var doc = findDoc(this, cm.getDoc());
+ var request = buildRequest(this, doc, query, pos);
+
+ this.server.request(request, function (error, data) {
+ if (!error && self.options.responseFilter)
+ data = self.options.responseFilter(doc, query, request, error, data);
+ c(error, data);
+ });
+ }
+ };
+
+ var Pos = CodeMirror.Pos;
+ var cls = "CodeMirror-Tern-";
+ var bigDoc = 250;
+
+ function getFile(ts, name, c) {
+ var buf = ts.docs[name];
+ if (buf)
+ c(docValue(ts, buf));
+ else if (ts.options.getFile)
+ ts.options.getFile(name, c);
+ else
+ c(null);
+ }
+
+ function findDoc(ts, doc, name) {
+ for (var n in ts.docs) {
+ var cur = ts.docs[n];
+ if (cur.doc == doc) return cur;
+ }
+ if (!name) for (var i = 0;; ++i) {
+ n = "[doc" + (i || "") + "]";
+ if (!ts.docs[n]) { name = n; break; }
+ }
+ return ts.addDoc(name, doc);
+ }
+
+ function trackChange(ts, doc, change) {
+ var data = findDoc(ts, doc);
+
+ var argHints = ts.cachedArgHints;
+ if (argHints && argHints.doc == doc && cmpPos(argHints.start, change.to) <= 0)
+ ts.cachedArgHints = null;
+
+ var changed = data.changed;
+ if (changed == null)
+ data.changed = changed = {from: change.from.line, to: change.from.line};
+ var end = change.from.line + (change.text.length - 1);
+ if (change.from.line < changed.to) changed.to = changed.to - (change.to.line - end);
+ if (end >= changed.to) changed.to = end + 1;
+ if (changed.from > change.from.line) changed.from = change.from.line;
+
+ if (doc.lineCount() > bigDoc && change.to - changed.from > 100) setTimeout(function() {
+ if (data.changed && data.changed.to - data.changed.from > 100) sendDoc(ts, data);
+ }, 200);
+ }
+
+ function sendDoc(ts, doc) {
+ ts.server.request({files: [{type: "full", name: doc.name, text: docValue(ts, doc)}]}, function(error) {
+ if (error) console.error(error);
+ else doc.changed = null;
+ });
+ }
+
+ // Completion
+
+ function hint(ts, cm, c) {
+ ts.request(cm, {type: "completions", types: true, docs: true, urls: true}, function(error, data) {
+ if (error) return showError(ts, cm, error);
+ var completions = [], after = "";
+ var from = data.start, to = data.end;
+ if (cm.getRange(Pos(from.line, from.ch - 2), from) == "[\"" &&
+ cm.getRange(to, Pos(to.line, to.ch + 2)) != "\"]")
+ after = "\"]";
+
+ for (var i = 0; i < data.completions.length; ++i) {
+ var completion = data.completions[i], className = typeToIcon(completion.type);
+ if (data.guess) className += " " + cls + "guess";
+ completions.push({text: completion.name + after,
+ displayText: completion.name,
+ className: className,
+ data: completion});
+ }
+
+ var obj = {from: from, to: to, list: completions};
+ var tooltip = null;
+ CodeMirror.on(obj, "close", function() { remove(tooltip); });
+ CodeMirror.on(obj, "update", function() { remove(tooltip); });
+ CodeMirror.on(obj, "select", function(cur, node) {
+ remove(tooltip);
+ var content = ts.options.completionTip ? ts.options.completionTip(cur.data) : cur.data.doc;
+ if (content) {
+ tooltip = makeTooltip(node.parentNode.getBoundingClientRect().right + window.pageXOffset,
+ node.getBoundingClientRect().top + window.pageYOffset, content);
+ tooltip.className += " " + cls + "hint-doc";
+ }
+ });
+ c(obj);
+ });
+ }
+
+ function typeToIcon(type) {
+ var suffix;
+ if (type == "?") suffix = "unknown";
+ else if (type == "number" || type == "string" || type == "bool") suffix = type;
+ else if (/^fn\(/.test(type)) suffix = "fn";
+ else if (/^\[/.test(type)) suffix = "array";
+ else suffix = "object";
+ return cls + "completion " + cls + "completion-" + suffix;
+ }
+
+ // Type queries
+
+ function showType(ts, cm, pos) {
+ ts.request(cm, "type", function(error, data) {
+ if (error) return showError(ts, cm, error);
+ if (ts.options.typeTip) {
+ var tip = ts.options.typeTip(data);
+ } else {
+ var tip = elt("span", null, elt("strong", null, data.type || "not found"));
+ if (data.doc)
+ tip.appendChild(document.createTextNode(" — " + data.doc));
+ if (data.url) {
+ tip.appendChild(document.createTextNode(" "));
+ tip.appendChild(elt("a", null, "[docs]")).href = data.url;
+ }
+ }
+ tempTooltip(cm, tip);
+ }, pos);
+ }
+
+ // Maintaining argument hints
+
+ function updateArgHints(ts, cm) {
+ closeArgHints(ts);
+
+ if (cm.somethingSelected()) return;
+ var state = cm.getTokenAt(cm.getCursor()).state;
+ var inner = CodeMirror.innerMode(cm.getMode(), state);
+ if (inner.mode.name != "javascript") return;
+ var lex = inner.state.lexical;
+ if (lex.info != "call") return;
+
+ var ch, pos = lex.pos || 0, tabSize = cm.getOption("tabSize");
+ for (var line = cm.getCursor().line, e = Math.max(0, line - 9), found = false; line >= e; --line) {
+ var str = cm.getLine(line), extra = 0;
+ for (var pos = 0;;) {
+ var tab = str.indexOf("\t", pos);
+ if (tab == -1) break;
+ extra += tabSize - (tab + extra) % tabSize - 1;
+ pos = tab + 1;
+ }
+ ch = lex.column - extra;
+ if (str.charAt(ch) == "(") {found = true; break;}
+ }
+ if (!found) return;
+
+ var start = Pos(line, ch);
+ var cache = ts.cachedArgHints;
+ if (cache && cache.doc == cm.getDoc() && cmpPos(start, cache.start) == 0)
+ return showArgHints(ts, cm, pos);
+
+ ts.request(cm, {type: "type", preferFunction: true, end: start}, function(error, data) {
+ if (error || !data.type || !(/^fn\(/).test(data.type)) return;
+ ts.cachedArgHints = {
+ start: pos,
+ type: parseFnType(data.type),
+ name: data.exprName || data.name || "fn",
+ guess: data.guess,
+ doc: cm.getDoc()
+ };
+ showArgHints(ts, cm, pos);
+ });
+ }
+
+ function showArgHints(ts, cm, pos) {
+ closeArgHints(ts);
+
+ var cache = ts.cachedArgHints, tp = cache.type;
+ var tip = elt("span", cache.guess ? cls + "fhint-guess" : null,
+ elt("span", cls + "fname", cache.name), "(");
+ for (var i = 0; i < tp.args.length; ++i) {
+ if (i) tip.appendChild(document.createTextNode(", "));
+ var arg = tp.args[i];
+ tip.appendChild(elt("span", cls + "farg" + (i == pos ? " " + cls + "farg-current" : ""), arg.name || "?"));
+ if (arg.type != "?") {
+ tip.appendChild(document.createTextNode(":\u00a0"));
+ tip.appendChild(elt("span", cls + "type", arg.type));
+ }
+ }
+ tip.appendChild(document.createTextNode(tp.rettype ? ") ->\u00a0" : ")"));
+ if (tp.rettype) tip.appendChild(elt("span", cls + "type", tp.rettype));
+ var place = cm.cursorCoords(null, "page");
+ ts.activeArgHints = makeTooltip(place.right + 1, place.bottom, tip);
+ }
+
+ function parseFnType(text) {
+ var args = [], pos = 3;
+
+ function skipMatching(upto) {
+ var depth = 0, start = pos;
+ for (;;) {
+ var next = text.charAt(pos);
+ if (upto.test(next) && !depth) return text.slice(start, pos);
+ if (/[{\[\(]/.test(next)) ++depth;
+ else if (/[}\]\)]/.test(next)) --depth;
+ ++pos;
+ }
+ }
+
+ // Parse arguments
+ if (text.charAt(pos) != ")") for (;;) {
+ var name = text.slice(pos).match(/^([^, \(\[\{]+): /);
+ if (name) {
+ pos += name[0].length;
+ name = name[1];
+ }
+ args.push({name: name, type: skipMatching(/[\),]/)});
+ if (text.charAt(pos) == ")") break;
+ pos += 2;
+ }
+
+ var rettype = text.slice(pos).match(/^\) -> (.*)$/);
+
+ return {args: args, rettype: rettype && rettype[1]};
+ }
+
+ // Moving to the definition of something
+
+ function jumpToDef(ts, cm) {
+ function inner(varName) {
+ var req = {type: "definition", variable: varName || null};
+ var doc = findDoc(ts, cm.getDoc());
+ ts.server.request(buildRequest(ts, doc, req), function(error, data) {
+ if (error) return showError(ts, cm, error);
+ if (!data.file && data.url) { window.open(data.url); return; }
+
+ if (data.file) {
+ var localDoc = ts.docs[data.file], found;
+ if (localDoc && (found = findContext(localDoc.doc, data))) {
+ ts.jumpStack.push({file: doc.name,
+ start: cm.getCursor("from"),
+ end: cm.getCursor("to")});
+ moveTo(ts, doc, localDoc, found.start, found.end);
+ return;
+ }
+ }
+ showError(ts, cm, "Could not find a definition.");
+ });
+ }
+
+ if (!atInterestingExpression(cm))
+ dialog(cm, "Jump to variable", function(name) { if (name) inner(name); });
+ else
+ inner();
+ }
+
+ function jumpBack(ts, cm) {
+ var pos = ts.jumpStack.pop(), doc = pos && ts.docs[pos.file];
+ if (!doc) return;
+ moveTo(ts, findDoc(ts, cm.getDoc()), doc, pos.start, pos.end);
+ }
+
+ function moveTo(ts, curDoc, doc, start, end) {
+ doc.doc.setSelection(end, start);
+ if (curDoc != doc && ts.options.switchToDoc) {
+ closeArgHints(ts);
+ ts.options.switchToDoc(doc.name);
+ }
+ }
+
+ // The {line,ch} representation of positions makes this rather awkward.
+ function findContext(doc, data) {
+ var before = data.context.slice(0, data.contextOffset).split("\n");
+ var startLine = data.start.line - (before.length - 1);
+ var start = Pos(startLine, (before.length == 1 ? data.start.ch : doc.getLine(startLine).length) - before[0].length);
+
+ var text = doc.getLine(startLine).slice(start.ch);
+ for (var cur = startLine + 1; cur < doc.lineCount() && text.length < data.context.length; ++cur)
+ text += "\n" + doc.getLine(cur);
+ if (text.slice(0, data.context.length) == data.context) return data;
+
+ var cursor = doc.getSearchCursor(data.context, 0, false);
+ var nearest, nearestDist = Infinity;
+ while (cursor.findNext()) {
+ var from = cursor.from(), dist = Math.abs(from.line - start.line) * 10000;
+ if (!dist) dist = Math.abs(from.ch - start.ch);
+ if (dist < nearestDist) { nearest = from; nearestDist = dist; }
+ }
+ if (!nearest) return null;
+
+ if (before.length == 1)
+ nearest.ch += before[0].length;
+ else
+ nearest = Pos(nearest.line + (before.length - 1), before[before.length - 1].length);
+ if (data.start.line == data.end.line)
+ var end = Pos(nearest.line, nearest.ch + (data.end.ch - data.start.ch));
+ else
+ var end = Pos(nearest.line + (data.end.line - data.start.line), data.end.ch);
+ return {start: nearest, end: end};
+ }
+
+ function atInterestingExpression(cm) {
+ var pos = cm.getCursor("end"), tok = cm.getTokenAt(pos);
+ if (tok.start < pos.ch && (tok.type == "comment" || tok.type == "string")) return false;
+ return /\w/.test(cm.getLine(pos.line).slice(Math.max(pos.ch - 1, 0), pos.ch + 1));
+ }
+
+ // Variable renaming
+
+ function rename(ts, cm) {
+ var token = cm.getTokenAt(cm.getCursor());
+ if (!/\w/.test(token.string)) showError(ts, cm, "Not at a variable");
+ dialog(cm, "New name for " + token.string, function(newName) {
+ ts.request(cm, {type: "rename", newName: newName, fullDocs: true}, function(error, data) {
+ if (error) return showError(ts, cm, error);
+ applyChanges(ts, data.changes);
+ });
+ });
+ }
+
+ var nextChangeOrig = 0;
+ function applyChanges(ts, changes) {
+ var perFile = Object.create(null);
+ for (var i = 0; i < changes.length; ++i) {
+ var ch = changes[i];
+ (perFile[ch.file] || (perFile[ch.file] = [])).push(ch);
+ }
+ for (var file in perFile) {
+ var known = ts.docs[file], chs = perFile[file];;
+ if (!known) continue;
+ chs.sort(function(a, b) { return cmpPos(b.start, a.start); });
+ var origin = "*rename" + (++nextChangeOrig);
+ for (var i = 0; i < chs.length; ++i) {
+ var ch = chs[i];
+ known.doc.replaceRange(ch.text, ch.start, ch.end, origin);
+ }
+ }
+ }
+
+ // Generic request-building helper
+
+ function buildRequest(ts, doc, query, pos) {
+ var files = [], offsetLines = 0, allowFragments = !query.fullDocs;
+ if (!allowFragments) delete query.fullDocs;
+ if (typeof query == "string") query = {type: query};
+ query.lineCharPositions = true;
+ if (query.end == null) {
+ query.end = pos || doc.doc.getCursor("end");
+ if (doc.doc.somethingSelected())
+ query.start = doc.doc.getCursor("start");
+ }
+ var startPos = query.start || query.end;
+
+ if (doc.changed) {
+ if (doc.doc.lineCount() > bigDoc && allowFragments !== false &&
+ doc.changed.to - doc.changed.from < 100 &&
+ doc.changed.from <= startPos.line && doc.changed.to > query.end.line) {
+ files.push(getFragmentAround(doc, startPos, query.end));
+ query.file = "#0";
+ var offsetLines = files[0].offsetLines;
+ if (query.start != null) query.start = Pos(query.start.line - -offsetLines, query.start.ch);
+ query.end = Pos(query.end.line - offsetLines, query.end.ch);
+ } else {
+ files.push({type: "full",
+ name: doc.name,
+ text: docValue(ts, doc)});
+ query.file = doc.name;
+ doc.changed = null;
+ }
+ } else {
+ query.file = doc.name;
+ }
+ for (var name in ts.docs) {
+ var cur = ts.docs[name];
+ if (cur.changed && cur != doc) {
+ files.push({type: "full", name: cur.name, text: docValue(ts, cur)});
+ cur.changed = null;
+ }
+ }
+
+ return {query: query, files: files};
+ }
+
+ function getFragmentAround(data, start, end) {
+ var doc = data.doc;
+ var minIndent = null, minLine = null, endLine, tabSize = 4;
+ for (var p = start.line - 1, min = Math.max(0, p - 50); p >= min; --p) {
+ var line = doc.getLine(p), fn = line.search(/\bfunction\b/);
+ if (fn < 0) continue;
+ var indent = CodeMirror.countColumn(line, null, tabSize);
+ if (minIndent != null && minIndent <= indent) continue;
+ minIndent = indent;
+ minLine = p;
+ }
+ if (minLine == null) minLine = min;
+ var max = Math.min(doc.lastLine(), end.line + 20);
+ if (minIndent == null || minIndent == CodeMirror.countColumn(doc.getLine(start.line), null, tabSize))
+ endLine = max;
+ else for (endLine = end.line + 1; endLine < max; ++endLine) {
+ var indent = CodeMirror.countColumn(doc.getLine(endLine), null, tabSize);
+ if (indent <= minIndent) break;
+ }
+ var from = Pos(minLine, 0);
+
+ return {type: "part",
+ name: data.name,
+ offsetLines: from.line,
+ text: doc.getRange(from, Pos(endLine, 0))};
+ }
+
+ // Generic utilities
+
+ function cmpPos(a, b) { return a.line - b.line || a.ch - b.ch; }
+
+ function elt(tagname, cls /*, ... elts*/) {
+ var e = document.createElement(tagname);
+ if (cls) e.className = cls;
+ for (var i = 2; i < arguments.length; ++i) {
+ var elt = arguments[i];
+ if (typeof elt == "string") elt = document.createTextNode(elt);
+ e.appendChild(elt);
+ }
+ return e;
+ }
+
+ function dialog(cm, text, f) {
+ if (cm.openDialog)
+ cm.openDialog(text + ": ", f);
+ else
+ f(prompt(text, ""));
+ }
+
+ // Tooltips
+
+ function tempTooltip(cm, content) {
+ var where = cm.cursorCoords();
+ var tip = makeTooltip(where.right + 1, where.bottom, content);
+ function clear() {
+ if (!tip.parentNode) return;
+ cm.off("cursorActivity", clear);
+ fadeOut(tip);
+ }
+ setTimeout(clear, 1700);
+ cm.on("cursorActivity", clear);
+ }
+
+ function makeTooltip(x, y, content) {
+ var node = elt("div", cls + "tooltip", content);
+ node.style.left = x + "px";
+ node.style.top = y + "px";
+ document.body.appendChild(node);
+ return node;
+ }
+
+ function remove(node) {
+ var p = node && node.parentNode;
+ if (p) p.removeChild(node);
+ }
+
+ function fadeOut(tooltip) {
+ tooltip.style.opacity = "0";
+ setTimeout(function() { remove(tooltip); }, 1100);
+ }
+
+ function showError(ts, cm, msg) {
+ if (ts.options.showError)
+ ts.options.showError(cm, msg);
+ else
+ tempTooltip(cm, String(msg));
+ }
+
+ function closeArgHints(ts) {
+ if (ts.activeArgHints) { remove(ts.activeArgHints); ts.activeArgHints = null; }
+ }
+
+ function docValue(ts, doc) {
+ var val = doc.doc.getValue();
+ if (ts.options.fileFilter) val = ts.options.fileFilter(val, doc.name, doc.doc);
+ return val;
+ }
+
+ // Worker wrapper
+
+ function WorkerServer(ts) {
+ var worker = new Worker(ts.options.workerScript);
+ worker.postMessage({type: "init",
+ defs: ts.options.defs,
+ plugins: ts.options.plugins,
+ scripts: ts.options.workerDeps});
+ var msgId = 0, pending = {};
+
+ function send(data, c) {
+ if (c) {
+ data.id = ++msgId;
+ pending[msgId] = c;
+ }
+ worker.postMessage(data);
+ }
+ worker.onmessage = function(e) {
+ var data = e.data;
+ if (data.type == "getFile") {
+ getFile(ts, data.name, function(err, text) {
+ send({type: "getFile", err: String(err), text: text, id: data.id});
+ });
+ } else if (data.type == "debug") {
+ console.log(data.message);
+ } else if (data.id && pending[data.id]) {
+ pending[data.id](data.err, data.body);
+ delete pending[data.id];
+ }
+ };
+ worker.onerror = function(e) {
+ for (var id in pending) pending[id](e);
+ pending = {};
+ };
+
+ this.addFile = function(name, text) { send({type: "add", name: name, text: text}); };
+ this.delFile = function(name) { send({type: "del", name: name}); };
+ this.request = function(body, c) { send({type: "req", body: body}, c); };
+ }
+})();
diff --git a/plugins/codemirror/codemirror/addon/tern/worker.js b/plugins/codemirror/codemirror/addon/tern/worker.js
new file mode 100644
index 0000000..1ff63de
--- /dev/null
+++ b/plugins/codemirror/codemirror/addon/tern/worker.js
@@ -0,0 +1,41 @@
+// declare global: tern, server
+
+var server;
+
+this.onmessage = function(e) {
+ var data = e.data;
+ switch (data.type) {
+ case "init": return startServer(data.defs, data.plugins, data.scripts);
+ case "add": return server.addFile(data.name, data.text);
+ case "del": return server.delFile(data.name);
+ case "req": return server.request(data.body, function(err, reqData) {
+ postMessage({id: data.id, body: reqData, err: err && String(err)});
+ });
+ case "getFile":
+ var c = pending[data.id];
+ delete pending[data.id];
+ return c(data.err, data.text);
+ default: throw new Error("Unknown message type: " + data.type);
+ }
+};
+
+var nextId = 0, pending = {};
+function getFile(file, c) {
+ postMessage({type: "getFile", name: file, id: ++nextId});
+ pending[nextId] = c;
+}
+
+function startServer(defs, plugins, scripts) {
+ if (scripts) importScripts.apply(null, scripts);
+
+ server = new tern.Server({
+ getFile: getFile,
+ async: true,
+ defs: defs,
+ plugins: plugins
+ });
+}
+
+var console = {
+ log: function(v) { postMessage({type: "debug", message: v}); }
+};
diff --git a/plugins/codemirror/codemirror/addon/wrap/hardwrap.js b/plugins/codemirror/codemirror/addon/wrap/hardwrap.js
new file mode 100644
index 0000000..f252ffc
--- /dev/null
+++ b/plugins/codemirror/codemirror/addon/wrap/hardwrap.js
@@ -0,0 +1,99 @@
+(function() {
+ "use strict";
+
+ var Pos = CodeMirror.Pos;
+
+ function findParagraph(cm, pos, options) {
+ var startRE = options.paragraphStart || cm.getHelper(pos, "paragraphStart");
+ for (var start = pos.line, first = cm.firstLine(); start > first; --start) {
+ var line = cm.getLine(start);
+ if (startRE && startRE.test(line)) break;
+ if (!/\S/.test(line)) { ++start; break; }
+ }
+ var endRE = options.paragraphEnd || cm.getHelper(pos, "paragraphEnd");
+ for (var end = pos.line + 1, last = cm.lastLine(); end <= last; ++end) {
+ var line = cm.getLine(end);
+ if (endRE && endRE.test(line)) { ++end; break; }
+ if (!/\S/.test(line)) break;
+ }
+ return {from: start, to: end};
+ }
+
+ function findBreakPoint(text, column, wrapOn, killTrailingSpace) {
+ for (var at = column; at > 0; --at)
+ if (wrapOn.test(text.slice(at - 1, at + 1))) break;
+ if (at == 0) at = column;
+ var endOfText = at;
+ if (killTrailingSpace)
+ while (text.charAt(endOfText - 1) == " ") --endOfText;
+ return {from: endOfText, to: at};
+ }
+
+ function wrapRange(cm, from, to, options) {
+ from = cm.clipPos(from); to = cm.clipPos(to);
+ var column = options.column || 80;
+ var wrapOn = options.wrapOn || /\s\S|-[^\.\d]/;
+ var killTrailing = options.killTrailingSpace !== false;
+ var changes = [], curLine = "", curNo = from.line;
+ var lines = cm.getRange(from, to, false);
+ for (var i = 0; i < lines.length; ++i) {
+ var text = lines[i], oldLen = curLine.length, spaceInserted = 0;
+ if (curLine && text && !wrapOn.test(curLine.charAt(curLine.length - 1) + text.charAt(0))) {
+ curLine += " ";
+ spaceInserted = 1;
+ }
+ curLine += text;
+ if (i) {
+ var firstBreak = curLine.length > column && findBreakPoint(curLine, column, wrapOn, killTrailing);
+ // If this isn't broken, or is broken at a different point, remove old break
+ if (!firstBreak || firstBreak.from != oldLen || firstBreak.to != oldLen + spaceInserted) {
+ changes.push({text: spaceInserted ? " " : "",
+ from: Pos(curNo, oldLen),
+ to: Pos(curNo + 1, 0)});
+ } else {
+ curLine = text;
+ ++curNo;
+ }
+ }
+ while (curLine.length > column) {
+ var bp = findBreakPoint(curLine, column, wrapOn, killTrailing);
+ changes.push({text: "\n",
+ from: Pos(curNo, bp.from),
+ to: Pos(curNo, bp.to)});
+ curLine = curLine.slice(bp.to);
+ ++curNo;
+ }
+ }
+ if (changes.length) cm.operation(function() {
+ for (var i = 0; i < changes.length; ++i) {
+ var change = changes[i];
+ cm.replaceRange(change.text, change.from, change.to);
+ }
+ });
+ }
+
+ CodeMirror.defineExtension("wrapParagraph", function(pos, options) {
+ options = options || {};
+ if (!pos) pos = this.getCursor();
+ var para = findParagraph(this, pos, options);
+ wrapRange(this, Pos(para.from, 0), Pos(para.to - 1), options);
+ });
+
+ CodeMirror.defineExtension("wrapRange", function(from, to, options) {
+ wrapRange(this, from, to, options || {});
+ });
+
+ CodeMirror.defineExtension("wrapParagraphsInRange", function(from, to, options) {
+ options = options || {};
+ var cm = this, paras = [];
+ for (var line = from.line; line <= to.line;) {
+ var para = findParagraph(cm, Pos(line, 0), options);
+ paras.push(para);
+ line = para.to;
+ }
+ if (paras.length) cm.operation(function() {
+ for (var i = paras.length - 1; i >= 0; --i)
+ wrapRange(cm, Pos(paras[i].from, 0), Pos(paras[i].to - 1), options);
+ });
+ });
+})();
diff --git a/plugins/codemirror/codemirror/bin/authors.sh b/plugins/codemirror/codemirror/bin/authors.sh
new file mode 100644
index 0000000..b3ee99c
--- /dev/null
+++ b/plugins/codemirror/codemirror/bin/authors.sh
@@ -0,0 +1,6 @@
+# Combine existing list of authors with everyone known in git, sort, add header.
+tail --lines=+3 AUTHORS > AUTHORS.tmp
+git log --format='%aN' >> AUTHORS.tmp
+echo -e "List of CodeMirror contributors. Updated before every release.\n" > AUTHORS
+sort -u AUTHORS.tmp >> AUTHORS
+rm -f AUTHORS.tmp
diff --git a/plugins/codemirror/codemirror/bin/compress b/plugins/codemirror/codemirror/bin/compress
new file mode 100644
index 0000000..809fbe8
--- /dev/null
+++ b/plugins/codemirror/codemirror/bin/compress
@@ -0,0 +1,92 @@
+#!/usr/bin/env node
+
+// Compression helper for CodeMirror
+//
+// Example:
+//
+// bin/compress codemirror runmode javascript xml
+//
+// Will take lib/codemirror.js, addon/runmode/runmode.js,
+// mode/javascript/javascript.js, and mode/xml/xml.js, run them though
+// the online minifier at http://marijnhaverbeke.nl/uglifyjs, and spit
+// out the result.
+//
+// bin/compress codemirror --local /path/to/bin/UglifyJS
+//
+// Will use a local minifier instead of the online default one.
+//
+// Script files are specified without .js ending. Prefixing them with
+// their full (local) path is optional. So you may say lib/codemirror
+// or mode/xml/xml to be more precise. In fact, even the .js suffix
+// may be speficied, if wanted.
+
+"use strict";
+
+var fs = require("fs");
+
+function help(ok) {
+ console.log("usage: " + process.argv[1] + " [--local /path/to/uglifyjs] files...");
+ process.exit(ok ? 0 : 1);
+}
+
+var local = null, args = [], extraArgs = null, files = [], blob = "";
+
+for (var i = 2; i < process.argv.length; ++i) {
+ var arg = process.argv[i];
+ if (arg == "--local" && i + 1 < process.argv.length) {
+ var parts = process.argv[++i].split(/\s+/);
+ local = parts[0];
+ extraArgs = parts.slice(1);
+ if (!extraArgs.length) extraArgs = ["-c", "-m"];
+ } else if (arg == "--help") {
+ help(true);
+ } else if (arg[0] != "-") {
+ files.push({name: arg, re: new RegExp("(?:\\/|^)" + arg + (/\.js$/.test(arg) ? "$" : "\\.js$"))});
+ } else help(false);
+}
+
+function walk(dir) {
+ fs.readdirSync(dir).forEach(function(fname) {
+ if (/^[_\.]/.test(fname)) return;
+ var file = dir + fname;
+ if (fs.statSync(file).isDirectory()) return walk(file + "/");
+ if (files.some(function(spec, i) {
+ var match = spec.re.test(file);
+ if (match) files.splice(i, 1);
+ return match;
+ })) {
+ if (local) args.push(file);
+ else blob += fs.readFileSync(file, "utf8");
+ }
+ });
+}
+
+walk("lib/");
+walk("addon/");
+walk("mode/");
+
+if (!local && !blob) help(false);
+
+if (files.length) {
+ console.log("Some speficied files were not found: " +
+ files.map(function(a){return a.name;}).join(", "));
+ process.exit(1);
+}
+
+if (local) {
+ require("child_process").spawn(local, args.concat(extraArgs), {stdio: ["ignore", process.stdout, process.stderr]});
+} else {
+ var data = new Buffer("js_code=" + require("querystring").escape(blob), "utf8");
+ var req = require("http").request({
+ host: "marijnhaverbeke.nl",
+ port: 80,
+ method: "POST",
+ path: "/uglifyjs",
+ headers: {"content-type": "application/x-www-form-urlencoded",
+ "content-length": data.length}
+ });
+ req.on("response", function(resp) {
+ resp.on("data", function (chunk) { process.stdout.write(chunk); });
+ });
+ req.end(data);
+}
diff --git a/plugins/codemirror/codemirror/bin/lint b/plugins/codemirror/codemirror/bin/lint
new file mode 100644
index 0000000..4f70994
--- /dev/null
+++ b/plugins/codemirror/codemirror/bin/lint
@@ -0,0 +1,16 @@
+#!/usr/bin/env node
+
+var lint = require("../test/lint/lint"),
+ path = require("path");
+
+if (process.argv.length > 2) {
+ lint.checkDir(process.argv[2]);
+} else {
+ process.chdir(path.resolve(__dirname, ".."));
+ lint.checkDir("lib");
+ lint.checkDir("mode");
+ lint.checkDir("addon");
+ lint.checkDir("keymap");
+}
+
+process.exit(lint.success() ? 0 : 1);
diff --git a/plugins/codemirror/codemirror/bin/source-highlight b/plugins/codemirror/codemirror/bin/source-highlight
new file mode 100644
index 0000000..7596ed7
--- /dev/null
+++ b/plugins/codemirror/codemirror/bin/source-highlight
@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+
+// Simple command-line code highlighting tool. Reads code from stdin,
+// spits html to stdout. For example:
+//
+// echo 'function foo(a) { return a; }' | bin/source-highlight -s javascript
+// bin/source-highlight -s
+
+var fs = require("fs");
+
+CodeMirror = require("../addon/runmode/runmode.node.js");
+require("../mode/meta.js");
+
+var sPos = process.argv.indexOf("-s");
+if (sPos == -1 || sPos == process.argv.length - 1) {
+ console.error("Usage: source-highlight -s language");
+ process.exit(1);
+}
+var lang = process.argv[sPos + 1].toLowerCase(), modeName = lang;
+CodeMirror.modeInfo.forEach(function(info) {
+ if (info.mime == lang) {
+ modeName = info.mode;
+ } else if (info.name.toLowerCase() == lang) {
+ modeName = info.mode;
+ lang = info.mime;
+ }
+});
+
+function ensureMode(name) {
+ if (CodeMirror.modes[name] || name == "null") return;
+ try {
+ require("../mode/" + name + "/" + name + ".js");
+ } catch(e) {
+ console.error("Could not load mode " + name + ".");
+ process.exit(1);
+ }
+ var obj = CodeMirror.modes[name];
+ if (obj.dependencies) obj.dependencies.forEach(ensureMode);
+}
+ensureMode(modeName);
+
+function esc(str) {
+ return str.replace(/[<&]/, function(ch) { return ch == "&" ? "&" : "<"; });
+}
+
+var code = fs.readFileSync("/dev/stdin", "utf8");
+var curStyle = null, accum = "";
+function flush() {
+ if (curStyle) process.stdout.write("" + esc(accum) + "");
+ else process.stdout.write(esc(accum));
+}
+
+CodeMirror.runMode(code, lang, function(text, style) {
+ if (style != curStyle) {
+ flush();
+ curStyle = style; accum = text;
+ } else {
+ accum += text;
+ }
+});
+flush();
diff --git a/plugins/codemirror/codemirror/bower.json b/plugins/codemirror/codemirror/bower.json
new file mode 100644
index 0000000..66e049d
--- /dev/null
+++ b/plugins/codemirror/codemirror/bower.json
@@ -0,0 +1,15 @@
+{
+ "name": "CodeMirror",
+ "main": ["lib/codemirror.js", "lib/codemirror.css"],
+ "ignore": [
+ "**/.*",
+ "node_modules",
+ "components",
+ "bin",
+ "demo",
+ "doc",
+ "test",
+ "index.html",
+ "package.json"
+ ]
+}
diff --git a/plugins/codemirror/codemirror/demo/activeline.html b/plugins/codemirror/codemirror/demo/activeline.html
new file mode 100644
index 0000000..14851c3
--- /dev/null
+++ b/plugins/codemirror/codemirror/demo/activeline.html
@@ -0,0 +1,78 @@
+
+
+CodeMirror: Active Line Demo
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/plugins/codemirror/codemirror/demo/anywordhint.html b/plugins/codemirror/codemirror/demo/anywordhint.html
new file mode 100644
index 0000000..851f430
--- /dev/null
+++ b/plugins/codemirror/codemirror/demo/anywordhint.html
@@ -0,0 +1,79 @@
+
+
+CodeMirror: Any Word Completion Demo
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/plugins/codemirror/codemirror/demo/bidi.html b/plugins/codemirror/codemirror/demo/bidi.html
new file mode 100644
index 0000000..4f1f8f3
--- /dev/null
+++ b/plugins/codemirror/codemirror/demo/bidi.html
@@ -0,0 +1,74 @@
+
+
+CodeMirror: Bi-directional Text Demo
+
+
+
+
+
+
+
+
+
+
+
diff --git a/plugins/codemirror/codemirror/demo/btree.html b/plugins/codemirror/codemirror/demo/btree.html
new file mode 100644
index 0000000..7635ca1
--- /dev/null
+++ b/plugins/codemirror/codemirror/demo/btree.html
@@ -0,0 +1,86 @@
+
+
+CodeMirror: B-Tree visualization
+
+
+
+
+
+
+
+
+
+
+
+ Any Word Completion Demo
+ + +Press ctrl-space to activate autocompletion. The +completion uses +the anyword-hint.js +module, which simply looks at nearby words in the buffer and completes +to those.
+ + +Bi-directional Text Demo
+ + + + +Demonstration of bi-directional text support. See + the related + blog post for more background.
+ +Note: There is + a known + bug with cursor motion and mouse clicks in bi-directional lines + that are line wrapped.
+ +B-Tree visualization
+ +Multiple Buffer & Split View Demo
+ + + +
+ Select buffer:
+
+
+
+
+ Select buffer:
+
+
+
+
+
+ Demonstration of
+ using linked documents
+ to provide a split view on a document, and
+ using swapDoc
+ to use a single editor to display multiple documents.
Mode-Changing Demo
+ + +On changes to the content of the above editor, a (crude) script +tries to auto-detect the language used, and switches the editor to +either JavaScript or Scheme mode based on that.
+ + +Closebrackets Demo
+ + + +Close-Tag Demo
+ + + +Autocomplete Demo
+ + +Press ctrl-space to activate autocompletion. Built
+on top of the show-hint
+and javascript-hint
+addons.
Emacs bindings demo
+ + +The emacs keybindings are enabled by
+including keymap/emacs.js and setting
+the keyMap option to "emacs". Because
+CodeMirror's internal API is quite different from Emacs, they are only
+a loose approximation of actual emacs bindings, though.
Also note that a lot of browsers disallow certain keys from being +captured. For example, Chrome blocks both Ctrl-W and Ctrl-N, with the +result that idiomatic use of Emacs keys will constantly close your tab +or open a new window.
+ + + +Code Folding Demo
+ + +Full Screen Editing
+ + + +Demonstration of + the fullscreen + addon. Press F11 when cursor is in the editor to + toggle full screen editing. Esc can also be used + to exit full screen editing.
+Hard-wrapping Demo
+ + +Demonstration of
+the hardwrap addon.
+The above editor has its change event hooked up to
+the wrapParagraphsInRange method, so that the paragraphs
+are reflown as you are typing.
HTML completion demo
+ +Shows the XML completer + parameterized with information about the tags in HTML. + Press ctrl-space to activate completion.
+ + + + +Indented wrapped line demo
+ + +This page uses a hack on top of the "renderLine"
+ event to make wrapped text line up with the base indentation of
+ the line.
Linter Demo
+ + + + + + + + + +Lazy Mode Loading Demo
+ ++ + +
Breakpoint Demo
+ + +Click the line-number gutter to add or remove 'breakpoints'.
+ + + +Match Selection Demo
+ + + + +Simple addon to easily mark (and style) selected text.
+ +Match Highlighter Demo
+ + + + +Search and highlight occurences of the selected text.
+ +Tag Matcher Demo
+ + + + + + +Put the cursor on or inside a pair of tags to highlight them. + Press Ctrl-J to jump to the tag that matches the one under the + cursor.
+merge view demo
+ + + + +The merge
+addon provides an interface for displaying and merging diffs,
+either two-way
+or three-way. The left
+(or center) pane is editable, and the differences with the other
+pane(s) are optionally shown live as you edit it.
This addon depends on +the google-diff-match-patch +library to compute the diffs.
+ + +Multiplexing Parser Demo
+ + + + +Demonstration of a multiplexing mode, which, at certain
+ boundary strings, switches to one or more inner modes. The out
+ (HTML) mode does not get fed the content of the <<
+ >> blocks. See
+ the manual and
+ the source for more
+ information.
Overlay Parser Demo
+ + + + +Demonstration of a mode that parses HTML, highlighting
+ the Mustache templating
+ directives inside of it by using the code
+ in overlay.js. View
+ source to see the 15 lines of code needed to accomplish this.
Placeholder demo
+ + +The placeholder
+ plug-in adds an option placeholder that can be set to
+ make text appear in the editor when it is empty and not focused.
+ If the source textarea has a placeholder attribute,
+ it will automatically be inherited.
HTML5 preview
+ + + + +Autoresize Demo
+ + +By setting a few CSS properties, and giving
+the viewportMargin
+a value of Infinity, CodeMirror can be made to
+automatically resize to fit its content.
Mode Runner Demo
+ + ++ + + + + +
Running a CodeMirror mode outside of the editor.
+ The CodeMirror.runMode function, defined
+ in lib/runmode.js takes the following arguments:
-
+
text (string)
+ - The document to run through the highlighter. +
mode (mode spec)
+ - The mode to use (must be loaded as normal). +
output (function or DOM node)
+ - If this is a function, it will be called for each token with
+ two arguments, the token's text and the token's style class (may
+ be
nullfor unstyled tokens). If it is a DOM node, + the tokens will be converted tospanelements as in + an editor, and inserted into the node + (throughinnerHTML).
+
Search/Replace Demo
+ + + + +Demonstration of primitive search/replace functionality. The + keybindings (which can be overridden by custom keymaps) are:
+-
+
- Ctrl-F / Cmd-F
- Start searching +
- Ctrl-G / Cmd-G
- Find next +
- Shift-Ctrl-G / Shift-Cmd-G
- Find previous +
- Shift-Ctrl-F / Cmd-Option-F
- Replace +
- Shift-Ctrl-R / Shift-Cmd-Option-F
- Replace all +
Searching is enabled by + including addon/search/search.js + and addon/search/searchcursor.js. + For good-looking input dialogs, you also want to include + addon/dialog/dialog.js + and addon/dialog/dialog.css.
+Automatically derive odd wrapping behavior for your browser
+ + +This is a hack to automatically derive
+ a spanAffectsWrapping regexp for a browser. See the
+ comments above that variable
+ in lib/codemirror.js
+ for some more details.
Tern Demo
+Theme Demo
+ + +Select a theme: +
+ + +Trailing Whitespace Demo
+ + + + +Uses +the trailingspace +addon to highlight trailing whitespace.
+ +Variable Height Demo
+ + +Vim bindings demo
+ + + + +The vim keybindings are enabled by
+including keymap/vim.js and setting
+the keyMap option to "vim". Because
+CodeMirror's internal API is quite different from Vim, they are only
+a loose approximation of actual vim bindings, though.
Visible tabs demo
+ + +Tabs inside the editor are spans with the
+class cm-tab, and can be styled.
Inline Widget Demo
+ + + + +This demo runs JSHint over the code +in the editor (which is the script used on this page), and +inserts line widgets to +display the warnings that JSHint comes up with.
+XML Autocomplete Demo
+ + +Press ctrl-space, or type a '<' character to + activate autocompletion. This demo defines a simple schema that + guides completion. The schema can be customized—see + the manual.
+ +Development of the xml-hint addon was kindly
+ sponsored
+ by www.xperiment.mobi.
Script compression helper
+ +To optimize loading CodeMirror, especially when including a + bunch of different modes, it is recommended that you combine and + minify (and preferably also gzip) the scripts. This page makes + those first two steps very easy. Simply select the version and + scripts you need in the form below, and + click Compress to download the minified script + file.
+ + + + + +
+ 
+
+
+
+
+
+
+
+ -
+
- Introduction +
- General Approach +
- Input +
- Selection +
- Intelligent Updating +
- Parsing +
- What Gives? +
- Content Representation +
- Key Maps +
(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.)
Input
+ +ACE uses its hidden textarea only as a text input shim, and does +all cursor movement and things like text deletion itself by directly +handling key events. CodeMirror's way is to let the browser do its +thing as much as possible, and not, for example, define its own set of +key bindings. One way to do this would have been to have the whole +document inside the hidden textarea, and after each key event update +the display DOM to reflect what's in that textarea.
+ +That'd be simple, but it is not realistic. For even medium-sized +document the editor would be constantly munging huge strings, and get +terribly slow. What CodeMirror 2 does is put the current selection, +along with an extra line on the top and on the bottom, into the +textarea.
+ +This means that the arrow keys (and their ctrl-variations), home, +end, etcetera, do not have to be handled specially. We just read the +cursor position in the textarea, and update our cursor to match it. +Also, copy and paste work pretty much for free, and people get their +native key bindings, without any special work on my part. For example, +I have emacs key bindings configured for Chrome and Firefox. There is +no way for a script to detect this. [no longer the case]
+ +Of course, since only a small part of the document sits in the +textarea, keys like page up and ctrl-end won't do the right thing. +CodeMirror is catching those events and handling them itself.
+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.
iframenodes aren't +really known for respecting document flow. Now that an editor instance +is a plaindivelement, 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.
+
+
+
+
+
+
+
+
+ -
+
- Basic Usage +
- Configuration +
- Events +
- Keymaps +
- Customized Styling +
- Programming API + + +
- Addons +
- Writing CodeMirror Modes +
User manual and reference guide
+ +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.
+ (See the compression helper for an
+ easy way to combine scripts.) For example:
<script src="lib/codemirror.js"></script> +<link rel="stylesheet" href="../lib/codemirror.css"> +<script src="mode/javascript/javascript.js"></script>+ +
Having done this, an editor instance can be created like + this:
+ +var myCodeMirror = CodeMirror(document.body);+ +
The editor will be appended to the document body, will start
+ empty, and will use the mode that we loaded. To have more control
+ over the new editor, a configuration object can be passed
+ to CodeMirror as a second
+ argument:
var myCodeMirror = CodeMirror(document.body, {
+ value: "function myScript(){return 100;}\n",
+ mode: "javascript"
+});
+
+ This will initialize the editor with a piece of code already in + it, and explicitly tell it to use the JavaScript mode (which is + useful when multiple modes are loaded). + See below for a full discussion of the + configuration options that CodeMirror accepts.
+ +In cases where you don't want to append the editor to an
+ element, and need more control over the way it is inserted, the
+ first argument to the CodeMirror function can also
+ be a function that, when given a DOM element, inserts it into the
+ document somewhere. This could be used to, for example, replace a
+ textarea with a real editor:
var myCodeMirror = CodeMirror(function(elt) {
+ myTextArea.parentNode.replaceChild(elt, myTextArea);
+}, {value: myTextArea.value});
+
+ However, for this use case, which is a common way to use + CodeMirror, the library provides a much more powerful + shortcut:
+ +var myCodeMirror = CodeMirror.fromTextArea(myTextArea);+ +
This will, among other things, ensure that the textarea's value + is updated 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.
+ +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
nameproperty 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 + theCodeMirror.modes+ andCodeMirror.mimeModesobjects. The first maps + mode names to their constructors, and the second maps MIME types + to mode specs.
+
+ 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 + thethemedirectory in the + distribution). The default is"default", for which + colors are included incodemirror.css. It is + possible to use multiple theming classes at once—for + example"foo bar"will assign both + thecm-s-fooand thecm-s-barclasses + 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-\u0019\u00ad\u200b\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, andtrueon other platforms.
+
+ keyMap: string
+ - Configures the keymap to use. The default
+ is
"default", which is the only keymap defined + incodemirror.jsitself. Extra keymaps are found in + thekeymapdirectory. See + the section on keymaps for more + information.
+
+ extraKeys: object
+ - Can be used to specify extra keybindings for the editor,
+ alongside the ones defined
+ by
keyMap. Should be + either null, or a valid keymap 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 + theCodeMirror-linenumbersclass, 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 + tosetGutterMarker.
+
+ fixedGutter: boolean
+ - Determines whether the gutter scrolls along with the content + horizontally (false) or whether it stays fixed during horizontal + scrolling (true, the default). + +
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 + classCodeMirror-gutter-filler.
+
+ readOnly: boolean|string
+ - This disables editing of the editor content by the user. If
+ the special value
"nocursor"is given (instead of + simplytrue), focusing of the editor is also + disallowed.
+
+ showCursorWhenSelecting: boolean
+ - Whether the cursor should be drawn when a selection is + active. Defaults to false. + +
undoDepth: integer
+ - The maximum number of undo levels that the editor stores. + Defaults to 40. + +
historyEventDelay: integer
+ - The period of inactivity (in milliseconds) that will cause a + new history event to be started when typing or deleting. + Defaults to 500. + +
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
fromTextAreais + 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 anautofocusattribute 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. + +
onDragEvent: function(instance: CodeMirror, event: Event) → boolean
+ - Deprecated! See these event
+ handlers for the current recommended approach.
When given, + this will be called when the editor is handling + adragenter,dragover, + ordropevent. It will be passed the editor + instance and the event object as arguments. The callback can + choose to handle the event itself, in which case it should + returntrueto indicate that CodeMirror should not + do anything further.
+
+ onKeyEvent: function(instance: CodeMirror, event: Event) → boolean
+ - Deprecated! See these event
+ handlers for the current recommended approach.
This + provides a rather low-level hook into CodeMirror's key handling. + If provided, this function will be called on + everykeydown,keyup, + andkeypressevent that CodeMirror captures. It + will be passed two arguments, the editor instance and the key + event. This key event is pretty much the raw key event, except + that astop()method is always added to it. You + could feed it to, for example,jQuery.Eventto + further normalize it.
This function can inspect the key + event, and handle it if it wants to. It may return true to tell + CodeMirror to ignore the event. Be wary that, on some browsers, + stopping akeydowndoes not stop + thekeypressfrom firing, whereas on others it + does. If you respond to an event, you should probably inspect + itstypeproperty and only do something when it + iskeydown(orkeypressfor actions + that need character data).
+
+ 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. + +
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
+
+ resetSelectionOnContextMenu: boolean
+ - 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
workTimemilliseconds, and then use + timeout to sleep forworkDelaymilliseconds. The + defaults are 200 and 300, you can change these options to make + the highlighting more or less aggressive.
+
+ workDelay: number
+ - See
workTime.
+
+ 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. + +
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
Infinityto turn off + this behavior.
+
+ crudeMeasuringFrom: number
+ - When measuring the character positions in long lines, any + line longer than this number (default is 10 000), + when line wrapping + is off, will simply be assumed to consist of + same-sized characters. This means that, on the one hand, + measuring will be inaccurate when characters of varying size, + right-to-left text, markers, or other irregular elements are + present. On the other hand, it means that having such a line + won't freeze the user interface because of the expensiveness of + the measurements. + +
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
Infinityto 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 registed 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
changeObjis a{from, to, text, removed, + next}object containing information about the changes + that occurred as second argument.from+ andtoare 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).textis + an array of strings representing the text that replaced the + changed range (split by line).removedis the text + that used to be betweenfromandto, + which is overwritten by this change. If multiple changes + happened during a single operation, the object will have + anextproperty pointing to another change object + (which may point to another, etc).
+
+ "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
changeObjobject + hasfrom,to, andtext+ properties, as with + the"change"event, but + never anextproperty, since this is fired for each + individual change, and not batched per operation. It also has + acancel()method, which can be called to cancel + the change, and, if the change isn't coming + from an undo or redo event, anupdate(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 + toupdateare 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
+ keymap.
nameis the name of the handled key (for + example"Ctrl-X"or"'q'"), + andeventis the DOMkeydown+ orkeypressevent.
+
+ "inputRead" (instance: CodeMirror, changeObj: object)
+ - Fired whenever new input is read from the hidden textarea + (typed or pasted by the user). + +
"beforeSelectionChange" (instance: CodeMirror, selection: {head, anchor})
+ - This event is fired before the selection is moved. Its
+ handler may modify the resulting selection head and anchor.
+ The
selectionparameter is an object + withheadandanchorproperties + holding{line, ch}objects, which the handler can + read and update. 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
fromandtoarguments + 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
mousedownevent object as + fourth argument.
+
+ "gutterContextMenu" (instance: CodeMirror, line: integer, gutter: string, contextMenu: Event: Event)
+ - Fires when the editor gutter (the line-number area)
+ receives a
contextmenuevent. 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 +contextmenumouse event object as fourth argument. + You canpreventDefaultthe event, to signal that + CodeMirror should do no further handling.
+
+ "focus" (instance: CodeMirror)
+ - Fires whenever the editor is focused. + +
"blur" (instance: CodeMirror)
+ - Fires whenever the editor is unfocused. + +
"scroll" (instance: CodeMirror)
+ - Fires when the editor is scrolled. + +
"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", "contextmenu", "keydown", "keypress", + "keyup", "dragstart", "dragenter", + "dragover", "drop" + (instance: CodeMirror, event: Event)
+ - Fired when CodeMirror is handling a DOM event of this type.
+ You can
preventDefaultthe event, or give it a + truthycodemirrorIgnoreproperty, 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.
changeObjhas a similar type as the + object passed to the + editor's"change"+ event, but it never has anextproperty, because + document change events are not batched (whereas editor change + events are).
+
+ "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 itsclear()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+ andtogive 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. +
Keymaps
+ +Keymaps are ways to associate keys with functionality. A keymap + is an object mapping strings that identify the keys to functions + that implement their functionality.
+ +Keys are identified either by name or by character.
+ The CodeMirror.keyNames object defines names for
+ common keys and associates them with their key codes. Examples of
+ names defined here are Enter, F5,
+ and Q. These can be prefixed
+ with Shift-, Cmd-, Ctrl-,
+ and Alt- (in that order!) to specify a modifier. So
+ for example, Shift-Ctrl-Space would be a valid key
+ identifier.
Common example: map the Tab key to insert spaces instead of a tab + character.
+ +
+{
+ Tab: function(cm) {
+ var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
+ cm.replaceSelection(spaces, "end", "+input");
+ }
+}
+
+ Alternatively, a character can be specified directly by
+ surrounding it in single quotes, for example '$'
+ or 'q'. Due to limitations in the way browsers fire
+ key events, these may not be prefixed with modifiers.
The CodeMirror.keyMap object associates keymaps
+ with names. User code and keymap definitions can assign extra
+ properties to this object. Anywhere where a keymap is expected, a
+ string can be given, which will be looked up in this object. It
+ also contains the "default" keymap holding the
+ default bindings.
The values of properties in keymaps can be either functions of
+ a single argument (the CodeMirror instance), strings, or
+ false. Such strings refer to properties of the
+ CodeMirror.commands object, which defines a number of
+ common commands that are used by the default keybindings, and maps
+ them to functions. 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" (which should be used for
+ cursor-movement actions) will be fired even when an
+ extra Shift modifier is present (i.e. "Up":
+ "goLineUp" matches both up and shift-up). This is used to
+ easily implement shift-selection.
Keymaps can defer to each other by defining
+ a fallthrough property. This indicates that when a
+ key is not found in the map itself, one or more other maps should
+ be searched. It can hold either a single keymap or an array of
+ keymaps.
When a keymap contains a nofallthrough property
+ set to true, keys matched against that map will be
+ ignored if they don't match any of the bindings in the map (no
+ further child maps will be tried). When
+ the disableInput property is set
+ to true, the default effect of inserting a character
+ will be suppressed when the keymap is active as the top-level
+ map.
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. + +
CodeMirror-scroll
+ - Whether the editor scrolls (
overflow: auto+ + fixed height). By default, it does. Setting + theCodeMirrorclass to haveheight: + autoand giving this classoverflow-x: auto; + overflow-y: hidden;will cause the editor + to resize to fit its + content.
+
+ 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
spanelements + 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})
+ - Replace the part of the document between
from+ andtowith the given string.from+ andtomust be{line, ch}+ objects.tocan be left off to simply insert the + string at positionfrom.
+
+ doc.getLine(n: integer) → string
+ - Get the content of line
n.
+ doc.setLine(n: integer, text: string)
+ - Set the content of line
n.
+ doc.removeLine(n: integer)
+ - Remove the given line from the document. + +
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
nullwhen 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+ andendline numbers are given, the range + fromstartup to (not including)end, + and callffor each line, passing the line handle. + This is a faster way to visit a range of line handlers than + callinggetLineHandle+ for each of them. Note that line handles have + atextproperty 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() → integer
+ - Returns a number that can later be passed
+ to
isCleanto test whether + any edits were made (and not undone) in the meantime.
+ doc.isClean(?generation: integer) → boolean
+ - Returns whether the document is currently clean — not
+ modified since initialization or the last call
+ to
markCleanif no + argument is passed, or since the matching call + tochangeGeneration+ if a generation value is given.
+
Cursor and selection methods
+ +-
+
doc.getSelection() → string
+ - Get the currently selected code. +
doc.replaceSelection(replacement: string, ?collapse: string)
+ - Replace the selection with the given string. By default, the
+ new selection will span the inserted text. The
+ optional
collapseargument can be used to change + this—passing"start"or"end"will + collapse the selection to the start or end of the inserted + text.
+
+ doc.getCursor(?start: string) → {line, ch}
+ startis a an optional string indicating which + end of the selection to return. It may + be"start","end","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.somethingSelected() → boolean
+ - Return true if any text is selected. +
doc.setCursor(pos: {line, ch})
+ - Set the cursor position. You can either pass a
+ single
{line, ch}object, or the line and the + character as two separate parameters.
+ doc.setSelection(anchor: {line, ch}, ?head: {line, ch})
+ - Set the selection range.
anchor+ andheadshould be{line, ch}+ objects.headdefaults toanchorwhen + not given.
+ doc.extendSelection(from: {line, ch}, ?to: {line, ch})
+ - 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.tois 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).
+ 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.
+
+ 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.
startis a{line, ch}+ object,amountan integer (may be negative), + andunitone of the + string"char","column", + or"word". Will return a position that is produced + by movingamounttimes the distance specified + byunit. Whenvisuallyis 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 ahitSide+ 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.unitmay + be"line"or"page". The other + arguments and the returned value have the same interpretation as + they have infindPosH.
+
Configuration methods
+ +-
+
cm.setOption(option: string, value: any)
+ - Change the configuration of the editor.
option+ should the name of an option, + andvalueshould 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 keymap 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 + theextraKeys+ andkeyMapoptions, + and between them, the maps added earlier have a lower precedence + than those added later, unless thebottomargument + was passed, in which case they end up below other keymaps added + with this method.
+ cm.removeKeyMap(map: object)
+ - Disable a keymap added
+ with
addKeyMap. Either + pass in the keymap object itself, or a string, which will be + compared against thenameproperty of the active + keymaps.
+
+ 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.
modecan be a mode + spec or a mode object (an object with + atokenmethod). + Theoptionsparameter is optional. If given, it + should be an object. Currently, only theopaque+ option is recognized. This defaults to off, but can be given to + allow the overlay styling, when notnull, to + override the styling of the base mode entirely, instead of the + two being applied together.
+ cm.removeOverlay(mode: string|object)
+ - Pass this the exact value passed for the
mode+ parameter toaddOverlay, + or a string that corresponds to thenamepropery 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
copyHistoryis 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:
+
-
+
+
- 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: integer
+ to: 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.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-serializeable) 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 whengetHistorywas + 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.
fromandtoshould + be{line, ch}objects. Theoptions+ 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+ andinclusiveRighthave 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.
+ 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
replacedWithis 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
setValueto 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.
+ title: + string- When given, will give the nodes created
+ for this span a HTML
titleattribute with the + given value.
+ - When the
+ target document is linked to other
+ documents, you can set
sharedto true to make the + marker appear in all documents. By default, a marker appears + only in its target document.
+
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, + orundefinedif the marker is no longer in the + document, and finallychanged(), + which you can call if you've done something that might change + the size of the marker (for example changing the content of + areplacedWith+ 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()andclear(). 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 tomarkText).
+ 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. +
+
+ 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
+ +-
+
cm.setGutterMarker(line: integer|LineHandle, gutterID: string, value: Element) → LineHandle
+ - Sets the gutter marker for the given gutter (identified by
+ its CSS class, see
+ the
guttersoption) + to the given value. Value can be eithernull, 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.
+
+ cm.clearGutter(gutterID: string)
+ - Remove all gutter markers in + the gutter with the given ID. + +
cm.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.wheredetermines + 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), or"wrap"(the + wrapper node that wraps all of the line's elements, including + gutter elements).classshould be the name of the + class to apply.
+
+ cm.removeLineClass(line: integer|LineHandle, where: string, class: string) → LineHandle
+ - Remove a CSS class from a line.
linecan be a + line handle or number.whereshould be one + of"text","background", + or"wrap"+ (seeaddLineClass).class+ can be left off to remove all classes for the specified node, or + be a string to remove only a specific class.
+
+ cm.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}, + wheregutterMarkersis an object mapping gutter IDs + to marker elements, andwidgetsis an array + of line widgets attached to this + line, and the various class properties refer to classes added + withaddLineClass.
+
+ 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. + WhenscrollIntoViewis 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 + callremoveChildon its parent).
+
+ cm.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.
lineshould be either an integer or a + line handle, andnodeshould 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. +
showIfHidden: boolean
+ - When true, will cause the widget to be rendered even if + the line it is associated with is hidden. +
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. +
lineproperty + 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)
+ - Programatically set the size of the editor (overriding the
+ applicable CSS
+ rules).
widthandheight+ can be either numbers (interpreted as pixels) or CSS units + ("100%", for example). You can + passnullfor 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+ orundefinedto 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.
whatmay + benullto 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. + Themarginparameter 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. + Ifmodeis"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.wherecan 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.
posshould be a{line, ch}+ object. This differs fromcursorCoordsin 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 + optionalmodeparameter 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.
modecan be one of the same strings + thatcoordsChar+ accepts.
+ cm.heightAtLine(line: number, ?mode: string) → number
+ - Computes the height of the top of a line, in the coordinate
+ system specified by
mode+ (seecoordsChar), 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.
+ 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 + theviewportChange+ 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. +
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.
+
+ doc.getModeAt(pos: {line, ch}) → object
+ - Gets the inner mode at a given position. This will return
+ the same as
getModefor + simple modes, but will return an inner mode for nesting modes + (such ashtmlmixed).
+
+ 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. +
preciseis 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.getTokenTypeAt(pos: {line, ch}) → string
+ - This is a (much) cheaper version
+ of
getTokenAtuseful for + when you just need the type of the token at a given position, + and no other information. Will returnnullfor + unstyled tokens, and a string, potentially containing multiple + space-separated style names, otherwise.
+
+ cm.getHelper(pos: {line, ch}, type: string) → helper
+ - Fetch appropriate helper for the given position. Helpers
+ provide a way to look up functionality appropriate for a mode.
+ The
typeargument provides the helper namespace + (see + alsoregisterHelper), + in which the value will be looked up. The key that is used + depends on the mode active at the given + position. If the mode object contains a property with the same + name as thetypeargument, that is tried first. + Next, the mode'shelperType, if any, is tried. And + finally, the mode's name.
+
+ 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.
preciseis defined + as ingetTokenAt().
+
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: bool)
+ - 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.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-basedindexwho's value is relative to the start of the + editor's text. If theindexis 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() → TextAreaElement
+ - Returns the hidden textarea used to read input. +
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", + wherepatchis zero for releases, and something + else (usually one) for dev snapshots.
+
+ CodeMirror.fromTextArea(textArea: TextAreaElement, ?config: object)
+ -
+ The 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). + +
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 + forDocobjects instead.
+
+ CodeMirror.defineOption(name: string, + default: any, updateFunc: function)
+ - Similarly,
defineOptioncan be used to define new options for + CodeMirror. TheupdateFuncwill be called with the + editor instance and the new value when an editor is initialized, + and whenever the option is modified + throughsetOption.
+
+ CodeMirror.defineInitHook(func: function)
+ - If your extention 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
namein + 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 theCodeMirror+ object for the giventype, pointing to an object + that maps names to values. I.e. after + doingCodeMirror.registerHelper("hint", "foo", + myFoo), the valueCodeMirror.hint.foowill + point tomyFoo.
+
+ 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, + andtextproperties, 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. In brief, they are:
-
+
dialog/dialog.js
+ - Provides a very simple way to query users for text input.
+ Adds an
openDialogmethod to + CodeMirror instances, which can be called with an HTML fragment + or a detached DOM node that provides the prompt (should include + aninputtag), and a callback function that is called + when text has been entered. Also adds + anopenNotificationfunction that + simply shows an HTML fragment as a notification. Depends + onaddon/dialog/dialog.css.
+
+ search/searchcursor.js
+ - Adds the
getSearchCursor(query, start, caseFold) → + cursormethod 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.caseFoldis only + relevant when matching a string. It will cause the search to be + case-insensitive. A search cursor has the following methods: +-
+
findNext() → boolean
+ findPrevious() → 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
matchmethod, in case you + want to extract matched groups.
+ from() → {line, ch}
+ to() → {line, ch}
+ - These are only valid when the last call
+ to
findNextorfindPreviousdid + not return false. They will return{line, ch}+ objects pointing at the start and end of the match.
+ replace(text: 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 + ofopenDialogwhen + available to make prompting for search queries less ugly.
+
+ edit/matchbrackets.js
+ - Defines an option
matchBracketswhich, when set + to true, causes matching brackets to be highlighted whenever the + cursor is next to them. It also adds a + methodmatchBracketsthat forces this to happen + once, and a methodfindMatchingBracketthat can be + used to run the bracket-finding algorithm that this uses + internally.
+
+ edit/closebrackets.js
+ - Defines an option
autoCloseBracketsthat 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 withpairsand + optionallyexplodeproperties to customize + it.explodeshould 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. Demo here.
+
+
+ - Defines an option
matchTagsthat, when enabled, + will cause the tags around the cursor to be highlighted (using + theCodeMirror-matchingtagclass). Also + defines + a commandtoMatchingTag, + which you can bind a key to in order to jump to the tag mathing + the one under the cursor. Depends on + theaddon/fold/xml-fold.js+ addon. Demo here.
+
+ edit/trailingspace.js
+ - Adds an option
showTrailingSpacewhich, when + enabled, adds the CSS classcm-trailingspaceto + stretches of whitespace at the end of lines. + The demo has a nice + squiggly underline style for this class.
+
+ edit/closetag.js
+ - Provides utility functions for adding automatic tag closing + to XML modes. See + the demo. + +
edit/continuelist.js
+ - Markdown specific. Defines
+ a
"newlineAndIndentContinueMarkdownList"command + command that can be bound toenterto automatically + insert the leading characters for continuing a list. See + the Markdown mode + demo.
+
+ comment/comment.js
+ - Addon for commenting and uncommenting code. Adds three
+ methods to CodeMirror instances:
+
-
+
lineComment(from: {line, ch}, to: {line, ch}, ?options: object)
+ - Set the lines in the given range to be line comments. Will
+ fall back to
blockCommentwhen no line comment + style is defined for the mode.
+ blockComment(from: {line, ch}, to: {line, ch}, ?options: object)
+ - Wrap the code in the given range in a block comment. Will
+ fall back to
lineCommentwhen no block comment + style is defined for the mode.
+ uncomment(from: {line, ch}, to: {line, ch}, ?options: object) → boolean
+ - Try to uncomment the given range.
+ Returns
trueif a comment range was found and + removed,falseotherwise.
+
optionsobject 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 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.
+
toggleCommentcommand, + which will try to uncomment the current selection, and if that + fails, line-comments it.
+
+ fold/foldcode.js
+ - Helps with code folding. Adds a
foldCodemethod + 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 + aPos), 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
+ call
getHelperwith + a"fold"type to find one that's appropriate for + the mode. There are files in + theaddon/fold/+ directory providingCodeMirror.fold.brace, which + finds blocks in brace languages (JavaScript, C, Java, + etc),CodeMirror.fold.indent, for languages where + indentation determines block structure (Python, Haskell), + andCodeMirror.fold.xml, for XML-style languages, + andCodeMirror.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. +
+
+ 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 + theguttersoption, + giving it the classCodeMirror-foldgutteror + 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 totrue, 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,
getHelperwill be + used to determine a default.
+
+
+ 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 avaible for + running stand-alone + (without including all of CodeMirror) and + for running under + node.js. + +
runmode/colorize.js
+ - Provides a convenient way to syntax-highlight code snippets
+ in a webpage. Depends on
+ the
runmodeaddon (or + its standalone variant). Provides + aCodeMirror.colorizefunction 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 + allpretags. Will read thedata-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.multiplexingModewhich, when + given as first argument a mode object, and as other arguments + any number of{open, close, mode [, delimStyle, innerStyle]}+ 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 + theopenfields of the passed objects. When in a + sub-mode, it will go back to the top mode again when + theclosestring is encountered. + Pass"\n"foropenorclose+ if you want to switch on a blank line. +- When
delimStyleis specified, it will be the token + style returned for the delimiter tokens.
+ - When
innerStyleis specified, it will be the token + style added for each inner mode token.
+
+ - When
hint/show-hint.js
+ - Provides a framework for showing autocompletion hints.
+ Defines
CodeMirror.showHint, which takes a + CodeMirror instance, a hinting function, and optionally an + options object, and pops up a widget that allows the user to + select a completion. Hinting functions are function that take an + editor instance and an optional options object, and return + a{list, from, to}object, wherelist+ is an array of strings or objects (the completions), + andfromandtogive the start and end + of the token that is being completed as{line, ch}+ objects. If no hinting function is given, the addon will try to + usegetHelperwith + the"hint"type to find one. When completions + aren't simple strings, they should be objects with the folowing + 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. +
-
+
async: boolean
+ - When set to true, the hinting function's signature should
+ be
(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.
+ 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 keymap 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(), + andclose()methods (see the source for details), + that can be used to change the focused element, pick the + current element or close the menu.
+ extraKeys: keymap
+ - Like
customKeysabove, but the bindings will + be added to the set of default bindings, instead of replacing + them.
+
-
+
"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. +
"close" ()
+ - Fired when the completion is finished. +
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 aschemaInfooption (a property of the + second argument passed to the hinting function, or the third + argument passed toCodeMirror.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 + propertieschildren(an array of valid child + element names, omit to simply allow all tags to appear) + andattrs(an object mapping attribute names + tonullfor 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.htmlSchemathat you can pass to + as aschemaInfooption, and + aCodeMirror.hint.htmlhinting function that + automatically callsCodeMirror.hint.xmlwith this + schema data. See + the demo.
+
+ hint/css-hint.js
+ - A minimal hinting function for CSS code.
+ Defines
CodeMirror.hint.css.
+
+ hint/python-hint.js
+ - A very simple hinting function for Python code.
+ Defines
CodeMirror.hint.python.
+
+ 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), + andrange, 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.
+
+ hint/pig-hint.js
+ - A simple hinter for Pig Latin. Defines
CodeMirror.hint.pig.
+
+ search/match-highlighter.js
+ - Adds a
highlightSelectionMatchesoption 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 + classcm-matchhighlight), + andshowTokenwhich can be set totrue+ 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
json-lint.js, +javascript-lint.js, + andcss-lint.js+ in the same directory). Defines alintoption that + can be set to a warning source (for + exampleCodeMirror.lint.javascript), or + totrue, in which + casegetHelperwith + type"lint"is used to determined a validator + function. Depends onaddon/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-selectedtextwhen thestyleSelectedTextoption + 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
styleActiveLineoption that, when enabled, + gives the wrapper of the active line the classCodeMirror-activeline, + and adds a background with the classCodeMirror-activeline-background. + is enabled. See the demo.
+
+ 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 + setCodeMirror.modeURLto 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 + definesCodeMirror.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.
+
+ comment/continuecomment.js
+ - Adds an
continueCommentsoption, which can be + set to true to have the editor prefix new lines inside C-like + block comments with an asterisk when Enter is pressed. It can + also be set to a string in order to bind this functionality to a + specific key..
+
+ display/placeholder.js
+ - Adds a
placeholderoption that can be used to + make text appear in the editor when it is empty and not focused. + Also gives the editor aCodeMirror-emptyCSS class + whenever it doesn't contain any text. + See the demo.
+
+ display/fullscreen.js
+ - Defines an option
fullScreenthat, when set + totrue, will make the editor full-screen (as in, + taking up the whole browser window). Depends + onfullscreen.css. Demo + 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
posis 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)
+ - Wrapps the paragraphs in (and overlapping with) the + given range individually. +
-
+
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. +
+
+ 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 + theCodeMirror+ constructor, first a node to append the interface to, and then + an options object. Two extra optional options are + recognized,origLeftandorigRight, + which may be strings that 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) (demo).
+
+ 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.
+ +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 an
nullat the end of the + line.
+ next() → string
+ - Returns the next character in the stream and advances it.
+ Also returns
nullwhen no more characters are + available.
+
+ eat(match: string|regexp|function(char: string) → boolean) → string
+ matchcan 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
eatwith the given argument, + until it fails. Returns true if any characters were eaten.
+ eatSpace() → boolean
+ - Shortcut for
eatWhilewhen 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) → boolean
+ match(pattern: regexp, ?consume: boolean) → array<string>
+ - Act like a
+ multi-character
eat—ifconsumeis true + or not given—or a look-ahead that doesn't update the stream + position—if it is false.patterncan be either a + string or a regular expression starting with^. + When it is a string,caseFoldcan be set to true to + make the match case-insensitive. When successfully matching a + regular expression, the returned value will be the array + returned bymatch, in case you need to extract + matched groups.
+
+ backUp(n: integer)
+ - Backs up the stream
ncharacters. 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.
To work well with
+ the commenting addon, a mode may
+ define lineComment (string that
+ starts a line
+ comment), blockCommentStart, blockCommentEnd
+ (strings that start and end block comments),
+ and blockCommentLead (a string to put at the start of
+ continued lines in a block comment). All of these are
+ optional.
Finally, a mode may define
+ an electricChars property, which should hold a string
+ containing all the characters that should trigger the behaviour
+ described for
+ the electricChars
+ option.
So, to summarize, a mode must provide
+ a token method, and it may
+ provide startState, copyState,
+ 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.
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.
CodeMirror real-world uses
+ +Contact me if you'd like + your project to be added to this list.
+ +-
+
- Adobe Brackets (code editor) +
- Amber (JavaScript-based Smalltalk system) +
- APEye (tool for testing & documenting APIs) +
- Bitbucket (code hosting) +
- Blogger's template editor +
- BlueGriffon (HTML editor) +
- Cargo Collective (creative publishing platform) +
- ClickHelp (technical writing tool) +
- Complete.ly playground +
- Code per Node (Drupal module) +
- Codebug (PHP Xdebug front-end) +
- CodeMirror Eclipse (embed CM in Eclipse) +
- CodeMirror movie (scripted editing demos) +
- CodeMirror2-GWT (Google Web Toolkit wrapper) +
- Code Monster & Code Maven (learning environment) +
- Codepen (gallery of animations) +
- Code School (online tech learning environment) +
- Code Snippets (WordPress snippet management plugin) +
- Code together (collaborative editing) +
- Codev (collaborative IDE) +
- CodeZample (code snippet sharing) +
- Codio (Web IDE) +
- Collaborative CodeMirror demo (CodeMirror + operational transforms) +
- Community Code Camp (code snippet sharing) +
- compilejava.net (online Java sandbox) +
- CKWNC (UML editor) +
- Crudzilla (self-hosted web IDE) +
- CSSDeck (CSS showcase) +
- Deck.js integration (slides with editors) +
- DbNinja (MySQL access interface) +
- Echoplexus (chat and collaborative coding) +
- Elm language examples +
- Eloquent JavaScript (book) +
- Emmet (fast XML editing) +
- Fastfig (online computation/math tool) +
- Farabi (modern Perl IDE) +
- FathomJS integration (slides with editors, again) +
- Fiddle Salad (web development environment) +
- Firepad (collaborative text editor) +
- Gerrit's diff view +
- Go language tour +
- GitHub's Android app +
- Google Apps Script +
- Graphit (function graphing) +
- Handcraft (HTML prototyping) +
- Haxe (Haxe Playground) +
- HaxPad (editor for Win RT) +
- Histone template engine playground +
- ICEcoder (web IDE) +
- Janvas (vector graphics editor) +
- Joomla plugin +
- jQuery fundamentals (interactive tutorial) +
- jsbin.com (JS playground) +
- jsfiddle.com (another JS playground) +
- JSHint (JS linter) +
- Jumpseller (online store builder) +
- kl1p (paste service) +
- Light Table (experimental IDE) +
- Liveweave (HTML/CSS/JS scratchpad) +
- Marklight editor (lightweight markup editor) +
- Mergely (interactive diffing) +
- MIHTool (iOS web-app debugging tool) +
- Mongo MapReduce WebBrowser +
- MVC Playground +
- My2ndGeneration (social coding) +
- Navigate CMS +
- nodeMirror (IDE project) +
- NoTex (rST authoring) +
- Oak (online outliner) +
- ORG (z80 assembly IDE) +
- Orion-CodeMirror integration (running CodeMirror modes in Orion) +
- Paper.js (graphics scripting) +
- PrinBit (collaborative coding tool) +
- Prose.io (github content editor) +
- Puzzlescript (puzzle game engine) +
- ql.io (http API query helper) +
- QiYun web app platform +
- Qt+Webkit integration (building a desktop CodeMirror app) +
- Quivive File Manager +
- Rascal (tiny computer) +
- RealTime.io (Internet-of-Things infrastructure) +
- Shadertoy (shader sharing) +
- sketchPatch Livecodelab +
- Skulpt (in-browser Python environment) +
- Snippets.pro (code snippet sharing) +
- SolidShops (hosted e-commerce platform) +
- SQLFiddle (SQL playground) +
- The File Tree (collab editor) +
- TileMill (map design tool) +
- Toolsverse Data Explorer (database management) +
- Tributary (augmented editing) +
- Tumblr code highlighting shim +
- TurboPY (web publishing framework) +
- uiCod (animation demo gallery and sharing) +
- UmpleOnline (model-oriented programming tool) +
- Upsource (code viewer) +
- webappfind (windows file bindings for webapps) +
- WebGL academy (learning WebGL) +
- WebGL playground +
- WebKit Web inspector +
- WeScheme (learning tool) +
- WordPress plugin +
- XOSide (online editor) +
- XQuery tester +
- xsd2codemirror (convert XSD to CM XML completion info) +
Release notes and version history
+ +Version 3.x
+ +21-11-2013: Version 3.20:
+ +-
+
- New modes: Julia and PEG.js. +
- Support ECMAScript 6 in the JavaScript mode. +
- Improved indentation for the CoffeeScript mode. +
- Make non-printable-character representation configurable. +
- Add ‘notification’ functionality to dialog addon. +
- Full list of patches. +
21-10-2013: Version 3.19:
+ +-
+
- New modes: Eiffel, Gherkin, MSSQL dialect. +
- New addons: hardwrap, sql-hint. +
- New theme: MBO. +
- Add support for line-level styling from mode tokenizers. +
- Full list of patches. +
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:
+ +-
+
- New modes: Fortran, Octave (Matlab), TOML, and DTD. +
- New addons:
css-lint,css-hint.
+ - Improve resilience to CSS 'frameworks' that globally mess up
box-sizing.
+ - Full list of patches. +
21-08-2013: Version 3.16:
+ +-
+
- The whole codebase is now under a single license file. +
- The project page was overhauled and redesigned. +
- New themes: Paraiso (light), The Matrix. +
- Improved interaction between themes and active-line/matchbrackets addons. +
- New folding function
CodeMirror.fold.comment.
+ - Added fullscreen addon. +
- Full list of patches. +
29-07-2013: Version 3.15:
+ +-
+
- New modes: Jade, Nginx. +
- New addons: Tern, matchtags, and foldgutter. +
- Introduced helper concept (context). +
- New method:
getModeAt.
+ - New themes: base16 dark/light, 3024 dark/light, tomorrow-night. +
- Full list of patches. +
20-06-2013: Version 3.14:
+ +-
+
- New + addons: trailing + space highlight, XML + completion (rewritten), + and diff merging. +
markText+ andaddLineWidget+ now take ahandleMouseEventsoption.
+ - New methods:
lineAtHeight, +getTokenTypeAt.
+ - More precise cleanness-tracking
+ using
changeGeneration+ andisClean.
+ - Many extensions to Emacs mode + (prefixes, more navigation units, and more). +
- New
+ events
"keyHandled"+ and"inputRead".
+ - Various improvements to Ruby, + Smarty, SQL, + and Vim modes. +
- Full list of patches. +
20-05-2013: Version 3.13:
+ +-
+
- New modes: COBOL and HAML. +
- New options:
cursorScrollMarginandcoverGutterNextToScrollbar.
+ - New addon: commenting. +
- More features added to the Vim keymap. +
- Full list of patches. +
19-04-2013: Version 3.12:
+ +-
+
- New mode: GNU assembler. +
- New
+ options:
maxHighlightLength+ andhistoryEventDelay.
+ - Added
addToHistory+ option formarkText.
+ - Various fixes to JavaScript tokenization and indentation corner cases. +
- Further improvements to the vim mode. +
- Full list of patches. +
20-03-2013: Version 3.11:
+ +-
+
- Removed code:
collapserange, +formatting, andsimple-hint+ addons.plsqlandmysqlmodes + (usesqlmode).
+ - Moved code: the range-finding functions for folding now have their own files. +
- Changed interface:
+ the
continuecomment+ addon now exposes an option, rather than a command.
+ - New + modes: SCSS, Tcl, LiveScript, + and mIRC. +
- New addons:
placeholder, HTML completion.
+ - New
+ methods:
hasFocus,defaultCharWidth.
+ - New events:
beforeCursorEnter,renderLine.
+ - Many improvements to the
show-hintcompletion + dialog addon.
+ - Tweak behavior of by-word cursor motion. +
- Further improvements to the vim mode. +
- Full list of patches. +
21-02-2013: Version 3.1:
+ +-
+
- Incompatible: key handlers may
+ now return, rather
+ than throw
CodeMirror.Passto signal they + didn't handle the key.
+ - Make documents a first-class + construct, support split views and subviews. +
- Add a new module
+ for showing completion hints.
+ Deprecate
simple-hint.js.
+ - Extend htmlmixed mode + to allow custom handling of script types. +
- Support an
insertLeftoption + tosetBookmark.
+ - Add an
eachLine+ method to iterate over a document.
+ - New addon modules: selection + marking, linting, + and automatic bracket + closing. +
- Add
"beforeChange"+ and"beforeSelectionChange"+ events.
+ - Add
"hide"+ and"unhide"+ events to marked ranges.
+ - Fix
coordsChar's + interpretation of its argument to match the documentation.
+ - New modes: Turtle + and Q. +
- Further improvements to the vim mode. +
- Full list of patches. +
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:
+ +-
+
- Move all add-ons into an organized directory structure
+ under
/addon. You might have to adjust your + paths.
+ - New + modes: D, Sass, APL, SQL + (configurable), and Asterisk. +
- Several bugfixes in right-to-left text support. +
- Add
rtlMoveVisuallyoption.
+ - Improvements to vim keymap. +
- Add built-in (lightweight) overlay mode support. +
- Support
showIfHiddenoption for line widgets.
+ - Add simple Python hinter. +
- Bring back the
fixedGutteroption.
+ - Full list of patches. +
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
addKeyMapandremoveKeyMapmethods.
+ - Rewrite
formattingandclosetagadd-ons.
+ - Full list of patches. +
20-11-2012: Version 3.0, release candidate 1:
+ +-
+
- New theme: Solarized. +
- Introduce
addLineClass+ andremoveLineClass, + dropsetLineClass.
+ - Add a lot of + new options for marked text + (read-only, atomic, collapsed, widget replacement). +
- Remove the old code folding interface in favour of these new ranges. +
- Add
isClean/markCleanmethods.
+ - Remove
compoundChangemethod, use better undo-event-combining heuristic.
+ - Improve scrolling performance smoothness. +
- Full list of patches. +
22-10-2012: Version 3.0, beta 2:
+ +-
+
- Fix page-based coordinate computation. +
- Fix firing of
gutterClickevent.
+ - Add
cursorHeightoption.
+ - Fix bi-directional text regression. +
- Add
viewportMarginoption.
+ - Directly handle mousewheel events (again, hopefully better). +
- Make vertical cursor movement more robust (through widgets, big line gaps). +
- Add
flattenSpansoption.
+ - 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:
+ +-
+
- New mode: Z80 assembly. +
- New theme: Twilight. +
- Add command-line compression helper. +
- Make
scrollIntoViewpublic.
+ - Add
defaultTextHeightmethod.
+ - Various extensions to the vim keymap. +
- Make PHP mode build on mixed HTML mode. +
- Add comment-continuing add-on. +
- Full list of patches. +
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
defineInitHookfunction.
+ - 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.
compareStatesis no longer needed.
onHighlightCompleteno longer works.
+ - Integrate mode (Markdown, XQuery, CSS, sTex) tests in central testsuite. +
- Add a
CodeMirror.versionproperty.
+ - 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
getViewPortandonViewportChangeAPI.
+ - Configurable cursor blink rate. +
- Make binding a key to
falsedisabling 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. RemoveCodeMirror.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:
+ +-
+
- New modes: OCaml, Haxe, and VB.NET. +
- Several fixes to the new scrolling model. +
- Add a
setSizemethod for programmatic resizing.
+ - Add
getHistoryandsetHistorymethods.
+ - Allow custom line separator string in
getValueandgetRange.
+ - Support double- and triple-click drag, double-clicking whitespace. +
- And more... (all patches) +
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
getScrollInfomethod.
+ - 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+ andonDragEvent+ options.
+ - Make HTML mode a bit less pedantic. +
- Add
compoundChangeAPI method.
+ - Several fixes in undo history and line hiding. +
- Remove (broken) support for
catchallin key maps, + addnofallthroughboolean field instead.
+
26-03-2012: Version 2.23:
+ +-
+
- Change default binding for tab [more] + + +
- 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+ andcursorCoordswith amodeargument.
+ - Add
autofocusoption.
+ - Add
findMarksAtmethod.
+
27-02-2012: Version 2.22:
+ +-
+
- Allow key handlers to pass up events, allow binding characters. +
- Add
autoClearEmptyLinesoption.
+ - Properly use tab stops when rendering tabs. +
- Make PHP mode more robust. +
- Support indentation blocks in code folder. +
- Add a script for highlighting instances of the selection. +
- New .properties mode. +
- Fix many bugs. +
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
scrollTomethod.
+ - Allow undo/redo events to span non-adjacent lines. +
- Lots and lots of bugfixes. +
20-12-2011: Version 2.2:
+ +-
+
- Slightly incompatible API changes. Read this. +
- New approach + to binding keys, + support for custom + bindings. +
- Support for overwrite (insert). +
- Custom-width + and stylable tabs. +
- Moved more code into add-on scripts. +
- Support for sane vertical cursor movement in wrapped lines. +
- More reliable handling of + editing marked text. +
- Add minimal emacs + and vim bindings. +
- Rename
coordsFromIndex+ toposFromIndex, + addindexFromPos+ method.
+
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
setBookmarkmethod.
+ - 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
coordsFromIndexmethod.
+ - API change:
setValuenow no longer clears history. UseclearHistoryfor that.
+ - API change:
markTextnow + returns an object withclearandfind+ 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:
+-
+
- Add Clojure, Pascal, NTriples, Jinja2, and Markdown modes. +
- Add Cobalt and Eclipse themes. +
- Add a
fixedGutteroption.
+ - Fix bug with
setValuebreaking cursor movement.
+ - Make gutter updates much more efficient. +
- Allow dragging of text out of the editor (on modern browsers). +
23-08-2011: Version 2.13:
+-
+
- Add Ruby, R, CoffeeScript, and Velocity modes. +
- Add
getGutterElementto API.
+ - Several fixes to scrolling and positioning. +
- Add
smartHomeoption.
+ - Add an experimental pure XML mode. +
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
innerHTMLfor 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
replacemethod to search cursors, for cursor-preserving replacements.
+ - Make the C-like mode mode more customizable. +
- Update XML mode to spot mismatched tags. +
- Add
getStateAfterAPI andcompareStatemode API methods for finer-grained mode magic.
+ - Add a
getScrollerElementAPI 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. +
coordsCharnow works
+ - Fix a problem where
onCursorActivityinterfered withonChange.
+ - 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 forreadOnlyoption.
+ - Add an
onHighlightCompleteoption.
+ - 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
savemethod to instances created withfromTextArea.
+ - 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
styleNumbersoption is now officially + supported and documented.
+ onLineNumberClickoption added.
+ - More consistent names
onLoadand +onCursorActivitycallbacks. 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
toTextAreato update the code in the textarea.
+ - Add a
noScriptCachingoption (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
enterModeandelectricCharsoptions to make indentation even more customizable.
+ - Add
firstLineNumberoption.
+ - Fix bad handling of
@mediarules 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
cursorCoordsmethod 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: dynamicmode, 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
toTextAreamethod 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).
Reporting bugs effectively
+ +
+
+
+
+So you found a problem in CodeMirror. By all means, report it! Bug +reports from users are the main drive behind improvements to +CodeMirror. But first, please read over these points:
+ +-
+
- CodeMirror is maintained by volunteers. They don't owe you + anything, so be polite. Reports with an indignant or belligerent + tone tend to be moved to the bottom of the pile. + +
- Include information about the browser in which the + problem occurred. Even if you tested several browsers, and + the problem occurred in all of them, mention this fact in the bug + report. Also include browser version numbers and the operating + system that you're on. + +
- Mention which release of CodeMirror you're using. Preferably, + try also with the current development snapshot, to ensure the + problem has not already been fixed. + +
- Mention very precisely what went wrong. "X is broken" is not a + good bug report. What did you expect to happen? What happened + instead? Describe the exact steps a maintainer has to take to make + the problem occur. We can not fix something that we can not + observe. + +
- If the problem can not be reproduced in any of the demos + included in the CodeMirror distribution, please provide an HTML + document that demonstrates the problem. The best way to do this is + to go to jsbin.com, enter + it there, press save, and include the resulting link in your bug + report. +
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.
+
+
+
+
+
+
+
+
+
+
+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.
+
CodeMirror is a versatile text editor + implemented in JavaScript for the browser. It is specialized for + editing code, and comes with a number of language modes and addons + that implement more advanced editing functionaly.
+ +A rich programming API and a + CSS theming system are + available for customizing CodeMirror to fit your application, and + extending it with new functionality.
+This is CodeMirror
+ + +
+ DOWNLOAD LATEST RELEASE
+
+version 3.20 (Release notes)
+ or use the minification helper
+
+
+
+
+ or Bank,
+ Gittip,
+ Flattr
+
+ +
+ ×
+ Bank: Rabobank
+ Country: Netherlands
+ SWIFT: RABONL2U
+ Account: 147850770
+ Name: Marijn Haverbeke
+ IBAN: NL26 RABO 0147 8507 70 +
+
+ + Country: Netherlands
+ SWIFT: RABONL2U
+ Account: 147850770
+ Name: Marijn Haverbeke
+ IBAN: NL26 RABO 0147 8507 70 +
+ Purchase commercial support
+
+ Features
+-
+
- Support for over 60 languages out of the box +
- A powerful, composable language mode system +
- Autocompletion (XML) +
- Code folding +
- Configurable keybindings +
- Vim and Emacs bindings +
- Search and replace interface +
- Bracket and tag matching +
- Support for split views +
- Linter integration +
- Mixing font sizes and styles +
- Various themes +
- Able to resize to fit content +
- Inline and block widgets +
- Programmable gutters +
- Making ranges of text styled, read-only, or atomic +
- Bi-directional text support +
- Many other methods and addons... +
Community
+ +CodeMirror is an open-source project shared under + an MIT license. It is the editor used in + Light + Table, Adobe + Brackets, Google Apps + Script, Bitbucket, + and many other projects.
+ +Development and bug tracking happens + on github + (alternate git + repository). + Please read these + pointers before submitting a bug. Use pull requests to submit + patches. All contributions must be released under the same MIT + license that CodeMirror uses.
+ +Discussion around the project is done on + a mailing list. + There is also + the codemirror-announce + list, which is only used for major announcements (such as new + versions). If needed, you can + contact the maintainer + directly.
+ +A list of CodeMirror-related software that is not part of the + main distribution is maintained + on our + wiki. Feel free to add your project.
+Browser support
+The desktop versions of the following browsers,
+ in standards mode (HTML5 <!doctype html>
+ recommended) are supported:
| Firefox | version 3 and up |
|---|---|
| Chrome | any version |
| Safari | version 5.2 and up |
| Internet Explorer | version 8 and up |
| Opera | version 9 and up |
Modern mobile browsers tend to partly work. Bug reports and + patches for mobile support are welcome, but the maintainer does not + have the time or budget to actually work on it himself.
+
APL mode
+ + + + +Simple mode that tries to handle APL as well as it can.
+It attempts to label functions/operators based upon + monadic/dyadic usage (but this is far from fully fleshed out). + This means there are meaningful classnames so hover states can + have popups etc.
+ +MIME types defined: text/apl (APL code)
Asterisk dialplan mode
+ + + +MIME types defined: text/x-asterisk.
C-like mode
+ + + +C++ example
+ + + +Java example
+ + + + + +Simple mode that tries to handle C-like languages as well as it
+ can. Takes two configuration parameters: keywords, an
+ object whose property names are the keywords in the language,
+ and useCPP, which determines whether C preprocessor
+ directives are recognized.
MIME types defined: text/x-csrc
+ (C code), text/x-c++src (C++
+ code), text/x-java (Java
+ code), text/x-csharp (C#).
Scala mode
+ + + +Clojure mode
+ + + +MIME types defined: text/x-clojure.
COBOL mode
+ +Select Theme Select Font Size + + + + +
+ + +CoffeeScript mode
+ + + +MIME types defined: text/x-coffeescript.
The CoffeeScript mode was written by Jeff Pickhardt (license).
+ +Common Lisp mode
+ + + +MIME types defined: text/x-common-lisp.
CSS mode
+ + + +MIME types defined: text/css.
SCSS mode
+ + + +MIME types defined: text/scss.
D mode
+ + + + +Simple mode that handle D-Syntax (DLang Homepage).
+ +MIME types defined: text/x-d
+ .
Diff mode
+ + + +MIME types defined: text/x-diff.
DTD mode
+ + + +MIME types defined: application/xml-dtd.
ECL mode
+ + + +Based on CodeMirror's clike mode. For more information see HPCC Systems web site.
+MIME types defined: text/x-ecl.
Eiffel mode
+ + + +MIME types defined: text/x-eiffel.
Created by YNH.
+Erlang mode
+ + + + +MIME types defined: text/x-erlang.
Fortran mode
+ + + + + + +MIME types defined: text/x-Fortran.
Gas mode
+ + + + +Handles AT&T assembler syntax (more specifically this handles
+ the GNU Assembler (gas) syntax.)
+ It takes a single optional configuration parameter:
+ architecture, which can be one of "ARM",
+ "ARMv6" or "x86".
+ Including the parameter adds syntax for the registers and special
+ directives for the supplied architecture.
+
+
MIME types defined: text/x-gas
GFM mode
+ + + + +Optionally depends on other modes for properly highlighted code blocks.
+ + + +Gherkin mode
+ + + +MIME types defined: text/x-feature.
Go mode
+ + + + +MIME type: text/x-go
Groovy mode
+ + + + +MIME types defined: text/x-groovy
HAML mode
+ + + +MIME types defined: text/x-haml.
]Title[tag
]"); + + MT("rubyBlock", + "[operator =][variable-2 @item]"); + + MT("selectorRubyBlock", + "[tag %a.selector=] [variable-2 @item]"); + + MT("nestedRubyBlock", + "[tag %a]", + " [operator =][variable puts] [string \"test\"]"); + + MT("multilinePlaintext", + "[tag %p]", + " Hello,", + " World"); + + MT("multilineRuby", + "[tag %p]", + " [comment -# this is a comment]", + " [comment and this is a comment too]", + " Date/Time", + " [operator -] [variable now] [operator =] [tag DateTime][operator .][variable now]", + " [tag %strong=] [variable now]", + " [operator -] [keyword if] [variable now] [operator >] [tag DateTime][operator .][variable parse]([string \"December 31, 2006\"])", + " [operator =][string \"Happy\"]", + " [operator =][string \"Belated\"]", + " [operator =][string \"Birthday\"]"); + + MT("multilineComment", + "[comment /]", + " [comment Multiline]", + " [comment Comment]"); + + MT("hamlComment", + "[comment -# this is a comment]"); + + MT("multilineHamlComment", + "[comment -# this is a comment]", + " [comment and this is a comment too]"); + + MT("multilineHTMLComment", + "[comment ]"); + + MT("hamlAfterRubyTag", + "[attribute .block]", + " [tag %strong=] [variable now]", + " [attribute .test]", + " [operator =][variable now]", + " [attribute .right]"); + + MT("stretchedRuby", + "[operator =] [variable puts] [string \"Hello\"],", + " [string \"World\"]"); + + MT("interpolationInHashAttribute", + //"[tag %div]{[atom :id] [operator =>] [string \"#{][variable test][string }_#{][variable ting][string }\"]} test"); + "[tag %div]{[atom :id] [operator =>] [string \"#{][variable test][string }_#{][variable ting][string }\"]} test"); + + MT("interpolationInHTMLAttribute", + "[tag %div]([variable title][operator =][string \"#{][variable test][string }_#{][variable ting]()[string }\"]) Test"); +})(); diff --git a/plugins/codemirror/codemirror/mode/haskell/haskell.js b/plugins/codemirror/codemirror/mode/haskell/haskell.js new file mode 100644 index 0000000..68a6317 --- /dev/null +++ b/plugins/codemirror/codemirror/mode/haskell/haskell.js @@ -0,0 +1,250 @@ +CodeMirror.defineMode("haskell", function(_config, modeConfig) { + + function switchState(source, setState, f) { + setState(f); + return f(source, setState); + } + + // These should all be Unicode extended, as per the Haskell 2010 report + var smallRE = /[a-z_]/; + var largeRE = /[A-Z]/; + var digitRE = /[0-9]/; + var hexitRE = /[0-9A-Fa-f]/; + var octitRE = /[0-7]/; + var idRE = /[a-z_A-Z0-9']/; + var symbolRE = /[-!#$%&*+.\/<=>?@\\^|~:]/; + var specialRE = /[(),;[\]`{}]/; + var whiteCharRE = /[ \t\v\f]/; // newlines are handled in tokenizer + + function normal(source, setState) { + if (source.eatWhile(whiteCharRE)) { + return null; + } + + var ch = source.next(); + if (specialRE.test(ch)) { + if (ch == '{' && source.eat('-')) { + var t = "comment"; + if (source.eat('#')) { + t = "meta"; + } + return switchState(source, setState, ncomment(t, 1)); + } + return null; + } + + if (ch == '\'') { + if (source.eat('\\')) { + source.next(); // should handle other escapes here + } + else { + source.next(); + } + if (source.eat('\'')) { + return "string"; + } + return "error"; + } + + if (ch == '"') { + return switchState(source, setState, stringLiteral); + } + + if (largeRE.test(ch)) { + source.eatWhile(idRE); + if (source.eat('.')) { + return "qualifier"; + } + return "variable-2"; + } + + if (smallRE.test(ch)) { + source.eatWhile(idRE); + return "variable"; + } + + if (digitRE.test(ch)) { + if (ch == '0') { + if (source.eat(/[xX]/)) { + source.eatWhile(hexitRE); // should require at least 1 + return "integer"; + } + if (source.eat(/[oO]/)) { + source.eatWhile(octitRE); // should require at least 1 + return "number"; + } + } + source.eatWhile(digitRE); + var t = "number"; + if (source.eat('.')) { + t = "number"; + source.eatWhile(digitRE); // should require at least 1 + } + if (source.eat(/[eE]/)) { + t = "number"; + source.eat(/[-+]/); + source.eatWhile(digitRE); // should require at least 1 + } + return t; + } + + if (symbolRE.test(ch)) { + if (ch == '-' && source.eat(/-/)) { + source.eatWhile(/-/); + if (!source.eat(symbolRE)) { + source.skipToEnd(); + return "comment"; + } + } + var t = "variable"; + if (ch == ':') { + t = "variable-2"; + } + source.eatWhile(symbolRE); + return t; + } + + return "error"; + } + + function ncomment(type, nest) { + if (nest == 0) { + return normal; + } + return function(source, setState) { + var currNest = nest; + while (!source.eol()) { + var ch = source.next(); + if (ch == '{' && source.eat('-')) { + ++currNest; + } + else if (ch == '-' && source.eat('}')) { + --currNest; + if (currNest == 0) { + setState(normal); + return type; + } + } + } + setState(ncomment(type, currNest)); + return type; + }; + } + + function stringLiteral(source, setState) { + while (!source.eol()) { + var ch = source.next(); + if (ch == '"') { + setState(normal); + return "string"; + } + if (ch == '\\') { + if (source.eol() || source.eat(whiteCharRE)) { + setState(stringGap); + return "string"; + } + if (source.eat('&')) { + } + else { + source.next(); // should handle other escapes here + } + } + } + setState(normal); + return "error"; + } + + function stringGap(source, setState) { + if (source.eat('\\')) { + return switchState(source, setState, stringLiteral); + } + source.next(); + setState(normal); + return "error"; + } + + + var wellKnownWords = (function() { + var wkw = {}; + function setType(t) { + return function () { + for (var i = 0; i < arguments.length; i++) + wkw[arguments[i]] = t; + }; + } + + setType("keyword")( + "case", "class", "data", "default", "deriving", "do", "else", "foreign", + "if", "import", "in", "infix", "infixl", "infixr", "instance", "let", + "module", "newtype", "of", "then", "type", "where", "_"); + + setType("keyword")( + "\.\.", ":", "::", "=", "\\", "\"", "<-", "->", "@", "~", "=>"); + + setType("builtin")( + "!!", "$!", "$", "&&", "+", "++", "-", ".", "/", "/=", "<", "<=", "=<<", + "==", ">", ">=", ">>", ">>=", "^", "^^", "||", "*", "**"); + + setType("builtin")( + "Bool", "Bounded", "Char", "Double", "EQ", "Either", "Enum", "Eq", + "False", "FilePath", "Float", "Floating", "Fractional", "Functor", "GT", + "IO", "IOError", "Int", "Integer", "Integral", "Just", "LT", "Left", + "Maybe", "Monad", "Nothing", "Num", "Ord", "Ordering", "Rational", "Read", + "ReadS", "Real", "RealFloat", "RealFrac", "Right", "Show", "ShowS", + "String", "True"); + + setType("builtin")( + "abs", "acos", "acosh", "all", "and", "any", "appendFile", "asTypeOf", + "asin", "asinh", "atan", "atan2", "atanh", "break", "catch", "ceiling", + "compare", "concat", "concatMap", "const", "cos", "cosh", "curry", + "cycle", "decodeFloat", "div", "divMod", "drop", "dropWhile", "either", + "elem", "encodeFloat", "enumFrom", "enumFromThen", "enumFromThenTo", + "enumFromTo", "error", "even", "exp", "exponent", "fail", "filter", + "flip", "floatDigits", "floatRadix", "floatRange", "floor", "fmap", + "foldl", "foldl1", "foldr", "foldr1", "fromEnum", "fromInteger", + "fromIntegral", "fromRational", "fst", "gcd", "getChar", "getContents", + "getLine", "head", "id", "init", "interact", "ioError", "isDenormalized", + "isIEEE", "isInfinite", "isNaN", "isNegativeZero", "iterate", "last", + "lcm", "length", "lex", "lines", "log", "logBase", "lookup", "map", + "mapM", "mapM_", "max", "maxBound", "maximum", "maybe", "min", "minBound", + "minimum", "mod", "negate", "not", "notElem", "null", "odd", "or", + "otherwise", "pi", "pred", "print", "product", "properFraction", + "putChar", "putStr", "putStrLn", "quot", "quotRem", "read", "readFile", + "readIO", "readList", "readLn", "readParen", "reads", "readsPrec", + "realToFrac", "recip", "rem", "repeat", "replicate", "return", "reverse", + "round", "scaleFloat", "scanl", "scanl1", "scanr", "scanr1", "seq", + "sequence", "sequence_", "show", "showChar", "showList", "showParen", + "showString", "shows", "showsPrec", "significand", "signum", "sin", + "sinh", "snd", "span", "splitAt", "sqrt", "subtract", "succ", "sum", + "tail", "take", "takeWhile", "tan", "tanh", "toEnum", "toInteger", + "toRational", "truncate", "uncurry", "undefined", "unlines", "until", + "unwords", "unzip", "unzip3", "userError", "words", "writeFile", "zip", + "zip3", "zipWith", "zipWith3"); + + var override = modeConfig.overrideKeywords; + if (override) for (var word in override) if (override.hasOwnProperty(word)) + wkw[word] = override[word]; + + return wkw; + })(); + + + + return { + startState: function () { return { f: normal }; }, + copyState: function (s) { return { f: s.f }; }, + + token: function(stream, state) { + var t = state.f(stream, function(s) { state.f = s; }); + var w = stream.current(); + return wellKnownWords.hasOwnProperty(w) ? wellKnownWords[w] : t; + }, + + blockCommentStart: "{-", + blockCommentEnd: "-}", + lineComment: "--" + }; + +}); + +CodeMirror.defineMIME("text/x-haskell", "haskell"); diff --git a/plugins/codemirror/codemirror/mode/haskell/index.html b/plugins/codemirror/codemirror/mode/haskell/index.html new file mode 100644 index 0000000..056b01d --- /dev/null +++ b/plugins/codemirror/codemirror/mode/haskell/index.html @@ -0,0 +1,73 @@ + + +Haskell mode
+ + + + +MIME types defined: text/x-haskell.
Haxe mode
+ + + + + + +MIME types defined: text/x-haxe.
Html Embedded Scripts mode
+ + + + +Mode for html embedded scripts like JSP and ASP.NET. Depends on HtmlMixed which in turn depends on
+ JavaScript, CSS and XML.
Other dependancies include those of the scriping language chosen.
MIME types defined: application/x-aspx (ASP.NET),
+ application/x-ejs (Embedded Javascript), application/x-jsp (JavaServer Pages)
HTML mixed mode
+ + + +The HTML mixed mode depends on the XML, JavaScript, and CSS modes.
+ +It takes an optional mode configuration
+ option, scriptTypes, which can be used to add custom
+ behavior for specific <script type="..."> tags. If
+ given, it should hold an array of {matches, mode}
+ objects, where matches is a string or regexp that
+ matches the script type, and mode is
+ either null, for script types that should stay in
+ HTML mode, or a mode
+ spec corresponding to the mode that should be used for the
+ script.
MIME types defined: text/html
+ (redefined, only takes effect if you load this parser after the
+ XML parser).
HTTP mode
+ + + + + + +MIME types defined: message/http.
Language modes
+ +This is a list of every mode in the distribution. Each mode lives
+in a subdirectory of the mode/ directory, and typically
+defines a single JavaScript file that implements the mode. Loading
+such file will make the language available to CodeMirror, through
+the mode
+option.
+
+
+-
+
- APL +
- Asterisk dialplan +
- C, C++, C# +
- Clojure +
- COBOL +
- CoffeeScript +
- Common Lisp +
- CSS +
- Cython +
- D +
- diff +
- DTD +
- ECL +
- Eiffel +
- Erlang +
- Fortran +
- Gas (AT&T-style assembly) +
- Gherkin +
- Go +
- Groovy +
- HAML +
- Haskell +
- Haxe +
- HTML embedded scripts +
- HTML mixed-mode +
- HTTP +
- Java +
- Jade +
- JavaScript +
- Jinja2 +
- Julia +
- LESS +
- LiveScript +
- Lua +
- Markdown (GitHub-flavour) +
- mIRC +
- Nginx +
- NTriples +
- OCaml +
- Octave (MATLAB) +
- Pascal +
- PEG.js +
- Perl +
- PHP +
- Pig Latin +
- Properties files +
- Python +
- Q +
- R +
- RPM spec and changelog +
- reStructuredText +
- Ruby +
- Rust +
- Sass +
- Scala +
- Scheme +
- SCSS +
- Shell +
- Sieve +
- Smalltalk +
- Smarty +
- Smarty/HTML mixed +
- SQL (several dialects) +
- SPARQL +
- sTeX, LaTeX +
- Tcl +
- Tiddlywiki +
- Tiki wiki +
- TOML +
- Turtle +
- VB.NET +
- VBScript +
- Velocity +
- Verilog +
- XML/HTML +
- XQuery +
- YAML +
- Z80 +
Jade Templating Mode
+ + +The Jade Templating Mode
+Created by Drew Bratcher. Managed as part of an Adobe Brackets extension at https://github.com/dbratcher/brackets-jade.
+MIME type defined: text/x-jade.
JavaScript mode
+ + + + + + ++ JavaScript mode supports a two configuration + options: +
-
+
jsonwhich will set the mode to expect JSON + data rather than a JavaScript program.
+ typescriptwhich will activate additional + syntax highlighting and some other things for TypeScript code + (demo).
+ statementIndentwhich (given a number) will + determine the amount of indentation to use for statements + continued on a new line.
+
MIME types defined: text/javascript, application/json, text/typescript, application/typescript.
TypeScript mode
+ + + + + + +This is a specialization of the JavaScript mode.
+Jinja2 mode
+ + +Julia mode
+ + + + +MIME types defined: text/x-julia.
LESS mode
+ + + +MIME types defined: text/x-less, text/css (if not previously defined).
LiveScript mode
+ + + +MIME types defined: text/x-livescript.
The LiveScript mode was written by Kenneth Bentley (license).
+ +Lua mode
+ + + +Loosely based on Franciszek
+ Wawrzak's CodeMirror
+ 1 mode. One configuration parameter is
+ supported, specials, to which you can provide an
+ array of strings to have those identifiers highlighted with
+ the lua-special style.
MIME types defined: text/x-lua.
Markdown mode
+ + + + +Optionally depends on the XML mode for properly highlighted inline XML blocks.
+ +MIME types defined: text/x-markdown.
mIRC mode
+ + + +MIME types defined: text/mirc.
NGINX mode
+ + + +MIME types defined: text/nginx.
NTriples mode
+ + + +MIME types defined: text/n-triples.
OCaml mode
+ + + + + + +MIME types defined: text/x-ocaml.
Octave mode
+ + + + +MIME types defined: text/x-octave.
Pascal mode
+ + + + + + +MIME types defined: text/x-pascal.
PEG.js Mode
+ + +The PEG.js Mode
+Created by Forbes Lindesay.
+Perl mode
+ + + + + + +MIME types defined: text/x-perl.
PHP mode
+ + + + +Simple HTML/PHP mode based on + the C-like mode. Depends on XML, + JavaScript, CSS, HTMLMixed, and C-like modes.
+ +MIME types defined: application/x-httpd-php (HTML with PHP code), text/x-php (plain, non-wrapped PHP code).
Pig Latin mode
+ + + + ++ Simple mode that handles Pig Latin language. +
+ +MIME type defined: text/x-pig
+ (PIG code)
+