AmberRack 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (198) hide show
  1. data/.gitignore +74 -0
  2. data/.rvmrc +4 -0
  3. data/Gemfile +2 -0
  4. data/Gemfile.lock +62 -0
  5. data/README.md +17 -0
  6. data/Rakefile +24 -0
  7. data/amber-rack.gemspec +33 -0
  8. data/app/amber_app.rb +35 -0
  9. data/app/javascripts/Benchfib.deploy.js +159 -0
  10. data/app/javascripts/Benchfib.js +159 -0
  11. data/app/javascripts/Canvas.deploy.js +1464 -0
  12. data/app/javascripts/Canvas.js +1464 -0
  13. data/app/javascripts/Compiler.deploy.js +1587 -0
  14. data/app/javascripts/Compiler.js +1587 -0
  15. data/app/javascripts/Examples.deploy.js +800 -0
  16. data/app/javascripts/Examples.js +800 -0
  17. data/app/javascripts/IDE.deploy.js +3457 -0
  18. data/app/javascripts/IDE.js +3457 -0
  19. data/app/javascripts/IDE.js.bak +3420 -0
  20. data/app/javascripts/JQuery.deploy.js +898 -0
  21. data/app/javascripts/JQuery.js +898 -0
  22. data/app/javascripts/Kernel.deploy.js +6761 -0
  23. data/app/javascripts/Kernel.js +6761 -0
  24. data/app/javascripts/Parser.deploy.js +1655 -0
  25. data/app/javascripts/Parser.js +1655 -0
  26. data/app/javascripts/Raphael-Core.js +0 -0
  27. data/app/javascripts/Raphael-Graph.js +0 -0
  28. data/app/javascripts/SUnit.deploy.js +1059 -0
  29. data/app/javascripts/SUnit.js +1059 -0
  30. data/app/javascripts/application.js +2 -0
  31. data/app/javascripts/boot.js +466 -0
  32. data/app/javascripts/init.js +2 -0
  33. data/app/javascripts/jquery-1.4.4.min.js +167 -0
  34. data/app/javascripts/jquery-ui-1.8.9.custom.min.js +781 -0
  35. data/app/javascripts/jquery.textarea.js +267 -0
  36. data/app/javascripts/jtalk.js +78 -0
  37. data/app/javascripts/lib/CodeMirror/LICENSE +19 -0
  38. data/app/javascripts/lib/CodeMirror/README.md +6 -0
  39. data/app/javascripts/lib/CodeMirror/compress.html +92 -0
  40. data/app/javascripts/lib/CodeMirror/css/baboon.png +0 -0
  41. data/app/javascripts/lib/CodeMirror/css/baboon_vector.svg +153 -0
  42. data/app/javascripts/lib/CodeMirror/css/docs.css +154 -0
  43. data/app/javascripts/lib/CodeMirror/demo/activeline.html +72 -0
  44. data/app/javascripts/lib/CodeMirror/demo/changemode.html +51 -0
  45. data/app/javascripts/lib/CodeMirror/demo/complete.html +79 -0
  46. data/app/javascripts/lib/CodeMirror/demo/complete.js +151 -0
  47. data/app/javascripts/lib/CodeMirror/demo/fullscreen.html +158 -0
  48. data/app/javascripts/lib/CodeMirror/demo/marker.html +53 -0
  49. data/app/javascripts/lib/CodeMirror/demo/mustache.html +57 -0
  50. data/app/javascripts/lib/CodeMirror/demo/preview.html +75 -0
  51. data/app/javascripts/lib/CodeMirror/demo/resize.html +44 -0
  52. data/app/javascripts/lib/CodeMirror/demo/runmode.html +50 -0
  53. data/app/javascripts/lib/CodeMirror/demo/search.html +106 -0
  54. data/app/javascripts/lib/CodeMirror/demo/theme.html +53 -0
  55. data/app/javascripts/lib/CodeMirror/index.html +239 -0
  56. data/app/javascripts/lib/CodeMirror/internals.html +389 -0
  57. data/app/javascripts/lib/CodeMirror/lib/codemirror.css +67 -0
  58. data/app/javascripts/lib/CodeMirror/lib/codemirror.js +2144 -0
  59. data/app/javascripts/lib/CodeMirror/lib/overlay.js +51 -0
  60. data/app/javascripts/lib/CodeMirror/lib/runmode.js +27 -0
  61. data/app/javascripts/lib/CodeMirror/manual.html +854 -0
  62. data/app/javascripts/lib/CodeMirror/mode/clike/clike.js +247 -0
  63. data/app/javascripts/lib/CodeMirror/mode/clike/index.html +102 -0
  64. data/app/javascripts/lib/CodeMirror/mode/css/css.js +124 -0
  65. data/app/javascripts/lib/CodeMirror/mode/css/index.html +56 -0
  66. data/app/javascripts/lib/CodeMirror/mode/diff/diff.css +3 -0
  67. data/app/javascripts/lib/CodeMirror/mode/diff/diff.js +13 -0
  68. data/app/javascripts/lib/CodeMirror/mode/diff/index.html +99 -0
  69. data/app/javascripts/lib/CodeMirror/mode/haskell/haskell.js +242 -0
  70. data/app/javascripts/lib/CodeMirror/mode/haskell/index.html +60 -0
  71. data/app/javascripts/lib/CodeMirror/mode/htmlmixed/htmlmixed.js +79 -0
  72. data/app/javascripts/lib/CodeMirror/mode/htmlmixed/index.html +52 -0
  73. data/app/javascripts/lib/CodeMirror/mode/javascript/index.html +78 -0
  74. data/app/javascripts/lib/CodeMirror/mode/javascript/javascript.js +348 -0
  75. data/app/javascripts/lib/CodeMirror/mode/lua/index.html +72 -0
  76. data/app/javascripts/lib/CodeMirror/mode/lua/lua.js +138 -0
  77. data/app/javascripts/lib/CodeMirror/mode/php/index.html +49 -0
  78. data/app/javascripts/lib/CodeMirror/mode/php/php.js +110 -0
  79. data/app/javascripts/lib/CodeMirror/mode/plsql/index.html +63 -0
  80. data/app/javascripts/lib/CodeMirror/mode/plsql/plsql.js +217 -0
  81. data/app/javascripts/lib/CodeMirror/mode/python/LICENSE.txt +21 -0
  82. data/app/javascripts/lib/CodeMirror/mode/python/index.html +123 -0
  83. data/app/javascripts/lib/CodeMirror/mode/python/python.js +321 -0
  84. data/app/javascripts/lib/CodeMirror/mode/rst/index.html +526 -0
  85. data/app/javascripts/lib/CodeMirror/mode/rst/rst.css +75 -0
  86. data/app/javascripts/lib/CodeMirror/mode/rst/rst.js +333 -0
  87. data/app/javascripts/lib/CodeMirror/mode/scheme/index.html +65 -0
  88. data/app/javascripts/lib/CodeMirror/mode/scheme/scheme.js +181 -0
  89. data/app/javascripts/lib/CodeMirror/mode/smalltalk/index.html +56 -0
  90. data/app/javascripts/lib/CodeMirror/mode/smalltalk/smalltalk.js +134 -0
  91. data/app/javascripts/lib/CodeMirror/mode/sparql/index.html +41 -0
  92. data/app/javascripts/lib/CodeMirror/mode/sparql/sparql.js +143 -0
  93. data/app/javascripts/lib/CodeMirror/mode/stex/index.html +96 -0
  94. data/app/javascripts/lib/CodeMirror/mode/stex/stex.js +167 -0
  95. data/app/javascripts/lib/CodeMirror/mode/xml/index.html +42 -0
  96. data/app/javascripts/lib/CodeMirror/mode/xml/xml.js +231 -0
  97. data/app/javascripts/lib/CodeMirror/mode/yaml/index.html +68 -0
  98. data/app/javascripts/lib/CodeMirror/mode/yaml/yaml.js +95 -0
  99. data/app/javascripts/lib/CodeMirror/oldrelease.html +178 -0
  100. data/app/javascripts/lib/CodeMirror/test/index.html +29 -0
  101. data/app/javascripts/lib/CodeMirror/test/test.js +249 -0
  102. data/app/javascripts/lib/CodeMirror/theme/default.css +18 -0
  103. data/app/javascripts/lib/CodeMirror/theme/elegant.css +9 -0
  104. data/app/javascripts/lib/CodeMirror/theme/jtalk.css +21 -0
  105. data/app/javascripts/lib/CodeMirror/theme/neat.css +8 -0
  106. data/app/javascripts/lib/CodeMirror/theme/night.css +20 -0
  107. data/app/javascripts/lib/jQuery/jquery-1.4.4.min.js +167 -0
  108. data/app/javascripts/lib/jQuery/jquery-ui-1.8.9.custom.min.js +781 -0
  109. data/app/javascripts/lib/jQuery/jquery.textarea.js +267 -0
  110. data/app/smalltalk/Canvas.st +481 -0
  111. data/app/smalltalk/IDE.st +1752 -0
  112. data/config.ru +2 -0
  113. data/lib/amber-rack.rb +4 -0
  114. data/lib/amber-rack/version.rb +3 -0
  115. data/public/CodeMirror/LICENSE +19 -0
  116. data/public/CodeMirror/README.md +6 -0
  117. data/public/CodeMirror/compress.html +92 -0
  118. data/public/CodeMirror/css/baboon.png +0 -0
  119. data/public/CodeMirror/css/baboon_vector.svg +153 -0
  120. data/public/CodeMirror/css/docs.css +154 -0
  121. data/public/CodeMirror/demo/activeline.html +72 -0
  122. data/public/CodeMirror/demo/changemode.html +51 -0
  123. data/public/CodeMirror/demo/complete.html +79 -0
  124. data/public/CodeMirror/demo/complete.js +151 -0
  125. data/public/CodeMirror/demo/fullscreen.html +158 -0
  126. data/public/CodeMirror/demo/marker.html +53 -0
  127. data/public/CodeMirror/demo/mustache.html +57 -0
  128. data/public/CodeMirror/demo/preview.html +75 -0
  129. data/public/CodeMirror/demo/resize.html +44 -0
  130. data/public/CodeMirror/demo/runmode.html +50 -0
  131. data/public/CodeMirror/demo/search.html +106 -0
  132. data/public/CodeMirror/demo/theme.html +53 -0
  133. data/public/CodeMirror/index.html +239 -0
  134. data/public/CodeMirror/internals.html +389 -0
  135. data/public/CodeMirror/lib/codemirror.css +67 -0
  136. data/public/CodeMirror/lib/codemirror.js +2144 -0
  137. data/public/CodeMirror/lib/overlay.js +51 -0
  138. data/public/CodeMirror/lib/runmode.js +27 -0
  139. data/public/CodeMirror/manual.html +854 -0
  140. data/public/CodeMirror/mode/clike/clike.js +247 -0
  141. data/public/CodeMirror/mode/clike/index.html +102 -0
  142. data/public/CodeMirror/mode/css/css.js +124 -0
  143. data/public/CodeMirror/mode/css/index.html +56 -0
  144. data/public/CodeMirror/mode/diff/diff.css +3 -0
  145. data/public/CodeMirror/mode/diff/diff.js +13 -0
  146. data/public/CodeMirror/mode/diff/index.html +99 -0
  147. data/public/CodeMirror/mode/haskell/haskell.js +242 -0
  148. data/public/CodeMirror/mode/haskell/index.html +60 -0
  149. data/public/CodeMirror/mode/htmlmixed/htmlmixed.js +79 -0
  150. data/public/CodeMirror/mode/htmlmixed/index.html +52 -0
  151. data/public/CodeMirror/mode/javascript/index.html +78 -0
  152. data/public/CodeMirror/mode/javascript/javascript.js +348 -0
  153. data/public/CodeMirror/mode/lua/index.html +72 -0
  154. data/public/CodeMirror/mode/lua/lua.js +138 -0
  155. data/public/CodeMirror/mode/php/index.html +49 -0
  156. data/public/CodeMirror/mode/php/php.js +110 -0
  157. data/public/CodeMirror/mode/plsql/index.html +63 -0
  158. data/public/CodeMirror/mode/plsql/plsql.js +217 -0
  159. data/public/CodeMirror/mode/python/LICENSE.txt +21 -0
  160. data/public/CodeMirror/mode/python/index.html +123 -0
  161. data/public/CodeMirror/mode/python/python.js +321 -0
  162. data/public/CodeMirror/mode/rst/index.html +526 -0
  163. data/public/CodeMirror/mode/rst/rst.css +75 -0
  164. data/public/CodeMirror/mode/rst/rst.js +333 -0
  165. data/public/CodeMirror/mode/scheme/index.html +65 -0
  166. data/public/CodeMirror/mode/scheme/scheme.js +181 -0
  167. data/public/CodeMirror/mode/smalltalk/index.html +56 -0
  168. data/public/CodeMirror/mode/smalltalk/smalltalk.js +134 -0
  169. data/public/CodeMirror/mode/sparql/index.html +41 -0
  170. data/public/CodeMirror/mode/sparql/sparql.js +143 -0
  171. data/public/CodeMirror/mode/stex/index.html +96 -0
  172. data/public/CodeMirror/mode/stex/stex.js +167 -0
  173. data/public/CodeMirror/mode/xml/index.html +42 -0
  174. data/public/CodeMirror/mode/xml/xml.js +231 -0
  175. data/public/CodeMirror/mode/yaml/index.html +68 -0
  176. data/public/CodeMirror/mode/yaml/yaml.js +95 -0
  177. data/public/CodeMirror/oldrelease.html +178 -0
  178. data/public/CodeMirror/test/index.html +29 -0
  179. data/public/CodeMirror/test/test.js +249 -0
  180. data/public/CodeMirror/theme/default.css +18 -0
  181. data/public/CodeMirror/theme/elegant.css +9 -0
  182. data/public/CodeMirror/theme/jtalk.css +21 -0
  183. data/public/CodeMirror/theme/neat.css +8 -0
  184. data/public/CodeMirror/theme/night.css +20 -0
  185. data/public/css/jtalk.css +362 -0
  186. data/public/css/style.css +456 -0
  187. data/public/css/sunit.css +66 -0
  188. data/public/ide/fork_me.png +0 -0
  189. data/public/ide/screen2.png +0 -0
  190. data/public/ide/style.css +456 -0
  191. data/public/ide/syntax.css +61 -0
  192. data/public/ide/text_header.png +0 -0
  193. data/public/ide/title_container1.png +0 -0
  194. data/public/images/background_box.png +0 -0
  195. data/public/images/background_header.png +0 -0
  196. data/public/images/balloon_header.png +0 -0
  197. data/views/index.haml +66 -0
  198. metadata +341 -0
