editor.js 62 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680
  1. /* The Editor object manages the content of the editable frame. It
  2. * catches events, colours nodes, and indents lines. This file also
  3. * holds some functions for transforming arbitrary DOM structures into
  4. * plain sequences of <span> and <br> elements
  5. */
  6. var internetExplorer = document.selection && window.ActiveXObject && /MSIE/.test(navigator.userAgent);
  7. var oldIE = internetExplorer && /MSIE\s+[4-8]\b/.test(navigator.userAgent);
  8. var webkit = /AppleWebKit/.test(navigator.userAgent);
  9. var safari = /Apple Computer, Inc/.test(navigator.vendor);
  10. var gecko = navigator.userAgent.match(/gecko\/(\d{8})/i);
  11. if (gecko) gecko = Number(gecko[1]);
  12. var mac = /Mac/.test(navigator.platform);
  13. var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1
  14. // TODO this is related to the backspace-at-end-of-line bug. Remove
  15. // this if Opera gets their act together, make the version check more
  16. // broad if they don't.
  17. var brokenOpera = window.opera && /Version\/10.[56]/.test(navigator.userAgent);
  18. // TODO remove this once WebKit 533 becomes less common.
  19. var slowWebkit = /AppleWebKit\/533/.test(navigator.userAgent);
  20. // Make sure a string does not contain two consecutive 'collapseable'
  21. // whitespace characters.
  22. function makeWhiteSpace(n) {
  23. var buffer = [], nb = true;
  24. for (; n > 0; n--) {
  25. buffer.push((nb || n == 1) ? nbsp : " ");
  26. nb ^= true;
  27. }
  28. return buffer.join("");
  29. }
  30. // Create a set of white-space characters that will not be collapsed
  31. // by the browser, but will not break text-wrapping either.
  32. function fixSpaces(string) {
  33. if (string.charAt(0) == " ") string = nbsp + string.slice(1);
  34. return string.replace(/\t/g, function() {return makeWhiteSpace(indentUnit);})
  35. .replace(/[ \u00a0]{2,}/g, function(s) {return makeWhiteSpace(s.length);});
  36. }
  37. function cleanText(text) {
  38. return text.replace(/\u00a0/g, " ").replace(/\u200b/g, "");
  39. }
  40. // Create a SPAN node with the expected properties for document part
  41. // spans.
  42. function makePartSpan(value) {
  43. var text = value;
  44. if (value.nodeType == 3) text = value.nodeValue;
  45. else value = document.createTextNode(text);
  46. var span = document.createElement("span");
  47. span.isPart = true;
  48. span.appendChild(value);
  49. span.currentText = text;
  50. return span;
  51. }
  52. function alwaysZero() {return 0;}
  53. // On webkit, when the last BR of the document does not have text
  54. // behind it, the cursor can not be put on the line after it. This
  55. // makes pressing enter at the end of the document occasionally do
  56. // nothing (or at least seem to do nothing). To work around it, this
  57. // function makes sure the document ends with a span containing a
  58. // zero-width space character. The traverseDOM iterator filters such
  59. // character out again, so that the parsers won't see them. This
  60. // function is called from a few strategic places to make sure the
  61. // zwsp is restored after the highlighting process eats it.
  62. var webkitLastLineHack = webkit ?
  63. function(container) {
  64. var last = container.lastChild;
  65. if (!last || !last.hackBR) {
  66. var br = document.createElement("br");
  67. br.hackBR = true;
  68. container.appendChild(br);
  69. }
  70. } : function() {};
  71. function asEditorLines(string) {
  72. var tab = makeWhiteSpace(indentUnit);
  73. return map(string.replace(/\t/g, tab).replace(/\u00a0/g, " ").replace(/\r\n?/g, "\n").split("\n"), fixSpaces);
  74. }
  75. var Editor = (function(){
  76. // The HTML elements whose content should be suffixed by a newline
  77. // when converting them to flat text.
  78. var newlineElements = {"P": true, "DIV": true, "LI": true};
  79. // Helper function for traverseDOM. Flattens an arbitrary DOM node
  80. // into an array of textnodes and <br> tags.
  81. function simplifyDOM(root, atEnd) {
  82. var result = [];
  83. var leaving = true;
  84. function simplifyNode(node, top) {
  85. if (node.nodeType == 3) {
  86. var text = node.nodeValue = fixSpaces(node.nodeValue.replace(/[\r\u200b]/g, "").replace(/\n/g, " "));
  87. if (text.length) leaving = false;
  88. result.push(node);
  89. }
  90. else if (isBR(node) && node.childNodes.length == 0) {
  91. leaving = true;
  92. result.push(node);
  93. }
  94. else {
  95. for (var n = node.firstChild; n; n = n.nextSibling) simplifyNode(n);
  96. if (!leaving && newlineElements.hasOwnProperty(node.nodeName.toUpperCase())) {
  97. leaving = true;
  98. if (!atEnd || !top)
  99. result.push(document.createElement("br"));
  100. }
  101. }
  102. }
  103. simplifyNode(root, true);
  104. return result;
  105. }
  106. // Creates a MochiKit-style iterator that goes over a series of DOM
  107. // nodes. The values it yields are strings, the textual content of
  108. // the nodes. It makes sure that all nodes up to and including the
  109. // one whose text is being yielded have been 'normalized' to be just
  110. // <span> and <br> elements.
  111. function traverseDOM(start){
  112. var nodeQueue = [];
  113. // Create a function that can be used to insert nodes after the
  114. // one given as argument.
  115. function pointAt(node){
  116. var parent = node.parentNode;
  117. var next = node.nextSibling;
  118. return function(newnode) {
  119. parent.insertBefore(newnode, next);
  120. };
  121. }
  122. var point = null;
  123. // This an Opera-specific hack -- always insert an empty span
  124. // between two BRs, because Opera's cursor code gets terribly
  125. // confused when the cursor is between two BRs.
  126. var afterBR = true;
  127. // Insert a normalized node at the current point. If it is a text
  128. // node, wrap it in a <span>, and give that span a currentText
  129. // property -- this is used to cache the nodeValue, because
  130. // directly accessing nodeValue is horribly slow on some browsers.
  131. // The dirty property is used by the highlighter to determine
  132. // which parts of the document have to be re-highlighted.
  133. function insertPart(part){
  134. var text = "\n";
  135. if (part.nodeType == 3) {
  136. select.snapshotChanged();
  137. part = makePartSpan(part);
  138. text = part.currentText;
  139. afterBR = false;
  140. }
  141. else {
  142. if (afterBR && window.opera)
  143. point(makePartSpan(""));
  144. afterBR = true;
  145. }
  146. part.dirty = true;
  147. nodeQueue.push(part);
  148. point(part);
  149. return text;
  150. }
  151. // Extract the text and newlines from a DOM node, insert them into
  152. // the document, and return the textual content. Used to replace
  153. // non-normalized nodes.
  154. function writeNode(node, end) {
  155. var simplified = simplifyDOM(node, end);
  156. for (var i = 0; i < simplified.length; i++)
  157. simplified[i] = insertPart(simplified[i]);
  158. return simplified.join("");
  159. }
  160. // Check whether a node is a normalized <span> element.
  161. function partNode(node){
  162. if (node.isPart && node.childNodes.length == 1 && node.firstChild.nodeType == 3) {
  163. var text = node.firstChild.nodeValue;
  164. node.dirty = node.dirty || text != node.currentText;
  165. node.currentText = text;
  166. return !/[\n\t\r]/.test(node.currentText);
  167. }
  168. return false;
  169. }
  170. // Advance to next node, return string for current node.
  171. function next() {
  172. if (!start) throw StopIteration;
  173. var node = start;
  174. start = node.nextSibling;
  175. if (partNode(node)){
  176. nodeQueue.push(node);
  177. afterBR = false;
  178. return node.currentText;
  179. }
  180. else if (isBR(node)) {
  181. if (afterBR && window.opera)
  182. node.parentNode.insertBefore(makePartSpan(""), node);
  183. nodeQueue.push(node);
  184. afterBR = true;
  185. return "\n";
  186. }
  187. else {
  188. var end = !node.nextSibling;
  189. point = pointAt(node);
  190. removeElement(node);
  191. return writeNode(node, end);
  192. }
  193. }
  194. // MochiKit iterators are objects with a next function that
  195. // returns the next value or throws StopIteration when there are
  196. // no more values.
  197. return {next: next, nodes: nodeQueue};
  198. }
  199. // Determine the text size of a processed node.
  200. function nodeSize(node) {
  201. return isBR(node) ? 1 : node.currentText.length;
  202. }
  203. // Search backwards through the top-level nodes until the next BR or
  204. // the start of the frame.
  205. function startOfLine(node) {
  206. while (node && !isBR(node)) node = node.previousSibling;
  207. return node;
  208. }
  209. function endOfLine(node, container) {
  210. if (!node) node = container.firstChild;
  211. else if (isBR(node)) node = node.nextSibling;
  212. while (node && !isBR(node)) node = node.nextSibling;
  213. return node;
  214. }
  215. function time() {return new Date().getTime();}
  216. // Client interface for searching the content of the editor. Create
  217. // these by calling CodeMirror.getSearchCursor. To use, call
  218. // findNext on the resulting object -- this returns a boolean
  219. // indicating whether anything was found, and can be called again to
  220. // skip to the next find. Use the select and replace methods to
  221. // actually do something with the found locations.
  222. function SearchCursor(editor, pattern, from, caseFold) {
  223. this.editor = editor;
  224. this.history = editor.history;
  225. this.history.commit();
  226. this.valid = !!pattern;
  227. this.atOccurrence = false;
  228. if (caseFold == undefined) caseFold = typeof pattern == "string" && pattern == pattern.toLowerCase();
  229. function getText(node){
  230. var line = cleanText(editor.history.textAfter(node));
  231. return (caseFold ? line.toLowerCase() : line);
  232. }
  233. var topPos = {node: null, offset: 0}, self = this;
  234. if (from && typeof from == "object" && typeof from.character == "number") {
  235. editor.checkLine(from.line);
  236. var pos = {node: from.line, offset: from.character};
  237. this.pos = {from: pos, to: pos};
  238. }
  239. else if (from) {
  240. this.pos = {from: select.cursorPos(editor.container, true) || topPos,
  241. to: select.cursorPos(editor.container, false) || topPos};
  242. }
  243. else {
  244. this.pos = {from: topPos, to: topPos};
  245. }
  246. if (typeof pattern != "string") { // Regexp match
  247. this.matches = function(reverse, node, offset) {
  248. if (reverse) {
  249. var line = getText(node).slice(0, offset), match = line.match(pattern), start = 0;
  250. while (match) {
  251. var ind = line.indexOf(match[0]);
  252. start += ind;
  253. line = line.slice(ind + 1);
  254. var newmatch = line.match(pattern);
  255. if (newmatch) match = newmatch;
  256. else break;
  257. }
  258. }
  259. else {
  260. var line = getText(node).slice(offset), match = line.match(pattern),
  261. start = match && offset + line.indexOf(match[0]);
  262. }
  263. if (match) {
  264. self.currentMatch = match;
  265. return {from: {node: node, offset: start},
  266. to: {node: node, offset: start + match[0].length}};
  267. }
  268. };
  269. return;
  270. }
  271. if (caseFold) pattern = pattern.toLowerCase();
  272. // Create a matcher function based on the kind of string we have.
  273. var target = pattern.split("\n");
  274. this.matches = (target.length == 1) ?
  275. // For one-line strings, searching can be done simply by calling
  276. // indexOf or lastIndexOf on the current line.
  277. function(reverse, node, offset) {
  278. var line = getText(node), len = pattern.length, match;
  279. if (reverse ? (offset >= len && (match = line.lastIndexOf(pattern, offset - len)) != -1)
  280. : (match = line.indexOf(pattern, offset)) != -1)
  281. return {from: {node: node, offset: match},
  282. to: {node: node, offset: match + len}};
  283. } :
  284. // Multi-line strings require internal iteration over lines, and
  285. // some clunky checks to make sure the first match ends at the
  286. // end of the line and the last match starts at the start.
  287. function(reverse, node, offset) {
  288. var idx = (reverse ? target.length - 1 : 0), match = target[idx], line = getText(node);
  289. var offsetA = (reverse ? line.indexOf(match) + match.length : line.lastIndexOf(match));
  290. if (reverse ? offsetA >= offset || offsetA != match.length
  291. : offsetA <= offset || offsetA != line.length - match.length)
  292. return;
  293. var pos = node;
  294. while (true) {
  295. if (reverse && !pos) return;
  296. pos = (reverse ? this.history.nodeBefore(pos) : this.history.nodeAfter(pos) );
  297. if (!reverse && !pos) return;
  298. line = getText(pos);
  299. match = target[reverse ? --idx : ++idx];
  300. if (idx > 0 && idx < target.length - 1) {
  301. if (line != match) return;
  302. else continue;
  303. }
  304. var offsetB = (reverse ? line.lastIndexOf(match) : line.indexOf(match) + match.length);
  305. if (reverse ? offsetB != line.length - match.length : offsetB != match.length)
  306. return;
  307. return {from: {node: reverse ? pos : node, offset: reverse ? offsetB : offsetA},
  308. to: {node: reverse ? node : pos, offset: reverse ? offsetA : offsetB}};
  309. }
  310. };
  311. }
  312. SearchCursor.prototype = {
  313. findNext: function() {return this.find(false);},
  314. findPrevious: function() {return this.find(true);},
  315. find: function(reverse) {
  316. if (!this.valid) return false;
  317. var self = this, pos = reverse ? this.pos.from : this.pos.to,
  318. node = pos.node, offset = pos.offset;
  319. // Reset the cursor if the current line is no longer in the DOM tree.
  320. if (node && !node.parentNode) {
  321. node = null; offset = 0;
  322. }
  323. function savePosAndFail() {
  324. var pos = {node: node, offset: offset};
  325. self.pos = {from: pos, to: pos};
  326. self.atOccurrence = false;
  327. return false;
  328. }
  329. while (true) {
  330. if (this.pos = this.matches(reverse, node, offset)) {
  331. this.atOccurrence = true;
  332. return true;
  333. }
  334. if (reverse) {
  335. if (!node) return savePosAndFail();
  336. node = this.history.nodeBefore(node);
  337. offset = this.history.textAfter(node).length;
  338. }
  339. else {
  340. var next = this.history.nodeAfter(node);
  341. if (!next) {
  342. offset = this.history.textAfter(node).length;
  343. return savePosAndFail();
  344. }
  345. node = next;
  346. offset = 0;
  347. }
  348. }
  349. },
  350. select: function() {
  351. if (this.atOccurrence) {
  352. select.setCursorPos(this.editor.container, this.pos.from, this.pos.to);
  353. select.scrollToCursor(this.editor.container);
  354. }
  355. },
  356. replace: function(string) {
  357. if (this.atOccurrence) {
  358. var fragments = this.currentMatch;
  359. if (fragments)
  360. string = string.replace(/\\(\d)/, function(m, i){return fragments[i];});
  361. var end = this.editor.replaceRange(this.pos.from, this.pos.to, string);
  362. this.pos.to = end;
  363. this.atOccurrence = false;
  364. }
  365. },
  366. position: function() {
  367. if (this.atOccurrence)
  368. return {line: this.pos.from.node, character: this.pos.from.offset};
  369. }
  370. };
  371. // The Editor object is the main inside-the-iframe interface.
  372. function Editor(options) {
  373. this.options = options;
  374. window.indentUnit = options.indentUnit;
  375. var container = this.container = document.body;
  376. this.history = new UndoHistory(container, options.undoDepth, options.undoDelay, this);
  377. var self = this;
  378. if (!Editor.Parser)
  379. throw "No parser loaded.";
  380. if (options.parserConfig && Editor.Parser.configure)
  381. Editor.Parser.configure(options.parserConfig);
  382. if (!options.readOnly && !internetExplorer)
  383. select.setCursorPos(container, {node: null, offset: 0});
  384. this.dirty = [];
  385. this.importCode(options.content || "");
  386. this.history.onChange = options.onChange;
  387. if (!options.readOnly) {
  388. if (options.continuousScanning !== false) {
  389. this.scanner = this.documentScanner(options.passTime);
  390. this.delayScanning();
  391. }
  392. function setEditable() {
  393. if (document.body.contentEditable != undefined && internetExplorer){
  394. document.body.contentEditable = "true";
  395. }
  396. else{
  397. document.designMode = "on";
  398. }
  399. if (internetExplorer && options.height != "dynamic"){
  400. if(window.frameElement.clientHeight==0)//处于隐藏状态下的textarea
  401. document.body.style.minHeight = (options.height.replace(/px$/g, "")-15)+"px";
  402. else
  403. document.body.style.minHeight = (window.frameElement.clientHeight - 2 * document.body.offsetTop - 5) + "px";
  404. }
  405. document.documentElement.style.borderWidth = "0";
  406. if (!options.textWrapping)
  407. container.style.whiteSpace = "nowrap";
  408. }
  409. // If setting the frame editable fails, try again when the user
  410. // focus it (happens when the frame is not visible on
  411. // initialisation, in Firefox).
  412. try {
  413. setEditable();
  414. }
  415. catch(e) {
  416. var focusEvent = addEventHandler(document, "focus", function() {
  417. focusEvent();
  418. setEditable();
  419. }, true);
  420. }
  421. addEventHandler(document, "keydown", method(this, "keyDown"));
  422. addEventHandler(document, "keypress", method(this, "keyPress"));
  423. addEventHandler(document, "keyup", method(this, "keyUp"));
  424. function cursorActivity() {self.cursorActivity(false);}
  425. addEventHandler(internetExplorer ? document.body : window, "mouseup", cursorActivity);
  426. addEventHandler(document.body, "cut", cursorActivity);
  427. // workaround for a gecko bug [?] where going forward and then
  428. // back again breaks designmode (no more cursor)
  429. if (gecko)
  430. addEventHandler(window, "pagehide", function(){self.unloaded = true;});
  431. addEventHandler(document.body, "paste", function(event) {
  432. cursorActivity();
  433. var text = null;
  434. try {
  435. var clipboardData = event.clipboardData || window.clipboardData;
  436. if (clipboardData) text = clipboardData.getData('Text');
  437. }
  438. catch(e) {}
  439. if (text !== null) {
  440. event.stop();
  441. self.replaceSelection(text);
  442. select.scrollToCursor(self.container);
  443. }
  444. });
  445. if (this.options.autoMatchParens)
  446. addEventHandler(document.body, "click", method(this, "scheduleParenHighlight"));
  447. if(this.options.onFocus){
  448. if (internetExplorer || isChrome)
  449. addEventHandler(document.body, "focus", this.options.onFocus);
  450. else
  451. addEventHandler(document, "focus", this.options.onFocus);
  452. }
  453. }
  454. else if (!options.textWrapping) {
  455. container.style.whiteSpace = "nowrap";
  456. }
  457. }
  458. function isSafeKey(code) {
  459. return (code >= 16 && code <= 18) || // shift, control, alt
  460. (code >= 33 && code <= 40); // arrows, home, end
  461. }
  462. Editor.prototype = {
  463. setCursorPos:function(start,end){
  464. select.setCursorPos(this.container, start, end);
  465. },
  466. // Import a piece of code into the editor.
  467. importCode: function(code) {
  468. var lines = asEditorLines(code), chunk = 1000;
  469. if (!this.options.incrementalLoading || lines.length < chunk) {
  470. this.history.push(null, null, lines);
  471. this.history.reset();
  472. }
  473. else {
  474. var cur = 0, self = this;
  475. function addChunk() {
  476. var chunklines = lines.slice(cur, cur + chunk);
  477. chunklines.push("");
  478. self.history.push(self.history.nodeBefore(null), null, chunklines);
  479. self.history.reset();
  480. cur += chunk;
  481. if (cur < lines.length)
  482. parent.setTimeout(addChunk, 1000);
  483. }
  484. addChunk();
  485. }
  486. },
  487. // Extract the code from the editor.
  488. getCode: function() {
  489. if (!this.container.firstChild)
  490. return "";
  491. var accum = [];
  492. select.markSelection();
  493. forEach(traverseDOM(this.container.firstChild), method(accum, "push"));
  494. select.selectMarked();
  495. // On webkit, don't count last (empty) line if the webkitLastLineHack BR is present
  496. if (webkit && this.container.lastChild.hackBR)
  497. accum.pop();
  498. webkitLastLineHack(this.container);
  499. return cleanText(accum.join(""));
  500. },
  501. checkLine: function(node) {
  502. if (node === false || !(node == null || node.parentNode == this.container || node.hackBR))
  503. throw parent.CodeMirror.InvalidLineHandle;
  504. },
  505. cursorPosition: function(start) {
  506. if (start == null) start = true;
  507. var pos = select.cursorPos(this.container, start);
  508. if (pos) return {line: pos.node, character: pos.offset};
  509. else return {line: null, character: 0};
  510. },
  511. firstLine: function() {
  512. return null;
  513. },
  514. lastLine: function() {
  515. var last = this.container.lastChild;
  516. if (last) last = startOfLine(last);
  517. if (last && last.hackBR) last = startOfLine(last.previousSibling);
  518. return last;
  519. },
  520. nextLine: function(line) {
  521. this.checkLine(line);
  522. var end = endOfLine(line, this.container);
  523. if (!end || end.hackBR) return false;
  524. else return end;
  525. },
  526. prevLine: function(line) {
  527. this.checkLine(line);
  528. if (line == null) return false;
  529. return startOfLine(line.previousSibling);
  530. },
  531. visibleLineCount: function() {
  532. var line = this.container.firstChild;
  533. while (line && isBR(line)) line = line.nextSibling; // BR heights are unreliable
  534. if (!line) return false;
  535. var innerHeight = (window.innerHeight
  536. || document.documentElement.clientHeight
  537. || document.body.clientHeight);
  538. return Math.floor(innerHeight / line.offsetHeight);
  539. },
  540. selectLines: function(startLine, startOffset, endLine, endOffset) {
  541. this.checkLine(startLine);
  542. var start = {node: startLine, offset: startOffset}, end = null;
  543. if (endOffset !== undefined) {
  544. this.checkLine(endLine);
  545. end = {node: endLine, offset: endOffset};
  546. }
  547. select.setCursorPos(this.container, start, end);
  548. select.scrollToCursor(this.container);
  549. },
  550. lineContent: function(line) {
  551. var accum = [];
  552. for (line = line ? line.nextSibling : this.container.firstChild;
  553. line && !isBR(line); line = line.nextSibling)
  554. accum.push(nodeText(line));
  555. return cleanText(accum.join(""));
  556. },
  557. setLineContent: function(line, content) {
  558. this.history.commit();
  559. this.replaceRange({node: line, offset: 0},
  560. {node: line, offset: this.history.textAfter(line).length},
  561. content);
  562. this.addDirtyNode(line);
  563. this.scheduleHighlight();
  564. },
  565. removeLine: function(line) {
  566. var node = line ? line.nextSibling : this.container.firstChild;
  567. while (node) {
  568. var next = node.nextSibling;
  569. removeElement(node);
  570. if (isBR(node)) break;
  571. node = next;
  572. }
  573. this.addDirtyNode(line);
  574. this.scheduleHighlight();
  575. },
  576. insertIntoLine: function(line, position, content) {
  577. var before = null;
  578. if (position == "end") {
  579. before = endOfLine(line, this.container);
  580. }
  581. else {
  582. for (var cur = line ? line.nextSibling : this.container.firstChild; cur; cur = cur.nextSibling) {
  583. if (position == 0) {
  584. before = cur;
  585. break;
  586. }
  587. var text = nodeText(cur);
  588. if (text.length > position) {
  589. before = cur.nextSibling;
  590. content = text.slice(0, position) + content + text.slice(position);
  591. removeElement(cur);
  592. break;
  593. }
  594. position -= text.length;
  595. }
  596. }
  597. var lines = asEditorLines(content);
  598. for (var i = 0; i < lines.length; i++) {
  599. if (i > 0) this.container.insertBefore(document.createElement("BR"), before);
  600. this.container.insertBefore(makePartSpan(lines[i]), before);
  601. }
  602. this.addDirtyNode(line);
  603. this.scheduleHighlight();
  604. },
  605. // Retrieve the selected text.
  606. selectedText: function() {
  607. var h = this.history;
  608. h.commit();
  609. var start = select.cursorPos(this.container, true),
  610. end = select.cursorPos(this.container, false);
  611. if (!start || !end) return "";
  612. if (start.node == end.node)
  613. return h.textAfter(start.node).slice(start.offset, end.offset);
  614. var text = [h.textAfter(start.node).slice(start.offset)];
  615. for (var pos = h.nodeAfter(start.node); pos != end.node; pos = h.nodeAfter(pos))
  616. text.push(h.textAfter(pos));
  617. text.push(h.textAfter(end.node).slice(0, end.offset));
  618. return cleanText(text.join("\n"));
  619. },
  620. // Replace the selection with another piece of text.
  621. replaceSelection: function(text) {
  622. this.history.commit();
  623. var start = select.cursorPos(this.container, true),
  624. end = select.cursorPos(this.container, false);
  625. if (!start || !end) return;
  626. end = this.replaceRange(start, end, text);
  627. select.setCursorPos(this.container, end);
  628. webkitLastLineHack(this.container);
  629. },
  630. cursorCoords: function(start, internal) {
  631. var sel = select.cursorPos(this.container, start);
  632. if (!sel) return null;
  633. var off = sel.offset, node = sel.node, self = this;
  634. function measureFromNode(node, xOffset) {
  635. var y = -(document.body.scrollTop || document.documentElement.scrollTop || 0),
  636. x = -(document.body.scrollLeft || document.documentElement.scrollLeft || 0) + xOffset;
  637. forEach([node, internal ? null : window.frameElement], function(n) {
  638. while (n) {x += n.offsetLeft; y += n.offsetTop;n = n.offsetParent;}
  639. });
  640. return {x: x, y: y, yBot: y + node.offsetHeight};
  641. }
  642. function withTempNode(text, f) {
  643. var node = document.createElement("SPAN");
  644. node.appendChild(document.createTextNode(text));
  645. try {return f(node);}
  646. finally {if (node.parentNode) node.parentNode.removeChild(node);}
  647. }
  648. while (off) {
  649. node = node ? node.nextSibling : this.container.firstChild;
  650. var txt = nodeText(node);
  651. if (off < txt.length)
  652. return withTempNode(txt.substr(0, off), function(tmp) {
  653. tmp.style.position = "absolute"; tmp.style.visibility = "hidden";
  654. tmp.className = node.className;
  655. self.container.appendChild(tmp);
  656. return measureFromNode(node, tmp.offsetWidth);
  657. });
  658. off -= txt.length;
  659. }
  660. if (node && isSpan(node))
  661. return measureFromNode(node, node.offsetWidth);
  662. else if (node && node.nextSibling && isSpan(node.nextSibling))
  663. return measureFromNode(node.nextSibling, 0);
  664. else
  665. return withTempNode("\u200b", function(tmp) {
  666. if (node) node.parentNode.insertBefore(tmp, node.nextSibling);
  667. else self.container.insertBefore(tmp, self.container.firstChild);
  668. return measureFromNode(tmp, 0);
  669. });
  670. },
  671. reroutePasteEvent: function() {
  672. if (this.capturingPaste || window.opera || (gecko && gecko >= 20101026)) return;
  673. this.capturingPaste = true;
  674. var te = window.frameElement.CodeMirror.textareaHack;
  675. var coords = this.cursorCoords(true, true);
  676. te.style.top = coords.y + "px";
  677. if (oldIE) {
  678. var snapshot = select.getBookmark(this.container);
  679. if (snapshot) this.selectionSnapshot = snapshot;
  680. }
  681. parent.focus();
  682. te.value = "";
  683. te.focus();
  684. var self = this;
  685. parent.setTimeout(function() {
  686. self.capturingPaste = false;
  687. window.focus();
  688. if (self.selectionSnapshot) // IE hack
  689. window.select.setBookmark(self.container, self.selectionSnapshot);
  690. var text = te.value;
  691. if (text) {
  692. self.replaceSelection(text);
  693. select.scrollToCursor(self.container);
  694. }
  695. }, 10);
  696. },
  697. replaceRange: function(from, to, text) {
  698. var lines = asEditorLines(text);
  699. lines[0] = this.history.textAfter(from.node).slice(0, from.offset) + lines[0];
  700. var lastLine = lines[lines.length - 1];
  701. lines[lines.length - 1] = lastLine + this.history.textAfter(to.node).slice(to.offset);
  702. var end = this.history.nodeAfter(to.node);
  703. this.history.push(from.node, end, lines);
  704. return {node: this.history.nodeBefore(end),
  705. offset: lastLine.length};
  706. },
  707. getSearchCursor: function(string, fromCursor, caseFold) {
  708. return new SearchCursor(this, string, fromCursor, caseFold);
  709. },
  710. // Re-indent the whole buffer
  711. reindent: function() {
  712. if (this.container.firstChild)
  713. this.indentRegion(null, this.container.lastChild);
  714. },
  715. reindentSelection: function(direction) {
  716. if (!select.somethingSelected()) {
  717. this.indentAtCursor(direction);
  718. }
  719. else {
  720. var start = select.selectionTopNode(this.container, true),
  721. end = select.selectionTopNode(this.container, false);
  722. if (start === false || end === false) return;
  723. this.indentRegion(start, end, direction, true);
  724. }
  725. },
  726. grabKeys: function(eventHandler, filter) {
  727. this.frozen = eventHandler;
  728. this.keyFilter = filter;
  729. },
  730. ungrabKeys: function() {
  731. this.frozen = "leave";
  732. },
  733. setParser: function(name, parserConfig) {
  734. Editor.Parser = window[name];
  735. parserConfig = parserConfig || this.options.parserConfig;
  736. if (parserConfig && Editor.Parser.configure)
  737. Editor.Parser.configure(parserConfig);
  738. if (this.container.firstChild) {
  739. forEach(this.container.childNodes, function(n) {
  740. if (n.nodeType != 3) n.dirty = true;
  741. });
  742. this.addDirtyNode(this.firstChild);
  743. this.scheduleHighlight();
  744. }
  745. },
  746. // Intercept enter and tab, and assign their new functions.
  747. keyDown: function(event) {
  748. if (this.frozen == "leave") {this.frozen = null; this.keyFilter = null;}
  749. if (this.frozen && (!this.keyFilter || this.keyFilter(event.keyCode, event))) {
  750. event.stop();
  751. this.frozen(event);
  752. return;
  753. }
  754. var code = event.keyCode;
  755. // Don't scan when the user is typing.
  756. this.delayScanning();
  757. // Schedule a paren-highlight event, if configured.
  758. if (this.options.autoMatchParens)
  759. this.scheduleParenHighlight();
  760. // The various checks for !altKey are there because AltGr sets both
  761. // ctrlKey and altKey to true, and should not be recognised as
  762. // Control.
  763. if (code == 13) { // enter
  764. if (event.ctrlKey && !event.altKey) {
  765. this.reparseBuffer();
  766. }
  767. else {
  768. select.insertNewlineAtCursor();
  769. var mode = this.options.enterMode;
  770. if (mode != "flat") this.indentAtCursor(mode == "keep" ? "keep" : undefined);
  771. select.scrollToCursor(this.container);
  772. }
  773. event.stop();
  774. }
  775. else if (code == 9 && this.options.tabMode != "default" && !event.ctrlKey) { // tab
  776. this.handleTab(!event.shiftKey);
  777. event.stop();
  778. }
  779. else if (code == 32 && event.shiftKey && this.options.tabMode == "default") { // space
  780. this.handleTab(true);
  781. event.stop();
  782. }
  783. else if (code == 36 && !event.shiftKey && !event.ctrlKey) { // home
  784. if (this.home()) event.stop();
  785. }
  786. else if (code == 35 && !event.shiftKey && !event.ctrlKey) { // end
  787. if (this.end()) event.stop();
  788. }
  789. // Only in Firefox is the default behavior for PgUp/PgDn correct.
  790. else if (code == 33 && !event.shiftKey && !event.ctrlKey && !gecko) { // PgUp
  791. if (this.pageUp()) event.stop();
  792. }
  793. else if (code == 34 && !event.shiftKey && !event.ctrlKey && !gecko) { // PgDn
  794. if (this.pageDown()) event.stop();
  795. }
  796. else if ((code == 219 || code == 221) && event.ctrlKey && !event.altKey) { // [, ]
  797. this.highlightParens(event.shiftKey, true);
  798. event.stop();
  799. }
  800. else if (event.metaKey && !event.shiftKey && (code == 37 || code == 39)) { // Meta-left/right
  801. var cursor = select.selectionTopNode(this.container);
  802. if (cursor === false || !this.container.firstChild) return;
  803. if (code == 37) select.focusAfterNode(startOfLine(cursor), this.container);
  804. else {
  805. var end = endOfLine(cursor, this.container);
  806. select.focusAfterNode(end ? end.previousSibling : this.container.lastChild, this.container);
  807. }
  808. event.stop();
  809. }
  810. else if ((event.ctrlKey || event.metaKey) && !event.altKey) {
  811. if ((event.shiftKey && code == 90) || code == 89) { // shift-Z, Y
  812. select.scrollToNode(this.history.redo());
  813. event.stop();
  814. }
  815. else if (code == 90 || (safari && code == 8)) { // Z, backspace
  816. select.scrollToNode(this.history.undo());
  817. event.stop();
  818. }
  819. else if (code == 83 && this.options.saveFunction) { // S
  820. this.options.saveFunction();
  821. event.stop();
  822. }
  823. else if (code == 86 && !mac) { // V
  824. this.reroutePasteEvent();
  825. }
  826. }
  827. },
  828. // Check for characters that should re-indent the current line,
  829. // and prevent Opera from handling enter and tab anyway.
  830. keyPress: function(event) {
  831. var electric = this.options.electricChars && Editor.Parser.electricChars, self = this;
  832. // Hack for Opera, and Firefox on OS X, in which stopping a
  833. // keydown event does not prevent the associated keypress event
  834. // from happening, so we have to cancel enter and tab again
  835. // here.
  836. if ((this.frozen && (!this.keyFilter || this.keyFilter(event.keyCode || event.code, event))) ||
  837. event.code == 13 || (event.code == 9 && this.options.tabMode != "default") ||
  838. (event.code == 32 && event.shiftKey && this.options.tabMode == "default"))
  839. event.stop();
  840. else if (mac && (event.ctrlKey || event.metaKey) && event.character == "v") {
  841. this.reroutePasteEvent();
  842. }
  843. else if (electric && electric.indexOf(event.character) != -1)
  844. parent.setTimeout(function(){self.indentAtCursor(null);}, 0);
  845. // Work around a bug where pressing backspace at the end of a
  846. // line, or delete at the start, often causes the cursor to jump
  847. // to the start of the line in Opera 10.60.
  848. else if (brokenOpera) {
  849. if (event.code == 8) { // backspace
  850. var sel = select.selectionTopNode(this.container), self = this,
  851. next = sel ? sel.nextSibling : this.container.firstChild;
  852. if (sel !== false && next && isBR(next))
  853. parent.setTimeout(function(){
  854. if (select.selectionTopNode(self.container) == next)
  855. select.focusAfterNode(next.previousSibling, self.container);
  856. }, 20);
  857. }
  858. else if (event.code == 46) { // delete
  859. var sel = select.selectionTopNode(this.container), self = this;
  860. if (sel && isBR(sel)) {
  861. parent.setTimeout(function(){
  862. if (select.selectionTopNode(self.container) != sel)
  863. select.focusAfterNode(sel, self.container);
  864. }, 20);
  865. }
  866. }
  867. }
  868. // In 533.* WebKit versions, when the document is big, typing
  869. // something at the end of a line causes the browser to do some
  870. // kind of stupid heavy operation, creating delays of several
  871. // seconds before the typed characters appear. This very crude
  872. // hack inserts a temporary zero-width space after the cursor to
  873. // make it not be at the end of the line.
  874. else if (slowWebkit) {
  875. var sel = select.selectionTopNode(this.container),
  876. next = sel ? sel.nextSibling : this.container.firstChild;
  877. // Doesn't work on empty lines, for some reason those always
  878. // trigger the delay.
  879. if (sel && next && isBR(next) && !isBR(sel)) {
  880. var cheat = document.createTextNode("\u200b");
  881. this.container.insertBefore(cheat, next);
  882. parent.setTimeout(function() {
  883. if (cheat.nodeValue == "\u200b") removeElement(cheat);
  884. else cheat.nodeValue = cheat.nodeValue.replace("\u200b", "");
  885. }, 20);
  886. }
  887. }
  888. // Magic incantation that works abound a webkit bug when you
  889. // can't type on a blank line following a line that's wider than
  890. // the window.
  891. if (webkit && !this.options.textWrapping)
  892. setTimeout(function () {
  893. var node = select.selectionTopNode(self.container, true);
  894. if (node && node.nodeType == 3 && node.previousSibling && isBR(node.previousSibling)
  895. && node.nextSibling && isBR(node.nextSibling))
  896. node.parentNode.replaceChild(document.createElement("BR"), node.previousSibling);
  897. }, 50);
  898. },
  899. // Mark the node at the cursor dirty when a non-safe key is
  900. // released.
  901. keyUp: function(event) {
  902. this.cursorActivity(isSafeKey(event.keyCode));
  903. },
  904. // Indent the line following a given <br>, or null for the first
  905. // line. If given a <br> element, this must have been highlighted
  906. // so that it has an indentation method. Returns the whitespace
  907. // element that has been modified or created (if any).
  908. indentLineAfter: function(start, direction) {
  909. function whiteSpaceAfter(node) {
  910. var ws = node ? node.nextSibling : self.container.firstChild;
  911. if (!ws || !hasClass(ws, "whitespace")) return null;
  912. return ws;
  913. }
  914. // whiteSpace is the whitespace span at the start of the line,
  915. // or null if there is no such node.
  916. var self = this, whiteSpace = whiteSpaceAfter(start);
  917. var newIndent = 0, curIndent = whiteSpace ? whiteSpace.currentText.length : 0;
  918. var firstText = whiteSpace ? whiteSpace.nextSibling : (start ? start.nextSibling : this.container.firstChild);
  919. if (direction == "keep") {
  920. if (start) {
  921. var prevWS = whiteSpaceAfter(startOfLine(start.previousSibling))
  922. if (prevWS) newIndent = prevWS.currentText.length;
  923. }
  924. }
  925. else {
  926. // Sometimes the start of the line can influence the correct
  927. // indentation, so we retrieve it.
  928. var nextChars = (start && firstText && firstText.currentText) ? firstText.currentText : "";
  929. // Ask the lexical context for the correct indentation, and
  930. // compute how much this differs from the current indentation.
  931. if (direction != null && this.options.tabMode != "indent")
  932. newIndent = direction ? curIndent + indentUnit : Math.max(0, curIndent - indentUnit)
  933. else if (start)
  934. newIndent = start.indentation(nextChars, curIndent, direction, firstText);
  935. else if (Editor.Parser.firstIndentation)
  936. newIndent = Editor.Parser.firstIndentation(nextChars, curIndent, direction, firstText);
  937. }
  938. var indentDiff = newIndent - curIndent;
  939. // If there is too much, this is just a matter of shrinking a span.
  940. if (indentDiff < 0) {
  941. if (newIndent == 0) {
  942. if (firstText) select.snapshotMove(whiteSpace.firstChild, firstText.firstChild || firstText, 0);
  943. removeElement(whiteSpace);
  944. whiteSpace = null;
  945. }
  946. else {
  947. select.snapshotMove(whiteSpace.firstChild, whiteSpace.firstChild, indentDiff, true);
  948. whiteSpace.currentText = makeWhiteSpace(newIndent);
  949. whiteSpace.firstChild.nodeValue = whiteSpace.currentText;
  950. }
  951. }
  952. // Not enough...
  953. else if (indentDiff > 0) {
  954. // If there is whitespace, we grow it.
  955. if (whiteSpace) {
  956. whiteSpace.currentText = makeWhiteSpace(newIndent);
  957. whiteSpace.firstChild.nodeValue = whiteSpace.currentText;
  958. select.snapshotMove(whiteSpace.firstChild, whiteSpace.firstChild, indentDiff, true);
  959. }
  960. // Otherwise, we have to add a new whitespace node.
  961. else {
  962. whiteSpace = makePartSpan(makeWhiteSpace(newIndent));
  963. whiteSpace.className = "whitespace";
  964. if (start) insertAfter(whiteSpace, start);
  965. else this.container.insertBefore(whiteSpace, this.container.firstChild);
  966. select.snapshotMove(firstText && (firstText.firstChild || firstText),
  967. whiteSpace.firstChild, newIndent, false, true);
  968. }
  969. }
  970. // Make sure cursor ends up after the whitespace
  971. else if (whiteSpace) {
  972. select.snapshotMove(whiteSpace.firstChild, whiteSpace.firstChild, newIndent, false);
  973. }
  974. if (indentDiff != 0) this.addDirtyNode(start);
  975. },
  976. // Re-highlight the selected part of the document.
  977. highlightAtCursor: function() {
  978. var pos = select.selectionTopNode(this.container, true);
  979. var to = select.selectionTopNode(this.container, false);
  980. if (pos === false || to === false) return false;
  981. select.markSelection();
  982. if (this.highlight(pos, endOfLine(to, this.container), true, 20) === false)
  983. return false;
  984. select.selectMarked();
  985. return true;
  986. },
  987. // When tab is pressed with text selected, the whole selection is
  988. // re-indented, when nothing is selected, the line with the cursor
  989. // is re-indented.
  990. handleTab: function(direction) {
  991. if (this.options.tabMode == "spaces" && !select.somethingSelected())
  992. select.insertTabAtCursor();
  993. else
  994. this.reindentSelection(direction);
  995. },
  996. // Custom home behaviour that doesn't land the cursor in front of
  997. // leading whitespace unless pressed twice.
  998. home: function() {
  999. var cur = select.selectionTopNode(this.container, true), start = cur;
  1000. if (cur === false || !(!cur || cur.isPart || isBR(cur)) || !this.container.firstChild)
  1001. return false;
  1002. while (cur && !isBR(cur)) cur = cur.previousSibling;
  1003. var next = cur ? cur.nextSibling : this.container.firstChild;
  1004. if (next && next != start && next.isPart && hasClass(next, "whitespace"))
  1005. select.focusAfterNode(next, this.container);
  1006. else
  1007. select.focusAfterNode(cur, this.container);
  1008. select.scrollToCursor(this.container);
  1009. return true;
  1010. },
  1011. // Some browsers (Opera) don't manage to handle the end key
  1012. // properly in the face of vertical scrolling.
  1013. end: function() {
  1014. var cur = select.selectionTopNode(this.container, true);
  1015. if (cur === false) return false;
  1016. cur = endOfLine(cur, this.container);
  1017. if (!cur) return false;
  1018. select.focusAfterNode(cur.previousSibling, this.container);
  1019. select.scrollToCursor(this.container);
  1020. return true;
  1021. },
  1022. pageUp: function() {
  1023. var line = this.cursorPosition().line, scrollAmount = this.visibleLineCount();
  1024. if (line === false || scrollAmount === false) return false;
  1025. // Try to keep one line on the screen.
  1026. scrollAmount -= 2;
  1027. for (var i = 0; i < scrollAmount; i++) {
  1028. line = this.prevLine(line);
  1029. if (line === false) break;
  1030. }
  1031. if (i == 0) return false; // Already at first line
  1032. select.setCursorPos(this.container, {node: line, offset: 0});
  1033. select.scrollToCursor(this.container);
  1034. return true;
  1035. },
  1036. pageDown: function() {
  1037. var line = this.cursorPosition().line, scrollAmount = this.visibleLineCount();
  1038. if (line === false || scrollAmount === false) return false;
  1039. // Try to move to the last line of the current page.
  1040. scrollAmount -= 2;
  1041. for (var i = 0; i < scrollAmount; i++) {
  1042. var nextLine = this.nextLine(line);
  1043. if (nextLine === false) break;
  1044. line = nextLine;
  1045. }
  1046. if (i == 0) return false; // Already at last line
  1047. select.setCursorPos(this.container, {node: line, offset: 0});
  1048. select.scrollToCursor(this.container);
  1049. return true;
  1050. },
  1051. // Delay (or initiate) the next paren highlight event.
  1052. scheduleParenHighlight: function() {
  1053. if (this.parenEvent) parent.clearTimeout(this.parenEvent);
  1054. var self = this;
  1055. this.parenEvent = parent.setTimeout(function(){self.highlightParens();}, 300);
  1056. },
  1057. // Take the token before the cursor. If it contains a character in
  1058. // '()[]{}', search for the matching paren/brace/bracket, and
  1059. // highlight them in green for a moment, or red if no proper match
  1060. // was found.
  1061. highlightParens: function(jump, fromKey) {
  1062. var self = this, mark = this.options.markParen;
  1063. if (typeof mark == "string") mark = [mark, mark];
  1064. // give the relevant nodes a colour.
  1065. function highlight(node, ok) {
  1066. if (!node) return;
  1067. if (!mark) {
  1068. node.style.fontWeight = "bold";
  1069. node.style.color = ok ? "#8F8" : "#F88";
  1070. }
  1071. else if (mark.call) mark(node, ok);
  1072. else node.className += " " + mark[ok ? 0 : 1];
  1073. }
  1074. function unhighlight(node) {
  1075. if (!node) return;
  1076. if (mark && !mark.call)
  1077. removeClass(removeClass(node, mark[0]), mark[1]);
  1078. else if (self.options.unmarkParen)
  1079. self.options.unmarkParen(node);
  1080. else {
  1081. node.style.fontWeight = "";
  1082. node.style.color = "";
  1083. }
  1084. }
  1085. if (!fromKey && self.highlighted) {
  1086. unhighlight(self.highlighted[0]);
  1087. unhighlight(self.highlighted[1]);
  1088. }
  1089. if (!window || !window.parent || !window.select) return;
  1090. // Clear the event property.
  1091. if (this.parenEvent) parent.clearTimeout(this.parenEvent);
  1092. this.parenEvent = null;
  1093. // Extract a 'paren' from a piece of text.
  1094. function paren(node) {
  1095. if (node.currentText) {
  1096. var match = node.currentText.match(/^[\s\u00a0]*([\(\)\[\]{}])[\s\u00a0]*$/);
  1097. return match && match[1];
  1098. }
  1099. }
  1100. // Determine the direction a paren is facing.
  1101. function forward(ch) {
  1102. return /[\(\[\{]/.test(ch);
  1103. }
  1104. var ch, cursor = select.selectionTopNode(this.container, true);
  1105. if (!cursor || !this.highlightAtCursor()) return;
  1106. cursor = select.selectionTopNode(this.container, true);
  1107. if (!(cursor && ((ch = paren(cursor)) || (cursor = cursor.nextSibling) && (ch = paren(cursor)))))
  1108. return;
  1109. // We only look for tokens with the same className.
  1110. var className = cursor.className, dir = forward(ch), match = matching[ch];
  1111. // Since parts of the document might not have been properly
  1112. // highlighted, and it is hard to know in advance which part we
  1113. // have to scan, we just try, and when we find dirty nodes we
  1114. // abort, parse them, and re-try.
  1115. function tryFindMatch() {
  1116. var stack = [], ch, ok = true;
  1117. for (var runner = cursor; runner; runner = dir ? runner.nextSibling : runner.previousSibling) {
  1118. if (runner.className == className && isSpan(runner) && (ch = paren(runner))) {
  1119. if (forward(ch) == dir)
  1120. stack.push(ch);
  1121. else if (!stack.length)
  1122. ok = false;
  1123. else if (stack.pop() != matching[ch])
  1124. ok = false;
  1125. if (!stack.length) break;
  1126. }
  1127. else if (runner.dirty || !isSpan(runner) && !isBR(runner)) {
  1128. return {node: runner, status: "dirty"};
  1129. }
  1130. }
  1131. return {node: runner, status: runner && ok};
  1132. }
  1133. while (true) {
  1134. var found = tryFindMatch();
  1135. if (found.status == "dirty") {
  1136. this.highlight(found.node, endOfLine(found.node));
  1137. // Needed because in some corner cases a highlight does not
  1138. // reach a node.
  1139. found.node.dirty = false;
  1140. continue;
  1141. }
  1142. else {
  1143. highlight(cursor, found.status);
  1144. highlight(found.node, found.status);
  1145. if (fromKey)
  1146. parent.setTimeout(function() {unhighlight(cursor); unhighlight(found.node);}, 500);
  1147. else
  1148. self.highlighted = [cursor, found.node];
  1149. if (jump && found.node)
  1150. select.focusAfterNode(found.node.previousSibling, this.container);
  1151. break;
  1152. }
  1153. }
  1154. },
  1155. // Adjust the amount of whitespace at the start of the line that
  1156. // the cursor is on so that it is indented properly.
  1157. indentAtCursor: function(direction) {
  1158. if (!this.container.firstChild) return;
  1159. // The line has to have up-to-date lexical information, so we
  1160. // highlight it first.
  1161. if (!this.highlightAtCursor()) return;
  1162. var cursor = select.selectionTopNode(this.container, false);
  1163. // If we couldn't determine the place of the cursor,
  1164. // there's nothing to indent.
  1165. if (cursor === false)
  1166. return;
  1167. select.markSelection();
  1168. this.indentLineAfter(startOfLine(cursor), direction);
  1169. select.selectMarked();
  1170. },
  1171. // Indent all lines whose start falls inside of the current
  1172. // selection.
  1173. indentRegion: function(start, end, direction, selectAfter) {
  1174. var current = (start = startOfLine(start)), before = start && startOfLine(start.previousSibling);
  1175. if (!isBR(end)) end = endOfLine(end, this.container);
  1176. this.addDirtyNode(start);
  1177. do {
  1178. var next = endOfLine(current, this.container);
  1179. if (current) this.highlight(before, next, true);
  1180. this.indentLineAfter(current, direction);
  1181. before = current;
  1182. current = next;
  1183. } while (current != end);
  1184. if (selectAfter)
  1185. select.setCursorPos(this.container, {node: start, offset: 0}, {node: end, offset: 0});
  1186. },
  1187. // Find the node that the cursor is in, mark it as dirty, and make
  1188. // sure a highlight pass is scheduled.
  1189. cursorActivity: function(safe) {
  1190. // pagehide event hack above
  1191. if (this.unloaded) {
  1192. window.document.designMode = "off";
  1193. window.document.designMode = "on";
  1194. this.unloaded = false;
  1195. }
  1196. if (oldIE) {
  1197. this.container.createTextRange().execCommand("unlink");
  1198. clearTimeout(this.saveSelectionSnapshot);
  1199. var self = this;
  1200. this.saveSelectionSnapshot = setTimeout(function() {
  1201. var snapshot = select.getBookmark(self.container);
  1202. if (snapshot) self.selectionSnapshot = snapshot;
  1203. }, 200);
  1204. }
  1205. var activity = this.options.onCursorActivity;
  1206. if (!safe || activity) {
  1207. var cursor = select.selectionTopNode(this.container, false);
  1208. if (cursor === false || !this.container.firstChild) return;
  1209. cursor = cursor || this.container.firstChild;
  1210. if (activity) activity(cursor);
  1211. if (!safe) {
  1212. this.scheduleHighlight();
  1213. this.addDirtyNode(cursor);
  1214. }
  1215. }
  1216. },
  1217. reparseBuffer: function() {
  1218. forEach(this.container.childNodes, function(node) {node.dirty = true;});
  1219. if (this.container.firstChild)
  1220. this.addDirtyNode(this.container.firstChild);
  1221. },
  1222. // Add a node to the set of dirty nodes, if it isn't already in
  1223. // there.
  1224. addDirtyNode: function(node) {
  1225. node = node || this.container.firstChild;
  1226. if (!node) return;
  1227. for (var i = 0; i < this.dirty.length; i++)
  1228. if (this.dirty[i] == node) return;
  1229. if (node.nodeType != 3)
  1230. node.dirty = true;
  1231. this.dirty.push(node);
  1232. },
  1233. allClean: function() {
  1234. return !this.dirty.length;
  1235. },
  1236. // Cause a highlight pass to happen in options.passDelay
  1237. // milliseconds. Clear the existing timeout, if one exists. This
  1238. // way, the passes do not happen while the user is typing, and
  1239. // should as unobtrusive as possible.
  1240. scheduleHighlight: function() {
  1241. // Timeouts are routed through the parent window, because on
  1242. // some browsers designMode windows do not fire timeouts.
  1243. var self = this;
  1244. parent.clearTimeout(this.highlightTimeout);
  1245. this.highlightTimeout = parent.setTimeout(function(){self.highlightDirty();}, this.options.passDelay);
  1246. },
  1247. // Fetch one dirty node, and remove it from the dirty set.
  1248. getDirtyNode: function() {
  1249. while (this.dirty.length > 0) {
  1250. var found = this.dirty.pop();
  1251. // IE8 sometimes throws an unexplainable 'invalid argument'
  1252. // exception for found.parentNode
  1253. try {
  1254. // If the node has been coloured in the meantime, or is no
  1255. // longer in the document, it should not be returned.
  1256. while (found && found.parentNode != this.container)
  1257. found = found.parentNode;
  1258. if (found && (found.dirty || found.nodeType == 3))
  1259. return found;
  1260. } catch (e) {}
  1261. }
  1262. return null;
  1263. },
  1264. // Pick dirty nodes, and highlight them, until options.passTime
  1265. // milliseconds have gone by. The highlight method will continue
  1266. // to next lines as long as it finds dirty nodes. It returns
  1267. // information about the place where it stopped. If there are
  1268. // dirty nodes left after this function has spent all its lines,
  1269. // it shedules another highlight to finish the job.
  1270. highlightDirty: function(force) {
  1271. // Prevent FF from raising an error when it is firing timeouts
  1272. // on a page that's no longer loaded.
  1273. if (!window || !window.parent || !window.select) return false;
  1274. if (!this.options.readOnly) select.markSelection();
  1275. var start, endTime = force ? null : time() + this.options.passTime;
  1276. while ((time() < endTime || force) && (start = this.getDirtyNode())) {
  1277. var result = this.highlight(start, endTime);
  1278. if (result && result.node && result.dirty)
  1279. this.addDirtyNode(result.node.nextSibling);
  1280. }
  1281. if (!this.options.readOnly) select.selectMarked();
  1282. if (start) this.scheduleHighlight();
  1283. return this.dirty.length == 0;
  1284. },
  1285. // Creates a function that, when called through a timeout, will
  1286. // continuously re-parse the document.
  1287. documentScanner: function(passTime) {
  1288. var self = this, pos = null;
  1289. return function() {
  1290. // FF timeout weirdness workaround.
  1291. if (!window || !window.parent || !window.select) return;
  1292. // If the current node is no longer in the document... oh
  1293. // well, we start over.
  1294. if (pos && pos.parentNode != self.container)
  1295. pos = null;
  1296. select.markSelection();
  1297. var result = self.highlight(pos, time() + passTime, true);
  1298. select.selectMarked();
  1299. var newPos = result ? (result.node && result.node.nextSibling) : null;
  1300. pos = (pos == newPos) ? null : newPos;
  1301. self.delayScanning();
  1302. };
  1303. },
  1304. // Starts the continuous scanning process for this document after
  1305. // a given interval.
  1306. delayScanning: function() {
  1307. if (this.scanner) {
  1308. parent.clearTimeout(this.documentScan);
  1309. this.documentScan = parent.setTimeout(this.scanner, this.options.continuousScanning);
  1310. }
  1311. },
  1312. // The function that does the actual highlighting/colouring (with
  1313. // help from the parser and the DOM normalizer). Its interface is
  1314. // rather overcomplicated, because it is used in different
  1315. // situations: ensuring that a certain line is highlighted, or
  1316. // highlighting up to X milliseconds starting from a certain
  1317. // point. The 'from' argument gives the node at which it should
  1318. // start. If this is null, it will start at the beginning of the
  1319. // document. When a timestamp is given with the 'target' argument,
  1320. // it will stop highlighting at that time. If this argument holds
  1321. // a DOM node, it will highlight until it reaches that node. If at
  1322. // any time it comes across two 'clean' lines (no dirty nodes), it
  1323. // will stop, except when 'cleanLines' is true. maxBacktrack is
  1324. // the maximum number of lines to backtrack to find an existing
  1325. // parser instance. This is used to give up in situations where a
  1326. // highlight would take too long and freeze the browser interface.
  1327. highlight: function(from, target, cleanLines, maxBacktrack){
  1328. var container = this.container, self = this, active = this.options.activeTokens;
  1329. var endTime = (typeof target == "number" ? target : null);
  1330. if (!container.firstChild)
  1331. return false;
  1332. // Backtrack to the first node before from that has a partial
  1333. // parse stored.
  1334. while (from && (!from.parserFromHere || from.dirty)) {
  1335. if (maxBacktrack != null && isBR(from) && (--maxBacktrack) < 0)
  1336. return false;
  1337. from = from.previousSibling;
  1338. }
  1339. // If we are at the end of the document, do nothing.
  1340. if (from && !from.nextSibling)
  1341. return false;
  1342. // Check whether a part (<span> node) and the corresponding token
  1343. // match.
  1344. function correctPart(token, part){
  1345. return !part.reduced && part.currentText == token.value && part.className == token.style;
  1346. }
  1347. // Shorten the text associated with a part by chopping off
  1348. // characters from the front. Note that only the currentText
  1349. // property gets changed. For efficiency reasons, we leave the
  1350. // nodeValue alone -- we set the reduced flag to indicate that
  1351. // this part must be replaced.
  1352. function shortenPart(part, minus){
  1353. part.currentText = part.currentText.substring(minus);
  1354. part.reduced = true;
  1355. }
  1356. // Create a part corresponding to a given token.
  1357. function tokenPart(token){
  1358. var part = makePartSpan(token.value);
  1359. part.className = token.style;
  1360. return part;
  1361. }
  1362. function maybeTouch(node) {
  1363. if (node) {
  1364. var old = node.oldNextSibling;
  1365. if (lineDirty || old === undefined || node.nextSibling != old)
  1366. self.history.touch(node);
  1367. node.oldNextSibling = node.nextSibling;
  1368. }
  1369. else {
  1370. var old = self.container.oldFirstChild;
  1371. if (lineDirty || old === undefined || self.container.firstChild != old)
  1372. self.history.touch(null);
  1373. self.container.oldFirstChild = self.container.firstChild;
  1374. }
  1375. }
  1376. // Get the token stream. If from is null, we start with a new
  1377. // parser from the start of the frame, otherwise a partial parse
  1378. // is resumed.
  1379. var traversal = traverseDOM(from ? from.nextSibling : container.firstChild),
  1380. stream = stringStream(traversal),
  1381. parsed = from ? from.parserFromHere(stream) : Editor.Parser.make(stream);
  1382. function surroundedByBRs(node) {
  1383. return (node.previousSibling == null || isBR(node.previousSibling)) &&
  1384. (node.nextSibling == null || isBR(node.nextSibling));
  1385. }
  1386. // parts is an interface to make it possible to 'delay' fetching
  1387. // the next DOM node until we are completely done with the one
  1388. // before it. This is necessary because often the next node is
  1389. // not yet available when we want to proceed past the current
  1390. // one.
  1391. var parts = {
  1392. current: null,
  1393. // Fetch current node.
  1394. get: function(){
  1395. if (!this.current)
  1396. this.current = traversal.nodes.shift();
  1397. return this.current;
  1398. },
  1399. // Advance to the next part (do not fetch it yet).
  1400. next: function(){
  1401. this.current = null;
  1402. },
  1403. // Remove the current part from the DOM tree, and move to the
  1404. // next.
  1405. remove: function(){
  1406. container.removeChild(this.get());
  1407. this.current = null;
  1408. },
  1409. // Advance to the next part that is not empty, discarding empty
  1410. // parts.
  1411. getNonEmpty: function(){
  1412. var part = this.get();
  1413. // Allow empty nodes when they are alone on a line, needed
  1414. // for the FF cursor bug workaround (see select.js,
  1415. // insertNewlineAtCursor).
  1416. while (part && isSpan(part) && part.currentText == "") {
  1417. // Leave empty nodes that are alone on a line alone in
  1418. // Opera, since that browsers doesn't deal well with
  1419. // having 2 BRs in a row.
  1420. if (window.opera && surroundedByBRs(part)) {
  1421. this.next();
  1422. part = this.get();
  1423. }
  1424. else {
  1425. var old = part;
  1426. this.remove();
  1427. part = this.get();
  1428. // Adjust selection information, if any. See select.js for details.
  1429. select.snapshotMove(old.firstChild, part && (part.firstChild || part), 0);
  1430. }
  1431. }
  1432. return part;
  1433. }
  1434. };
  1435. var lineDirty = false, prevLineDirty = true, lineNodes = 0;
  1436. // This forEach loops over the tokens from the parsed stream, and
  1437. // at the same time uses the parts object to proceed through the
  1438. // corresponding DOM nodes.
  1439. forEach(parsed, function(token){
  1440. var part = parts.getNonEmpty();
  1441. if (token.value == "\n"){
  1442. // The idea of the two streams actually staying synchronized
  1443. // is such a long shot that we explicitly check.
  1444. if (!isBR(part))
  1445. throw "Parser out of sync. Expected BR.";
  1446. if (part.dirty || !part.indentation) lineDirty = true;
  1447. maybeTouch(from);
  1448. from = part;
  1449. // Every <br> gets a copy of the parser state and a lexical
  1450. // context assigned to it. The first is used to be able to
  1451. // later resume parsing from this point, the second is used
  1452. // for indentation.
  1453. part.parserFromHere = parsed.copy();
  1454. part.indentation = token.indentation || alwaysZero;
  1455. part.dirty = false;
  1456. // If the target argument wasn't an integer, go at least
  1457. // until that node.
  1458. if (endTime == null && part == target) throw StopIteration;
  1459. // A clean line with more than one node means we are done.
  1460. // Throwing a StopIteration is the way to break out of a
  1461. // MochiKit forEach loop.
  1462. if ((endTime != null && time() >= endTime) || (!lineDirty && !prevLineDirty && lineNodes > 1 && !cleanLines))
  1463. throw StopIteration;
  1464. prevLineDirty = lineDirty; lineDirty = false; lineNodes = 0;
  1465. parts.next();
  1466. }
  1467. else {
  1468. if (!isSpan(part))
  1469. throw "Parser out of sync. Expected SPAN.";
  1470. if (part.dirty)
  1471. lineDirty = true;
  1472. lineNodes++;
  1473. // If the part matches the token, we can leave it alone.
  1474. if (correctPart(token, part)){
  1475. if (active && part.dirty) active(part, token, self);
  1476. part.dirty = false;
  1477. parts.next();
  1478. }
  1479. // Otherwise, we have to fix it.
  1480. else {
  1481. lineDirty = true;
  1482. // Insert the correct part.
  1483. var newPart = tokenPart(token);
  1484. container.insertBefore(newPart, part);
  1485. if (active) active(newPart, token, self);
  1486. var tokensize = token.value.length;
  1487. var offset = 0;
  1488. // Eat up parts until the text for this token has been
  1489. // removed, adjusting the stored selection info (see
  1490. // select.js) in the process.
  1491. while (tokensize > 0) {
  1492. part = parts.get();
  1493. var partsize = part.currentText.length;
  1494. select.snapshotReplaceNode(part.firstChild, newPart.firstChild, tokensize, offset);
  1495. if (partsize > tokensize){
  1496. shortenPart(part, tokensize);
  1497. tokensize = 0;
  1498. }
  1499. else {
  1500. tokensize -= partsize;
  1501. offset += partsize;
  1502. parts.remove();
  1503. }
  1504. }
  1505. }
  1506. }
  1507. });
  1508. maybeTouch(from);
  1509. webkitLastLineHack(this.container);
  1510. // The function returns some status information that is used by
  1511. // hightlightDirty to determine whether and where it has to
  1512. // continue.
  1513. return {node: parts.getNonEmpty(),
  1514. dirty: lineDirty};
  1515. }
  1516. };
  1517. return Editor;
  1518. })();
  1519. addEventHandler(window, "load", function() {
  1520. var CodeMirror = window.frameElement.CodeMirror;
  1521. var e = CodeMirror.editor = new Editor(CodeMirror.options);
  1522. parent.setTimeout(method(CodeMirror, "init"), 0);
  1523. });