/* The Editor object manages the content of the editable frame. It * catches events, colours nodes, and indents lines. This file also * holds some functions for transforming arbitrary DOM structures into * plain sequences of and
elements */ var internetExplorer = document.selection && window.ActiveXObject && /MSIE/.test(navigator.userAgent); var webkit = /AppleWebKit/.test(navigator.userAgent); var safari = /Apple Computers, Inc/.test(navigator.vendor); var gecko = /gecko\/(\d{8})/i.test(navigator.userAgent); // Make sure a string does not contain two consecutive 'collapseable' // whitespace characters. function makeWhiteSpace(n) { var buffer = [], nb = true; for (; n > 0; n--) { buffer.push((nb || n == 1) ? nbsp : " "); nb = !nb; } return buffer.join(""); } // Create a set of white-space characters that will not be collapsed // by the browser, but will not break text-wrapping either. function fixSpaces(string) { if (string.charAt(0) == " ") string = nbsp + string.slice(1); return string.replace(/\t/g, function(){return makeWhiteSpace(indentUnit);}) .replace(/[ \u00a0]{2,}/g, function(s) {return makeWhiteSpace(s.length);}); } function cleanText(text) { return text.replace(/\u00a0/g, " ").replace(/\u200b/g, ""); } // Create a SPAN node with the expected properties for document part // spans. function makePartSpan(value, doc) { var text = value; if (value.nodeType == 3) text = value.nodeValue; else value = doc.createTextNode(text); var span = doc.createElement("SPAN"); span.isPart = true; span.appendChild(value); span.currentText = text; return span; } // On webkit, when the last BR of the document does not have text // behind it, the cursor can not be put on the line after it. This // makes pressing enter at the end of the document occasionally do // nothing (or at least seem to do nothing). To work around it, this // function makes sure the document ends with a span containing a // zero-width space character. The traverseDOM iterator filters such // character out again, so that the parsers won't see them. This // function is called from a few strategic places to make sure the // zwsp is restored after the highlighting process eats it. var webkitLastLineHack = webkit ? function(container) { var last = container.lastChild; if (!last || !last.isPart || last.textContent != "\u200b") container.appendChild(makePartSpan("\u200b", container.ownerDocument)); } : function() {}; var Editor = (function(){ // The HTML elements whose content should be suffixed by a newline // when converting them to flat text. var newlineElements = {"P": true, "DIV": true, "LI": true}; function asEditorLines(string) { var tab = makeWhiteSpace(indentUnit); return map(string.replace(/\t/g, tab).replace(/\u00a0/g, " ").replace(/\r\n?/g, "\n").split("\n"), fixSpaces); } // Helper function for traverseDOM. Flattens an arbitrary DOM node // into an array of textnodes and
tags. function simplifyDOM(root, atEnd) { var doc = root.ownerDocument; var result = []; var leaving = true; function simplifyNode(node, top) { if (node.nodeType == 3) { var text = node.nodeValue = fixSpaces(node.nodeValue.replace(/[\r\u200b]/g, "").replace(/\n/g, " ")); if (text.length) leaving = false; result.push(node); } else if (isBR(node) && node.childNodes.length == 0) { leaving = true; result.push(node); } else { forEach(node.childNodes, simplifyNode); if (!leaving && newlineElements.hasOwnProperty(node.nodeName.toUpperCase())) { leaving = true; if (!atEnd || !top) result.push(doc.createElement("BR")); } } } simplifyNode(root, true); return result; } // Creates a MochiKit-style iterator that goes over a series of DOM // nodes. The values it yields are strings, the textual content of // the nodes. It makes sure that all nodes up to and including the // one whose text is being yielded have been 'normalized' to be just // and
elements. // See the story.html file for some short remarks about the use of // continuation-passing style in this iterator. function traverseDOM(start){ function yield(value, c){cc = c; return value;} function push(fun, arg, c){return function(){return fun(arg, c);};} function stop(){cc = stop; throw StopIteration;}; var cc = push(scanNode, start, stop); var owner = start.ownerDocument; var nodeQueue = []; // Create a function that can be used to insert nodes after the // one given as argument. function pointAt(node){ var parent = node.parentNode; var next = node.nextSibling; return function(newnode) { parent.insertBefore(newnode, next); }; } var point = null; // This an Opera-specific hack -- always insert an empty span // between two BRs, because Opera's cursor code gets terribly // confused when the cursor is between two BRs. var afterBR = true; // Insert a normalized node at the current point. If it is a text // node, wrap it in a , and give that span a currentText // property -- this is used to cache the nodeValue, because // directly accessing nodeValue is horribly slow on some browsers. // The dirty property is used by the highlighter to determine // which parts of the document have to be re-highlighted. function insertPart(part){ var text = "\n"; if (part.nodeType == 3) { select.snapshotChanged(); part = makePartSpan(part, owner); text = part.currentText; afterBR = false; } else { if (afterBR && window.opera) point(makePartSpan("", owner)); afterBR = true; } part.dirty = true; nodeQueue.push(part); point(part); return text; } // Extract the text and newlines from a DOM node, insert them into // the document, and yield the textual content. Used to replace // non-normalized nodes. function writeNode(node, c, end) { var toYield = []; forEach(simplifyDOM(node, end), function(part) { toYield.push(insertPart(part)); }); return yield(toYield.join(""), c); } // Check whether a node is a normalized element. function partNode(node){ if (node.isPart && node.childNodes.length == 1 && node.firstChild.nodeType == 3) { node.currentText = node.firstChild.nodeValue; return !/[\n\t\r]/.test(node.currentText); } return false; } // Handle a node. Add its successor to the continuation if there // is one, find out whether the node is normalized. If it is, // yield its content, otherwise, normalize it (writeNode will take // care of yielding). function scanNode(node, c){ if (node.nextSibling) c = push(scanNode, node.nextSibling, c); if (partNode(node)){ nodeQueue.push(node); afterBR = false; return yield(node.currentText, c); } else if (isBR(node)) { if (afterBR && window.opera) node.parentNode.insertBefore(makePartSpan("", owner), node); nodeQueue.push(node); afterBR = true; return yield("\n", c); } else { var end = !node.nextSibling; point = pointAt(node); removeElement(node); return writeNode(node, c, end); } } // MochiKit iterators are objects with a next function that // returns the next value or throws StopIteration when there are // no more values. return {next: function(){return cc();}, nodes: nodeQueue}; } // Determine the text size of a processed node. function nodeSize(node) { return isBR(node) ? 1 : node.currentText.length; } // Search backwards through the top-level nodes until the next BR or // the start of the frame. function startOfLine(node) { while (node && !isBR(node)) node = node.previousSibling; return node; } function endOfLine(node, container) { if (!node) node = container.firstChild; else if (isBR(node)) node = node.nextSibling; while (node && !isBR(node)) node = node.nextSibling; return node; } function time() {return new Date().getTime();} // Client interface for searching the content of the editor. Create // these by calling CodeMirror.getSearchCursor. To use, call // findNext on the resulting object -- this returns a boolean // indicating whether anything was found, and can be called again to // skip to the next find. Use the select and replace methods to // actually do something with the found locations. function SearchCursor(editor, string, fromCursor, caseFold) { this.editor = editor; this.caseFold = caseFold; if (caseFold) string = string.toLowerCase(); this.history = editor.history; this.history.commit(); // Are we currently at an occurrence of the search string? this.atOccurrence = false; // The object stores a set of nodes coming after its current // position, so that when the current point is taken out of the // DOM tree, we can still try to continue. this.fallbackSize = 15; var cursor; // Start from the cursor when specified and a cursor can be found. if (fromCursor && (cursor = select.cursorPos(this.editor.container))) { this.line = cursor.node; this.offset = cursor.offset; } else { this.line = null; this.offset = 0; } this.valid = !!string; // Create a matcher function based on the kind of string we have. var target = string.split("\n"), self = this; this.matches = (target.length == 1) ? // For one-line strings, searching can be done simply by calling // indexOf on the current line. function() { var line = cleanText(self.history.textAfter(self.line).slice(self.offset)); var match = (self.caseFold ? line.toLowerCase() : line).indexOf(string); if (match > -1) return {from: {node: self.line, offset: self.offset + match}, to: {node: self.line, offset: self.offset + match + string.length}}; } : // Multi-line strings require internal iteration over lines, and // some clunky checks to make sure the first match ends at the // end of the line and the last match starts at the start. function() { var firstLine = cleanText(self.history.textAfter(self.line).slice(self.offset)); var match = (self.caseFold ? firstLine.toLowerCase() : firstLine).lastIndexOf(target[0]); if (match == -1 || match != firstLine.length - target[0].length) return false; var startOffset = self.offset + match; var line = self.history.nodeAfter(self.line); for (var i = 1; i < target.length - 1; i++) { var line = cleanText(self.history.textAfter(line)); if ((self.caseFold ? line.toLowerCase() : line) != target[i]) return false; line = self.history.nodeAfter(line); } var lastLine = cleanText(self.history.textAfter(line)); if ((self.caseFold ? lastLine.toLowerCase() : lastLine).indexOf(target[target.length - 1]) != 0) return false; return {from: {node: self.line, offset: startOffset}, to: {node: line, offset: target[target.length - 1].length}}; }; } SearchCursor.prototype = { findNext: function() { if (!this.valid) return false; this.atOccurrence = false; var self = this; // Go back to the start of the document if the current line is // no longer in the DOM tree. if (this.line && !this.line.parentNode) { this.line = null; this.offset = 0; } // Set the cursor's position one character after the given // position. function saveAfter(pos) { if (self.history.textAfter(pos.node).length > pos.offset) { self.line = pos.node; self.offset = pos.offset + 1; } else { self.line = self.history.nodeAfter(pos.node); self.offset = 0; } } while (true) { var match = this.matches(); // Found the search string. if (match) { this.atOccurrence = match; saveAfter(match.from); return true; } this.line = this.history.nodeAfter(this.line); this.offset = 0; // End of document. if (!this.line) { this.valid = false; return false; } } }, select: function() { if (this.atOccurrence) { select.setCursorPos(this.editor.container, this.atOccurrence.from, this.atOccurrence.to); select.scrollToCursor(this.editor.container); } }, replace: function(string) { if (this.atOccurrence) { var end = this.editor.replaceRange(this.atOccurrence.from, this.atOccurrence.to, string); this.line = end.node; this.offset = end.offset; this.atOccurrence = false; } } }; // The Editor object is the main inside-the-iframe interface. function Editor(options) { this.options = options; window.indentUnit = options.indentUnit; this.parent = parent; this.doc = document; var container = this.container = this.doc.body; this.win = window; this.history = new History(container, options.undoDepth, options.undoDelay, this); var self = this; if (!Editor.Parser) throw "No parser loaded."; if (options.parserConfig && Editor.Parser.configure) Editor.Parser.configure(options.parserConfig); if (!options.readOnly) select.setCursorPos(container, {node: null, offset: 0}); this.dirty = []; this.importCode(options.content || ""); this.history.onChange = options.onChange; if (!options.readOnly) { if (options.continuousScanning !== false) { this.scanner = this.documentScanner(options.passTime); this.delayScanning(); } function setEditable() { // In IE, designMode frames can not run any scripts, so we use // contentEditable instead. if (document.body.contentEditable != undefined && internetExplorer) document.body.contentEditable = "true"; else document.designMode = "on"; document.documentElement.style.borderWidth = "0"; if (!options.textWrapping) container.style.whiteSpace = "nowrap"; } // If setting the frame editable fails, try again when the user // focus it (happens when the frame is not visible on // initialisation, in Firefox). try { setEditable(); } catch(e) { var focusEvent = addEventHandler(document, "focus", function() { focusEvent(); setEditable(); }, true); } addEventHandler(document, "keydown", method(this, "keyDown")); addEventHandler(document, "keypress", method(this, "keyPress")); addEventHandler(document, "keyup", method(this, "keyUp")); function cursorActivity() {self.cursorActivity(false);} addEventHandler(document.body, "mouseup", cursorActivity); addEventHandler(document.body, "cut", cursorActivity); // workaround for a gecko bug [?] where going forward and then // back again breaks designmode (no more cursor) if (gecko) addEventHandler(this.win, "pagehide", function(){self.unloaded = true;}); addEventHandler(document.body, "paste", function(event) { cursorActivity(); var text = null; try { var clipboardData = event.clipboardData || window.clipboardData; if (clipboardData) text = clipboardData.getData('Text'); } catch(e) {} if (text !== null) { event.stop(); self.replaceSelection(text); select.scrollToCursor(self.container); } }); if (this.options.autoMatchParens) addEventHandler(document.body, "click", method(this, "scheduleParenHighlight")); } else if (!options.textWrapping) { container.style.whiteSpace = "nowrap"; } } function isSafeKey(code) { return (code >= 16 && code <= 18) || // shift, control, alt (code >= 33 && code <= 40); // arrows, home, end } Editor.prototype = { // Import a piece of code into the editor. importCode: function(code) { this.history.push(null, null, asEditorLines(code)); this.history.reset(); }, // Extract the code from the editor. getCode: function() { if (!this.container.firstChild) return ""; var accum = []; select.markSelection(this.win); forEach(traverseDOM(this.container.firstChild), method(accum, "push")); webkitLastLineHack(this.container); select.selectMarked(); return cleanText(accum.join("")); }, checkLine: function(node) { if (node === false || !(node == null || node.parentNode == this.container)) throw parent.CodeMirror.InvalidLineHandle; }, cursorPosition: function(start) { if (start == null) start = true; var pos = select.cursorPos(this.container, start); if (pos) return {line: pos.node, character: pos.offset}; else return {line: null, character: 0}; }, firstLine: function() { return null; }, lastLine: function() { if (this.container.lastChild) return startOfLine(this.container.lastChild); else return null; }, nextLine: function(line) { this.checkLine(line); var end = endOfLine(line, this.container); return end || false; }, prevLine: function(line) { this.checkLine(line); if (line == null) return false; return startOfLine(line.previousSibling); }, selectLines: function(startLine, startOffset, endLine, endOffset) { this.checkLine(startLine); var start = {node: startLine, offset: startOffset}, end = null; if (endOffset !== undefined) { this.checkLine(endLine); end = {node: endLine, offset: endOffset}; } select.setCursorPos(this.container, start, end); select.scrollToCursor(this.container); }, lineContent: function(line) { var accum = []; for (line = line ? line.nextSibling : this.container.firstChild; line && !isBR(line); line = line.nextSibling) accum.push(nodeText(line)); return cleanText(accum.join("")); }, setLineContent: function(line, content) { this.history.commit(); this.replaceRange({node: line, offset: 0}, {node: line, offset: this.history.textAfter(line).length}, content); this.addDirtyNode(line); this.scheduleHighlight(); }, removeLine: function(line) { var node = line ? line.nextSibling : this.container.firstChild; while (node) { var next = node.nextSibling; removeElement(node); if (isBR(node)) break; node = next; } this.addDirtyNode(line); this.scheduleHighlight(); }, insertIntoLine: function(line, position, content) { var before = null; if (position == "end") { before = endOfLine(line, this.container); } else { for (var cur = line ? line.nextSibling : this.container.firstChild; cur; cur = cur.nextSibling) { if (position == 0) { before = cur; break; } var text = nodeText(cur); if (text.length > position) { before = cur.nextSibling; content = text.slice(0, position) + content + text.slice(position); removeElement(cur); break; } position -= text.length; } } var lines = asEditorLines(content), doc = this.container.ownerDocument; for (var i = 0; i < lines.length; i++) { if (i > 0) this.container.insertBefore(doc.createElement("BR"), before); this.container.insertBefore(makePartSpan(lines[i], doc), before); } this.addDirtyNode(line); this.scheduleHighlight(); }, // Retrieve the selected text. selectedText: function() { var h = this.history; h.commit(); var start = select.cursorPos(this.container, true), end = select.cursorPos(this.container, false); if (!start || !end) return ""; if (start.node == end.node) return h.textAfter(start.node).slice(start.offset, end.offset); var text = [h.textAfter(start.node).slice(start.offset)]; for (var pos = h.nodeAfter(start.node); pos != end.node; pos = h.nodeAfter(pos)) text.push(h.textAfter(pos)); text.push(h.textAfter(end.node).slice(0, end.offset)); return cleanText(text.join("\n")); }, // Replace the selection with another piece of text. replaceSelection: function(text) { this.history.commit(); var start = select.cursorPos(this.container, true), end = select.cursorPos(this.container, false); if (!start || !end) return; end = this.replaceRange(start, end, text); select.setCursorPos(this.container, end); webkitLastLineHack(this.container); }, reroutePasteEvent: function() { if (this.capturingPaste || window.opera) return; this.capturingPaste = true; var te = parent.document.createElement("TEXTAREA"); te.style.position = "absolute"; te.style.left = "-10000px"; te.style.width = "10px"; te.style.top = nodeTop(frameElement) + "px"; window.frameElement.CodeMirror.wrapping.appendChild(te); parent.focus(); te.focus(); var self = this; this.parent.setTimeout(function() { self.capturingPaste = false; self.win.focus(); if (self.selectionSnapshot) // IE hack self.win.select.setBookmark(self.container, self.selectionSnapshot); var text = te.value; if (text) { self.replaceSelection(text); select.scrollToCursor(self.container); } removeElement(te); }, 10); }, replaceRange: function(from, to, text) { var lines = asEditorLines(text); lines[0] = this.history.textAfter(from.node).slice(0, from.offset) + lines[0]; var lastLine = lines[lines.length - 1]; lines[lines.length - 1] = lastLine + this.history.textAfter(to.node).slice(to.offset); var end = this.history.nodeAfter(to.node); this.history.push(from.node, end, lines); return {node: this.history.nodeBefore(end), offset: lastLine.length}; }, getSearchCursor: function(string, fromCursor, caseFold) { return new SearchCursor(this, string, fromCursor, caseFold); }, // Re-indent the whole buffer reindent: function() { if (this.container.firstChild) this.indentRegion(null, this.container.lastChild); }, reindentSelection: function(direction) { if (!select.somethingSelected(this.win)) { this.indentAtCursor(direction); } else { var start = select.selectionTopNode(this.container, true), end = select.selectionTopNode(this.container, false); if (start === false || end === false) return; this.indentRegion(start, end, direction); } }, grabKeys: function(eventHandler, filter) { this.frozen = eventHandler; this.keyFilter = filter; }, ungrabKeys: function() { this.frozen = "leave"; this.keyFilter = null; }, setParser: function(name) { Editor.Parser = window[name]; if (this.container.firstChild) { forEach(this.container.childNodes, function(n) { if (n.nodeType != 3) n.dirty = true; }); this.addDirtyNode(this.firstChild); this.scheduleHighlight(); } }, // Intercept enter and tab, and assign their new functions. keyDown: function(event) { if (this.frozen == "leave") this.frozen = null; if (this.frozen && (!this.keyFilter || this.keyFilter(event.keyCode))) { event.stop(); this.frozen(event); return; } var code = event.keyCode; // Don't scan when the user is typing. this.delayScanning(); // Schedule a paren-highlight event, if configured. if (this.options.autoMatchParens) this.scheduleParenHighlight(); // The various checks for !altKey are there because AltGr sets both // ctrlKey and altKey to true, and should not be recognised as // Control. if (code == 13) { // enter if (event.ctrlKey && !event.altKey) { this.reparseBuffer(); } else { select.insertNewlineAtCursor(this.win); this.indentAtCursor(); select.scrollToCursor(this.container); } event.stop(); } else if (code == 9 && this.options.tabMode != "default" && !event.ctrlKey) { // tab this.handleTab(!event.shiftKey); event.stop(); } else if (code == 32 && event.shiftKey && this.options.tabMode == "default") { // space this.handleTab(true); event.stop(); } else if (code == 36 && !event.shiftKey && !event.ctrlKey) { // home if (this.home()) event.stop(); } else if (code == 35 && !event.shiftKey && !event.ctrlKey) { // end if (this.end()) event.stop(); } else if ((code == 219 || code == 221) && event.ctrlKey && !event.altKey) { // [, ] this.highlightParens(event.shiftKey, true); event.stop(); } else if (event.metaKey && !event.shiftKey && (code == 37 || code == 39)) { // Meta-left/right var cursor = select.selectionTopNode(this.container); if (cursor === false || !this.container.firstChild) return; if (code == 37) select.focusAfterNode(startOfLine(cursor), this.container); else { var end = endOfLine(cursor, this.container); select.focusAfterNode(end ? end.previousSibling : this.container.lastChild, this.container); } event.stop(); } else if ((event.ctrlKey || event.metaKey) && !event.altKey) { if ((event.shiftKey && code == 90) || code == 89) { // shift-Z, Y select.scrollToNode(this.history.redo()); event.stop(); } else if (code == 90 || (safari && code == 8)) { // Z, backspace select.scrollToNode(this.history.undo()); event.stop(); } else if (code == 83 && this.options.saveFunction) { // S this.options.saveFunction(); event.stop(); } else if (internetExplorer && code == 86) { this.reroutePasteEvent(); } } }, // Check for characters that should re-indent the current line, // and prevent Opera from handling enter and tab anyway. keyPress: function(event) { var electric = Editor.Parser.electricChars, self = this; // Hack for Opera, and Firefox on OS X, in which stopping a // keydown event does not prevent the associated keypress event // from happening, so we have to cancel enter and tab again // here. if ((this.frozen && (!this.keyFilter || this.keyFilter(event.keyCode))) || event.code == 13 || (event.code == 9 && this.options.tabMode != "default") || (event.keyCode == 32 && event.shiftKey && this.options.tabMode == "default")) event.stop(); else if (electric && electric.indexOf(event.character) != -1) this.parent.setTimeout(function(){self.indentAtCursor(null);}, 0); else if ((event.character == "v" || event.character == "V") && (event.ctrlKey || event.metaKey) && !event.altKey) // ctrl-V this.reroutePasteEvent(); }, // Mark the node at the cursor dirty when a non-safe key is // released. keyUp: function(event) { this.cursorActivity(isSafeKey(event.keyCode)); }, // Indent the line following a given
, or null for the first // line. If given a
element, this must have been highlighted // so that it has an indentation method. Returns the whitespace // element that has been modified or created (if any). indentLineAfter: function(start, direction) { // whiteSpace is the whitespace span at the start of the line, // or null if there is no such node. var whiteSpace = start ? start.nextSibling : this.container.firstChild; if (whiteSpace && !hasClass(whiteSpace, "whitespace")) whiteSpace = null; // Sometimes the start of the line can influence the correct // indentation, so we retrieve it. var firstText = whiteSpace ? whiteSpace.nextSibling : (start ? start.nextSibling : this.container.firstChild); var nextChars = (start && firstText && firstText.currentText) ? firstText.currentText : ""; // Ask the lexical context for the correct indentation, and // compute how much this differs from the current indentation. var newIndent = 0, curIndent = whiteSpace ? whiteSpace.currentText.length : 0; if (direction != null && this.options.tabMode == "shift") newIndent = direction ? curIndent + indentUnit : Math.max(0, curIndent - indentUnit) else if (start) newIndent = start.indentation(nextChars, curIndent, direction); else if (Editor.Parser.firstIndentation) newIndent = Editor.Parser.firstIndentation(nextChars, curIndent, direction); var indentDiff = newIndent - curIndent; // If there is too much, this is just a matter of shrinking a span. if (indentDiff < 0) { if (newIndent == 0) { if (firstText) select.snapshotMove(whiteSpace.firstChild, firstText.firstChild, 0); removeElement(whiteSpace); whiteSpace = null; } else { select.snapshotMove(whiteSpace.firstChild, whiteSpace.firstChild, indentDiff, true); whiteSpace.currentText = makeWhiteSpace(newIndent); whiteSpace.firstChild.nodeValue = whiteSpace.currentText; } } // Not enough... else if (indentDiff > 0) { // If there is whitespace, we grow it. if (whiteSpace) { whiteSpace.currentText = makeWhiteSpace(newIndent); whiteSpace.firstChild.nodeValue = whiteSpace.currentText; } // Otherwise, we have to add a new whitespace node. else { whiteSpace = makePartSpan(makeWhiteSpace(newIndent), this.doc); whiteSpace.className = "whitespace"; if (start) insertAfter(whiteSpace, start); else this.container.insertBefore(whiteSpace, this.container.firstChild); } if (firstText) select.snapshotMove(firstText.firstChild, whiteSpace.firstChild, curIndent, false, true); } if (indentDiff != 0) this.addDirtyNode(start); return whiteSpace; }, // Re-highlight the selected part of the document. highlightAtCursor: function() { var pos = select.selectionTopNode(this.container, true); var to = select.selectionTopNode(this.container, false); if (pos === false || to === false) return; select.markSelection(this.win); if (this.highlight(pos, endOfLine(to, this.container), true, 20) === false) return false; select.selectMarked(); return true; }, // When tab is pressed with text selected, the whole selection is // re-indented, when nothing is selected, the line with the cursor // is re-indented. handleTab: function(direction) { if (this.options.tabMode == "spaces") select.insertTabAtCursor(this.win); else this.reindentSelection(direction); }, // Custom home behaviour that doesn't land the cursor in front of // leading whitespace unless pressed twice. home: function() { var cur = select.selectionTopNode(this.container, true), start = cur; if (cur === false || !(!cur || cur.isPart || isBR(cur)) || !this.container.firstChild) return false; while (cur && !isBR(cur)) cur = cur.previousSibling; var next = cur ? cur.nextSibling : this.container.firstChild; if (next && next != start && next.isPart && hasClass(next, "whitespace")) select.focusAfterNode(next, this.container); else select.focusAfterNode(cur, this.container); select.scrollToCursor(this.container); return true; }, // Some browsers (Opera) don't manage to handle the end key // properly in the face of vertical scrolling. end: function() { var cur = select.selectionTopNode(this.container, true); if (cur === false) return false; cur = endOfLine(cur, this.container); if (!cur) return false; select.focusAfterNode(cur.previousSibling, this.container); select.scrollToCursor(this.container); return true; }, // Delay (or initiate) the next paren highlight event. scheduleParenHighlight: function() { if (this.parenEvent) this.parent.clearTimeout(this.parenEvent); var self = this; this.parenEvent = this.parent.setTimeout(function(){self.highlightParens();}, 300); }, // Take the token before the cursor. If it contains a character in // '()[]{}', search for the matching paren/brace/bracket, and // highlight them in green for a moment, or red if no proper match // was found. highlightParens: function(jump, fromKey) { var self = this; // give the relevant nodes a colour. function highlight(node, ok) { if (!node) return; if (self.options.markParen) { self.options.markParen(node, ok); } else { node.style.fontWeight = "bold"; node.style.color = ok ? "#8F8" : "#F88"; } } function unhighlight(node) { if (!node) return; if (self.options.unmarkParen) { self.options.unmarkParen(node); } else { node.style.fontWeight = ""; node.style.color = ""; } } if (!fromKey && self.highlighted) { unhighlight(self.highlighted[0]); unhighlight(self.highlighted[1]); } if (!window.select) return; // Clear the event property. if (this.parenEvent) this.parent.clearTimeout(this.parenEvent); this.parenEvent = null; // Extract a 'paren' from a piece of text. function paren(node) { if (node.currentText) { var match = node.currentText.match(/^[\s\u00a0]*([\(\)\[\]{}])[\s\u00a0]*$/); return match && match[1]; } } // Determine the direction a paren is facing. function forward(ch) { return /[\(\[\{]/.test(ch); } var ch, cursor = select.selectionTopNode(this.container, true); if (!cursor || !this.highlightAtCursor()) return; cursor = select.selectionTopNode(this.container, true); if (!(cursor && ((ch = paren(cursor)) || (cursor = cursor.nextSibling) && (ch = paren(cursor))))) return; // We only look for tokens with the same className. var className = cursor.className, dir = forward(ch), match = matching[ch]; // Since parts of the document might not have been properly // highlighted, and it is hard to know in advance which part we // have to scan, we just try, and when we find dirty nodes we // abort, parse them, and re-try. function tryFindMatch() { var stack = [], ch, ok = true;; for (var runner = cursor; runner; runner = dir ? runner.nextSibling : runner.previousSibling) { if (runner.className == className && isSpan(runner) && (ch = paren(runner))) { if (forward(ch) == dir) stack.push(ch); else if (!stack.length) ok = false; else if (stack.pop() != matching[ch]) ok = false; if (!stack.length) break; } else if (runner.dirty || !isSpan(runner) && !isBR(runner)) { return {node: runner, status: "dirty"}; } } return {node: runner, status: runner && ok}; } while (true) { var found = tryFindMatch(); if (found.status == "dirty") { this.highlight(found.node, endOfLine(found.node)); // Needed because in some corner cases a highlight does not // reach a node. found.node.dirty = false; continue; } else { highlight(cursor, found.status); highlight(found.node, found.status); if (fromKey) self.parent.setTimeout(function() {unhighlight(cursor); unhighlight(found.node);}, 500); else self.highlighted = [cursor, found.node]; if (jump && found.node) select.focusAfterNode(found.node.previousSibling, this.container); break; } } }, // Adjust the amount of whitespace at the start of the line that // the cursor is on so that it is indented properly. indentAtCursor: function(direction) { if (!this.container.firstChild) return; // The line has to have up-to-date lexical information, so we // highlight it first. if (!this.highlightAtCursor()) return; var cursor = select.selectionTopNode(this.container, false); // If we couldn't determine the place of the cursor, // there's nothing to indent. if (cursor === false) return; var lineStart = startOfLine(cursor); var whiteSpace = this.indentLineAfter(lineStart, direction); if (cursor == lineStart && whiteSpace) cursor = whiteSpace; // This means the indentation has probably messed up the cursor. if (cursor == whiteSpace) select.focusAfterNode(cursor, this.container); }, // Indent all lines whose start falls inside of the current // selection. indentRegion: function(start, end, direction) { var current = (start = startOfLine(start)), before = start && startOfLine(start.previousSibling); if (!isBR(end)) end = endOfLine(end, this.container); this.addDirtyNode(start); do { var next = endOfLine(current, this.container); if (current) this.highlight(before, next, true); this.indentLineAfter(current, direction); before = current; current = next; } while (current != end); select.setCursorPos(this.container, {node: start, offset: 0}, {node: end, offset: 0}); }, // Find the node that the cursor is in, mark it as dirty, and make // sure a highlight pass is scheduled. cursorActivity: function(safe) { // pagehide event hack above if (this.unloaded) { this.win.document.designMode = "off"; this.win.document.designMode = "on"; this.unloaded = false; } if (internetExplorer) { this.container.createTextRange().execCommand("unlink"); this.selectionSnapshot = select.getBookmark(this.container); } var activity = this.options.cursorActivity; if (!safe || activity) { var cursor = select.selectionTopNode(this.container, false); if (cursor === false || !this.container.firstChild) return; cursor = cursor || this.container.firstChild; if (activity) activity(cursor); if (!safe) { this.scheduleHighlight(); this.addDirtyNode(cursor); } } }, reparseBuffer: function() { forEach(this.container.childNodes, function(node) {node.dirty = true;}); if (this.container.firstChild) this.addDirtyNode(this.container.firstChild); }, // Add a node to the set of dirty nodes, if it isn't already in // there. addDirtyNode: function(node) { node = node || this.container.firstChild; if (!node) return; for (var i = 0; i < this.dirty.length; i++) if (this.dirty[i] == node) return; if (node.nodeType != 3) node.dirty = true; this.dirty.push(node); }, allClean: function() { return !this.dirty.length; }, // Cause a highlight pass to happen in options.passDelay // milliseconds. Clear the existing timeout, if one exists. This // way, the passes do not happen while the user is typing, and // should as unobtrusive as possible. scheduleHighlight: function() { // Timeouts are routed through the parent window, because on // some browsers designMode windows do not fire timeouts. var self = this; this.parent.clearTimeout(this.highlightTimeout); this.highlightTimeout = this.parent.setTimeout(function(){self.highlightDirty();}, this.options.passDelay); }, // Fetch one dirty node, and remove it from the dirty set. getDirtyNode: function() { while (this.dirty.length > 0) { var found = this.dirty.pop(); // IE8 sometimes throws an unexplainable 'invalid argument' // exception for found.parentNode try { // If the node has been coloured in the meantime, or is no // longer in the document, it should not be returned. while (found && found.parentNode != this.container) found = found.parentNode; if (found && (found.dirty || found.nodeType == 3)) return found; } catch (e) {} } return null; }, // Pick dirty nodes, and highlight them, until options.passTime // milliseconds have gone by. The highlight method will continue // to next lines as long as it finds dirty nodes. It returns // information about the place where it stopped. If there are // dirty nodes left after this function has spent all its lines, // it shedules another highlight to finish the job. highlightDirty: function(force) { // Prevent FF from raising an error when it is firing timeouts // on a page that's no longer loaded. if (!window.select) return; if (!this.options.readOnly) select.markSelection(this.win); var start, endTime = force ? null : time() + this.options.passTime; while ((time() < endTime || force) && (start = this.getDirtyNode())) { var result = this.highlight(start, endTime); if (result && result.node && result.dirty) this.addDirtyNode(result.node); } if (!this.options.readOnly) select.selectMarked(); if (start) this.scheduleHighlight(); return this.dirty.length == 0; }, // Creates a function that, when called through a timeout, will // continuously re-parse the document. documentScanner: function(passTime) { var self = this, pos = null; return function() { // FF timeout weirdness workaround. if (!window.select) return; // If the current node is no longer in the document... oh // well, we start over. if (pos && pos.parentNode != self.container) pos = null; select.markSelection(self.win); var result = self.highlight(pos, time() + passTime, true); select.selectMarked(); var newPos = result ? (result.node && result.node.nextSibling) : null; pos = (pos == newPos) ? null : newPos; self.delayScanning(); }; }, // Starts the continuous scanning process for this document after // a given interval. delayScanning: function() { if (this.scanner) { this.parent.clearTimeout(this.documentScan); this.documentScan = this.parent.setTimeout(this.scanner, this.options.continuousScanning); } }, // The function that does the actual highlighting/colouring (with // help from the parser and the DOM normalizer). Its interface is // rather overcomplicated, because it is used in different // situations: ensuring that a certain line is highlighted, or // highlighting up to X milliseconds starting from a certain // point. The 'from' argument gives the node at which it should // start. If this is null, it will start at the beginning of the // document. When a timestamp is given with the 'target' argument, // it will stop highlighting at that time. If this argument holds // a DOM node, it will highlight until it reaches that node. If at // any time it comes across two 'clean' lines (no dirty nodes), it // will stop, except when 'cleanLines' is true. maxBacktrack is // the maximum number of lines to backtrack to find an existing // parser instance. This is used to give up in situations where a // highlight would take too long and freeze the browser interface. highlight: function(from, target, cleanLines, maxBacktrack){ var container = this.container, self = this, active = this.options.activeTokens; var endTime = (typeof target == "number" ? target : null); if (!container.firstChild) return; // Backtrack to the first node before from that has a partial // parse stored. while (from && (!from.parserFromHere || from.dirty)) { if (maxBacktrack != null && isBR(from) && (--maxBacktrack) < 0) return false; from = from.previousSibling; } // If we are at the end of the document, do nothing. if (from && !from.nextSibling) return; // Check whether a part ( node) and the corresponding token // match. function correctPart(token, part){ return !part.reduced && part.currentText == token.value && part.className == token.style; } // Shorten the text associated with a part by chopping off // characters from the front. Note that only the currentText // property gets changed. For efficiency reasons, we leave the // nodeValue alone -- we set the reduced flag to indicate that // this part must be replaced. function shortenPart(part, minus){ part.currentText = part.currentText.substring(minus); part.reduced = true; } // Create a part corresponding to a given token. function tokenPart(token){ var part = makePartSpan(token.value, self.doc); part.className = token.style; return part; } function maybeTouch(node) { if (node) { var old = node.oldNextSibling; if (lineDirty || old === undefined || node.nextSibling != old) self.history.touch(node); node.oldNextSibling = node.nextSibling; } else { var old = self.container.oldFirstChild; if (lineDirty || old === undefined || self.container.firstChild != old) self.history.touch(null); self.container.oldFirstChild = self.container.firstChild; } } // Get the token stream. If from is null, we start with a new // parser from the start of the frame, otherwise a partial parse // is resumed. var traversal = traverseDOM(from ? from.nextSibling : container.firstChild), stream = stringStream(traversal), parsed = from ? from.parserFromHere(stream) : Editor.Parser.make(stream); function surroundedByBRs(node) { return (node.previousSibling == null || isBR(node.previousSibling)) && (node.nextSibling == null || isBR(node.nextSibling)); } // parts is an interface to make it possible to 'delay' fetching // the next DOM node until we are completely done with the one // before it. This is necessary because often the next node is // not yet available when we want to proceed past the current // one. var parts = { current: null, // Fetch current node. get: function(){ if (!this.current) this.current = traversal.nodes.shift(); return this.current; }, // Advance to the next part (do not fetch it yet). next: function(){ this.current = null; }, // Remove the current part from the DOM tree, and move to the // next. remove: function(){ container.removeChild(this.get()); this.current = null; }, // Advance to the next part that is not empty, discarding empty // parts. getNonEmpty: function(){ var part = this.get(); // Allow empty nodes when they are alone on a line, needed // for the FF cursor bug workaround (see select.js, // insertNewlineAtCursor). while (part && isSpan(part) && part.currentText == "") { // Leave empty nodes that are alone on a line alone in // Opera, since that browsers doesn't deal well with // having 2 BRs in a row. if (window.opera && surroundedByBRs(part)) { this.next(); part = this.get(); } else { var old = part; this.remove(); part = this.get(); // Adjust selection information, if any. See select.js for details. select.snapshotMove(old.firstChild, part && (part.firstChild || part), 0); } } return part; } }; var lineDirty = false, prevLineDirty = true, lineNodes = 0; // This forEach loops over the tokens from the parsed stream, and // at the same time uses the parts object to proceed through the // corresponding DOM nodes. forEach(parsed, function(token){ var part = parts.getNonEmpty(); if (token.value == "\n"){ // The idea of the two streams actually staying synchronized // is such a long shot that we explicitly check. if (!isBR(part)) throw "Parser out of sync. Expected BR."; if (part.dirty || !part.indentation) lineDirty = true; maybeTouch(from); from = part; // Every
gets a copy of the parser state and a lexical // context assigned to it. The first is used to be able to // later resume parsing from this point, the second is used // for indentation. part.parserFromHere = parsed.copy(); part.indentation = token.indentation; part.dirty = false; // If the target argument wasn't an integer, go at least // until that node. if (endTime == null && part == target) throw StopIteration; // A clean line with more than one node means we are done. // Throwing a StopIteration is the way to break out of a // MochiKit forEach loop. if ((endTime != null && time() >= endTime) || (!lineDirty && !prevLineDirty && lineNodes > 1 && !cleanLines)) throw StopIteration; prevLineDirty = lineDirty; lineDirty = false; lineNodes = 0; parts.next(); } else { if (!isSpan(part)) throw "Parser out of sync. Expected SPAN."; if (part.dirty) lineDirty = true; lineNodes++; // If the part matches the token, we can leave it alone. if (correctPart(token, part)){ part.dirty = false; parts.next(); } // Otherwise, we have to fix it. else { lineDirty = true; // Insert the correct part. var newPart = tokenPart(token); container.insertBefore(newPart, part); if (active) active(newPart, token, self); var tokensize = token.value.length; var offset = 0; // Eat up parts until the text for this token has been // removed, adjusting the stored selection info (see // select.js) in the process. while (tokensize > 0) { part = parts.get(); var partsize = part.currentText.length; select.snapshotReplaceNode(part.firstChild, newPart.firstChild, tokensize, offset); if (partsize > tokensize){ shortenPart(part, tokensize); tokensize = 0; } else { tokensize -= partsize; offset += partsize; parts.remove(); } } } } }); maybeTouch(from); webkitLastLineHack(this.container); // The function returns some status information that is used by // hightlightDirty to determine whether and where it has to // continue. return {node: parts.getNonEmpty(), dirty: lineDirty}; } }; return Editor; })(); addEventHandler(window, "load", function() { var CodeMirror = window.frameElement.CodeMirror; var e = CodeMirror.editor = new Editor(CodeMirror.options); this.parent.setTimeout(method(CodeMirror, "init"), 0); });