@@ -0,0 +1,389 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <title>CodeMirror: Internals</title>
5
+ <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
6
+ <link rel="stylesheet" type="text/css" href="css/docs.css"/>
7
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
8
+ <style>dl dl {margin: 0;}</style>
9
+ </head>
10
+ <body>
11
+
12
+ <h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
13
+
14
+ <pre class="grey">
15
+ <img src="css/baboon.png" class="logo" alt="logo"/>/* (Re-) Implementing A Syntax-
16
+ Highlighting Editor in JavaScript */
17
+ </pre>
18
+
19
+ <div class="clear"><div class="leftbig blk">
20
+
21
+ <p style="font-size: 85%" id="intro">
22
+ <strong>Topic:</strong> JavaScript, code editor implementation<br>
23
+ <strong>Author:</strong> Marijn Haverbeke<br>
24
+ <strong>Date:</strong> March 2nd 2011
25
+ </p>
26
+
27
+ <p>This is a followup to
28
+ my <a href="http://codemirror.net/story.html">Brutal Odyssey to the
29
+ Dark Side of the DOM Tree</a> story. That one describes the
30
+ mind-bending process of implementing (what would become) CodeMirror 1.
31
+ This one describes the internals of CodeMirror 2, a complete rewrite
32
+ and rethink of the old code base. I wanted to give this piece another
33
+ Hunter Thompson copycat subtitle, but somehow that would be out of
34
+ place—the process this time around was one of straightforward
35
+ engineering, requiring no serious mind-bending whatsoever.</p>
36
+
37
+ <p>So, what is wrong with CodeMirror 1? I'd estimate, by mailing list
38
+ activity and general search-engine presence, that it has been
39
+ integrated into about a thousand systems by now. The most prominent
40
+ one, since a few weeks,
41
+ being <a href="http://googlecode.blogspot.com/2011/01/make-quick-fixes-quicker-on-google.html">Google
42
+ code's project hosting</a>. It works, and it's being used widely.</a>
43
+
44
+ <p>Still, I did not start replacing it because I was bored. CodeMirror
45
+ 1 was heavily reliant on <code>designMode</code>
46
+ or <code>contentEditable</code> (depending on the browser). Neither of
47
+ these are well specified (HTML5 tries
48
+ to <a href="http://www.w3.org/TR/html5/editing.html#contenteditable">specify</a>
49
+ their basics), and, more importantly, they tend to be one of the more
50
+ obscure and buggy areas of browser functionality—CodeMirror, by using
51
+ this functionality in a non-typical way, was constantly running up
52
+ against browser bugs. WebKit wouldn't show an empty line at the end of
53
+ the document, and in some releases would suddenly get unbearably slow.
54
+ Firefox would show the cursor in the wrong place. Internet Explorer
55
+ would insist on linkifying everything that looked like a URL or email
56
+ address, a behaviour that can't be turned off. Some bugs I managed to
57
+ work around (which was often a frustrating, painful process), others,
58
+ such as the Firefox cursor placement, I gave up on, and had to tell
59
+ user after user that they were known problems, but not something I
60
+ could help.</p>
61
+
62
+ <p>Also, there is the fact that <code>designMode</code> (which seemed
63
+ to be less buggy than <code>contentEditable</code> in Webkit and
64
+ Firefox, and was thus used by CodeMirror 1 in those browsers) requires
65
+ a frame. Frames are another tricky area. It takes some effort to
66
+ prevent getting tripped up by domain restrictions, they don't
67
+ initialize synchronously, behave strangely in response to the back
68
+ button, and, on several browsers, can't be moved around the DOM
69
+ without having them re-initialize. They did provide a very nice way to
70
+ namespace the library, though—CodeMirror 1 could freely pollute the
71
+ namespace inside the frame.</p>
72
+
73
+ <p>Finally, working with an editable document means working with
74
+ selection in arbitrary DOM structures. Internet Explorer (8 and
75
+ before) has an utterly different (and awkward) selection API than all
76
+ of the other browsers, and even among the different implementations of
77
+ <code>document.selection</code>, details about how exactly a selection
78
+ is represented vary quite a bit. Add to that the fact that Opera's
79
+ selection support tended to be very buggy until recently, and you can
80
+ imagine why CodeMirror 1 contains 700 lines of selection-handling
81
+ code.</p>
82
+
83
+ <p>And that brings us to the main issue with the CodeMirror 1
84
+ code base: The proportion of browser-bug-workarounds to real
85
+ application code was getting dangerously high. By building on top of a
86
+ few dodgy features, I put the system in a vulnerable position—any
87
+ incompatibility and bugginess in these features, I had to paper over
88
+ with my own code. Not only did I have to do some serious stunt-work to
89
+ get it to work on older browsers (as detailed in the
90
+ previous <a href="http://codemirror.net/story.html">story</a>), things
91
+ also kept breaking in newly released versions, requiring me to come up
92
+ with <em>new</em> scary hacks in order to keep up. This was starting
93
+ to lose its appeal.</p>
94
+
95
+ <h2 id="approach">General Approach</h2>
96
+
97
+ <p>What CodeMirror 2 does is try to sidestep most of the hairy hacks
98
+ that came up in version 1. I owe a lot to the
99
+ <a href="http://ace.ajax.org">ACE</a> editor for inspiration on how to
100
+ approach this.</p>
101
+
102
+ <p>I absolutely did not want to be completely reliant on key events to
103
+ generate my input. Every JavaScript programmer knows that key event
104
+ information is horrible and incomplete. Some people (most awesomely
105
+ Mihai Bazon with <a href="http://ymacs.org">Ymacs</a>) have been able
106
+ to build more or less functioning editors by directly reading key
107
+ events, but it takes a lot of work (the kind of never-ending, fragile
108
+ work I described earlier), and will never be able to properly support
109
+ things like multi-keystoke international character input.</p>
110
+
111
+ <p>So what I do is focus a hidden textarea, and let the browser
112
+ believe that the user is typing into that. What we show to the user is
113
+ a DOM structure we built to represent his document. If this is updated
114
+ quickly enough, and shows some kind of believable cursor, it feels
115
+ like a real text-input control.</p>
116
+
117
+ <p>Another big win is that this DOM representation does not have to
118
+ span the whole document. Some CodeMirror 1 users insisted that they
119
+ needed to put a 30 thousand line XML document into CodeMirror. Putting
120
+ all that into the DOM takes a while, especially since, for some
121
+ reason, an editable DOM tree is slower than a normal one on most
122
+ browsers. If we have full control over what we show, we must only
123
+ ensure that the visible part of the document has been added, and can
124
+ do the rest only when needed. (Fortunately, the <code>onscroll</code>
125
+ event works almost the same on all browsers, and lends itself well to
126
+ displaying things only as they are scrolled into view.)</p>
127
+
128
+ <h2 id="input">Input</h2>
129
+
130
+ <p>ACE uses its hidden textarea only as a text input shim, and does
131
+ all cursor movement and things like text deletion itself by directly
132
+ handling key events. CodeMirror's way is to let the browser do its
133
+ thing as much as possible, and not, for example, define its own set of
134
+ key bindings. One way to do this would have been to have the whole
135
+ document inside the hidden textarea, and after each key event update
136
+ the display DOM to reflect what's in that textarea.</p>
137
+
138
+ <p>That'd be simple, but it is not realistic. For even medium-sized
139
+ document the editor would be constantly munging huge strings, and get
140
+ terribly slow. What CodeMirror 2 does is put the current selection,
141
+ along with an extra line on the top and on the bottom, into the
142
+ textarea.</p>
143
+
144
+ <p>This means that the arrow keys (and their ctrl-variations), home,
145
+ end, etcetera, do not have to be handled specially. We just read the
146
+ cursor position in the textarea, and update our cursor to match it.
147
+ Also, copy and paste work pretty much for free, and people get their
148
+ native key bindings, without any special work on my part. For example,
149
+ I have emacs key bindings configured for Chrome and Firefox. There is
150
+ no way for a script to detect this.</p>
151
+
152
+ <p>Of course, since only a small part of the document sits in the
153
+ textarea, keys like page up and ctrl-end won't do the right thing.
154
+ CodeMirror is catching those events and handling them itself.</p>
155
+
156
+ <h2 id="selection">Selection</h2>
157
+
158
+ <p>Getting and setting the selection range of a textarea in modern
159
+ browsers is trivial—you just use the <code>selectionStart</code>
160
+ and <code>selectionEnd</code> properties. On IE you have to do some
161
+ insane stuff with temporary ranges and compensating for the fact that
162
+ moving the selection by a 'character' will treat \r\n as a single
163
+ character, but even there it is possible to build functions that
164
+ reliably set and get the selection range.</p>
165
+
166
+ <p>But consider this typical case: When I'm somewhere in my document,
167
+ press shift, and press the up arrow, something gets selected. Then, if
168
+ I, still holding shift, press the up arrow again, the top of my
169
+ selection is adjusted. The selection remembers where its <em>head</em>
170
+ and its <em>anchor</em> are, and moves the head when we shift-move.
171
+ This is a generally accepted property of selections, and done right by
172
+ every editing component built in the past twenty years.</p>
173
+
174
+ <p>But not something that the browser selection APIs expose.</p>
175
+
176
+ <p>Great. So when someone creates an 'upside-down' selection, the next
177
+ time CodeMirror has to update the textarea, it'll re-create the
178
+ selection as an 'upside-up' selection, with the anchor at the top, and
179
+ the next cursor motion will behave in an unexpected way—our second
180
+ up-arrow press in the example above will not do anything, since it is
181
+ interpreted in exactly the same way as the first.</p>
182
+
183
+ <p>No problem. We'll just, ehm, detect that the selection is
184
+ upside-down (you can tell by the way it was created), and then, when
185
+ an upside-down selection is present, and a cursor-moving key is
186
+ pressed in combination with shift, we quickly collapse the selection
187
+ in the textarea to its start, allow the key to take effect, and then
188
+ combine its new head with its old anchor to get the <em>real</em>
189
+ selection.</p>
190
+
191
+ <p>In short, scary hacks could not be avoided entirely in CodeMirror
192
+ 2.</p>
193
+
194
+ <p>And, the observant reader might ask, how do you even know that a
195
+ key combo is a cursor-moving combo, if you claim you support any
196
+ native key bindings? Well, we don't, but we can learn. The editor
197
+ keeps a set known cursor-movement combos (initialized to the
198
+ predictable defaults), and updates this set when it observes that
199
+ pressing a certain key had (only) the effect of moving the cursor.
200
+ This, of course, doesn't work if the first time the key is used was
201
+ for extending an inverted selection, but it works most of the
202
+ time.</p>
203
+
204
+ <h2 id="update">Intelligent Updating</h2>
205
+
206
+ <p>One thing that always comes up when you have a complicated internal
207
+ state that's reflected in some user-visible external representation
208
+ (in this case, the displayed code and the textarea's content) is
209
+ keeping the two in sync. The naive way is to just update the display
210
+ every time you change your state, but this is not only error prone
211
+ (you'll forget), it also easily leads to duplicate work on big,
212
+ composite operations. Then you start passing around flags indicating
213
+ whether the display should be updated in an attempt to be efficient
214
+ again and, well, at that point you might as well give up completely.</p>
215
+
216
+ <p>I did go down that road, but then switched to a much simpler model:
217
+ simply keep track of all the things that have been changed during an
218
+ action, and then, only at the end, use this information to update the
219
+ user-visible display.</p>
220
+
221
+ <p>CodeMirror uses a concept of <em>operations</em>, which start by
222
+ calling a specific set-up function that clears the state and end by
223
+ calling another function that reads this state and does the required
224
+ updating. Most event handlers, and all the user-visible methods that
225
+ change state are wrapped like this. There's a method
226
+ called <code>operation</code> that accepts a function, and returns
227
+ another function that wraps the given function as an operation.</p>
228
+
229
+ <p>It's trivial to extend this (as CodeMirror does) to detect nesting,
230
+ and, when an operation is started inside an operation, simply
231
+ increment the nesting count, and only do the updating when this count
232
+ reaches zero again.</p>
233
+
234
+ <p>If we have a set of changed ranges and know the currently shown
235
+ range, we can (with some awkward code to deal with the fact that
236
+ changes can add and remove lines, so we're dealing with a changing
237
+ coordinate system) construct a map of the ranges that were left
238
+ intact. We can then compare this map with the part of the document
239
+ that's currently visible (based on scroll offset and editor height) to
240
+ determine whether something needs to be updated.</p>
241
+
242
+ <p>CodeMirror uses two update algorithms—a full refresh, where it just
243
+ discards the whole part of the DOM that contains the edited text and
244
+ rebuilds it, and a patch algorithm, where it uses the information
245
+ about changed and intact ranges to update only the out-of-date parts
246
+ of the DOM. When more than 30 percent (which is the current heuristic,
247
+ might change) of the lines need to be updated, the full refresh is
248
+ chosen (since it's faster to do than painstakingly finding and
249
+ updating all the changed lines), in the other case it does the
250
+ patching (so that, if you scroll a line or select another character,
251
+ the whole screen doesn't have to be re-rendered).</p>
252
+
253
+ <p>All updating uses <code>innerHTML</code> rather than direct DOM
254
+ manipulation, since that still seems to be by far the fastest way to
255
+ build documents. There's a per-line function that combines the
256
+ highlighting, <a href="manual.html#markText">marking</a>, and
257
+ selection info for that line into a snippet of HTML. The patch updater
258
+ uses this to reset individual lines, the refresh updater builds an
259
+ HTML chunk for the whole visible document at once, and then uses a
260
+ single <code>innerHTML</code> update to do the refresh.</p>
261
+
262
+ <h2 id="parse">Parsers can be Simple</h2>
263
+
264
+ <p>When I wrote CodeMirror 1, I
265
+ thought <a href="http://codemirror.net/story.html#parser">interruptable
266
+ parsers</a> were a hugely scary and complicated thing, and I used a
267
+ bunch of heavyweight abstractions to keep this supposed complexity
268
+ under control: parsers
269
+ were <a href="http://bob.pythonmac.org/archives/2005/07/06/iteration-in-javascript/">iterators</a>
270
+ that consumed input from another iterator, and used funny
271
+ closure-resetting tricks to copy and resume themselves.</p>
272
+
273
+ <p>This made for a rather nice system, in that parsers formed strictly
274
+ separate modules, and could be composed in predictable ways.
275
+ Unfortunately, it was quite slow (stacking three or four iterators on
276
+ top of each other), and extremely intimidating to people not used to a
277
+ functional programming style.</p>
278
+
279
+ <p>With a few small changes, however, we can keep all those
280
+ advantages, but simplify the API and make the whole thing less
281
+ indirect and inefficient. CodeMirror
282
+ 2's <a href="manual.html#modeapi">mode API</a> uses explicit state
283
+ objects, and makes the parser/tokenizer a function that simply takes a
284
+ state and a character stream abstraction, advances the stream one
285
+ token, and returns the way the token should be styled. This state may
286
+ be copied, optionally in a mode-defined way, in order to be able to
287
+ continue a parse at a given point. Even someone who's never touched a
288
+ lambda in his life can understand this approach. Additionally, far
289
+ fewer objects are allocated in the course of parsing now.</p>
290
+
291
+ <p>The biggest speedup comes from the fact that the parsing no longer
292
+ has to touch the DOM though. In CodeMirror 1, on an older browser, you
293
+ could <em>see</em> the parser work its way through the document,
294
+ managing some twenty lines in each 50-millisecond time slice it got. It
295
+ was reading its input from the DOM, and updating the DOM as it went
296
+ along, which any experienced JavaScript programmer will immediately
297
+ spot as a recipe for slowness. In CodeMirror 2, the parser usually
298
+ finishes the whole document in a single 100-millisecond time slice—it
299
+ manages some 1500 lines during that time on Chrome. All it has to do
300
+ is munge strings, so there is no real reason for it to be slow
301
+ anymore.</p>
302
+
303
+ <h2 id="summary">What Gives?</h2>
304
+
305
+ <p>Given all this, what can you expect from CodeMirror 2? First, the
306
+ good:</p>
307
+
308
+ <ul>
309
+
310
+ <li><strong>Small.</strong> the base library is some 32k when minified
311
+ now, 12k when gzipped. It's smaller than its own logo.</li>
312
+
313
+ <li><strong>Lightweight.</strong> CodeMirror 2 initializes very
314
+ quickly, and does almost no work when it is not focused. This means
315
+ you can treat it almost like a textarea, have multiple instances on a
316
+ page without trouble.</li>
317
+
318
+ <li><strong>Huge document support.</strong> Since highlighting is
319
+ really fast, and no DOM structure is being built for non-visible
320
+ content, you don't have to worry about locking up your browser when a
321
+ user enters a megabyte-sized document.</li>
322
+
323
+ <li><strong>Extended API.</strong> Some things kept coming up in the
324
+ mailing list, such as marking pieces of text or lines, which were
325
+ extremely hard to do with CodeMirror 1. The new version has proper
326
+ support for these built in.</li>
327
+
328
+ <li><strong>Tab support.</strong> Tabs inside editable documents were,
329
+ for some reason, a no-go. At least six different people announced they
330
+ were going to add tab support to CodeMirror 1, none survived (I mean,
331
+ none delivered a working version). CodeMirror 2 no longer removes tabs
332
+ from your document.</li>
333
+
334
+ <li><strong>Sane styling.</strong> <code>iframe</code> nodes aren't
335
+ really known for respecting document flow. Now that an editor instance
336
+ is a plain <code>div</code> element, it is much easier to size it to
337
+ fit the surrounding elements. You don't even have to make it scroll if
338
+ you do not <a href="demo/resize.html">want to</a>.</li>
339
+
340
+ </ul>
341
+
342
+ <p>Then, the bad:</p>
343
+
344
+ <ul>
345
+
346
+ <li><strong>No line-wrapping.</strong> I'd have liked to get
347
+ line-wrapping to work, but it doesn't match the model I'm using very
348
+ well. It is important that cursor movement in the textarea matches
349
+ what you see on the screen, and it seems to be impossible to have the
350
+ lines wrapped the same in the textarea and the normal DOM.</li>
351
+
352
+ <li><strong>Some cursor flakiness.</strong> The textarea hack does not
353
+ really do justice to the complexity of cursor handling—a selection is
354
+ typically more than just an offset into a string. For example, if you
355
+ use the up and down arrow keys to move to a shorter line and then
356
+ back, you'll end up in your old position in most editor controls, but
357
+ CodeMirror 2 currently doesn't remember the 'real' cursor column in
358
+ this case. These can be worked around on a case-by-case basis, but
359
+ I haven't put much energy into that yet.</li>
360
+
361
+ <li><strong>Limited interaction with the editable panel.</strong>
362
+ Since the element you're looking at is not a real editable panel,
363
+ native browser behaviour for editable controls doesn't work
364
+ automatically. Through a lot of event glue code, I've managed to make
365
+ drag and drop work pretty well, have context menus work on most
366
+ browsers (except Opera). Middle-click paste on Firefox in Linux is
367
+ broken until someone finds a way to intercept it.</li>
368
+
369
+ </ul>
370
+
371
+ </div><div class="rightsmall blk">
372
+
373
+ <h2>Contents</h2>
374
+
375
+ <ul>
376
+ <li><a href="#intro">Introduction</a></li>
377
+ <li><a href="#approach">General Approach</a></li>
378
+ <li><a href="#input">Input</a></li>
379
+ <li><a href="#selection">Selection</a></li>
380
+ <li><a href="#update">Intelligent Updating</a></li>
381
+ <li><a href="#parse">Parsing</a></li>
382
+ <li><a href="#summary">What Gives?</a></li>
383
+ </ul>
384
+
385
+ </div></div>
386
+
387
+ <div style="height: 2em">&nbsp;</div>
388
+
389
+ </body></html>
@@ -0,0 +1,67 @@
1
+ .CodeMirror {
2
+ line-height: 1em;
3
+ font-family: monospace;
4
+ }
5
+
6
+ .CodeMirror-scroll {
7
+ overflow: auto;
8
+ height: 300px;
9
+ /* This is needed to prevent an IE[67] bug where the scrolled content
10
+ is visible outside of the scrolling box. */
11
+ position: relative;
12
+ }
13
+
14
+ .CodeMirror-gutter {
15
+ position: absolute; left: 0; top: 0;
16
+ background-color: #f7f7f7;
17
+ border-right: 1px solid #eee;
18
+ min-width: 2em;
19
+ height: 100%;
20
+ }
21
+ .CodeMirror-gutter-text {
22
+ color: #aaa;
23
+ text-align: right;
24
+ padding: .4em .2em .4em .4em;
25
+ }
26
+ .CodeMirror-lines {
27
+ padding: .4em;
28
+ }
29
+
30
+ .CodeMirror pre {
31
+ -moz-border-radius: 0;
32
+ -webkit-border-radius: 0;
33
+ -o-border-radius: 0;
34
+ border-radius: 0;
35
+ border-width: 0; margin: 0; padding: 0; background: transparent;
36
+ font-family: inherit;
37
+ font-size: inherit;
38
+ padding: 0; margin: 0;
39
+ white-space: pre;
40
+ word-wrap: normal;
41
+ }
42
+
43
+ .CodeMirror textarea {
44
+ font-family: inherit !important;
45
+ font-size: inherit !important;
46
+ }
47
+
48
+ .CodeMirror-cursor {
49
+ z-index: 10;
50
+ position: absolute;
51
+ visibility: hidden;
52
+ border-left: 1px solid black !important;
53
+ }
54
+ .CodeMirror-focused .CodeMirror-cursor {
55
+ visibility: visible;
56
+ }
57
+
58
+ span.CodeMirror-selected {
59
+ background: #ccc !important;
60
+ color: HighlightText !important;
61
+ }
62
+ .CodeMirror-focused span.CodeMirror-selected {
63
+ background: Highlight !important;
64
+ }
65
+
66
+ .CodeMirror-matchingbracket {color: #0f0 !important;}
67
+ .CodeMirror-nonmatchingbracket {color: #f22 !important;}