1 /* CodeMirror main module
3 * Implements the CodeMirror constructor and prototype, which take care
4 * of initializing the editor frame, and providing the outside interface.
7 // The CodeMirrorConfig object is used to specify a default
8 // configuration. If you specify such an object before loading this
9 // file, the values you put into it will override the defaults given
10 // below. You can also assign to it after loading.
11 var CodeMirrorConfig = window.CodeMirrorConfig || {};
13 var CodeMirror = (function(){
14 function setDefaults(object, defaults) {
15 for (var option in defaults) {
16 if (!object.hasOwnProperty(option))
17 object[option] = defaults[option];
20 function forEach(array, action) {
21 for (var i = 0; i < array.length; i++)
25 // These default options can be overridden by passing a set of
26 // options to a specific CodeMirror constructor. See manual.html for
28 setDefaults(CodeMirrorConfig, {
32 basefiles: ["util.js", "stringstream.js", "select.js", "undo.js", "editor.js", "tokenize.js"],
38 continuousScanning: false,
43 disableSpellcheck: true,
49 autoMatchParens: false,
51 tabMode: "indent", // or "spaces", "default", "shift"
52 reindentOnLoad: false,
60 function addLineNumberDiv(container) {
61 var nums = document.createElement("DIV"),
62 scroller = document.createElement("DIV");
63 nums.style.position = "absolute";
64 nums.style.height = "100%";
65 if (nums.style.setExpression) {
66 try {nums.style.setExpression("height", "this.previousSibling.offsetHeight + 'px'");}
67 catch(e) {} // Seems to throw 'Not Implemented' on some IE8 versions
69 nums.style.top = "0px";
70 nums.style.left = "0px";
71 nums.style.overflow = "hidden";
72 container.appendChild(nums);
73 scroller.className = "CodeMirror-line-numbers";
74 nums.appendChild(scroller);
75 scroller.innerHTML = "<div>1</div>";
79 function frameHTML(options) {
80 if (typeof options.parserfile == "string")
81 options.parserfile = [options.parserfile];
82 if (typeof options.stylesheet == "string")
83 options.stylesheet = [options.stylesheet];
85 var html = ["<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\"><html><head>"];
86 // Hack to work around a bunch of IE8-specific problems.
87 html.push("<meta http-equiv=\"X-UA-Compatible\" content=\"IE=EmulateIE7\"/>");
88 forEach(options.stylesheet, function(file) {
89 html.push("<link rel=\"stylesheet\" type=\"text/css\" href=\"" + file + "\"/>");
91 forEach(options.basefiles.concat(options.parserfile), function(file) {
92 if (!/^https?:/.test(file)) file = options.path + file;
93 html.push("<script type=\"text/javascript\" src=\"" + file + "\"><" + "/script>");
95 html.push("</head><body style=\"border-width: 0;\" class=\"editbox\" spellcheck=\"" +
96 (options.disableSpellcheck ? "false" : "true") + "\"></body></html>");
100 var internetExplorer = document.selection && window.ActiveXObject && /MSIE/.test(navigator.userAgent);
102 function CodeMirror(place, options) {
103 // Use passed options, if any, to override defaults.
104 this.options = options = options || {};
105 setDefaults(options, CodeMirrorConfig);
107 // Backward compatibility for deprecated options.
108 if (options.dumbTabs) options.tabMode = "spaces";
109 else if (options.normalTab) options.tabMode = "default";
111 var frame = this.frame = document.createElement("IFRAME");
112 if (options.iframeClass) frame.className = options.iframeClass;
113 frame.frameBorder = 0;
114 frame.style.border = "0";
115 frame.style.width = '100%';
116 frame.style.height = '100%';
117 // display: block occasionally suppresses some Firefox bugs, so we
118 // always add it, redundant as it sounds.
119 frame.style.display = "block";
121 var div = this.wrapping = document.createElement("DIV");
122 div.style.position = "relative";
123 div.className = "CodeMirror-wrapping";
124 div.style.width = options.width;
125 div.style.height = (options.height == "dynamic") ? options.minHeight + "px" : options.height;
126 // This is used by Editor.reroutePasteEvent
127 var teHack = this.textareaHack = document.createElement("TEXTAREA");
128 div.appendChild(teHack);
129 teHack.style.position = "absolute";
130 teHack.style.left = "-10000px";
131 teHack.style.width = "10px";
133 // Link back to this object, so that the editor can fetch options
134 // and add a reference to itself.
135 frame.CodeMirror = this;
136 if (options.domain && internetExplorer) {
137 this.html = frameHTML(options);
138 frame.src = "javascript:(function(){document.open();" +
139 (options.domain ? "document.domain=\"" + options.domain + "\";" : "") +
140 "document.write(window.frameElement.CodeMirror.html);document.close();})()";
143 frame.src = "javascript:false";
146 if (place.appendChild) place.appendChild(div);
148 div.appendChild(frame);
149 if (options.lineNumbers) this.lineNumbers = addLineNumberDiv(div);
151 this.win = frame.contentWindow;
152 if (!options.domain || !internetExplorer) {
153 this.win.document.open();
154 this.win.document.write(frameHTML(options));
155 this.win.document.close();
159 CodeMirror.prototype = {
161 if (this.options.initCallback) this.options.initCallback(this);
162 if (this.options.lineNumbers) this.activateLineNumbers();
163 if (this.options.reindentOnLoad) this.reindent();
164 if (this.options.height == "dynamic") this.setDynamicHeight();
167 getCode: function() {return this.editor.getCode();},
168 setCode: function(code) {this.editor.importCode(code);},
169 selection: function() {this.focusIfIE(); return this.editor.selectedText();},
170 reindent: function() {this.editor.reindent();},
171 reindentSelection: function() {this.focusIfIE(); this.editor.reindentSelection(null);},
173 focusIfIE: function() {
174 // in IE, a lot of selection-related functionality only works when the frame is focused
175 if (this.win.select.ie_selection) this.focus();
179 if (this.editor.selectionSnapshot) // IE hack
180 this.win.select.setBookmark(this.win.document.body, this.editor.selectionSnapshot);
182 replaceSelection: function(text) {
184 this.editor.replaceSelection(text);
187 replaceChars: function(text, start, end) {
188 this.editor.replaceChars(text, start, end);
190 getSearchCursor: function(string, fromCursor, caseFold) {
191 return this.editor.getSearchCursor(string, fromCursor, caseFold);
194 undo: function() {this.editor.history.undo();},
195 redo: function() {this.editor.history.redo();},
196 historySize: function() {return this.editor.history.historySize();},
197 clearHistory: function() {this.editor.history.clear();},
199 grabKeys: function(callback, filter) {this.editor.grabKeys(callback, filter);},
200 ungrabKeys: function() {this.editor.ungrabKeys();},
202 setParser: function(name, parserConfig) {this.editor.setParser(name, parserConfig);},
203 setSpellcheck: function(on) {this.win.document.body.spellcheck = on;},
204 setStylesheet: function(names) {
205 if (typeof names === "string") names = [names];
206 var activeStylesheets = {};
207 var matchedNames = {};
208 var links = this.win.document.getElementsByTagName("link");
209 // Create hashes of active stylesheets and matched names.
210 // This is O(n^2) but n is expected to be very small.
211 for (var x = 0, link; link = links[x]; x++) {
212 if (link.rel.indexOf("stylesheet") !== -1) {
213 for (var y = 0; y < names.length; y++) {
215 if (link.href.substring(link.href.length - name.length) === name) {
216 activeStylesheets[link.href] = true;
217 matchedNames[name] = true;
222 // Activate the selected stylesheets and disable the rest.
223 for (var x = 0, link; link = links[x]; x++) {
224 if (link.rel.indexOf("stylesheet") !== -1) {
225 link.disabled = !(link.href in activeStylesheets);
228 // Create any new stylesheets.
229 for (var y = 0; y < names.length; y++) {
231 if (!(name in matchedNames)) {
232 var link = this.win.document.createElement("link");
233 link.rel = "stylesheet";
234 link.type = "text/css";
236 this.win.document.getElementsByTagName('head')[0].appendChild(link);
240 setTextWrapping: function(on) {
241 if (on == this.options.textWrapping) return;
242 this.win.document.body.style.whiteSpace = on ? "" : "nowrap";
243 this.options.textWrapping = on;
244 if (this.lineNumbers) {
245 this.setLineNumbers(false);
246 this.setLineNumbers(true);
249 setIndentUnit: function(unit) {this.win.indentUnit = unit;},
250 setUndoDepth: function(depth) {this.editor.history.maxDepth = depth;},
251 setTabMode: function(mode) {this.options.tabMode = mode;},
252 setLineNumbers: function(on) {
253 if (on && !this.lineNumbers) {
254 this.lineNumbers = addLineNumberDiv(this.wrapping);
255 this.activateLineNumbers();
257 else if (!on && this.lineNumbers) {
258 this.wrapping.removeChild(this.lineNumbers);
259 this.wrapping.style.marginLeft = "";
260 this.lineNumbers = null;
264 cursorPosition: function(start) {this.focusIfIE(); return this.editor.cursorPosition(start);},
265 firstLine: function() {return this.editor.firstLine();},
266 lastLine: function() {return this.editor.lastLine();},
267 nextLine: function(line) {return this.editor.nextLine(line);},
268 prevLine: function(line) {return this.editor.prevLine(line);},
269 lineContent: function(line) {return this.editor.lineContent(line);},
270 setLineContent: function(line, content) {this.editor.setLineContent(line, content);},
271 removeLine: function(line){this.editor.removeLine(line);},
272 insertIntoLine: function(line, position, content) {this.editor.insertIntoLine(line, position, content);},
273 selectLines: function(startLine, startOffset, endLine, endOffset) {
275 this.editor.selectLines(startLine, startOffset, endLine, endOffset);
277 nthLine: function(n) {
278 var line = this.firstLine();
279 for (; n > 1 && line !== false; n--)
280 line = this.nextLine(line);
283 lineNumber: function(line) {
285 while (line !== false) {
287 line = this.prevLine(line);
291 jumpToLine: function(line) {
292 if (typeof line == "number") line = this.nthLine(line);
293 this.selectLines(line, 0);
296 currentLine: function() { // Deprecated, but still there for backward compatibility
297 return this.lineNumber(this.cursorLine());
299 cursorLine: function() {
300 return this.cursorPosition().line;
302 cursorCoords: function(start) {return this.editor.cursorCoords(start);},
304 activateLineNumbers: function() {
305 var frame = this.frame, win = frame.contentWindow, doc = win.document, body = doc.body,
306 nums = this.lineNumbers, scroller = nums.firstChild, self = this;
310 if (frame.offsetWidth == 0) return;
311 for (var root = frame; root.parentNode; root = root.parentNode);
312 if (!nums.parentNode || root != document || !win.Editor) {
313 // Clear event handlers (their nodes might already be collected, so try/catch)
314 try{clear();}catch(e){}
315 clearInterval(sizeInterval);
319 /*if (nums.offsetWidth != barWidth) {
320 barWidth = nums.offsetWidth;
321 frame.parentNode.style.paddingLeft = barWidth + "px";
324 function doScroll() {
325 nums.scrollTop = body.scrollTop || doc.documentElement.scrollTop || 0;
327 // Cleanup function, registered by nonWrapping and wrapping.
328 var clear = function(){};
330 var sizeInterval = setInterval(sizeBar, 500);
332 function ensureEnoughLineNumbers(fill) {
333 var lineHeight = scroller.firstChild.offsetHeight;
334 if (lineHeight == 0) return;
335 var targetHeight = 50 + Math.max(body.offsetHeight, Math.max(frame.offsetHeight, body.scrollHeight || 0)),
336 lastNumber = Math.ceil(targetHeight / lineHeight);
337 for (var i = scroller.childNodes.length; i <= lastNumber; i++) {
338 var div = document.createElement("DIV");
339 div.appendChild(document.createTextNode(fill ? String(i + 1) : "\u00a0"));
340 scroller.appendChild(div);
344 function nonWrapping() {
346 ensureEnoughLineNumbers(true);
349 self.updateNumbers = update;
350 var onScroll = win.addEventHandler(win, "scroll", doScroll, true),
351 onResize = win.addEventHandler(win, "resize", update, true);
353 onScroll(); onResize();
354 if (self.updateNumbers == update) self.updateNumbers = null;
359 function wrapping() {
360 var node, lineNum, next, pos, changes = [], styleNums = self.options.styleNumbers;
362 function setNum(n, node) {
363 // Does not typically happen (but can, if you mess with the
364 // document during the numbering)
365 if (!lineNum) lineNum = scroller.appendChild(document.createElement("DIV"));
366 if (styleNums) styleNums(lineNum, node, n);
367 // Changes are accumulated, so that the document layout
368 // doesn't have to be recomputed during the pass
369 changes.push(lineNum); changes.push(n);
370 pos = lineNum.offsetHeight + lineNum.offsetTop;
371 lineNum = lineNum.nextSibling;
373 function commitChanges() {
374 for (var i = 0; i < changes.length; i += 2)
375 changes[i].innerHTML = changes[i + 1];
379 if (!scroller.parentNode || scroller.parentNode != self.lineNumbers) return;
381 var endTime = new Date().getTime() + self.options.lineNumberTime;
383 setNum(next++, node.previousSibling);
384 for (; node && !win.isBR(node); node = node.nextSibling) {
385 var bott = node.offsetTop + node.offsetHeight;
386 while (scroller.offsetHeight && bott - 3 > pos) setNum(" ");
388 if (node) node = node.nextSibling;
389 if (new Date().getTime() > endTime) {
391 pending = setTimeout(work, self.options.lineNumberDelay);
395 while (lineNum) setNum(next++);
399 function start(firstTime) {
401 ensureEnoughLineNumbers(firstTime);
402 node = body.firstChild;
403 lineNum = scroller.firstChild;
412 if (pending) clearTimeout(pending);
413 if (self.editor.allClean()) start();
414 else pending = setTimeout(update, 200);
416 self.updateNumbers = update;
417 var onScroll = win.addEventHandler(win, "scroll", doScroll, true),
418 onResize = win.addEventHandler(win, "resize", update, true);
420 if (pending) clearTimeout(pending);
421 if (self.updateNumbers == update) self.updateNumbers = null;
426 (this.options.textWrapping || this.options.styleNumbers ? wrapping : nonWrapping)();
429 setDynamicHeight: function() {
430 var self = this, activity = self.options.cursorActivity, win = self.win, body = win.document.body,
431 lineHeight = null, timeout = null, vmargin = 2 * self.frame.offsetTop;
432 body.style.overflowY = "hidden";
433 win.document.documentElement.style.overflowY = "hidden";
434 this.frame.scrolling = "no";
436 function updateHeight() {
437 for (var span = body.firstChild, sawBR = false; span; span = span.nextSibling)
438 if (win.isSpan(span) && span.offsetHeight) {
439 lineHeight = span.offsetHeight;
440 if (!sawBR) vmargin = 2 * (self.frame.offsetTop + span.offsetTop + body.offsetTop + (internetExplorer ? 10 : 0));
444 self.wrapping.style.height = Math.max(vmargin + lineHeight * (body.getElementsByTagName("BR").length + 1),
445 self.options.minHeight) + "px";
447 setTimeout(updateHeight, 100);
448 self.options.cursorActivity = function(x) {
449 if (activity) activity(x);
450 clearTimeout(timeout);
451 timeout = setTimeout(updateHeight, 200);
456 CodeMirror.InvalidLineHandle = {toString: function(){return "CodeMirror.InvalidLineHandle";}};
458 CodeMirror.replace = function(element) {
459 if (typeof element == "string")
460 element = document.getElementById(element);
461 return function(newElement) {
462 element.parentNode.replaceChild(newElement, element);
466 CodeMirror.fromTextArea = function(area, options) {
467 if (typeof area == "string")
468 area = document.getElementById(area);
470 options = options || {};
471 if (area.style.width && options.width == null)
472 options.width = area.style.width;
473 if (area.style.height && options.height == null)
474 options.height = area.style.height;
475 if (options.content == null) options.content = area.value;
478 function updateField() {
479 area.value = mirror.getCode();
481 if (typeof area.form.addEventListener == "function")
482 area.form.addEventListener("submit", updateField, false);
484 area.form.attachEvent("onsubmit", updateField);
485 var realSubmit = area.form.submit;
486 function wrapSubmit() {
488 // Can't use realSubmit.apply because IE6 is too stupid
489 area.form.submit = realSubmit;
491 area.form.submit = wrapSubmit;
493 area.form.submit = wrapSubmit;
496 function insert(frame) {
497 if (area.nextSibling)
498 area.parentNode.insertBefore(frame, area.nextSibling);
500 area.parentNode.appendChild(frame);
503 area.style.display = "none";
504 var mirror = new CodeMirror(insert, options);
505 mirror.toTextArea = function() {
506 area.parentNode.removeChild(mirror.wrapping);
507 area.style.display = "";
509 area.form.submit = realSubmit;
510 if (typeof area.form.removeEventListener == "function")
511 area.form.removeEventListener("submit", updateField, false);
513 area.form.detachEvent("onsubmit", updateField);
520 CodeMirror.isProbablySupported = function() {
521 // This is rather awful, but can be useful.
524 return Number(window.opera.version()) >= 9.52;
525 else if (/Apple Computers, Inc/.test(navigator.vendor) && (match = navigator.userAgent.match(/Version\/(\d+(?:\.\d+)?)\./)))
526 return Number(match[1]) >= 3;
527 else if (document.selection && window.ActiveXObject && (match = navigator.userAgent.match(/MSIE (\d+(?:\.\d*)?)\b/)))
528 return Number(match[1]) >= 6;
529 else if (match = navigator.userAgent.match(/gecko\/(\d{8})/i))
530 return Number(match[1]) >= 20050901;
531 else if (match = navigator.userAgent.match(/AppleWebKit\/(\d+)/))
532 return Number(match[1]) >= 525;