lines-engine 0.6.2 → 0.9.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- checksums.yaml.gz.sig +0 -0
- data.tar.gz.sig +0 -0
- data/.gitignore +1 -0
- data/CHANGELOG.md +10 -3
- data/Gemfile +1 -0
- data/Gemfile.lock +10 -6
- data/app/assets/images/favicon.ico +0 -0
- data/app/assets/images/gplus.svg +17 -0
- data/app/assets/javascripts/lines/admin/admin.js +299 -0
- data/app/assets/javascripts/lines/{autosize.min.js → admin/autosize.min.js} +0 -0
- data/app/assets/javascripts/lines/admin/navbar.js +51 -0
- data/app/assets/javascripts/lines/{pictures.js.coffee → admin/pictures.js.coffee} +2 -1
- data/app/assets/javascripts/lines/application.js +3 -0
- data/app/assets/javascripts/lines/articles.js.coffee +1 -0
- data/app/assets/javascripts/lines/viewer.js.coffee +3 -0
- data/app/assets/stylesheets/lines/admin/admin.scss +609 -0
- data/app/assets/stylesheets/lines/admin/variables_and_mixins.scss +36 -0
- data/app/assets/stylesheets/lines/application.scss +2 -13
- data/app/assets/stylesheets/lines/article.scss +165 -69
- data/app/assets/stylesheets/lines/fonts.scss +2 -2
- data/app/assets/stylesheets/lines/footer.scss +10 -56
- data/app/assets/stylesheets/lines/general.scss +18 -13
- data/app/assets/stylesheets/lines/media_queries.scss +5 -1
- data/app/assets/stylesheets/lines/messages.scss +28 -0
- data/app/assets/stylesheets/lines/navbar.scss +199 -122
- data/app/assets/stylesheets/lines/pagination.scss +8 -31
- data/app/assets/stylesheets/lines/pygments.css.erb +1 -2
- data/app/assets/stylesheets/lines/variables_and_mixins.scss +4 -0
- data/app/controllers/lines/admin/articles_controller.rb +8 -6
- data/app/controllers/lines/admin/authors_controller.rb +2 -2
- data/app/controllers/lines/admin/pictures_controller.rb +1 -1
- data/app/controllers/lines/application_controller.rb +1 -1
- data/app/controllers/lines/articles_controller.rb +3 -1
- data/app/controllers/lines/password_resets_controller.rb +4 -7
- data/app/controllers/lines/sessions_controller.rb +3 -3
- data/app/helpers/lines/application_helper.rb +25 -4
- data/app/mailers/lines/user_mailer.rb +1 -1
- data/app/models/lines/article.rb +13 -3
- data/app/models/lines/user.rb +2 -2
- data/app/uploaders/picture_uploader.rb +1 -1
- data/app/views/layouts/lines/_markdown_cheatsheet.html.erb +72 -0
- data/app/views/layouts/lines/admin.html.erb +15 -4
- data/app/views/layouts/lines/application.html.erb +16 -4
- data/app/views/layouts/lines/preview.html.erb +30 -2
- data/app/views/lines/admin/articles/_form.html.erb +50 -148
- data/app/views/lines/admin/articles/_picture_box.html.erb +37 -8
- data/app/views/lines/admin/articles/edit.html.erb +2 -12
- data/app/views/lines/admin/articles/index.html.erb +40 -28
- data/app/views/lines/admin/articles/new.html.erb +3 -10
- data/app/views/lines/admin/articles/show.html.erb +6 -4
- data/app/views/lines/admin/authors/_form.html.erb +12 -41
- data/app/views/lines/admin/authors/index.html.erb +18 -13
- data/app/views/lines/admin/authors/show.html.erb +19 -48
- data/app/views/lines/admin/pictures/_picture.html.erb +5 -4
- data/app/views/lines/admin/pictures/create.js.erb +1 -1
- data/app/views/lines/admin/pictures/destroy.js.erb +1 -1
- data/app/views/lines/articles/_article.html.erb +10 -6
- data/app/views/lines/articles/_article_collection.html.erb +1 -1
- data/app/views/lines/articles/_article_small.html.erb +9 -7
- data/app/views/lines/articles/index.atom.builder +10 -9
- data/app/views/lines/articles/index.html.erb +2 -2
- data/app/views/lines/articles/show.html.erb +5 -1
- data/app/views/lines/password_resets/edit.html.erb +25 -12
- data/app/views/lines/password_resets/new.html.erb +14 -8
- data/app/views/lines/sessions/new.html.erb +6 -10
- data/app/views/lines/shared/_flash.html.erb +1 -1
- data/app/views/lines/shared/_footer.html.erb +5 -28
- data/app/views/lines/user_mailer/password_reset.html.erb +6 -5
- data/app/views/lines/user_mailer/password_reset.text.erb +8 -4
- data/config/lines_config.yml +15 -14
- data/config/routes.rb +2 -2
- data/db/seeds.rb +5 -5
- data/lib/lines/engine.rb +1 -1
- data/lib/lines/version.rb +1 -1
- data/lines.gemspec +1 -1
- data/public/codemirror/.gitattributes +8 -0
- data/public/codemirror/.gitignore +8 -0
- data/public/codemirror/.npmignore +9 -0
- data/public/codemirror/.travis.yml +4 -0
- data/public/codemirror/AUTHORS +474 -0
- data/public/codemirror/CONTRIBUTING.md +88 -0
- data/public/codemirror/LICENSE +19 -0
- data/public/codemirror/README.md +27 -0
- data/public/codemirror/addon/comment/comment.js +183 -0
- data/public/codemirror/addon/comment/continuecomment.js +85 -0
- data/public/codemirror/addon/dialog/dialog.css +32 -0
- data/public/codemirror/addon/dialog/dialog.js +157 -0
- data/public/codemirror/addon/display/fullscreen.css +6 -0
- data/public/codemirror/addon/display/fullscreen.js +41 -0
- data/public/codemirror/addon/display/panel.js +112 -0
- data/public/codemirror/addon/display/placeholder.js +58 -0
- data/public/codemirror/addon/display/rulers.js +63 -0
- data/public/codemirror/addon/edit/closebrackets.js +185 -0
- data/public/codemirror/addon/edit/closetag.js +166 -0
- data/public/codemirror/addon/edit/continuelist.js +51 -0
- data/public/codemirror/addon/edit/matchbrackets.js +120 -0
- data/public/codemirror/addon/edit/matchtags.js +66 -0
- data/public/codemirror/addon/edit/trailingspace.js +27 -0
- data/public/codemirror/addon/fold/brace-fold.js +105 -0
- data/public/codemirror/addon/fold/comment-fold.js +57 -0
- data/public/codemirror/addon/fold/foldcode.js +149 -0
- data/public/codemirror/addon/fold/foldgutter.css +20 -0
- data/public/codemirror/addon/fold/foldgutter.js +146 -0
- data/public/codemirror/addon/fold/indent-fold.js +44 -0
- data/public/codemirror/addon/fold/markdown-fold.js +49 -0
- data/public/codemirror/addon/fold/xml-fold.js +182 -0
- data/public/codemirror/addon/hint/anyword-hint.js +41 -0
- data/public/codemirror/addon/hint/css-hint.js +60 -0
- data/public/codemirror/addon/hint/html-hint.js +348 -0
- data/public/codemirror/addon/hint/javascript-hint.js +146 -0
- data/public/codemirror/addon/hint/show-hint.css +38 -0
- data/public/codemirror/addon/hint/show-hint.js +386 -0
- data/public/codemirror/addon/hint/sql-hint.js +254 -0
- data/public/codemirror/addon/hint/xml-hint.js +110 -0
- data/public/codemirror/addon/lint/coffeescript-lint.js +41 -0
- data/public/codemirror/addon/lint/css-lint.js +35 -0
- data/public/codemirror/addon/lint/javascript-lint.js +136 -0
- data/public/codemirror/addon/lint/json-lint.js +31 -0
- data/public/codemirror/addon/lint/lint.css +73 -0
- data/public/codemirror/addon/lint/lint.js +207 -0
- data/public/codemirror/addon/lint/yaml-lint.js +28 -0
- data/public/codemirror/addon/merge/merge.css +112 -0
- data/public/codemirror/addon/merge/merge.js +775 -0
- data/public/codemirror/addon/mode/loadmode.js +64 -0
- data/public/codemirror/addon/mode/multiplex.js +123 -0
- data/public/codemirror/addon/mode/multiplex_test.js +33 -0
- data/public/codemirror/addon/mode/overlay.js +85 -0
- data/public/codemirror/addon/mode/simple.js +213 -0
- data/public/codemirror/addon/runmode/colorize.js +40 -0
- data/public/codemirror/addon/runmode/runmode-standalone.js +157 -0
- data/public/codemirror/addon/runmode/runmode.js +72 -0
- data/public/codemirror/addon/runmode/runmode.node.js +178 -0
- data/public/codemirror/addon/scroll/annotatescrollbar.js +115 -0
- data/public/codemirror/addon/scroll/scrollpastend.js +46 -0
- data/public/codemirror/addon/scroll/simplescrollbars.css +66 -0
- data/public/codemirror/addon/scroll/simplescrollbars.js +147 -0
- data/public/codemirror/addon/search/match-highlighter.js +128 -0
- data/public/codemirror/addon/search/matchesonscrollbar.css +8 -0
- data/public/codemirror/addon/search/matchesonscrollbar.js +97 -0
- data/public/codemirror/addon/search/search.js +202 -0
- data/public/codemirror/addon/search/searchcursor.js +189 -0
- data/public/codemirror/addon/selection/active-line.js +71 -0
- data/public/codemirror/addon/selection/mark-selection.js +118 -0
- data/public/codemirror/addon/selection/selection-pointer.js +98 -0
- data/public/codemirror/addon/tern/tern.css +87 -0
- data/public/codemirror/addon/tern/tern.js +699 -0
- data/public/codemirror/addon/tern/worker.js +44 -0
- data/public/codemirror/addon/wrap/hardwrap.js +139 -0
- data/public/codemirror/bin/authors.sh +6 -0
- data/public/codemirror/bin/compress +92 -0
- data/public/codemirror/bin/lint +3 -0
- data/public/codemirror/bin/release +45 -0
- data/public/codemirror/bin/source-highlight +51 -0
- data/public/codemirror/bower.json +17 -0
- data/public/codemirror/demo/activeline.html +78 -0
- data/public/codemirror/demo/anywordhint.html +79 -0
- data/public/codemirror/demo/bidi.html +74 -0
- data/public/codemirror/demo/btree.html +85 -0
- data/public/codemirror/demo/buffers.html +109 -0
- data/public/codemirror/demo/changemode.html +58 -0
- data/public/codemirror/demo/closebrackets.html +52 -0
- data/public/codemirror/demo/closetag.html +41 -0
- data/public/codemirror/demo/complete.html +79 -0
- data/public/codemirror/demo/emacs.html +75 -0
- data/public/codemirror/demo/folding.html +95 -0
- data/public/codemirror/demo/fullscreen.html +83 -0
- data/public/codemirror/demo/hardwrap.html +72 -0
- data/public/codemirror/demo/html5complete.html +56 -0
- data/public/codemirror/demo/indentwrap.html +59 -0
- data/public/codemirror/demo/lint.html +171 -0
- data/public/codemirror/demo/loadmode.html +72 -0
- data/public/codemirror/demo/marker.html +52 -0
- data/public/codemirror/demo/markselection.html +52 -0
- data/public/codemirror/demo/matchhighlighter.html +47 -0
- data/public/codemirror/demo/matchtags.html +48 -0
- data/public/codemirror/demo/merge.html +122 -0
- data/public/codemirror/demo/multiplex.html +75 -0
- data/public/codemirror/demo/mustache.html +69 -0
- data/public/codemirror/demo/panel.html +136 -0
- data/public/codemirror/demo/placeholder.html +45 -0
- data/public/codemirror/demo/preview.html +87 -0
- data/public/codemirror/demo/requirejs.html +70 -0
- data/public/codemirror/demo/resize.html +51 -0
- data/public/codemirror/demo/rulers.html +49 -0
- data/public/codemirror/demo/runmode.html +62 -0
- data/public/codemirror/demo/search.html +95 -0
- data/public/codemirror/demo/simplemode.html +186 -0
- data/public/codemirror/demo/simplescrollbars.html +82 -0
- data/public/codemirror/demo/spanaffectswrapping_shim.html +85 -0
- data/public/codemirror/demo/sublime.html +76 -0
- data/public/codemirror/demo/tern.html +133 -0
- data/public/codemirror/demo/theme.html +152 -0
- data/public/codemirror/demo/trailingspace.html +48 -0
- data/public/codemirror/demo/variableheight.html +67 -0
- data/public/codemirror/demo/vim.html +104 -0
- data/public/codemirror/demo/visibletabs.html +62 -0
- data/public/codemirror/demo/widget.html +85 -0
- data/public/codemirror/demo/xmlcomplete.html +119 -0
- data/public/codemirror/doc/activebookmark.js +57 -0
- data/public/codemirror/doc/compress.html +329 -0
- data/public/codemirror/doc/docs.css +271 -0
- data/public/codemirror/doc/internals.html +503 -0
- data/public/codemirror/doc/logo.png +0 -0
- data/public/codemirror/doc/logo.svg +181 -0
- data/public/codemirror/doc/manual.html +3327 -0
- data/public/codemirror/doc/realworld.html +174 -0
- data/public/codemirror/doc/releases.html +1116 -0
- data/public/codemirror/doc/reporting.html +61 -0
- data/public/codemirror/doc/upgrade_v2.2.html +96 -0
- data/public/codemirror/doc/upgrade_v3.html +230 -0
- data/public/codemirror/doc/upgrade_v4.html +144 -0
- data/public/codemirror/doc/yinyang.png +0 -0
- data/public/codemirror/index.html +199 -0
- data/public/codemirror/keymap/emacs.js +412 -0
- data/public/codemirror/keymap/sublime.js +555 -0
- data/public/codemirror/keymap/vim.js +5060 -0
- data/public/codemirror/lib/codemirror.css +332 -0
- data/public/codemirror/lib/codemirror.js +8788 -0
- data/public/codemirror/mode/apl/apl.js +174 -0
- data/public/codemirror/mode/apl/index.html +72 -0
- data/public/codemirror/mode/asciiarmor/asciiarmor.js +73 -0
- data/public/codemirror/mode/asciiarmor/index.html +46 -0
- data/public/codemirror/mode/asn.1/asn.1.js +204 -0
- data/public/codemirror/mode/asn.1/index.html +78 -0
- data/public/codemirror/mode/asterisk/asterisk.js +196 -0
- data/public/codemirror/mode/asterisk/index.html +154 -0
- data/public/codemirror/mode/brainfuck/brainfuck.js +85 -0
- data/public/codemirror/mode/brainfuck/index.html +85 -0
- data/public/codemirror/mode/clike/clike.js +604 -0
- data/public/codemirror/mode/clike/index.html +252 -0
- data/public/codemirror/mode/clike/scala.html +767 -0
- data/public/codemirror/mode/clike/test.js +33 -0
- data/public/codemirror/mode/clojure/clojure.js +244 -0
- data/public/codemirror/mode/clojure/index.html +88 -0
- data/public/codemirror/mode/cmake/cmake.js +97 -0
- data/public/codemirror/mode/cmake/index.html +129 -0
- data/public/codemirror/mode/cobol/cobol.js +255 -0
- data/public/codemirror/mode/cobol/index.html +210 -0
- data/public/codemirror/mode/coffeescript/coffeescript.js +369 -0
- data/public/codemirror/mode/coffeescript/index.html +740 -0
- data/public/codemirror/mode/commonlisp/commonlisp.js +123 -0
- data/public/codemirror/mode/commonlisp/index.html +177 -0
- data/public/codemirror/mode/css/css.js +756 -0
- data/public/codemirror/mode/css/index.html +75 -0
- data/public/codemirror/mode/css/less.html +152 -0
- data/public/codemirror/mode/css/less_test.js +54 -0
- data/public/codemirror/mode/css/scss.html +157 -0
- data/public/codemirror/mode/css/scss_test.js +110 -0
- data/public/codemirror/mode/css/test.js +188 -0
- data/public/codemirror/mode/cypher/cypher.js +146 -0
- data/public/codemirror/mode/cypher/index.html +63 -0
- data/public/codemirror/mode/d/d.js +218 -0
- data/public/codemirror/mode/d/index.html +273 -0
- data/public/codemirror/mode/dart/dart.js +50 -0
- data/public/codemirror/mode/dart/index.html +71 -0
- data/public/codemirror/mode/diff/diff.js +47 -0
- data/public/codemirror/mode/diff/index.html +117 -0
- data/public/codemirror/mode/django/django.js +350 -0
- data/public/codemirror/mode/django/index.html +73 -0
- data/public/codemirror/mode/dockerfile/dockerfile.js +76 -0
- data/public/codemirror/mode/dockerfile/index.html +73 -0
- data/public/codemirror/mode/dtd/dtd.js +142 -0
- data/public/codemirror/mode/dtd/index.html +89 -0
- data/public/codemirror/mode/dylan/dylan.js +291 -0
- data/public/codemirror/mode/dylan/index.html +407 -0
- data/public/codemirror/mode/ebnf/ebnf.js +195 -0
- data/public/codemirror/mode/ebnf/index.html +102 -0
- data/public/codemirror/mode/ecl/ecl.js +206 -0
- data/public/codemirror/mode/ecl/index.html +52 -0
- data/public/codemirror/mode/eiffel/eiffel.js +160 -0
- data/public/codemirror/mode/eiffel/index.html +429 -0
- data/public/codemirror/mode/elm/elm.js +205 -0
- data/public/codemirror/mode/elm/index.html +61 -0
- data/public/codemirror/mode/erlang/erlang.js +618 -0
- data/public/codemirror/mode/erlang/index.html +76 -0
- data/public/codemirror/mode/factor/factor.js +83 -0
- data/public/codemirror/mode/factor/index.html +77 -0
- data/public/codemirror/mode/forth/forth.js +180 -0
- data/public/codemirror/mode/forth/index.html +75 -0
- data/public/codemirror/mode/fortran/fortran.js +188 -0
- data/public/codemirror/mode/fortran/index.html +81 -0
- data/public/codemirror/mode/gas/gas.js +345 -0
- data/public/codemirror/mode/gas/index.html +68 -0
- data/public/codemirror/mode/gfm/gfm.js +124 -0
- data/public/codemirror/mode/gfm/index.html +93 -0
- data/public/codemirror/mode/gfm/test.js +213 -0
- data/public/codemirror/mode/gherkin/gherkin.js +178 -0
- data/public/codemirror/mode/gherkin/index.html +48 -0
- data/public/codemirror/mode/go/go.js +185 -0
- data/public/codemirror/mode/go/index.html +85 -0
- data/public/codemirror/mode/groovy/groovy.js +230 -0
- data/public/codemirror/mode/groovy/index.html +84 -0
- data/public/codemirror/mode/haml/haml.js +159 -0
- data/public/codemirror/mode/haml/index.html +79 -0
- data/public/codemirror/mode/haml/test.js +97 -0
- data/public/codemirror/mode/handlebars/handlebars.js +53 -0
- data/public/codemirror/mode/handlebars/index.html +83 -0
- data/public/codemirror/mode/haskell/haskell.js +267 -0
- data/public/codemirror/mode/haskell/index.html +73 -0
- data/public/codemirror/mode/haxe/haxe.js +518 -0
- data/public/codemirror/mode/haxe/index.html +124 -0
- data/public/codemirror/mode/htmlembedded/htmlembedded.js +28 -0
- data/public/codemirror/mode/htmlembedded/index.html +59 -0
- data/public/codemirror/mode/htmlmixed/htmlmixed.js +121 -0
- data/public/codemirror/mode/htmlmixed/index.html +89 -0
- data/public/codemirror/mode/http/http.js +113 -0
- data/public/codemirror/mode/http/index.html +45 -0
- data/public/codemirror/mode/idl/idl.js +290 -0
- data/public/codemirror/mode/idl/index.html +64 -0
- data/public/codemirror/mode/index.html +149 -0
- data/public/codemirror/mode/jade/index.html +70 -0
- data/public/codemirror/mode/jade/jade.js +590 -0
- data/public/codemirror/mode/javascript/index.html +114 -0
- data/public/codemirror/mode/javascript/javascript.js +704 -0
- data/public/codemirror/mode/javascript/json-ld.html +72 -0
- data/public/codemirror/mode/javascript/test.js +205 -0
- data/public/codemirror/mode/javascript/typescript.html +61 -0
- data/public/codemirror/mode/jinja2/index.html +54 -0
- data/public/codemirror/mode/jinja2/jinja2.js +142 -0
- data/public/codemirror/mode/julia/index.html +195 -0
- data/public/codemirror/mode/julia/julia.js +299 -0
- data/public/codemirror/mode/kotlin/index.html +89 -0
- data/public/codemirror/mode/kotlin/kotlin.js +284 -0
- data/public/codemirror/mode/livescript/index.html +459 -0
- data/public/codemirror/mode/livescript/livescript.js +280 -0
- data/public/codemirror/mode/lua/index.html +85 -0
- data/public/codemirror/mode/lua/lua.js +159 -0
- data/public/codemirror/mode/markdown/index.html +359 -0
- data/public/codemirror/mode/markdown/markdown.js +781 -0
- data/public/codemirror/mode/markdown/test.js +792 -0
- data/public/codemirror/mode/mathematica/index.html +72 -0
- data/public/codemirror/mode/mathematica/mathematica.js +175 -0
- data/public/codemirror/mode/meta.js +190 -0
- data/public/codemirror/mode/mirc/index.html +160 -0
- data/public/codemirror/mode/mirc/mirc.js +193 -0
- data/public/codemirror/mode/mllike/index.html +179 -0
- data/public/codemirror/mode/mllike/mllike.js +205 -0
- data/public/codemirror/mode/modelica/index.html +67 -0
- data/public/codemirror/mode/modelica/modelica.js +245 -0
- data/public/codemirror/mode/mumps/index.html +85 -0
- data/public/codemirror/mode/mumps/mumps.js +148 -0
- data/public/codemirror/mode/nginx/index.html +181 -0
- data/public/codemirror/mode/nginx/nginx.js +178 -0
- data/public/codemirror/mode/ntriples/index.html +45 -0
- data/public/codemirror/mode/ntriples/ntriples.js +186 -0
- data/public/codemirror/mode/octave/index.html +83 -0
- data/public/codemirror/mode/octave/octave.js +135 -0
- data/public/codemirror/mode/pascal/index.html +61 -0
- data/public/codemirror/mode/pascal/pascal.js +109 -0
- data/public/codemirror/mode/pegjs/index.html +66 -0
- data/public/codemirror/mode/pegjs/pegjs.js +114 -0
- data/public/codemirror/mode/perl/index.html +75 -0
- data/public/codemirror/mode/perl/perl.js +837 -0
- data/public/codemirror/mode/php/index.html +64 -0
- data/public/codemirror/mode/php/php.js +230 -0
- data/public/codemirror/mode/php/test.js +154 -0
- data/public/codemirror/mode/pig/index.html +55 -0
- data/public/codemirror/mode/pig/pig.js +178 -0
- data/public/codemirror/mode/properties/index.html +53 -0
- data/public/codemirror/mode/properties/properties.js +78 -0
- data/public/codemirror/mode/puppet/index.html +121 -0
- data/public/codemirror/mode/puppet/puppet.js +220 -0
- data/public/codemirror/mode/python/index.html +198 -0
- data/public/codemirror/mode/python/python.js +358 -0
- data/public/codemirror/mode/q/index.html +144 -0
- data/public/codemirror/mode/q/q.js +139 -0
- data/public/codemirror/mode/r/index.html +85 -0
- data/public/codemirror/mode/r/r.js +162 -0
- data/public/codemirror/mode/rpm/changes/index.html +66 -0
- data/public/codemirror/mode/rpm/index.html +149 -0
- data/public/codemirror/mode/rpm/rpm.js +101 -0
- data/public/codemirror/mode/rst/index.html +535 -0
- data/public/codemirror/mode/rst/rst.js +557 -0
- data/public/codemirror/mode/ruby/index.html +183 -0
- data/public/codemirror/mode/ruby/ruby.js +285 -0
- data/public/codemirror/mode/ruby/test.js +14 -0
- data/public/codemirror/mode/rust/index.html +60 -0
- data/public/codemirror/mode/rust/rust.js +451 -0
- data/public/codemirror/mode/sass/index.html +66 -0
- data/public/codemirror/mode/sass/sass.js +414 -0
- data/public/codemirror/mode/scheme/index.html +77 -0
- data/public/codemirror/mode/scheme/scheme.js +249 -0
- data/public/codemirror/mode/shell/index.html +66 -0
- data/public/codemirror/mode/shell/shell.js +139 -0
- data/public/codemirror/mode/shell/test.js +58 -0
- data/public/codemirror/mode/sieve/index.html +93 -0
- data/public/codemirror/mode/sieve/sieve.js +193 -0
- data/public/codemirror/mode/slim/index.html +96 -0
- data/public/codemirror/mode/slim/slim.js +575 -0
- data/public/codemirror/mode/slim/test.js +96 -0
- data/public/codemirror/mode/smalltalk/index.html +68 -0
- data/public/codemirror/mode/smalltalk/smalltalk.js +168 -0
- data/public/codemirror/mode/smarty/index.html +138 -0
- data/public/codemirror/mode/smarty/smarty.js +225 -0
- data/public/codemirror/mode/solr/index.html +57 -0
- data/public/codemirror/mode/solr/solr.js +104 -0
- data/public/codemirror/mode/soy/index.html +68 -0
- data/public/codemirror/mode/soy/soy.js +198 -0
- data/public/codemirror/mode/sparql/index.html +61 -0
- data/public/codemirror/mode/sparql/sparql.js +174 -0
- data/public/codemirror/mode/spreadsheet/index.html +42 -0
- data/public/codemirror/mode/spreadsheet/spreadsheet.js +109 -0
- data/public/codemirror/mode/sql/index.html +84 -0
- data/public/codemirror/mode/sql/sql.js +391 -0
- data/public/codemirror/mode/stex/index.html +110 -0
- data/public/codemirror/mode/stex/stex.js +251 -0
- data/public/codemirror/mode/stex/test.js +123 -0
- data/public/codemirror/mode/stylus/index.html +106 -0
- data/public/codemirror/mode/stylus/stylus.js +768 -0
- data/public/codemirror/mode/swift/index.html +88 -0
- data/public/codemirror/mode/swift/swift.js +203 -0
- data/public/codemirror/mode/tcl/index.html +142 -0
- data/public/codemirror/mode/tcl/tcl.js +147 -0
- data/public/codemirror/mode/textile/index.html +191 -0
- data/public/codemirror/mode/textile/test.js +417 -0
- data/public/codemirror/mode/textile/textile.js +469 -0
- data/public/codemirror/mode/tiddlywiki/index.html +154 -0
- data/public/codemirror/mode/tiddlywiki/tiddlywiki.css +14 -0
- data/public/codemirror/mode/tiddlywiki/tiddlywiki.js +358 -0
- data/public/codemirror/mode/tiki/index.html +95 -0
- data/public/codemirror/mode/tiki/tiki.css +26 -0
- data/public/codemirror/mode/tiki/tiki.js +312 -0
- data/public/codemirror/mode/toml/index.html +73 -0
- data/public/codemirror/mode/toml/toml.js +88 -0
- data/public/codemirror/mode/tornado/index.html +63 -0
- data/public/codemirror/mode/tornado/tornado.js +68 -0
- data/public/codemirror/mode/troff/index.html +146 -0
- data/public/codemirror/mode/troff/troff.js +82 -0
- data/public/codemirror/mode/ttcn-cfg/index.html +115 -0
- data/public/codemirror/mode/ttcn-cfg/ttcn-cfg.js +214 -0
- data/public/codemirror/mode/ttcn/index.html +118 -0
- data/public/codemirror/mode/ttcn/ttcn.js +283 -0
- data/public/codemirror/mode/turtle/index.html +50 -0
- data/public/codemirror/mode/turtle/turtle.js +162 -0
- data/public/codemirror/mode/twig/index.html +45 -0
- data/public/codemirror/mode/twig/twig.js +132 -0
- data/public/codemirror/mode/vb/index.html +102 -0
- data/public/codemirror/mode/vb/vb.js +276 -0
- data/public/codemirror/mode/vbscript/index.html +55 -0
- data/public/codemirror/mode/vbscript/vbscript.js +350 -0
- data/public/codemirror/mode/velocity/index.html +118 -0
- data/public/codemirror/mode/velocity/velocity.js +201 -0
- data/public/codemirror/mode/verilog/index.html +120 -0
- data/public/codemirror/mode/verilog/test.js +273 -0
- data/public/codemirror/mode/verilog/verilog.js +537 -0
- data/public/codemirror/mode/vhdl/index.html +95 -0
- data/public/codemirror/mode/vhdl/vhdl.js +189 -0
- data/public/codemirror/mode/xml/index.html +57 -0
- data/public/codemirror/mode/xml/test.js +51 -0
- data/public/codemirror/mode/xml/xml.js +385 -0
- data/public/codemirror/mode/xquery/index.html +210 -0
- data/public/codemirror/mode/xquery/test.js +67 -0
- data/public/codemirror/mode/xquery/xquery.js +437 -0
- data/public/codemirror/mode/yaml/index.html +80 -0
- data/public/codemirror/mode/yaml/yaml.js +117 -0
- data/public/codemirror/mode/z80/index.html +53 -0
- data/public/codemirror/mode/z80/z80.js +116 -0
- data/public/codemirror/package.json +20 -0
- data/public/codemirror/test/comment_test.js +100 -0
- data/public/codemirror/test/doc_test.js +371 -0
- data/public/codemirror/test/driver.js +138 -0
- data/public/codemirror/test/emacs_test.js +147 -0
- data/public/codemirror/test/index.html +241 -0
- data/public/codemirror/test/lint.js +11 -0
- data/public/codemirror/test/mode_test.css +23 -0
- data/public/codemirror/test/mode_test.js +192 -0
- data/public/codemirror/test/multi_test.js +285 -0
- data/public/codemirror/test/phantom_driver.js +31 -0
- data/public/codemirror/test/run.js +31 -0
- data/public/codemirror/test/scroll_test.js +115 -0
- data/public/codemirror/test/search_test.js +62 -0
- data/public/codemirror/test/sql-hint-test.js +189 -0
- data/public/codemirror/test/sublime_test.js +303 -0
- data/public/codemirror/test/test.js +2142 -0
- data/public/codemirror/test/vim_test.js +3955 -0
- data/public/codemirror/theme/3024-day.css +41 -0
- data/public/codemirror/theme/3024-night.css +39 -0
- data/public/codemirror/theme/ambiance-mobile.css +5 -0
- data/public/codemirror/theme/ambiance.css +76 -0
- data/public/codemirror/theme/base16-dark.css +38 -0
- data/public/codemirror/theme/base16-light.css +38 -0
- data/public/codemirror/theme/blackboard.css +32 -0
- data/public/codemirror/theme/cobalt.css +25 -0
- data/public/codemirror/theme/colorforth.css +33 -0
- data/public/codemirror/theme/dracula.css +87 -0
- data/public/codemirror/theme/eclipse.css +23 -0
- data/public/codemirror/theme/elegant.css +13 -0
- data/public/codemirror/theme/erlang-dark.css +34 -0
- data/public/codemirror/theme/icecoder.css +42 -0
- data/public/codemirror/theme/lesser-dark.css +47 -0
- data/public/codemirror/theme/lines.css +109 -0
- data/public/codemirror/theme/liquibyte.css +95 -0
- data/public/codemirror/theme/material.css +105 -0
- data/public/codemirror/theme/mbo.css +37 -0
- data/public/codemirror/theme/mdn-like.css +46 -0
- data/public/codemirror/theme/midnight.css +47 -0
- data/public/codemirror/theme/monokai.css +35 -0
- data/public/codemirror/theme/neat.css +12 -0
- data/public/codemirror/theme/neo.css +43 -0
- data/public/codemirror/theme/night.css +28 -0
- data/public/codemirror/theme/paraiso-dark.css +38 -0
- data/public/codemirror/theme/paraiso-light.css +38 -0
- data/public/codemirror/theme/pastel-on-dark.css +53 -0
- data/public/codemirror/theme/rubyblue.css +25 -0
- data/public/codemirror/theme/seti.css +88 -0
- data/public/codemirror/theme/solarized.css +165 -0
- data/public/codemirror/theme/the-matrix.css +30 -0
- data/public/codemirror/theme/tomorrow-night-bright.css +35 -0
- data/public/codemirror/theme/tomorrow-night-eighties.css +38 -0
- data/public/codemirror/theme/ttcn.css +65 -0
- data/public/codemirror/theme/twilight.css +32 -0
- data/public/codemirror/theme/vibrant-ink.css +34 -0
- data/public/codemirror/theme/xq-dark.css +53 -0
- data/public/codemirror/theme/xq-light.css +43 -0
- data/public/codemirror/theme/yeti.css +86 -0
- data/public/codemirror/theme/zenburn.css +37 -0
- data/public/fira-mono/FiraMono-Bold.eot +0 -0
- data/public/fira-mono/FiraMono-Bold.otf +0 -0
- data/public/fira-mono/FiraMono-Bold.ttf +0 -0
- data/public/fira-mono/FiraMono-Bold.woff +0 -0
- data/public/fira-mono/FiraMono-Medium.eot +0 -0
- data/public/fira-mono/FiraMono-Medium.otf +0 -0
- data/public/fira-mono/FiraMono-Medium.ttf +0 -0
- data/public/fira-mono/FiraMono-Medium.woff +0 -0
- data/public/fira-mono/FiraMono-Regular.eot +0 -0
- data/public/fira-mono/FiraMono-Regular.otf +0 -0
- data/public/fira-mono/FiraMono-Regular.ttf +0 -0
- data/public/fira-mono/FiraMono-Regular.woff +0 -0
- data/public/fira-mono/fira-mono.css +32 -0
- data/public/heroes/lines_default_01.png +0 -0
- data/public/heroes/lines_default_02.png +0 -0
- data/public/heroes/lines_default_03.png +0 -0
- data/public/iconfont/iconfont.css +48 -0
- data/public/iconfont/iconfont.eot +0 -0
- data/public/iconfont/iconfont.svg +18 -0
- data/public/iconfont/iconfont.ttf +0 -0
- data/public/iconfont/iconfont.woff +0 -0
- data/spec/dummy/config/environments/test.rb +3 -1
- data/spec/dummy/db/migrate/20140505122014_base_migration.rb +84 -0
- data/spec/dummy/db/migrate/20140702160602_acts_as_taggable_on_migration.acts_as_taggable_on_engine.rb +31 -0
- data/spec/dummy/db/migrate/20140702160603_add_missing_unique_indices.acts_as_taggable_on_engine.rb +20 -0
- data/spec/dummy/db/migrate/20140702160604_add_taggings_counter_cache_to_tags.acts_as_taggable_on_engine.rb +15 -0
- data/spec/dummy/db/migrate/20141027143656_add_teaser_to_article.rb +5 -0
- data/spec/dummy/db/migrate/20150421093311_add_reset_password_fields_to_users.rb +6 -0
- data/spec/dummy/db/schema.rb +50 -50
- data/spec/dummy/db/seeds.rb +5 -5
- data/spec/factories/users.rb +1 -1
- data/spec/features/article_spec.rb +4 -4
- data/spec/features/password_reset_spec.rb +17 -17
- data/spec/features/user_logs_in_spec.rb +6 -8
- data/spec/mailers/lines/user_mailer_spec.rb +1 -1
- data/spec/models/article_spec.rb +6 -6
- data/spec/support/auth_macros.rb +2 -2
- metadata +492 -26
- metadata.gz.sig +0 -0
- data/app/assets/images/ic_gplus.png +0 -0
- data/app/assets/images/ic_gplus_hover.png +0 -0
- data/app/assets/images/logo.png +0 -0
- data/app/assets/images/logo_opoloo.png +0 -0
- data/app/assets/images/signet.png +0 -0
- data/app/assets/javascripts/lines/admin.js +0 -201
- data/app/assets/stylesheets/lines/admin.scss +0 -970
- data/app/views/layouts/lines/_messages.html.erb +0 -8
- data/app/views/lines/admin/articles/_formatting_guide.html.erb +0 -89
- data/public/heroes/001.jpg +0 -0
- data/public/heroes/001_dark.jpg +0 -0
- data/public/heroes/002.jpg +0 -0
- data/public/heroes/002_dark.jpg +0 -0
- data/public/heroes/003.jpg +0 -0
- data/public/heroes/003_dark.jpg +0 -0
- data/spec/dummy/config/lines_config.yml +0 -58
@@ -0,0 +1,271 @@
|
|
1
|
+
@font-face {
|
2
|
+
font-family: 'Source Sans Pro';
|
3
|
+
font-style: normal;
|
4
|
+
font-weight: 400;
|
5
|
+
src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(//themes.googleusercontent.com/static/fonts/sourcesanspro/v5/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');
|
6
|
+
}
|
7
|
+
|
8
|
+
body, html { margin: 0; padding: 0; height: 100%; }
|
9
|
+
section, article { display: block; padding: 0; }
|
10
|
+
|
11
|
+
body {
|
12
|
+
background: #f8f8f8;
|
13
|
+
font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
|
14
|
+
line-height: 1.5;
|
15
|
+
}
|
16
|
+
|
17
|
+
p { margin-top: 0; }
|
18
|
+
|
19
|
+
h2, h3, h1 {
|
20
|
+
font-weight: normal;
|
21
|
+
margin-bottom: .7em;
|
22
|
+
}
|
23
|
+
h1 { font-size: 140%; }
|
24
|
+
h2 { font-size: 120%; }
|
25
|
+
h3 { font-size: 110%; }
|
26
|
+
article > h2:first-child, section:first-child > h2 { margin-top: 0; }
|
27
|
+
|
28
|
+
#nav h1 {
|
29
|
+
margin-right: 12px;
|
30
|
+
margin-top: 0;
|
31
|
+
margin-bottom: 2px;
|
32
|
+
color: #d30707;
|
33
|
+
letter-spacing: .5px;
|
34
|
+
}
|
35
|
+
|
36
|
+
a, a:visited, a:link, .quasilink {
|
37
|
+
color: #A21313;
|
38
|
+
text-decoration: none;
|
39
|
+
}
|
40
|
+
|
41
|
+
em {
|
42
|
+
padding-right: 2px;
|
43
|
+
}
|
44
|
+
|
45
|
+
.quasilink {
|
46
|
+
cursor: pointer;
|
47
|
+
}
|
48
|
+
|
49
|
+
article {
|
50
|
+
max-width: 700px;
|
51
|
+
margin: 0 0 0 160px;
|
52
|
+
border-left: 2px solid #E30808;
|
53
|
+
border-right: 1px solid #ddd;
|
54
|
+
padding: 30px 50px 100px 50px;
|
55
|
+
background: white;
|
56
|
+
z-index: 2;
|
57
|
+
position: relative;
|
58
|
+
min-height: 100%;
|
59
|
+
box-sizing: border-box;
|
60
|
+
-moz-box-sizing: border-box;
|
61
|
+
}
|
62
|
+
|
63
|
+
#nav {
|
64
|
+
position: fixed;
|
65
|
+
padding-top: 30px;
|
66
|
+
max-height: 100%;
|
67
|
+
box-sizing: -moz-border-box;
|
68
|
+
box-sizing: border-box;
|
69
|
+
overflow-y: auto;
|
70
|
+
left: 0; right: none;
|
71
|
+
width: 160px;
|
72
|
+
text-align: right;
|
73
|
+
z-index: 1;
|
74
|
+
}
|
75
|
+
|
76
|
+
@media screen and (min-width: 1000px) {
|
77
|
+
article {
|
78
|
+
margin: 0 auto;
|
79
|
+
}
|
80
|
+
#nav {
|
81
|
+
right: 50%;
|
82
|
+
width: auto;
|
83
|
+
border-right: 349px solid transparent;
|
84
|
+
}
|
85
|
+
}
|
86
|
+
|
87
|
+
#nav ul {
|
88
|
+
display: block;
|
89
|
+
margin: 0; padding: 0;
|
90
|
+
margin-bottom: 32px;
|
91
|
+
}
|
92
|
+
|
93
|
+
#nav li {
|
94
|
+
display: block;
|
95
|
+
margin-bottom: 4px;
|
96
|
+
}
|
97
|
+
|
98
|
+
#nav li ul {
|
99
|
+
font-size: 80%;
|
100
|
+
margin-bottom: 0;
|
101
|
+
display: none;
|
102
|
+
}
|
103
|
+
|
104
|
+
#nav li.active ul {
|
105
|
+
display: block;
|
106
|
+
}
|
107
|
+
|
108
|
+
#nav li li a {
|
109
|
+
padding-right: 20px;
|
110
|
+
display: inline-block;
|
111
|
+
}
|
112
|
+
|
113
|
+
#nav ul a {
|
114
|
+
color: black;
|
115
|
+
padding: 0 7px 1px 11px;
|
116
|
+
}
|
117
|
+
|
118
|
+
#nav ul a.active, #nav ul a:hover {
|
119
|
+
border-bottom: 1px solid #E30808;
|
120
|
+
margin-bottom: -1px;
|
121
|
+
color: #E30808;
|
122
|
+
}
|
123
|
+
|
124
|
+
#logo {
|
125
|
+
border: 0;
|
126
|
+
margin-right: 12px;
|
127
|
+
margin-bottom: 25px;
|
128
|
+
}
|
129
|
+
|
130
|
+
section {
|
131
|
+
border-top: 1px solid #E30808;
|
132
|
+
margin: 1.5em 0;
|
133
|
+
}
|
134
|
+
|
135
|
+
section.first {
|
136
|
+
border: none;
|
137
|
+
margin-top: 0;
|
138
|
+
}
|
139
|
+
|
140
|
+
#demo {
|
141
|
+
position: relative;
|
142
|
+
}
|
143
|
+
|
144
|
+
#demolist {
|
145
|
+
position: absolute;
|
146
|
+
right: 5px;
|
147
|
+
top: 5px;
|
148
|
+
z-index: 25;
|
149
|
+
}
|
150
|
+
|
151
|
+
.yinyang {
|
152
|
+
position: absolute;
|
153
|
+
top: -10px;
|
154
|
+
left: 0; right: 0;
|
155
|
+
margin: auto;
|
156
|
+
display: block;
|
157
|
+
height: 120px;
|
158
|
+
}
|
159
|
+
|
160
|
+
.actions {
|
161
|
+
margin: 1em 0 0;
|
162
|
+
min-height: 100px;
|
163
|
+
position: relative;
|
164
|
+
}
|
165
|
+
|
166
|
+
.actionspicture {
|
167
|
+
pointer-events: none;
|
168
|
+
position: absolute;
|
169
|
+
height: 100px;
|
170
|
+
top: 0; left: 0; right: 0;
|
171
|
+
}
|
172
|
+
|
173
|
+
.actionlink {
|
174
|
+
pointer-events: auto;
|
175
|
+
font-family: arial;
|
176
|
+
font-size: 80%;
|
177
|
+
font-weight: bold;
|
178
|
+
position: absolute;
|
179
|
+
top: 0; bottom: 0;
|
180
|
+
line-height: 1;
|
181
|
+
height: 1em;
|
182
|
+
margin: auto;
|
183
|
+
}
|
184
|
+
|
185
|
+
.actionlink.download {
|
186
|
+
color: white;
|
187
|
+
right: 50%;
|
188
|
+
margin-right: 13px;
|
189
|
+
text-shadow: -1px 1px 3px #b00, -1px -1px 3px #b00, 1px 0px 3px #b00;
|
190
|
+
}
|
191
|
+
|
192
|
+
.actionlink.fund {
|
193
|
+
color: #b00;
|
194
|
+
left: 50%;
|
195
|
+
margin-left: 15px;
|
196
|
+
}
|
197
|
+
|
198
|
+
.actionlink:hover {
|
199
|
+
text-decoration: underline;
|
200
|
+
}
|
201
|
+
|
202
|
+
.actionlink a {
|
203
|
+
color: inherit;
|
204
|
+
}
|
205
|
+
|
206
|
+
.actionsleft {
|
207
|
+
float: left;
|
208
|
+
}
|
209
|
+
|
210
|
+
.actionsright {
|
211
|
+
float: right;
|
212
|
+
text-align: right;
|
213
|
+
}
|
214
|
+
|
215
|
+
@media screen and (max-width: 800px) {
|
216
|
+
.actions {
|
217
|
+
padding-top: 120px;
|
218
|
+
}
|
219
|
+
.actionsleft, .actionsright {
|
220
|
+
float: none;
|
221
|
+
text-align: left;
|
222
|
+
margin-bottom: 1em;
|
223
|
+
}
|
224
|
+
}
|
225
|
+
|
226
|
+
th {
|
227
|
+
text-decoration: underline;
|
228
|
+
font-weight: normal;
|
229
|
+
text-align: left;
|
230
|
+
}
|
231
|
+
|
232
|
+
#features ul {
|
233
|
+
list-style: none;
|
234
|
+
margin: 0 0 1em;
|
235
|
+
padding: 0 0 0 1.2em;
|
236
|
+
}
|
237
|
+
|
238
|
+
#features li:before {
|
239
|
+
content: "-";
|
240
|
+
width: 1em;
|
241
|
+
display: inline-block;
|
242
|
+
padding: 0;
|
243
|
+
margin: 0;
|
244
|
+
margin-left: -1em;
|
245
|
+
}
|
246
|
+
|
247
|
+
.rel {
|
248
|
+
margin-bottom: 0;
|
249
|
+
}
|
250
|
+
.rel-note {
|
251
|
+
margin-top: 0;
|
252
|
+
color: #555;
|
253
|
+
}
|
254
|
+
|
255
|
+
pre {
|
256
|
+
padding-left: 15px;
|
257
|
+
border-left: 2px solid #ddd;
|
258
|
+
}
|
259
|
+
|
260
|
+
code {
|
261
|
+
padding: 0 2px;
|
262
|
+
}
|
263
|
+
|
264
|
+
strong {
|
265
|
+
text-decoration: underline;
|
266
|
+
font-weight: normal;
|
267
|
+
}
|
268
|
+
|
269
|
+
.field {
|
270
|
+
border: 1px solid #A21313;
|
271
|
+
}
|
@@ -0,0 +1,503 @@
|
|
1
|
+
<!doctype html>
|
2
|
+
|
3
|
+
<title>CodeMirror: Internals</title>
|
4
|
+
<meta charset="utf-8"/>
|
5
|
+
<link rel=stylesheet href="docs.css">
|
6
|
+
<style>dl dl {margin: 0;} .update {color: #d40 !important}</style>
|
7
|
+
<script src="activebookmark.js"></script>
|
8
|
+
|
9
|
+
<div id=nav>
|
10
|
+
<a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="logo.png"></a>
|
11
|
+
|
12
|
+
<ul>
|
13
|
+
<li><a href="../index.html">Home</a>
|
14
|
+
<li><a href="manual.html">Manual</a>
|
15
|
+
<li><a href="https://github.com/codemirror/codemirror">Code</a>
|
16
|
+
</ul>
|
17
|
+
<ul>
|
18
|
+
<li><a href="#top">Introduction</a></li>
|
19
|
+
<li><a href="#approach">General Approach</a></li>
|
20
|
+
<li><a href="#input">Input</a></li>
|
21
|
+
<li><a href="#selection">Selection</a></li>
|
22
|
+
<li><a href="#update">Intelligent Updating</a></li>
|
23
|
+
<li><a href="#parse">Parsing</a></li>
|
24
|
+
<li><a href="#summary">What Gives?</a></li>
|
25
|
+
<li><a href="#btree">Content Representation</a></li>
|
26
|
+
<li><a href="#keymap">Key Maps</a></li>
|
27
|
+
</ul>
|
28
|
+
</div>
|
29
|
+
|
30
|
+
<article>
|
31
|
+
|
32
|
+
<h2 id=top>(Re-) Implementing A Syntax-Highlighting Editor in JavaScript</h2>
|
33
|
+
|
34
|
+
<p style="font-size: 85%" id="intro">
|
35
|
+
<strong>Topic:</strong> JavaScript, code editor implementation<br>
|
36
|
+
<strong>Author:</strong> Marijn Haverbeke<br>
|
37
|
+
<strong>Date:</strong> March 2nd 2011 (updated November 13th 2011)
|
38
|
+
</p>
|
39
|
+
|
40
|
+
<p style="padding: 0 3em 0 2em"><strong>Caution</strong>: this text was written briefly after
|
41
|
+
version 2 was initially written. It no longer (even including the
|
42
|
+
update at the bottom) fully represents the current implementation. I'm
|
43
|
+
leaving it here as a historic document. For more up-to-date
|
44
|
+
information, look at the entries
|
45
|
+
tagged <a href="http://marijnhaverbeke.nl/blog/#cm-internals">cm-internals</a>
|
46
|
+
on my blog.</p>
|
47
|
+
|
48
|
+
<p>This is a followup to
|
49
|
+
my <a href="http://codemirror.net/story.html">Brutal Odyssey to the
|
50
|
+
Dark Side of the DOM Tree</a> story. That one describes the
|
51
|
+
mind-bending process of implementing (what would become) CodeMirror 1.
|
52
|
+
This one describes the internals of CodeMirror 2, a complete rewrite
|
53
|
+
and rethink of the old code base. I wanted to give this piece another
|
54
|
+
Hunter Thompson copycat subtitle, but somehow that would be out of
|
55
|
+
place—the process this time around was one of straightforward
|
56
|
+
engineering, requiring no serious mind-bending whatsoever.</p>
|
57
|
+
|
58
|
+
<p>So, what is wrong with CodeMirror 1? I'd estimate, by mailing list
|
59
|
+
activity and general search-engine presence, that it has been
|
60
|
+
integrated into about a thousand systems by now. The most prominent
|
61
|
+
one, since a few weeks,
|
62
|
+
being <a href="http://googlecode.blogspot.com/2011/01/make-quick-fixes-quicker-on-google.html">Google
|
63
|
+
code's project hosting</a>. It works, and it's being used widely.</p>
|
64
|
+
|
65
|
+
<p>Still, I did not start replacing it because I was bored. CodeMirror
|
66
|
+
1 was heavily reliant on <code>designMode</code>
|
67
|
+
or <code>contentEditable</code> (depending on the browser). Neither of
|
68
|
+
these are well specified (HTML5 tries
|
69
|
+
to <a href="http://www.w3.org/TR/html5/editing.html#contenteditable">specify</a>
|
70
|
+
their basics), and, more importantly, they tend to be one of the more
|
71
|
+
obscure and buggy areas of browser functionality—CodeMirror, by using
|
72
|
+
this functionality in a non-typical way, was constantly running up
|
73
|
+
against browser bugs. WebKit wouldn't show an empty line at the end of
|
74
|
+
the document, and in some releases would suddenly get unbearably slow.
|
75
|
+
Firefox would show the cursor in the wrong place. Internet Explorer
|
76
|
+
would insist on linkifying everything that looked like a URL or email
|
77
|
+
address, a behaviour that can't be turned off. Some bugs I managed to
|
78
|
+
work around (which was often a frustrating, painful process), others,
|
79
|
+
such as the Firefox cursor placement, I gave up on, and had to tell
|
80
|
+
user after user that they were known problems, but not something I
|
81
|
+
could help.</p>
|
82
|
+
|
83
|
+
<p>Also, there is the fact that <code>designMode</code> (which seemed
|
84
|
+
to be less buggy than <code>contentEditable</code> in Webkit and
|
85
|
+
Firefox, and was thus used by CodeMirror 1 in those browsers) requires
|
86
|
+
a frame. Frames are another tricky area. It takes some effort to
|
87
|
+
prevent getting tripped up by domain restrictions, they don't
|
88
|
+
initialize synchronously, behave strangely in response to the back
|
89
|
+
button, and, on several browsers, can't be moved around the DOM
|
90
|
+
without having them re-initialize. They did provide a very nice way to
|
91
|
+
namespace the library, though—CodeMirror 1 could freely pollute the
|
92
|
+
namespace inside the frame.</p>
|
93
|
+
|
94
|
+
<p>Finally, working with an editable document means working with
|
95
|
+
selection in arbitrary DOM structures. Internet Explorer (8 and
|
96
|
+
before) has an utterly different (and awkward) selection API than all
|
97
|
+
of the other browsers, and even among the different implementations of
|
98
|
+
<code>document.selection</code>, details about how exactly a selection
|
99
|
+
is represented vary quite a bit. Add to that the fact that Opera's
|
100
|
+
selection support tended to be very buggy until recently, and you can
|
101
|
+
imagine why CodeMirror 1 contains 700 lines of selection-handling
|
102
|
+
code.</p>
|
103
|
+
|
104
|
+
<p>And that brings us to the main issue with the CodeMirror 1
|
105
|
+
code base: The proportion of browser-bug-workarounds to real
|
106
|
+
application code was getting dangerously high. By building on top of a
|
107
|
+
few dodgy features, I put the system in a vulnerable position—any
|
108
|
+
incompatibility and bugginess in these features, I had to paper over
|
109
|
+
with my own code. Not only did I have to do some serious stunt-work to
|
110
|
+
get it to work on older browsers (as detailed in the
|
111
|
+
previous <a href="http://codemirror.net/story.html">story</a>), things
|
112
|
+
also kept breaking in newly released versions, requiring me to come up
|
113
|
+
with <em>new</em> scary hacks in order to keep up. This was starting
|
114
|
+
to lose its appeal.</p>
|
115
|
+
|
116
|
+
<section id=approach>
|
117
|
+
<h2>General Approach</h2>
|
118
|
+
|
119
|
+
<p>What CodeMirror 2 does is try to sidestep most of the hairy hacks
|
120
|
+
that came up in version 1. I owe a lot to the
|
121
|
+
<a href="http://ace.ajax.org">ACE</a> editor for inspiration on how to
|
122
|
+
approach this.</p>
|
123
|
+
|
124
|
+
<p>I absolutely did not want to be completely reliant on key events to
|
125
|
+
generate my input. Every JavaScript programmer knows that key event
|
126
|
+
information is horrible and incomplete. Some people (most awesomely
|
127
|
+
Mihai Bazon with <a href="http://ymacs.org">Ymacs</a>) have been able
|
128
|
+
to build more or less functioning editors by directly reading key
|
129
|
+
events, but it takes a lot of work (the kind of never-ending, fragile
|
130
|
+
work I described earlier), and will never be able to properly support
|
131
|
+
things like multi-keystoke international character
|
132
|
+
input. <a href="#keymap" class="update">[see below for caveat]</a></p>
|
133
|
+
|
134
|
+
<p>So what I do is focus a hidden textarea, and let the browser
|
135
|
+
believe that the user is typing into that. What we show to the user is
|
136
|
+
a DOM structure we built to represent his document. If this is updated
|
137
|
+
quickly enough, and shows some kind of believable cursor, it feels
|
138
|
+
like a real text-input control.</p>
|
139
|
+
|
140
|
+
<p>Another big win is that this DOM representation does not have to
|
141
|
+
span the whole document. Some CodeMirror 1 users insisted that they
|
142
|
+
needed to put a 30 thousand line XML document into CodeMirror. Putting
|
143
|
+
all that into the DOM takes a while, especially since, for some
|
144
|
+
reason, an editable DOM tree is slower than a normal one on most
|
145
|
+
browsers. If we have full control over what we show, we must only
|
146
|
+
ensure that the visible part of the document has been added, and can
|
147
|
+
do the rest only when needed. (Fortunately, the <code>onscroll</code>
|
148
|
+
event works almost the same on all browsers, and lends itself well to
|
149
|
+
displaying things only as they are scrolled into view.)</p>
|
150
|
+
</section>
|
151
|
+
<section id="input">
|
152
|
+
<h2>Input</h2>
|
153
|
+
|
154
|
+
<p>ACE uses its hidden textarea only as a text input shim, and does
|
155
|
+
all cursor movement and things like text deletion itself by directly
|
156
|
+
handling key events. CodeMirror's way is to let the browser do its
|
157
|
+
thing as much as possible, and not, for example, define its own set of
|
158
|
+
key bindings. One way to do this would have been to have the whole
|
159
|
+
document inside the hidden textarea, and after each key event update
|
160
|
+
the display DOM to reflect what's in that textarea.</p>
|
161
|
+
|
162
|
+
<p>That'd be simple, but it is not realistic. For even medium-sized
|
163
|
+
document the editor would be constantly munging huge strings, and get
|
164
|
+
terribly slow. What CodeMirror 2 does is put the current selection,
|
165
|
+
along with an extra line on the top and on the bottom, into the
|
166
|
+
textarea.</p>
|
167
|
+
|
168
|
+
<p>This means that the arrow keys (and their ctrl-variations), home,
|
169
|
+
end, etcetera, do not have to be handled specially. We just read the
|
170
|
+
cursor position in the textarea, and update our cursor to match it.
|
171
|
+
Also, copy and paste work pretty much for free, and people get their
|
172
|
+
native key bindings, without any special work on my part. For example,
|
173
|
+
I have emacs key bindings configured for Chrome and Firefox. There is
|
174
|
+
no way for a script to detect this. <a class="update"
|
175
|
+
href="#keymap">[no longer the case]</a></p>
|
176
|
+
|
177
|
+
<p>Of course, since only a small part of the document sits in the
|
178
|
+
textarea, keys like page up and ctrl-end won't do the right thing.
|
179
|
+
CodeMirror is catching those events and handling them itself.</p>
|
180
|
+
</section>
|
181
|
+
<section id="selection">
|
182
|
+
<h2>Selection</h2>
|
183
|
+
|
184
|
+
<p>Getting and setting the selection range of a textarea in modern
|
185
|
+
browsers is trivial—you just use the <code>selectionStart</code>
|
186
|
+
and <code>selectionEnd</code> properties. On IE you have to do some
|
187
|
+
insane stuff with temporary ranges and compensating for the fact that
|
188
|
+
moving the selection by a 'character' will treat \r\n as a single
|
189
|
+
character, but even there it is possible to build functions that
|
190
|
+
reliably set and get the selection range.</p>
|
191
|
+
|
192
|
+
<p>But consider this typical case: When I'm somewhere in my document,
|
193
|
+
press shift, and press the up arrow, something gets selected. Then, if
|
194
|
+
I, still holding shift, press the up arrow again, the top of my
|
195
|
+
selection is adjusted. The selection remembers where its <em>head</em>
|
196
|
+
and its <em>anchor</em> are, and moves the head when we shift-move.
|
197
|
+
This is a generally accepted property of selections, and done right by
|
198
|
+
every editing component built in the past twenty years.</p>
|
199
|
+
|
200
|
+
<p>But not something that the browser selection APIs expose.</p>
|
201
|
+
|
202
|
+
<p>Great. So when someone creates an 'upside-down' selection, the next
|
203
|
+
time CodeMirror has to update the textarea, it'll re-create the
|
204
|
+
selection as an 'upside-up' selection, with the anchor at the top, and
|
205
|
+
the next cursor motion will behave in an unexpected way—our second
|
206
|
+
up-arrow press in the example above will not do anything, since it is
|
207
|
+
interpreted in exactly the same way as the first.</p>
|
208
|
+
|
209
|
+
<p>No problem. We'll just, ehm, detect that the selection is
|
210
|
+
upside-down (you can tell by the way it was created), and then, when
|
211
|
+
an upside-down selection is present, and a cursor-moving key is
|
212
|
+
pressed in combination with shift, we quickly collapse the selection
|
213
|
+
in the textarea to its start, allow the key to take effect, and then
|
214
|
+
combine its new head with its old anchor to get the <em>real</em>
|
215
|
+
selection.</p>
|
216
|
+
|
217
|
+
<p>In short, scary hacks could not be avoided entirely in CodeMirror
|
218
|
+
2.</p>
|
219
|
+
|
220
|
+
<p>And, the observant reader might ask, how do you even know that a
|
221
|
+
key combo is a cursor-moving combo, if you claim you support any
|
222
|
+
native key bindings? Well, we don't, but we can learn. The editor
|
223
|
+
keeps a set known cursor-movement combos (initialized to the
|
224
|
+
predictable defaults), and updates this set when it observes that
|
225
|
+
pressing a certain key had (only) the effect of moving the cursor.
|
226
|
+
This, of course, doesn't work if the first time the key is used was
|
227
|
+
for extending an inverted selection, but it works most of the
|
228
|
+
time.</p>
|
229
|
+
</section>
|
230
|
+
<section id="update">
|
231
|
+
<h2>Intelligent Updating</h2>
|
232
|
+
|
233
|
+
<p>One thing that always comes up when you have a complicated internal
|
234
|
+
state that's reflected in some user-visible external representation
|
235
|
+
(in this case, the displayed code and the textarea's content) is
|
236
|
+
keeping the two in sync. The naive way is to just update the display
|
237
|
+
every time you change your state, but this is not only error prone
|
238
|
+
(you'll forget), it also easily leads to duplicate work on big,
|
239
|
+
composite operations. Then you start passing around flags indicating
|
240
|
+
whether the display should be updated in an attempt to be efficient
|
241
|
+
again and, well, at that point you might as well give up completely.</p>
|
242
|
+
|
243
|
+
<p>I did go down that road, but then switched to a much simpler model:
|
244
|
+
simply keep track of all the things that have been changed during an
|
245
|
+
action, and then, only at the end, use this information to update the
|
246
|
+
user-visible display.</p>
|
247
|
+
|
248
|
+
<p>CodeMirror uses a concept of <em>operations</em>, which start by
|
249
|
+
calling a specific set-up function that clears the state and end by
|
250
|
+
calling another function that reads this state and does the required
|
251
|
+
updating. Most event handlers, and all the user-visible methods that
|
252
|
+
change state are wrapped like this. There's a method
|
253
|
+
called <code>operation</code> that accepts a function, and returns
|
254
|
+
another function that wraps the given function as an operation.</p>
|
255
|
+
|
256
|
+
<p>It's trivial to extend this (as CodeMirror does) to detect nesting,
|
257
|
+
and, when an operation is started inside an operation, simply
|
258
|
+
increment the nesting count, and only do the updating when this count
|
259
|
+
reaches zero again.</p>
|
260
|
+
|
261
|
+
<p>If we have a set of changed ranges and know the currently shown
|
262
|
+
range, we can (with some awkward code to deal with the fact that
|
263
|
+
changes can add and remove lines, so we're dealing with a changing
|
264
|
+
coordinate system) construct a map of the ranges that were left
|
265
|
+
intact. We can then compare this map with the part of the document
|
266
|
+
that's currently visible (based on scroll offset and editor height) to
|
267
|
+
determine whether something needs to be updated.</p>
|
268
|
+
|
269
|
+
<p>CodeMirror uses two update algorithms—a full refresh, where it just
|
270
|
+
discards the whole part of the DOM that contains the edited text and
|
271
|
+
rebuilds it, and a patch algorithm, where it uses the information
|
272
|
+
about changed and intact ranges to update only the out-of-date parts
|
273
|
+
of the DOM. When more than 30 percent (which is the current heuristic,
|
274
|
+
might change) of the lines need to be updated, the full refresh is
|
275
|
+
chosen (since it's faster to do than painstakingly finding and
|
276
|
+
updating all the changed lines), in the other case it does the
|
277
|
+
patching (so that, if you scroll a line or select another character,
|
278
|
+
the whole screen doesn't have to be
|
279
|
+
re-rendered). <span class="update">[the full-refresh
|
280
|
+
algorithm was dropped, it wasn't really faster than the patching
|
281
|
+
one]</span></p>
|
282
|
+
|
283
|
+
<p>All updating uses <code>innerHTML</code> rather than direct DOM
|
284
|
+
manipulation, since that still seems to be by far the fastest way to
|
285
|
+
build documents. There's a per-line function that combines the
|
286
|
+
highlighting, <a href="manual.html#markText">marking</a>, and
|
287
|
+
selection info for that line into a snippet of HTML. The patch updater
|
288
|
+
uses this to reset individual lines, the refresh updater builds an
|
289
|
+
HTML chunk for the whole visible document at once, and then uses a
|
290
|
+
single <code>innerHTML</code> update to do the refresh.</p>
|
291
|
+
</section>
|
292
|
+
<section id="parse">
|
293
|
+
<h2>Parsers can be Simple</h2>
|
294
|
+
|
295
|
+
<p>When I wrote CodeMirror 1, I
|
296
|
+
thought <a href="http://codemirror.net/story.html#parser">interruptable
|
297
|
+
parsers</a> were a hugely scary and complicated thing, and I used a
|
298
|
+
bunch of heavyweight abstractions to keep this supposed complexity
|
299
|
+
under control: parsers
|
300
|
+
were <a href="http://bob.pythonmac.org/archives/2005/07/06/iteration-in-javascript/">iterators</a>
|
301
|
+
that consumed input from another iterator, and used funny
|
302
|
+
closure-resetting tricks to copy and resume themselves.</p>
|
303
|
+
|
304
|
+
<p>This made for a rather nice system, in that parsers formed strictly
|
305
|
+
separate modules, and could be composed in predictable ways.
|
306
|
+
Unfortunately, it was quite slow (stacking three or four iterators on
|
307
|
+
top of each other), and extremely intimidating to people not used to a
|
308
|
+
functional programming style.</p>
|
309
|
+
|
310
|
+
<p>With a few small changes, however, we can keep all those
|
311
|
+
advantages, but simplify the API and make the whole thing less
|
312
|
+
indirect and inefficient. CodeMirror
|
313
|
+
2's <a href="manual.html#modeapi">mode API</a> uses explicit state
|
314
|
+
objects, and makes the parser/tokenizer a function that simply takes a
|
315
|
+
state and a character stream abstraction, advances the stream one
|
316
|
+
token, and returns the way the token should be styled. This state may
|
317
|
+
be copied, optionally in a mode-defined way, in order to be able to
|
318
|
+
continue a parse at a given point. Even someone who's never touched a
|
319
|
+
lambda in his life can understand this approach. Additionally, far
|
320
|
+
fewer objects are allocated in the course of parsing now.</p>
|
321
|
+
|
322
|
+
<p>The biggest speedup comes from the fact that the parsing no longer
|
323
|
+
has to touch the DOM though. In CodeMirror 1, on an older browser, you
|
324
|
+
could <em>see</em> the parser work its way through the document,
|
325
|
+
managing some twenty lines in each 50-millisecond time slice it got. It
|
326
|
+
was reading its input from the DOM, and updating the DOM as it went
|
327
|
+
along, which any experienced JavaScript programmer will immediately
|
328
|
+
spot as a recipe for slowness. In CodeMirror 2, the parser usually
|
329
|
+
finishes the whole document in a single 100-millisecond time slice—it
|
330
|
+
manages some 1500 lines during that time on Chrome. All it has to do
|
331
|
+
is munge strings, so there is no real reason for it to be slow
|
332
|
+
anymore.</p>
|
333
|
+
</section>
|
334
|
+
<section id="summary">
|
335
|
+
<h2>What Gives?</h2>
|
336
|
+
|
337
|
+
<p>Given all this, what can you expect from CodeMirror 2?</p>
|
338
|
+
|
339
|
+
<ul>
|
340
|
+
|
341
|
+
<li><strong>Small.</strong> the base library is
|
342
|
+
some <span class="update">45k</span> when minified
|
343
|
+
now, <span class="update">17k</span> when gzipped. It's smaller than
|
344
|
+
its own logo.</li>
|
345
|
+
|
346
|
+
<li><strong>Lightweight.</strong> CodeMirror 2 initializes very
|
347
|
+
quickly, and does almost no work when it is not focused. This means
|
348
|
+
you can treat it almost like a textarea, have multiple instances on a
|
349
|
+
page without trouble.</li>
|
350
|
+
|
351
|
+
<li><strong>Huge document support.</strong> Since highlighting is
|
352
|
+
really fast, and no DOM structure is being built for non-visible
|
353
|
+
content, you don't have to worry about locking up your browser when a
|
354
|
+
user enters a megabyte-sized document.</li>
|
355
|
+
|
356
|
+
<li><strong>Extended API.</strong> Some things kept coming up in the
|
357
|
+
mailing list, such as marking pieces of text or lines, which were
|
358
|
+
extremely hard to do with CodeMirror 1. The new version has proper
|
359
|
+
support for these built in.</li>
|
360
|
+
|
361
|
+
<li><strong>Tab support.</strong> Tabs inside editable documents were,
|
362
|
+
for some reason, a no-go. At least six different people announced they
|
363
|
+
were going to add tab support to CodeMirror 1, none survived (I mean,
|
364
|
+
none delivered a working version). CodeMirror 2 no longer removes tabs
|
365
|
+
from your document.</li>
|
366
|
+
|
367
|
+
<li><strong>Sane styling.</strong> <code>iframe</code> nodes aren't
|
368
|
+
really known for respecting document flow. Now that an editor instance
|
369
|
+
is a plain <code>div</code> element, it is much easier to size it to
|
370
|
+
fit the surrounding elements. You don't even have to make it scroll if
|
371
|
+
you do not <a href="../demo/resize.html">want to</a>.</li>
|
372
|
+
|
373
|
+
</ul>
|
374
|
+
|
375
|
+
<p>On the downside, a CodeMirror 2 instance is <em>not</em> a native
|
376
|
+
editable component. Though it does its best to emulate such a
|
377
|
+
component as much as possible, there is functionality that browsers
|
378
|
+
just do not allow us to hook into. Doing select-all from the context
|
379
|
+
menu, for example, is not currently detected by CodeMirror.</p>
|
380
|
+
|
381
|
+
<p id="changes" style="margin-top: 2em;"><span style="font-weight:
|
382
|
+
bold">[Updates from November 13th 2011]</span> Recently, I've made
|
383
|
+
some changes to the codebase that cause some of the text above to no
|
384
|
+
longer be current. I've left the text intact, but added markers at the
|
385
|
+
passages that are now inaccurate. The new situation is described
|
386
|
+
below.</p>
|
387
|
+
</section>
|
388
|
+
<section id="btree">
|
389
|
+
<h2>Content Representation</h2>
|
390
|
+
|
391
|
+
<p>The original implementation of CodeMirror 2 represented the
|
392
|
+
document as a flat array of line objects. This worked well—splicing
|
393
|
+
arrays will require the part of the array after the splice to be
|
394
|
+
moved, but this is basically just a simple <code>memmove</code> of a
|
395
|
+
bunch of pointers, so it is cheap even for huge documents.</p>
|
396
|
+
|
397
|
+
<p>However, I recently added line wrapping and code folding (line
|
398
|
+
collapsing, basically). Once lines start taking up a non-constant
|
399
|
+
amount of vertical space, looking up a line by vertical position
|
400
|
+
(which is needed when someone clicks the document, and to determine
|
401
|
+
the visible part of the document during scrolling) can only be done
|
402
|
+
with a linear scan through the whole array, summing up line heights as
|
403
|
+
you go. Seeing how I've been going out of my way to make big documents
|
404
|
+
fast, this is not acceptable.</p>
|
405
|
+
|
406
|
+
<p>The new representation is based on a B-tree. The leaves of the tree
|
407
|
+
contain arrays of line objects, with a fixed minimum and maximum size,
|
408
|
+
and the non-leaf nodes simply hold arrays of child nodes. Each node
|
409
|
+
stores both the amount of lines that live below them and the vertical
|
410
|
+
space taken up by these lines. This allows the tree to be indexed both
|
411
|
+
by line number and by vertical position, and all access has
|
412
|
+
logarithmic complexity in relation to the document size.</p>
|
413
|
+
|
414
|
+
<p>I gave line objects and tree nodes parent pointers, to the node
|
415
|
+
above them. When a line has to update its height, it can simply walk
|
416
|
+
these pointers to the top of the tree, adding or subtracting the
|
417
|
+
difference in height from each node it encounters. The parent pointers
|
418
|
+
also make it cheaper (in complexity terms, the difference is probably
|
419
|
+
tiny in normal-sized documents) to find the current line number when
|
420
|
+
given a line object. In the old approach, the whole document array had
|
421
|
+
to be searched. Now, we can just walk up the tree and count the sizes
|
422
|
+
of the nodes coming before us at each level.</p>
|
423
|
+
|
424
|
+
<p>I chose B-trees, not regular binary trees, mostly because they
|
425
|
+
allow for very fast bulk insertions and deletions. When there is a big
|
426
|
+
change to a document, it typically involves adding, deleting, or
|
427
|
+
replacing a chunk of subsequent lines. In a regular balanced tree, all
|
428
|
+
these inserts or deletes would have to be done separately, which could
|
429
|
+
be really expensive. In a B-tree, to insert a chunk, you just walk
|
430
|
+
down the tree once to find where it should go, insert them all in one
|
431
|
+
shot, and then break up the node if needed. This breaking up might
|
432
|
+
involve breaking up nodes further up, but only requires a single pass
|
433
|
+
back up the tree. For deletion, I'm somewhat lax in keeping things
|
434
|
+
balanced—I just collapse nodes into a leaf when their child count goes
|
435
|
+
below a given number. This means that there are some weird editing
|
436
|
+
patterns that may result in a seriously unbalanced tree, but even such
|
437
|
+
an unbalanced tree will perform well, unless you spend a day making
|
438
|
+
strangely repeating edits to a really big document.</p>
|
439
|
+
</section>
|
440
|
+
<section id="keymap">
|
441
|
+
<h2>Keymaps</h2>
|
442
|
+
|
443
|
+
<p><a href="#approach">Above</a>, I claimed that directly catching key
|
444
|
+
events for things like cursor movement is impractical because it
|
445
|
+
requires some browser-specific kludges. I then proceeded to explain
|
446
|
+
some awful <a href="#selection">hacks</a> that were needed to make it
|
447
|
+
possible for the selection changes to be detected through the
|
448
|
+
textarea. In fact, the second hack is about as bad as the first.</p>
|
449
|
+
|
450
|
+
<p>On top of that, in the presence of user-configurable tab sizes and
|
451
|
+
collapsed and wrapped lines, lining up cursor movement in the textarea
|
452
|
+
with what's visible on the screen becomes a nightmare. Thus, I've
|
453
|
+
decided to move to a model where the textarea's selection is no longer
|
454
|
+
depended on.</p>
|
455
|
+
|
456
|
+
<p>So I moved to a model where all cursor movement is handled by my
|
457
|
+
own code. This adds support for a goal column, proper interaction of
|
458
|
+
cursor movement with collapsed lines, and makes it possible for
|
459
|
+
vertical movement to move through wrapped lines properly, instead of
|
460
|
+
just treating them like non-wrapped lines.</p>
|
461
|
+
|
462
|
+
<p>The key event handlers now translate the key event into a string,
|
463
|
+
something like <code>Ctrl-Home</code> or <code>Shift-Cmd-R</code>, and
|
464
|
+
use that string to look up an action to perform. To make keybinding
|
465
|
+
customizable, this lookup goes through
|
466
|
+
a <a href="manual.html#option_keyMap">table</a>, using a scheme that
|
467
|
+
allows such tables to be chained together (for example, the default
|
468
|
+
Mac bindings fall through to a table named 'emacsy', which defines
|
469
|
+
basic Emacs-style bindings like <code>Ctrl-F</code>, and which is also
|
470
|
+
used by the custom Emacs bindings).</p>
|
471
|
+
|
472
|
+
<p>A new
|
473
|
+
option <a href="manual.html#option_extraKeys"><code>extraKeys</code></a>
|
474
|
+
allows ad-hoc keybindings to be defined in a much nicer way than what
|
475
|
+
was possible with the
|
476
|
+
old <a href="manual.html#option_onKeyEvent"><code>onKeyEvent</code></a>
|
477
|
+
callback. You simply provide an object mapping key identifiers to
|
478
|
+
functions, instead of painstakingly looking at raw key events.</p>
|
479
|
+
|
480
|
+
<p>Built-in commands map to strings, rather than functions, for
|
481
|
+
example <code>"goLineUp"</code> is the default action bound to the up
|
482
|
+
arrow key. This allows new keymaps to refer to them without
|
483
|
+
duplicating any code. New commands can be defined by assigning to
|
484
|
+
the <code>CodeMirror.commands</code> object, which maps such commands
|
485
|
+
to functions.</p>
|
486
|
+
|
487
|
+
<p>The hidden textarea now only holds the current selection, with no
|
488
|
+
extra characters around it. This has a nice advantage: polling for
|
489
|
+
input becomes much, much faster. If there's a big selection, this text
|
490
|
+
does not have to be read from the textarea every time—when we poll,
|
491
|
+
just noticing that something is still selected is enough to tell us
|
492
|
+
that no new text was typed.</p>
|
493
|
+
|
494
|
+
<p>The reason that cheap polling is important is that many browsers do
|
495
|
+
not fire useful events on IME (input method engine) input, which is
|
496
|
+
the thing where people inputting a language like Japanese or Chinese
|
497
|
+
use multiple keystrokes to create a character or sequence of
|
498
|
+
characters. Most modern browsers fire <code>input</code> when the
|
499
|
+
composing is finished, but many don't fire anything when the character
|
500
|
+
is updated <em>during</em> composition. So we poll, whenever the
|
501
|
+
editor is focused, to provide immediate updates of the display.</p>
|
502
|
+
|
503
|
+
</article>
|