maglev-database-explorer 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/MIT-LICENSE +21 -0
- data/README.rdoc +3 -0
- data/Rakefile +40 -0
- data/app/assets/javascripts/maglev-database-explorer/application.js +17 -0
- data/app/assets/javascripts/maglev_database_explorer/def.js +2 -0
- data/app/assets/stylesheets/maglev-database-explorer/application.css +13 -0
- data/app/assets/stylesheets/maglev_database_explorer/def.css +4 -0
- data/app/controllers/maglev_database_explorer/application_controller.rb +4 -0
- data/app/controllers/maglev_database_explorer/code_controller.rb +101 -0
- data/app/controllers/maglev_database_explorer/object_controller.rb +60 -0
- data/app/controllers/maglev_database_explorer/object_explorer_controller.rb +9 -0
- data/app/helpers/maglev_database_explorer/application_helper.rb +4 -0
- data/app/views/layouts/maglev-database-explorer/application.html.erb +14 -0
- data/app/views/maglev_database_explorer/object_explorer/_workspace.html.erb +28 -0
- data/app/views/maglev_database_explorer/object_explorer/index.html.erb +92 -0
- data/config/routes.rb +15 -0
- data/lib/maglev-database-explorer.rb +17 -0
- data/lib/maglev-database-explorer/code_evaluation.rb +36 -0
- data/lib/maglev-database-explorer/database_views.rb +29 -0
- data/lib/maglev-database-explorer/database_views/abstract_dictionary.rb +69 -0
- data/lib/maglev-database-explorer/database_views/abstract_exception.rb +25 -0
- data/lib/maglev-database-explorer/database_views/array.rb +28 -0
- data/lib/maglev-database-explorer/database_views/boolean.rb +12 -0
- data/lib/maglev-database-explorer/database_views/class.rb +46 -0
- data/lib/maglev-database-explorer/database_views/exception.rb +3 -0
- data/lib/maglev-database-explorer/database_views/execblock.rb +5 -0
- data/lib/maglev-database-explorer/database_views/fixnum.rb +5 -0
- data/lib/maglev-database-explorer/database_views/float.rb +6 -0
- data/lib/maglev-database-explorer/database_views/globals.rb +2 -0
- data/lib/maglev-database-explorer/database_views/gsnmethod.rb +29 -0
- data/lib/maglev-database-explorer/database_views/hash.rb +5 -0
- data/lib/maglev-database-explorer/database_views/maglev_record.rb +43 -0
- data/lib/maglev-database-explorer/database_views/module.rb +104 -0
- data/lib/maglev-database-explorer/database_views/nilclass.rb +6 -0
- data/lib/maglev-database-explorer/database_views/object.rb +77 -0
- data/lib/maglev-database-explorer/database_views/proc.rb +4 -0
- data/lib/maglev-database-explorer/database_views/repository.rb +4 -0
- data/lib/maglev-database-explorer/database_views/ruby_workspace.rb +6 -0
- data/lib/maglev-database-explorer/database_views/smalltalk_classes.rb +35 -0
- data/lib/maglev-database-explorer/database_views/smalltalk_classes.st +60 -0
- data/lib/maglev-database-explorer/database_views/string.rb +27 -0
- data/lib/maglev-database-explorer/database_views/symbol.rb +33 -0
- data/lib/maglev-database-explorer/database_views/system.rb +48 -0
- data/lib/maglev-database-explorer/database_views/thread.rb +101 -0
- data/lib/maglev-database-explorer/debug_server.rb +22 -0
- data/lib/maglev-database-explorer/engine.rb +23 -0
- data/lib/maglev-database-explorer/engine_symlinks.rb +19 -0
- data/lib/maglev-database-explorer/halt.rb +33 -0
- data/lib/maglev-database-explorer/ruby_workspace.rb +31 -0
- data/lib/maglev-database-explorer/version.rb +3 -0
- data/lib/tasks/maglev-database-explorer_tasks.rake +4 -0
- data/public/LICENSE +35 -0
- data/public/amber/CHANGELOG +65 -0
- data/public/amber/LICENSE +22 -0
- data/public/amber/Makefile +53 -0
- data/public/amber/README.md +30 -0
- data/public/amber/bin/amber +3 -0
- data/public/amber/bin/amberc +352 -0
- data/public/amber/bin/nodecompile.js +33 -0
- data/public/amber/bin/server +3 -0
- data/public/amber/bin/server.bat +3 -0
- data/public/amber/css/amber-normalize.css +468 -0
- data/public/amber/css/amber-normalize.less +501 -0
- data/public/amber/css/amber.css +539 -0
- data/public/amber/css/documentation.css +84 -0
- data/public/amber/css/profstef.css +75 -0
- data/public/amber/css/style.css +313 -0
- data/public/amber/documentation.html +37 -0
- data/public/amber/examples/Makefile +23 -0
- data/public/amber/examples/README +4 -0
- data/public/amber/examples/android/helloamber/AndroidManifest.xml +19 -0
- data/public/amber/examples/android/helloamber/HelloAmber.st +13 -0
- data/public/amber/examples/android/helloamber/Makefile +56 -0
- data/public/amber/examples/android/helloamber/README.md +80 -0
- data/public/amber/examples/android/helloamber/ant.properties +17 -0
- data/public/amber/examples/android/helloamber/assets/index.html +15 -0
- data/public/amber/examples/android/helloamber/assets/jquery-1.7.2.min.js +4 -0
- data/public/amber/examples/android/helloamber/build.xml +83 -0
- data/public/amber/examples/android/helloamber/local.properties +10 -0
- data/public/amber/examples/android/helloamber/proguard-project.txt +20 -0
- data/public/amber/examples/android/helloamber/project.properties +14 -0
- data/public/amber/examples/android/helloamber/res/layout/main.xml +6 -0
- data/public/amber/examples/android/helloamber/res/values/strings.xml +4 -0
- data/public/amber/examples/android/helloamber/src/org/amberlang/android/helloamber/HelloAmber.java +59 -0
- data/public/amber/examples/myproject/index.html +16 -0
- data/public/amber/examples/nodejs/README +9 -0
- data/public/amber/examples/nodejs/benchfib/Benchfib.st +124 -0
- data/public/amber/examples/nodejs/benchfib/Makefile +8 -0
- data/public/amber/examples/nodejs/benchfib/benchfib +1 -0
- data/public/amber/examples/nodejs/hello/Hello.st +9 -0
- data/public/amber/examples/nodejs/hello/Makefile +8 -0
- data/public/amber/examples/nodejs/hello/README +13 -0
- data/public/amber/examples/nodejs/hello/hello +1 -0
- data/public/amber/examples/nodejs/meta/Makefile +8 -0
- data/public/amber/examples/nodejs/meta/MyScript.st +27 -0
- data/public/amber/examples/nodejs/meta/meta +1 -0
- data/public/amber/examples/nodejs/pystone/Makefile +8 -0
- data/public/amber/examples/nodejs/pystone/Pystone.st +306 -0
- data/public/amber/examples/nodejs/pystone/pystone +1 -0
- data/public/amber/examples/nodejs/trivialserver/Makefile +8 -0
- data/public/amber/examples/nodejs/trivialserver/TrivialServer.st +51 -0
- data/public/amber/examples/nodejs/trivialserver/trivial +1 -0
- data/public/amber/examples/presentation/esug2011/images/asterix.png +0 -0
- data/public/amber/examples/presentation/esug2011/images/background_box.png +0 -0
- data/public/amber/examples/presentation/esug2011/images/background_header.png +0 -0
- data/public/amber/examples/presentation/esug2011/images/balloon.jpg +0 -0
- data/public/amber/examples/presentation/esug2011/images/balloon_header.png +0 -0
- data/public/amber/examples/presentation/esug2011/images/devices.jpg +0 -0
- data/public/amber/examples/presentation/esug2011/images/enyo.png +0 -0
- data/public/amber/examples/presentation/esug2011/images/ide_star_wars.png +0 -0
- data/public/amber/examples/presentation/esug2011/images/nodejs.png +0 -0
- data/public/amber/examples/presentation/esug2011/images/terminal.png +0 -0
- data/public/amber/examples/presentation/esug2011/images/webos.png +0 -0
- data/public/amber/examples/presentation/fosdem2012/images/amber.png +0 -0
- data/public/amber/examples/presentation/fosdem2012/images/ambrhino.jpg +0 -0
- data/public/amber/examples/presentation/fosdem2012/images/nodejs.png +0 -0
- data/public/amber/examples/presentation/fosdem2012/images/pharo.png +0 -0
- data/public/amber/examples/presentation/fosdem2012/images/php.gif +0 -0
- data/public/amber/examples/presentation/fosdem2012/images/rails.png +0 -0
- data/public/amber/examples/presentation/fosdem2012/lib/booklet/images/arrow-next.png +0 -0
- data/public/amber/examples/presentation/fosdem2012/lib/booklet/images/arrow-prev.png +0 -0
- data/public/amber/examples/presentation/fosdem2012/lib/booklet/images/closedhand.cur +0 -0
- data/public/amber/examples/presentation/fosdem2012/lib/booklet/images/openhand.cur +0 -0
- data/public/amber/examples/presentation/fosdem2012/lib/booklet/images/shadow-top-back.png +0 -0
- data/public/amber/examples/presentation/fosdem2012/lib/booklet/images/shadow-top-forward.png +0 -0
- data/public/amber/examples/presentation/fosdem2012/lib/booklet/images/shadow.png +0 -0
- data/public/amber/examples/presentation/fosdem2012/lib/booklet/jquery.booklet.1.2.0.css +100 -0
- data/public/amber/examples/presentation/fosdem2012/lib/booklet/jquery.booklet.1.2.0.js +1232 -0
- data/public/amber/examples/presentation/fosdem2012/lib/booklet/jquery.booklet.1.2.0.min.js +13 -0
- data/public/amber/examples/presentation/fosdem2012/lib/booklet/jquery.easing.1.3.js +38 -0
- data/public/amber/examples/presentation/index.html +17 -0
- data/public/amber/examples/presentation/js/Presentation.deploy.js +1922 -0
- data/public/amber/examples/presentation/js/Presentation.js +2712 -0
- data/public/amber/examples/presentation/st/Presentation.st +1996 -0
- data/public/amber/examples/trysmalltalk/index.html +18 -0
- data/public/amber/examples/trysmalltalk/js/TrySmalltalk.deploy.js +837 -0
- data/public/amber/examples/trysmalltalk/js/TrySmalltalk.js +1206 -0
- data/public/amber/examples/trysmalltalk/st/TrySmalltalk.st +964 -0
- data/public/amber/examples/twitterwall/css/twitterwall.css +19 -0
- data/public/amber/examples/twitterwall/index.html +35 -0
- data/public/amber/examples/twitterwall/js/TwitterWall.deploy.js +116 -0
- data/public/amber/examples/twitterwall/js/TwitterWall.js +146 -0
- data/public/amber/examples/twitterwall/st/TwitterWall.st +91 -0
- data/public/amber/examples/webos/README +11 -0
- data/public/amber/examples/webos/eris/DuckQwaq.wav +0 -0
- data/public/amber/examples/webos/eris/EnyoAmber.st +36 -0
- data/public/amber/examples/webos/eris/Eris.css +0 -0
- data/public/amber/examples/webos/eris/Eris.st +86 -0
- data/public/amber/examples/webos/eris/Makefile +37 -0
- data/public/amber/examples/webos/eris/README +3 -0
- data/public/amber/examples/webos/eris/appinfo.json +10 -0
- data/public/amber/examples/webos/eris/depends.js +4 -0
- data/public/amber/examples/webos/eris/index.html +12 -0
- data/public/amber/examples/webos/helloamber/EnyoAmber.st +36 -0
- data/public/amber/examples/webos/helloamber/HelloAmber.st +86 -0
- data/public/amber/examples/webos/helloamber/Makefile +38 -0
- data/public/amber/examples/webos/helloamber/README +5 -0
- data/public/amber/examples/webos/helloamber/appinfo.json +10 -0
- data/public/amber/examples/webos/helloamber/depends.js +3 -0
- data/public/amber/examples/webos/helloamber/index.html +12 -0
- data/public/amber/favicon.ico +0 -0
- data/public/amber/images/amber.png +0 -0
- data/public/amber/images/amber.svg +706 -0
- data/public/amber/images/amber_small.png +0 -0
- data/public/amber/images/off.amber.png +0 -0
- data/public/amber/images/off.png +0 -0
- data/public/amber/images/offHover.amber.png +0 -0
- data/public/amber/images/offHover.png +0 -0
- data/public/amber/images/presentation.png +0 -0
- data/public/amber/images/profstef.png +0 -0
- data/public/amber/images/sprite.amber.png +0 -0
- data/public/amber/images/sprite.png +0 -0
- data/public/amber/images/tinylogo.amber.png +0 -0
- data/public/amber/images/tinylogo.png +0 -0
- data/public/amber/images/twitterwall.png +0 -0
- data/public/amber/index.html +55 -0
- data/public/amber/js/Additional-Examples.deploy.js +15 -0
- data/public/amber/js/Additional-Examples.js +21 -0
- data/public/amber/js/Benchfib.deploy.js +132 -0
- data/public/amber/js/Benchfib.js +167 -0
- data/public/amber/js/Canvas.deploy.js +2446 -0
- data/public/amber/js/Canvas.js +3547 -0
- data/public/amber/js/Compiler-Tests.deploy.js +97 -0
- data/public/amber/js/Compiler-Tests.js +137 -0
- data/public/amber/js/Compiler.deploy.js +1877 -0
- data/public/amber/js/Compiler.js +2622 -0
- data/public/amber/js/Documentation.deploy.js +961 -0
- data/public/amber/js/Documentation.js +1376 -0
- data/public/amber/js/Examples.deploy.js +53 -0
- data/public/amber/js/Examples.js +73 -0
- data/public/amber/js/IDE.deploy.js +3557 -0
- data/public/amber/js/IDE.js +5002 -0
- data/public/amber/js/Kernel-Announcements.deploy.js +107 -0
- data/public/amber/js/Kernel-Announcements.js +152 -0
- data/public/amber/js/Kernel-Classes.deploy.js +774 -0
- data/public/amber/js/Kernel-Classes.js +1095 -0
- data/public/amber/js/Kernel-Collections.deploy.js +3121 -0
- data/public/amber/js/Kernel-Collections.js +4427 -0
- data/public/amber/js/Kernel-Exceptions.deploy.js +244 -0
- data/public/amber/js/Kernel-Exceptions.js +349 -0
- data/public/amber/js/Kernel-Methods.deploy.js +573 -0
- data/public/amber/js/Kernel-Methods.js +807 -0
- data/public/amber/js/Kernel-Objects.deploy.js +2877 -0
- data/public/amber/js/Kernel-Objects.js +4107 -0
- data/public/amber/js/Kernel-Tests.deploy.js +1513 -0
- data/public/amber/js/Kernel-Tests.js +2053 -0
- data/public/amber/js/Kernel-Transcript.deploy.js +142 -0
- data/public/amber/js/Kernel-Transcript.js +202 -0
- data/public/amber/js/Maglev-Core.deploy.js +2967 -0
- data/public/amber/js/Maglev-Core.js +4202 -0
- data/public/amber/js/Maglev-Database-Explorer.deploy.js +4426 -0
- data/public/amber/js/Maglev-Database-Explorer.js +6162 -0
- data/public/amber/js/Maglev-Vendor.deploy.js +350 -0
- data/public/amber/js/Maglev-Vendor.js +465 -0
- data/public/amber/js/README.md +5 -0
- data/public/amber/js/SUnit.deploy.js +351 -0
- data/public/amber/js/SUnit.js +501 -0
- data/public/amber/js/amber.js +273 -0
- data/public/amber/js/boot.js +602 -0
- data/public/amber/js/compat.js +22 -0
- data/public/amber/js/init.js +9 -0
- data/public/amber/js/lib/CodeMirror/LICENSE +19 -0
- data/public/amber/js/lib/CodeMirror/active-line.js +39 -0
- data/public/amber/js/lib/CodeMirror/amber.css +21 -0
- data/public/amber/js/lib/CodeMirror/codemirror.css +67 -0
- data/public/amber/js/lib/CodeMirror/codemirror.js +2144 -0
- data/public/amber/js/lib/CodeMirror/smalltalk.js +134 -0
- data/public/amber/js/lib/jQuery/jquery-1.4.4.min.js +167 -0
- data/public/amber/js/lib/jQuery/jquery-1.6.4.min.js +4 -0
- data/public/amber/js/lib/jQuery/jquery-ui-1.8.16.custom.min.js +791 -0
- data/public/amber/js/lib/jQuery/jquery.textarea.js +267 -0
- data/public/amber/js/lib/peg-0.6.2.min.js +2 -0
- data/public/amber/js/lib/showdown.js +419 -0
- data/public/amber/js/parser.js +4222 -0
- data/public/amber/js/parser.pegjs +223 -0
- data/public/amber/learn.html +40 -0
- data/public/amber/repl/Makefile +8 -0
- data/public/amber/repl/REPL.js +124 -0
- data/public/amber/repl/REPL.st +56 -0
- data/public/amber/repl/amber.js +18085 -0
- data/public/amber/server/FileServer.st +576 -0
- data/public/amber/server/Makefile +8 -0
- data/public/amber/server/server.js +13049 -0
- data/public/amber/st/Benchfib.st +124 -0
- data/public/amber/st/Canvas.st +968 -0
- data/public/amber/st/Compiler-Tests.st +471 -0
- data/public/amber/st/Compiler.st +1445 -0
- data/public/amber/st/Documentation.st +758 -0
- data/public/amber/st/Examples.st +38 -0
- data/public/amber/st/IDE.st +2404 -0
- data/public/amber/st/Kernel-Announcements.st +61 -0
- data/public/amber/st/Kernel-Classes.st +462 -0
- data/public/amber/st/Kernel-Collections.st +1611 -0
- data/public/amber/st/Kernel-Exceptions.st +124 -0
- data/public/amber/st/Kernel-Methods.st +291 -0
- data/public/amber/st/Kernel-Objects.st +1587 -0
- data/public/amber/st/Kernel-Tests.st +953 -0
- data/public/amber/st/Kernel-Transcript.st +70 -0
- data/public/amber/st/Maglev-Core.st +1659 -0
- data/public/amber/st/Maglev-Database-Explorer.st +3085 -0
- data/public/amber/st/Maglev-Vendor.st +213 -0
- data/public/amber/st/Makefile +104 -0
- data/public/amber/st/README.md +4 -0
- data/public/amber/st/SUnit.st +172 -0
- data/public/css/bootstrap-combined.no-icons.min.css +731 -0
- data/public/css/bootstrap.css +6811 -0
- data/public/css/jquery-ui.min.css +5 -0
- data/public/css/smalltalk_code.css +42 -0
- data/public/css/style.css +209 -0
- data/public/images/maglev-logo.gif +0 -0
- data/public/images/rails_tiny.png +0 -0
- data/public/images/ruby.png +0 -0
- data/public/images/ruby_smalltalk_bridge.png +0 -0
- data/public/images/smalltalk.png +0 -0
- data/public/libs/bootstrap.min.js +7 -0
- data/public/libs/codemirror/CONTRIBUTING.md +72 -0
- data/public/libs/codemirror/LICENSE +23 -0
- data/public/libs/codemirror/README.md +11 -0
- data/public/libs/codemirror/addon/dialog/dialog.css +32 -0
- data/public/libs/codemirror/addon/dialog/dialog.js +80 -0
- data/public/libs/codemirror/addon/display/placeholder.js +54 -0
- data/public/libs/codemirror/addon/edit/closebrackets.js +54 -0
- data/public/libs/codemirror/addon/edit/closetag.js +86 -0
- data/public/libs/codemirror/addon/edit/continuecomment.js +44 -0
- data/public/libs/codemirror/addon/edit/continuelist.js +25 -0
- data/public/libs/codemirror/addon/edit/matchbrackets.js +82 -0
- data/public/libs/codemirror/addon/fold/brace-fold.js +31 -0
- data/public/libs/codemirror/addon/fold/foldcode.js +32 -0
- data/public/libs/codemirror/addon/fold/indent-fold.js +11 -0
- data/public/libs/codemirror/addon/fold/xml-fold.js +64 -0
- data/public/libs/codemirror/addon/hint/html-hint.js +582 -0
- data/public/libs/codemirror/addon/hint/javascript-hint.js +142 -0
- data/public/libs/codemirror/addon/hint/pig-hint.js +117 -0
- data/public/libs/codemirror/addon/hint/python-hint.js +93 -0
- data/public/libs/codemirror/addon/hint/show-hint.css +38 -0
- data/public/libs/codemirror/addon/hint/show-hint.js +180 -0
- data/public/libs/codemirror/addon/hint/xml-hint.js +118 -0
- data/public/libs/codemirror/addon/lint/javascript-lint.js +127 -0
- data/public/libs/codemirror/addon/lint/json-lint.js +14 -0
- data/public/libs/codemirror/addon/lint/lint.css +96 -0
- data/public/libs/codemirror/addon/lint/lint.js +197 -0
- data/public/libs/codemirror/addon/mode/loadmode.js +51 -0
- data/public/libs/codemirror/addon/mode/multiplex.js +95 -0
- data/public/libs/codemirror/addon/mode/overlay.js +59 -0
- data/public/libs/codemirror/addon/runmode/colorize.js +29 -0
- data/public/libs/codemirror/addon/runmode/runmode-standalone.js +130 -0
- data/public/libs/codemirror/addon/runmode/runmode.js +52 -0
- data/public/libs/codemirror/addon/runmode/runmode.node.js +89 -0
- data/public/libs/codemirror/addon/search/match-highlighter.js +60 -0
- data/public/libs/codemirror/addon/search/search.js +131 -0
- data/public/libs/codemirror/addon/search/searchcursor.js +133 -0
- data/public/libs/codemirror/addon/selection/active-line.js +39 -0
- data/public/libs/codemirror/addon/selection/mark-selection.js +34 -0
- data/public/libs/codemirror/bin/compress +91 -0
- data/public/libs/codemirror/bin/lint +11 -0
- data/public/libs/codemirror/demo/activeline.html +70 -0
- data/public/libs/codemirror/demo/bidi.html +61 -0
- data/public/libs/codemirror/demo/btree.html +87 -0
- data/public/libs/codemirror/demo/buffers.html +98 -0
- data/public/libs/codemirror/demo/changemode.html +50 -0
- data/public/libs/codemirror/demo/closebrackets.html +63 -0
- data/public/libs/codemirror/demo/closetag.html +37 -0
- data/public/libs/codemirror/demo/complete.html +70 -0
- data/public/libs/codemirror/demo/emacs.html +60 -0
- data/public/libs/codemirror/demo/folding.html +69 -0
- data/public/libs/codemirror/demo/fullscreen.html +147 -0
- data/public/libs/codemirror/demo/html5complete.html +92 -0
- data/public/libs/codemirror/demo/indentwrap.html +49 -0
- data/public/libs/codemirror/demo/lint.html +90 -0
- data/public/libs/codemirror/demo/loadmode.html +40 -0
- data/public/libs/codemirror/demo/marker.html +59 -0
- data/public/libs/codemirror/demo/markselection.html +36 -0
- data/public/libs/codemirror/demo/matchhighlighter.html +38 -0
- data/public/libs/codemirror/demo/multiplex.html +60 -0
- data/public/libs/codemirror/demo/mustache.html +59 -0
- data/public/libs/codemirror/demo/placeholder.html +36 -0
- data/public/libs/codemirror/demo/preview.html +76 -0
- data/public/libs/codemirror/demo/resize.html +49 -0
- data/public/libs/codemirror/demo/runmode.html +50 -0
- data/public/libs/codemirror/demo/search.html +85 -0
- data/public/libs/codemirror/demo/spanaffectswrapping_shim.html +73 -0
- data/public/libs/codemirror/demo/theme.html +89 -0
- data/public/libs/codemirror/demo/variableheight.html +52 -0
- data/public/libs/codemirror/demo/vim.html +65 -0
- data/public/libs/codemirror/demo/visibletabs.html +53 -0
- data/public/libs/codemirror/demo/widget.html +74 -0
- data/public/libs/codemirror/demo/xmlcomplete.html +81 -0
- data/public/libs/codemirror/doc/baboon.png +0 -0
- data/public/libs/codemirror/doc/baboon_vector.svg +153 -0
- data/public/libs/codemirror/doc/compress.html +200 -0
- data/public/libs/codemirror/doc/docs.css +167 -0
- data/public/libs/codemirror/doc/internals.html +505 -0
- data/public/libs/codemirror/doc/manual.html +1897 -0
- data/public/libs/codemirror/doc/modes.html +94 -0
- data/public/libs/codemirror/doc/oldrelease.html +492 -0
- data/public/libs/codemirror/doc/realworld.html +100 -0
- data/public/libs/codemirror/doc/reporting.html +60 -0
- data/public/libs/codemirror/doc/upgrade_v2.2.html +98 -0
- data/public/libs/codemirror/doc/upgrade_v3.html +227 -0
- data/public/libs/codemirror/index.html +487 -0
- data/public/libs/codemirror/keymap/emacs.js +30 -0
- data/public/libs/codemirror/keymap/vim.js +3044 -0
- data/public/libs/codemirror/lib/codemirror.css +253 -0
- data/public/libs/codemirror/lib/codemirror.js +5585 -0
- data/public/libs/codemirror/mode/apl/apl.js +160 -0
- data/public/libs/codemirror/mode/apl/index.html +61 -0
- data/public/libs/codemirror/mode/asterisk/asterisk.js +183 -0
- data/public/libs/codemirror/mode/asterisk/index.html +142 -0
- data/public/libs/codemirror/mode/clike/clike.js +302 -0
- data/public/libs/codemirror/mode/clike/index.html +103 -0
- data/public/libs/codemirror/mode/clike/scala.html +767 -0
- data/public/libs/codemirror/mode/clojure/clojure.js +222 -0
- data/public/libs/codemirror/mode/clojure/index.html +76 -0
- data/public/libs/codemirror/mode/coffeescript/LICENSE +22 -0
- data/public/libs/codemirror/mode/coffeescript/coffeescript.js +346 -0
- data/public/libs/codemirror/mode/coffeescript/index.html +728 -0
- data/public/libs/codemirror/mode/commonlisp/commonlisp.js +101 -0
- data/public/libs/codemirror/mode/commonlisp/index.html +165 -0
- data/public/libs/codemirror/mode/css/css.js +567 -0
- data/public/libs/codemirror/mode/css/index.html +58 -0
- data/public/libs/codemirror/mode/css/scss.html +145 -0
- data/public/libs/codemirror/mode/css/scss_test.js +80 -0
- data/public/libs/codemirror/mode/css/test.js +113 -0
- data/public/libs/codemirror/mode/d/d.js +205 -0
- data/public/libs/codemirror/mode/d/index.html +262 -0
- data/public/libs/codemirror/mode/diff/diff.js +32 -0
- data/public/libs/codemirror/mode/diff/index.html +105 -0
- data/public/libs/codemirror/mode/ecl/ecl.js +192 -0
- data/public/libs/codemirror/mode/ecl/index.html +39 -0
- data/public/libs/codemirror/mode/erlang/erlang.js +463 -0
- data/public/libs/codemirror/mode/erlang/index.html +64 -0
- data/public/libs/codemirror/mode/gas/gas.js +326 -0
- data/public/libs/codemirror/mode/gas/index.html +57 -0
- data/public/libs/codemirror/mode/gfm/gfm.js +96 -0
- data/public/libs/codemirror/mode/gfm/index.html +74 -0
- data/public/libs/codemirror/mode/gfm/test.js +112 -0
- data/public/libs/codemirror/mode/go/go.js +165 -0
- data/public/libs/codemirror/mode/go/index.html +74 -0
- data/public/libs/codemirror/mode/groovy/groovy.js +210 -0
- data/public/libs/codemirror/mode/groovy/index.html +73 -0
- data/public/libs/codemirror/mode/haskell/haskell.js +242 -0
- data/public/libs/codemirror/mode/haskell/index.html +62 -0
- data/public/libs/codemirror/mode/haxe/haxe.js +429 -0
- data/public/libs/codemirror/mode/haxe/index.html +90 -0
- data/public/libs/codemirror/mode/htmlembedded/htmlembedded.js +73 -0
- data/public/libs/codemirror/mode/htmlembedded/index.html +49 -0
- data/public/libs/codemirror/mode/htmlmixed/htmlmixed.js +104 -0
- data/public/libs/codemirror/mode/htmlmixed/index.html +73 -0
- data/public/libs/codemirror/mode/http/http.js +98 -0
- data/public/libs/codemirror/mode/http/index.html +32 -0
- data/public/libs/codemirror/mode/javascript/index.html +92 -0
- data/public/libs/codemirror/mode/javascript/javascript.js +467 -0
- data/public/libs/codemirror/mode/javascript/typescript.html +48 -0
- data/public/libs/codemirror/mode/jinja2/index.html +38 -0
- data/public/libs/codemirror/mode/jinja2/jinja2.js +42 -0
- data/public/libs/codemirror/mode/less/index.html +741 -0
- data/public/libs/codemirror/mode/less/less.js +266 -0
- data/public/libs/codemirror/mode/livescript/LICENSE +23 -0
- data/public/libs/codemirror/mode/livescript/index.html +446 -0
- data/public/libs/codemirror/mode/livescript/livescript.js +267 -0
- data/public/libs/codemirror/mode/livescript/livescript.ls +266 -0
- data/public/libs/codemirror/mode/lua/index.html +74 -0
- data/public/libs/codemirror/mode/lua/lua.js +140 -0
- data/public/libs/codemirror/mode/markdown/index.html +344 -0
- data/public/libs/codemirror/mode/markdown/markdown.js +526 -0
- data/public/libs/codemirror/mode/markdown/test.js +636 -0
- data/public/libs/codemirror/mode/meta.js +75 -0
- data/public/libs/codemirror/mode/mirc/index.html +149 -0
- data/public/libs/codemirror/mode/mirc/mirc.js +177 -0
- data/public/libs/codemirror/mode/ntriples/index.html +33 -0
- data/public/libs/codemirror/mode/ntriples/ntriples.js +170 -0
- data/public/libs/codemirror/mode/ocaml/index.html +131 -0
- data/public/libs/codemirror/mode/ocaml/ocaml.js +113 -0
- data/public/libs/codemirror/mode/pascal/LICENSE +7 -0
- data/public/libs/codemirror/mode/pascal/index.html +48 -0
- data/public/libs/codemirror/mode/pascal/pascal.js +94 -0
- data/public/libs/codemirror/mode/perl/LICENSE +19 -0
- data/public/libs/codemirror/mode/perl/index.html +62 -0
- data/public/libs/codemirror/mode/perl/perl.js +816 -0
- data/public/libs/codemirror/mode/php/index.html +51 -0
- data/public/libs/codemirror/mode/php/php.js +129 -0
- data/public/libs/codemirror/mode/pig/index.html +42 -0
- data/public/libs/codemirror/mode/pig/pig.js +171 -0
- data/public/libs/codemirror/mode/properties/index.html +41 -0
- data/public/libs/codemirror/mode/properties/properties.js +63 -0
- data/public/libs/codemirror/mode/python/LICENSE.txt +21 -0
- data/public/libs/codemirror/mode/python/index.html +135 -0
- data/public/libs/codemirror/mode/python/python.js +340 -0
- data/public/libs/codemirror/mode/q/index.html +131 -0
- data/public/libs/codemirror/mode/q/q.js +124 -0
- data/public/libs/codemirror/mode/r/LICENSE +24 -0
- data/public/libs/codemirror/mode/r/index.html +74 -0
- data/public/libs/codemirror/mode/r/r.js +141 -0
- data/public/libs/codemirror/mode/rpm/changes/changes.js +19 -0
- data/public/libs/codemirror/mode/rpm/changes/index.html +53 -0
- data/public/libs/codemirror/mode/rpm/spec/index.html +99 -0
- data/public/libs/codemirror/mode/rpm/spec/spec.css +5 -0
- data/public/libs/codemirror/mode/rpm/spec/spec.js +66 -0
- data/public/libs/codemirror/mode/rst/LICENSE.txt +21 -0
- data/public/libs/codemirror/mode/rst/index.html +524 -0
- data/public/libs/codemirror/mode/rst/rst.js +550 -0
- data/public/libs/codemirror/mode/ruby/LICENSE +24 -0
- data/public/libs/codemirror/mode/ruby/index.html +173 -0
- data/public/libs/codemirror/mode/ruby/ruby.js +197 -0
- data/public/libs/codemirror/mode/rust/index.html +48 -0
- data/public/libs/codemirror/mode/rust/rust.js +432 -0
- data/public/libs/codemirror/mode/sass/index.html +54 -0
- data/public/libs/codemirror/mode/sass/sass.js +349 -0
- data/public/libs/codemirror/mode/scheme/index.html +65 -0
- data/public/libs/codemirror/mode/scheme/scheme.js +230 -0
- data/public/libs/codemirror/mode/shell/index.html +51 -0
- data/public/libs/codemirror/mode/shell/shell.js +118 -0
- data/public/libs/codemirror/mode/sieve/LICENSE +19 -0
- data/public/libs/codemirror/mode/sieve/index.html +81 -0
- data/public/libs/codemirror/mode/sieve/sieve.js +183 -0
- data/public/libs/codemirror/mode/smalltalk/index.html +57 -0
- data/public/libs/codemirror/mode/smalltalk/smalltalk.js +141 -0
- data/public/libs/codemirror/mode/smarty/index.html +83 -0
- data/public/libs/codemirror/mode/smarty/smarty.js +148 -0
- data/public/libs/codemirror/mode/sparql/index.html +42 -0
- data/public/libs/codemirror/mode/sparql/sparql.js +143 -0
- data/public/libs/codemirror/mode/sql/index.html +68 -0
- data/public/libs/codemirror/mode/sql/sql.js +268 -0
- data/public/libs/codemirror/mode/stex/index.html +98 -0
- data/public/libs/codemirror/mode/stex/stex.js +246 -0
- data/public/libs/codemirror/mode/stex/test.js +117 -0
- data/public/libs/codemirror/mode/tcl/index.html +129 -0
- data/public/libs/codemirror/mode/tcl/tcl.js +131 -0
- data/public/libs/codemirror/mode/tiddlywiki/index.html +142 -0
- data/public/libs/codemirror/mode/tiddlywiki/tiddlywiki.css +14 -0
- data/public/libs/codemirror/mode/tiddlywiki/tiddlywiki.js +353 -0
- data/public/libs/codemirror/mode/tiki/index.html +81 -0
- data/public/libs/codemirror/mode/tiki/tiki.css +26 -0
- data/public/libs/codemirror/mode/tiki/tiki.js +308 -0
- data/public/libs/codemirror/mode/turtle/index.html +39 -0
- data/public/libs/codemirror/mode/turtle/turtle.js +145 -0
- data/public/libs/codemirror/mode/vb/LICENSE.txt +21 -0
- data/public/libs/codemirror/mode/vb/index.html +88 -0
- data/public/libs/codemirror/mode/vb/vb.js +259 -0
- data/public/libs/codemirror/mode/vbscript/index.html +42 -0
- data/public/libs/codemirror/mode/vbscript/vbscript.js +26 -0
- data/public/libs/codemirror/mode/velocity/index.html +103 -0
- data/public/libs/codemirror/mode/velocity/velocity.js +144 -0
- data/public/libs/codemirror/mode/verilog/index.html +121 -0
- data/public/libs/codemirror/mode/verilog/verilog.js +182 -0
- data/public/libs/codemirror/mode/xml/index.html +45 -0
- data/public/libs/codemirror/mode/xml/xml.js +328 -0
- data/public/libs/codemirror/mode/xquery/LICENSE +20 -0
- data/public/libs/codemirror/mode/xquery/index.html +221 -0
- data/public/libs/codemirror/mode/xquery/test.js +64 -0
- data/public/libs/codemirror/mode/xquery/xquery.js +450 -0
- data/public/libs/codemirror/mode/yaml/index.html +68 -0
- data/public/libs/codemirror/mode/yaml/yaml.js +95 -0
- data/public/libs/codemirror/mode/z80/index.html +39 -0
- data/public/libs/codemirror/mode/z80/z80.js +85 -0
- data/public/libs/codemirror/package.json +21 -0
- data/public/libs/codemirror/test/doc_test.js +329 -0
- data/public/libs/codemirror/test/driver.js +138 -0
- data/public/libs/codemirror/test/index.html +182 -0
- data/public/libs/codemirror/test/lint/acorn.js +1593 -0
- data/public/libs/codemirror/test/lint/lint.js +112 -0
- data/public/libs/codemirror/test/lint/parse-js.js +1372 -0
- data/public/libs/codemirror/test/lint/walk.js +216 -0
- data/public/libs/codemirror/test/mode_test.css +10 -0
- data/public/libs/codemirror/test/mode_test.js +192 -0
- data/public/libs/codemirror/test/phantom_driver.js +31 -0
- data/public/libs/codemirror/test/run.js +33 -0
- data/public/libs/codemirror/test/test.js +1400 -0
- data/public/libs/codemirror/test/vim_test.js +1688 -0
- data/public/libs/codemirror/theme/ambiance-mobile.css +5 -0
- data/public/libs/codemirror/theme/ambiance.css +75 -0
- data/public/libs/codemirror/theme/blackboard.css +25 -0
- data/public/libs/codemirror/theme/cobalt.css +18 -0
- data/public/libs/codemirror/theme/eclipse.css +25 -0
- data/public/libs/codemirror/theme/elegant.css +10 -0
- data/public/libs/codemirror/theme/erlang-dark.css +21 -0
- data/public/libs/codemirror/theme/lesser-dark.css +44 -0
- data/public/libs/codemirror/theme/midnight.css +52 -0
- data/public/libs/codemirror/theme/monokai.css +28 -0
- data/public/libs/codemirror/theme/neat.css +9 -0
- data/public/libs/codemirror/theme/night.css +21 -0
- data/public/libs/codemirror/theme/rubyblue.css +21 -0
- data/public/libs/codemirror/theme/solarized.css +207 -0
- data/public/libs/codemirror/theme/twilight.css +26 -0
- data/public/libs/codemirror/theme/vibrant-ink.css +27 -0
- data/public/libs/codemirror/theme/xq-dark.css +46 -0
- data/public/libs/codemirror/theme/xq-light.css +43 -0
- data/public/libs/font-awesome/css/font-awesome-ie7.css +983 -0
- data/public/libs/font-awesome/css/font-awesome-ie7.min.css +24 -0
- data/public/libs/font-awesome/css/font-awesome.css +1268 -0
- data/public/libs/font-awesome/css/font-awesome.min.css +24 -0
- data/public/libs/font-awesome/font/FontAwesome.otf +0 -0
- data/public/libs/font-awesome/font/fontawesome-webfont.eot +0 -0
- data/public/libs/font-awesome/font/fontawesome-webfont.svg +339 -0
- data/public/libs/font-awesome/font/fontawesome-webfont.ttf +0 -0
- data/public/libs/font-awesome/font/fontawesome-webfont.woff +0 -0
- data/public/libs/font-awesome/less/bootstrap.less +78 -0
- data/public/libs/font-awesome/less/core.less +132 -0
- data/public/libs/font-awesome/less/extras.less +79 -0
- data/public/libs/font-awesome/less/font-awesome-ie7.less +413 -0
- data/public/libs/font-awesome/less/font-awesome.less +32 -0
- data/public/libs/font-awesome/less/icons.less +330 -0
- data/public/libs/font-awesome/less/mixins.less +34 -0
- data/public/libs/font-awesome/less/path.less +15 -0
- data/public/libs/font-awesome/less/variables.less +9 -0
- data/public/libs/jquery-1.10.0.min.js +6 -0
- data/public/libs/jquery-ui.min.js +12 -0
- data/public/libs/jquery.jsPlumb-1.4.0-all.js +9571 -0
- data/public/libs/jquery.livequery.js +226 -0
- data/public/libs/jsPlumbInitializer.js +72 -0
- data/public/libs/jstree/README.txt +10 -0
- data/public/libs/jstree/_demo/_dump.sql +20 -0
- data/public/libs/jstree/_demo/_inc/__mysql_errors.log +0 -0
- data/public/libs/jstree/_demo/_inc/class._database.php +146 -0
- data/public/libs/jstree/_demo/_inc/class._database_i.php +152 -0
- data/public/libs/jstree/_demo/_inc/class.tree.php +602 -0
- data/public/libs/jstree/_demo/_install.txt +6 -0
- data/public/libs/jstree/_demo/config.php +14 -0
- data/public/libs/jstree/_demo/file.png +0 -0
- data/public/libs/jstree/_demo/folder.png +0 -0
- data/public/libs/jstree/_demo/index.html +461 -0
- data/public/libs/jstree/_demo/root.png +0 -0
- data/public/libs/jstree/_demo/server.php +69 -0
- data/public/libs/jstree/_docs/!style.css +48 -0
- data/public/libs/jstree/_docs/_drive.png +0 -0
- data/public/libs/jstree/_docs/_html_data.html +2 -0
- data/public/libs/jstree/_docs/_json_data.json +4 -0
- data/public/libs/jstree/_docs/_search_data.json +6 -0
- data/public/libs/jstree/_docs/_search_result.json +1 -0
- data/public/libs/jstree/_docs/_xml_flat.xml +12 -0
- data/public/libs/jstree/_docs/_xml_nest.xml +18 -0
- data/public/libs/jstree/_docs/checkbox.html +171 -0
- data/public/libs/jstree/_docs/contextmenu.html +121 -0
- data/public/libs/jstree/_docs/cookies.html +97 -0
- data/public/libs/jstree/_docs/core.html +689 -0
- data/public/libs/jstree/_docs/crrm.html +316 -0
- data/public/libs/jstree/_docs/dnd.html +199 -0
- data/public/libs/jstree/_docs/hotkeys.html +82 -0
- data/public/libs/jstree/_docs/html_data.html +175 -0
- data/public/libs/jstree/_docs/index.html +86 -0
- data/public/libs/jstree/_docs/json_data.html +249 -0
- data/public/libs/jstree/_docs/languages.html +152 -0
- data/public/libs/jstree/_docs/logo.png +0 -0
- data/public/libs/jstree/_docs/search.html +153 -0
- data/public/libs/jstree/_docs/sort.html +85 -0
- data/public/libs/jstree/_docs/syntax/!script.js +2232 -0
- data/public/libs/jstree/_docs/syntax/!style.css +511 -0
- data/public/libs/jstree/_docs/syntax/clipboard.swf +0 -0
- data/public/libs/jstree/_docs/syntax/help.png +0 -0
- data/public/libs/jstree/_docs/syntax/magnifier.png +0 -0
- data/public/libs/jstree/_docs/syntax/page_white_code.png +0 -0
- data/public/libs/jstree/_docs/syntax/page_white_copy.png +0 -0
- data/public/libs/jstree/_docs/syntax/printer.png +0 -0
- data/public/libs/jstree/_docs/syntax/wrapping.png +0 -0
- data/public/libs/jstree/_docs/themeroller.html +107 -0
- data/public/libs/jstree/_docs/themes.html +127 -0
- data/public/libs/jstree/_docs/types.html +178 -0
- data/public/libs/jstree/_docs/ui.html +197 -0
- data/public/libs/jstree/_docs/unique.html +85 -0
- data/public/libs/jstree/_docs/xml_data.html +218 -0
- data/public/libs/jstree/_lib/jquery.cookie.js +96 -0
- data/public/libs/jstree/_lib/jquery.hotkeys.js +99 -0
- data/public/libs/jstree/_lib/jquery.js +5 -0
- data/public/libs/jstree/jquery.jstree.js +4564 -0
- data/public/libs/jstree/themes/apple/bg.jpg +0 -0
- data/public/libs/jstree/themes/apple/d.png +0 -0
- data/public/libs/jstree/themes/apple/dot_for_ie.gif +0 -0
- data/public/libs/jstree/themes/apple/style.css +61 -0
- data/public/libs/jstree/themes/apple/throbber.gif +0 -0
- data/public/libs/jstree/themes/classic/d.gif +0 -0
- data/public/libs/jstree/themes/classic/d.png +0 -0
- data/public/libs/jstree/themes/classic/dot_for_ie.gif +0 -0
- data/public/libs/jstree/themes/classic/style.css +77 -0
- data/public/libs/jstree/themes/classic/throbber.gif +0 -0
- data/public/libs/jstree/themes/default-rtl/d.gif +0 -0
- data/public/libs/jstree/themes/default-rtl/d.png +0 -0
- data/public/libs/jstree/themes/default-rtl/dots.gif +0 -0
- data/public/libs/jstree/themes/default-rtl/style.css +84 -0
- data/public/libs/jstree/themes/default-rtl/throbber.gif +0 -0
- data/public/libs/jstree/themes/default/d.gif +0 -0
- data/public/libs/jstree/themes/default/d.png +0 -0
- data/public/libs/jstree/themes/default/style.css +74 -0
- data/public/libs/jstree/themes/default/throbber.gif +0 -0
- data/test/dummy/README.rdoc +261 -0
- data/test/dummy/Rakefile +7 -0
- data/test/dummy/app/assets/javascripts/application.js +15 -0
- data/test/dummy/app/assets/javascripts/demo_app.js +2 -0
- data/test/dummy/app/assets/stylesheets/application.css +13 -0
- data/test/dummy/app/assets/stylesheets/demo_app.css +4 -0
- data/test/dummy/app/controllers/application_controller.rb +3 -0
- data/test/dummy/app/controllers/demo_app_controller.rb +6 -0
- data/test/dummy/app/helpers/application_helper.rb +2 -0
- data/test/dummy/app/helpers/demo_app_helper.rb +2 -0
- data/test/dummy/app/views/layouts/application.html.erb +14 -0
- data/test/dummy/config.ru +4 -0
- data/test/dummy/config/application.rb +59 -0
- data/test/dummy/config/boot.rb +10 -0
- data/test/dummy/config/database.yml +25 -0
- data/test/dummy/config/environment.rb +5 -0
- data/test/dummy/config/environments/development.rb +37 -0
- data/test/dummy/config/environments/production.rb +67 -0
- data/test/dummy/config/environments/test.rb +37 -0
- data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
- data/test/dummy/config/initializers/inflections.rb +15 -0
- data/test/dummy/config/initializers/mime_types.rb +5 -0
- data/test/dummy/config/initializers/secret_token.rb +7 -0
- data/test/dummy/config/initializers/session_store.rb +8 -0
- data/test/dummy/config/initializers/wrap_parameters.rb +14 -0
- data/test/dummy/config/locales/en.yml +5 -0
- data/test/dummy/config/routes.rb +6 -0
- data/test/dummy/db/test.sqlite3 +0 -0
- data/test/dummy/log/development.log +17606 -0
- data/test/dummy/public/404.html +26 -0
- data/test/dummy/public/422.html +26 -0
- data/test/dummy/public/500.html +25 -0
- data/test/dummy/public/favicon.ico +0 -0
- data/test/dummy/script/rails +6 -0
- data/test/dummy/test/functional/demo_app_controller_test.rb +7 -0
- data/test/dummy/test/unit/helpers/demo_app_helper_test.rb +4 -0
- data/test/dummy/tmp/cache/assets/D26/980/sprockets%2Fe04a37a0fa7f26c1183a1a4436e2a9c1 +0 -0
- data/test/dummy/tmp/cache/assets/D32/4F0/sprockets%2Fbd5441f3593e4ea157222202f3fddad6 +0 -0
- data/test/dummy/tmp/pids/server.pid +1 -0
- data/test/functional/maglev_database_explorer/def_controller_test.rb +9 -0
- data/test/integration/navigation_test.rb +10 -0
- data/test/maglev-database-explorer_test.rb +7 -0
- data/test/test_helper.rb +15 -0
- data/test/unit/helpers/maglev_database_explorer/def_helper_test.rb +6 -0
- metadata +813 -0
|
@@ -0,0 +1,1897 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>CodeMirror: User Manual</title>
|
|
6
|
+
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold">
|
|
7
|
+
<link rel="stylesheet" type="text/css" href="docs.css">
|
|
8
|
+
<style>dl dl {margin: 0;}</style>
|
|
9
|
+
<script src="../lib/codemirror.js"></script>
|
|
10
|
+
<link rel="stylesheet" href="../lib/codemirror.css">
|
|
11
|
+
<script src="../addon/runmode/runmode.js"></script>
|
|
12
|
+
<script src="../addon/runmode/colorize.js"></script>
|
|
13
|
+
<script src="../mode/javascript/javascript.js"></script>
|
|
14
|
+
<script src="../mode/xml/xml.js"></script>
|
|
15
|
+
<script src="../mode/css/css.js"></script>
|
|
16
|
+
<script src="../mode/htmlmixed/htmlmixed.js"></script>
|
|
17
|
+
<style>
|
|
18
|
+
dt { text-indent: -1.5em; padding-left: 1.5em; }
|
|
19
|
+
</style>
|
|
20
|
+
</head>
|
|
21
|
+
<body>
|
|
22
|
+
|
|
23
|
+
<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
|
|
24
|
+
|
|
25
|
+
<div class="grey">
|
|
26
|
+
<img src="baboon.png" class="logo" alt="logo">
|
|
27
|
+
<pre>
|
|
28
|
+
/* User manual and
|
|
29
|
+
reference guide */
|
|
30
|
+
</pre>
|
|
31
|
+
</div>
|
|
32
|
+
|
|
33
|
+
<div class="clear"><div class="leftbig blk">
|
|
34
|
+
|
|
35
|
+
<h2 id="overview">Overview</h2>
|
|
36
|
+
|
|
37
|
+
<p>CodeMirror is a code-editor component that can be embedded in
|
|
38
|
+
Web pages. The core library provides <em>only</em> the editor
|
|
39
|
+
component, no accompanying buttons, auto-completion, or other IDE
|
|
40
|
+
functionality. It does provide a rich API on top of which such
|
|
41
|
+
functionality can be straightforwardly implemented. See
|
|
42
|
+
the <a href="#addons">add-ons</a> included in the distribution,
|
|
43
|
+
and
|
|
44
|
+
the <a href="https://github.com/jagthedrummer/codemirror-ui">CodeMirror
|
|
45
|
+
UI</a> project, for reusable implementations of extra features.</p>
|
|
46
|
+
|
|
47
|
+
<p>CodeMirror works with language-specific modes. Modes are
|
|
48
|
+
JavaScript programs that help color (and optionally indent) text
|
|
49
|
+
written in a given language. The distribution comes with a number
|
|
50
|
+
of modes (see the <a href="../mode/"><code>mode/</code></a>
|
|
51
|
+
directory), and it isn't hard to <a href="#modeapi">write new
|
|
52
|
+
ones</a> for other languages.</p>
|
|
53
|
+
|
|
54
|
+
<h2 id="usage">Basic Usage</h2>
|
|
55
|
+
|
|
56
|
+
<p>The easiest way to use CodeMirror is to simply load the script
|
|
57
|
+
and style sheet found under <code>lib/</code> in the distribution,
|
|
58
|
+
plus a mode script from one of the <code>mode/</code> directories.
|
|
59
|
+
(See <a href="compress.html">the compression helper</a> for an
|
|
60
|
+
easy way to combine scripts.) For example:</p>
|
|
61
|
+
|
|
62
|
+
<pre data-lang="text/html"><script src="lib/codemirror.js"></script>
|
|
63
|
+
<link rel="stylesheet" href="../lib/codemirror.css">
|
|
64
|
+
<script src="mode/javascript/javascript.js"></script></pre>
|
|
65
|
+
|
|
66
|
+
<p>Having done this, an editor instance can be created like
|
|
67
|
+
this:</p>
|
|
68
|
+
|
|
69
|
+
<pre data-lang="javascript">var myCodeMirror = CodeMirror(document.body);</pre>
|
|
70
|
+
|
|
71
|
+
<p>The editor will be appended to the document body, will start
|
|
72
|
+
empty, and will use the mode that we loaded. To have more control
|
|
73
|
+
over the new editor, a configuration object can be passed
|
|
74
|
+
to <code>CodeMirror</code> as a second argument:</p>
|
|
75
|
+
|
|
76
|
+
<pre data-lang="javascript">var myCodeMirror = CodeMirror(document.body, {
|
|
77
|
+
value: "function myScript(){return 100;}\n",
|
|
78
|
+
mode: "javascript"
|
|
79
|
+
});</pre>
|
|
80
|
+
|
|
81
|
+
<p>This will initialize the editor with a piece of code already in
|
|
82
|
+
it, and explicitly tell it to use the JavaScript mode (which is
|
|
83
|
+
useful when multiple modes are loaded).
|
|
84
|
+
See <a href="#config">below</a> for a full discussion of the
|
|
85
|
+
configuration options that CodeMirror accepts.</p>
|
|
86
|
+
|
|
87
|
+
<p>In cases where you don't want to append the editor to an
|
|
88
|
+
element, and need more control over the way it is inserted, the
|
|
89
|
+
first argument to the <code>CodeMirror</code> function can also
|
|
90
|
+
be a function that, when given a DOM element, inserts it into the
|
|
91
|
+
document somewhere. This could be used to, for example, replace a
|
|
92
|
+
textarea with a real editor:</p>
|
|
93
|
+
|
|
94
|
+
<pre data-lang="javascript">var myCodeMirror = CodeMirror(function(elt) {
|
|
95
|
+
myTextArea.parentNode.replaceChild(elt, myTextArea);
|
|
96
|
+
}, {value: myTextArea.value});</pre>
|
|
97
|
+
|
|
98
|
+
<p>However, for this use case, which is a common way to use
|
|
99
|
+
CodeMirror, the library provides a much more powerful
|
|
100
|
+
shortcut:</p>
|
|
101
|
+
|
|
102
|
+
<pre data-lang="javascript">var myCodeMirror = CodeMirror.fromTextArea(myTextArea);</pre>
|
|
103
|
+
|
|
104
|
+
<p>This will, among other things, ensure that the textarea's value
|
|
105
|
+
is updated with the editor's contents when the form (if it is part
|
|
106
|
+
of a form) is submitted. See the <a href="#fromTextArea">API
|
|
107
|
+
reference</a> for a full description of this method.</p>
|
|
108
|
+
|
|
109
|
+
<h2 id="config">Configuration</h2>
|
|
110
|
+
|
|
111
|
+
<p>Both the <code>CodeMirror</code> function and
|
|
112
|
+
its <code>fromTextArea</code> method take as second (optional)
|
|
113
|
+
argument an object containing configuration options. Any option
|
|
114
|
+
not supplied like this will be taken
|
|
115
|
+
from <code>CodeMirror.defaults</code>, an object containing the
|
|
116
|
+
default options. You can update this object to change the defaults
|
|
117
|
+
on your page.</p>
|
|
118
|
+
|
|
119
|
+
<p>Options are not checked in any way, so setting bogus option
|
|
120
|
+
values is bound to lead to odd errors.</p>
|
|
121
|
+
|
|
122
|
+
<p>These are the supported options:</p>
|
|
123
|
+
|
|
124
|
+
<dl>
|
|
125
|
+
<dt id="option_value"><code><strong>value</strong>: string|CodeMirror.Doc</code></dt>
|
|
126
|
+
<dd>The starting value of the editor. Can be a string, or
|
|
127
|
+
a <a href="#api_doc">document object</a>.</dd>
|
|
128
|
+
|
|
129
|
+
<dt id="option_mode"><code><strong>mode</strong>: string|object</code></dt>
|
|
130
|
+
<dd>The mode to use. When not given, this will default to the
|
|
131
|
+
first mode that was loaded. It may be a string, which either
|
|
132
|
+
simply names the mode or is
|
|
133
|
+
a <a href="http://en.wikipedia.org/wiki/MIME">MIME</a> type
|
|
134
|
+
associated with the mode. Alternatively, it may be an object
|
|
135
|
+
containing configuration options for the mode, with
|
|
136
|
+
a <code>name</code> property that names the mode (for
|
|
137
|
+
example <code>{name: "javascript", json: true}</code>). The demo
|
|
138
|
+
pages for each mode contain information about what configuration
|
|
139
|
+
parameters the mode supports. You can ask CodeMirror which modes
|
|
140
|
+
and MIME types have been defined by inspecting
|
|
141
|
+
the <code>CodeMirror.modes</code>
|
|
142
|
+
and <code>CodeMirror.mimeModes</code> objects. The first maps
|
|
143
|
+
mode names to their constructors, and the second maps MIME types
|
|
144
|
+
to mode specs.</dd>
|
|
145
|
+
|
|
146
|
+
<dt id="option_theme"><code><strong>theme</strong>: string</code></dt>
|
|
147
|
+
<dd>The theme to style the editor with. You must make sure the
|
|
148
|
+
CSS file defining the corresponding <code>.cm-s-[name]</code>
|
|
149
|
+
styles is loaded (see
|
|
150
|
+
the <a href="../theme/"><code>theme</code></a> directory in the
|
|
151
|
+
distribution). The default is <code>"default"</code>, for which
|
|
152
|
+
colors are included in <code>codemirror.css</code>. It is
|
|
153
|
+
possible to use multiple theming classes at once—for
|
|
154
|
+
example <code>"foo bar"</code> will assign both
|
|
155
|
+
the <code>cm-s-foo</code> and the <code>cm-s-bar</code> classes
|
|
156
|
+
to the editor.</dd>
|
|
157
|
+
|
|
158
|
+
<dt id="option_indentUnit"><code><strong>indentUnit</strong>: integer</code></dt>
|
|
159
|
+
<dd>How many spaces a block (whatever that means in the edited
|
|
160
|
+
language) should be indented. The default is 2.</dd>
|
|
161
|
+
|
|
162
|
+
<dt id="option_smartIndent"><code><strong>smartIndent</strong>: boolean</code></dt>
|
|
163
|
+
<dd>Whether to use the context-sensitive indentation that the
|
|
164
|
+
mode provides (or just indent the same as the line before).
|
|
165
|
+
Defaults to true.</dd>
|
|
166
|
+
|
|
167
|
+
<dt id="option_tabSize"><code><strong>tabSize</strong>: integer</code></dt>
|
|
168
|
+
<dd>The width of a tab character. Defaults to 4.</dd>
|
|
169
|
+
|
|
170
|
+
<dt id="option_indentWithTabs"><code><strong>indentWithTabs</strong>: boolean</code></dt>
|
|
171
|
+
<dd>Whether, when indenting, the first N*<code>tabSize</code>
|
|
172
|
+
spaces should be replaced by N tabs. Default is false.</dd>
|
|
173
|
+
|
|
174
|
+
<dt id="option_electricChars"><code><strong>electricChars</strong>: boolean</code></dt>
|
|
175
|
+
<dd>Configures whether the editor should re-indent the current
|
|
176
|
+
line when a character is typed that might change its proper
|
|
177
|
+
indentation (only works if the mode supports indentation).
|
|
178
|
+
Default is true.</dd>
|
|
179
|
+
|
|
180
|
+
<dt id="option_rtlMoveVisually"><code><strong>rtlMoveVisually</strong>: boolean</code></dt>
|
|
181
|
+
<dd>Determines whether horizontal cursor movement through
|
|
182
|
+
right-to-left (Arabic, Hebrew) text is visual (pressing the left
|
|
183
|
+
arrow moves the cursor left) or logical (pressing the left arrow
|
|
184
|
+
moves to the next lower index in the string, which is visually
|
|
185
|
+
right in right-to-left text). The default is <code>false</code>
|
|
186
|
+
on Windows, and <code>true</code> on other platforms.</dd>
|
|
187
|
+
|
|
188
|
+
<dt id="option_keyMap"><code><strong>keyMap</strong>: string</code></dt>
|
|
189
|
+
<dd>Configures the keymap to use. The default
|
|
190
|
+
is <code>"default"</code>, which is the only keymap defined
|
|
191
|
+
in <code>codemirror.js</code> itself. Extra keymaps are found in
|
|
192
|
+
the <a href="../keymap/"><code>keymap</code></a> directory. See
|
|
193
|
+
the <a href="#keymaps">section on keymaps</a> for more
|
|
194
|
+
information.</dd>
|
|
195
|
+
|
|
196
|
+
<dt id="option_extraKeys"><code><strong>extraKeys</strong>: object</code></dt>
|
|
197
|
+
<dd>Can be used to specify extra keybindings for the editor,
|
|
198
|
+
alongside the ones defined
|
|
199
|
+
by <a href="#option_keyMap"><code>keyMap</code></a>. Should be
|
|
200
|
+
either null, or a valid <a href="#keymaps">keymap</a> value.</dd>
|
|
201
|
+
|
|
202
|
+
<dt id="option_lineWrapping"><code><strong>lineWrapping</strong>: boolean</code></dt>
|
|
203
|
+
<dd>Whether CodeMirror should scroll or wrap for long lines.
|
|
204
|
+
Defaults to <code>false</code> (scroll).</dd>
|
|
205
|
+
|
|
206
|
+
<dt id="option_lineNumbers"><code><strong>lineNumbers</strong>: boolean</code></dt>
|
|
207
|
+
<dd>Whether to show line numbers to the left of the editor.</dd>
|
|
208
|
+
|
|
209
|
+
<dt id="option_firstLineNumber"><code><strong>firstLineNumber</strong>: integer</code></dt>
|
|
210
|
+
<dd>At which number to start counting lines. Default is 1.</dd>
|
|
211
|
+
|
|
212
|
+
<dt id="option_lineNumberFormatter"><code><strong>lineNumberFormatter</strong>: function(line: integer) → string</code></dt>
|
|
213
|
+
<dd>A function used to format line numbers. The function is
|
|
214
|
+
passed the line number, and should return a string that will be
|
|
215
|
+
shown in the gutter.</dd>
|
|
216
|
+
|
|
217
|
+
<dt id="option_gutters"><code><strong>gutters</strong>: array<string></code></dt>
|
|
218
|
+
<dd>Can be used to add extra gutters (beyond or instead of the
|
|
219
|
+
line number gutter). Should be an array of CSS class names, each
|
|
220
|
+
of which defines a <code>width</code> (and optionally a
|
|
221
|
+
background), and which will be used to draw the background of
|
|
222
|
+
the gutters. <em>May</em> include
|
|
223
|
+
the <code>CodeMirror-linenumbers</code> class, in order to
|
|
224
|
+
explicitly set the position of the line number gutter (it will
|
|
225
|
+
default to be to the right of all other gutters). These class
|
|
226
|
+
names are the keys passed
|
|
227
|
+
to <a href="#setGutterMarker"><code>setGutterMarker</code></a>.</dd>
|
|
228
|
+
|
|
229
|
+
<dt id="option_fixedGutter"><code><strong>fixedGutter</strong>: boolean</code></dt>
|
|
230
|
+
<dd>Determines whether the gutter scrolls along with the content
|
|
231
|
+
horizontally (false) or whether it stays fixed during horizontal
|
|
232
|
+
scrolling (true, the default).</dd>
|
|
233
|
+
|
|
234
|
+
<dt id="option_readOnly"><code><strong>readOnly</strong>: boolean|string</code></dt>
|
|
235
|
+
<dd>This disables editing of the editor content by the user. If
|
|
236
|
+
the special value <code>"nocursor"</code> is given (instead of
|
|
237
|
+
simply <code>true</code>), focusing of the editor is also
|
|
238
|
+
disallowed.</dd>
|
|
239
|
+
|
|
240
|
+
<dt id="option_showCursorWhenSelecting"><code><strong>showCursorWhenSelecting</strong>: boolean</code></dt>
|
|
241
|
+
<dd>Whether the cursor should be drawn when a selection is
|
|
242
|
+
active. Defaults to false.</dd>
|
|
243
|
+
|
|
244
|
+
<dt id="option_undoDepth"><code><strong>undoDepth</strong>: integer</code></dt>
|
|
245
|
+
<dd>The maximum number of undo levels that the editor stores.
|
|
246
|
+
Defaults to 40.</dd>
|
|
247
|
+
|
|
248
|
+
<dt id="option_historyEventDelay"><code><strong>historyEventDelay</strong>: integer</code></dt>
|
|
249
|
+
<dd>The period of inactivity (in milliseconds) that will cause a
|
|
250
|
+
new history event to be started when typing or deleting.
|
|
251
|
+
Defaults to 500.</dd>
|
|
252
|
+
|
|
253
|
+
<dt id="option_tabindex"><code><strong>tabindex</strong>: integer</code></dt>
|
|
254
|
+
<dd>The <a href="http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex">tab
|
|
255
|
+
index</a> to assign to the editor. If not given, no tab index
|
|
256
|
+
will be assigned.</dd>
|
|
257
|
+
|
|
258
|
+
<dt id="option_autofocus"><code><strong>autofocus</strong>: boolean</code></dt>
|
|
259
|
+
<dd>Can be used to make CodeMirror focus itself on
|
|
260
|
+
initialization. Defaults to off.
|
|
261
|
+
When <a href="#fromTextArea"><code>fromTextArea</code></a> is
|
|
262
|
+
used, and no explicit value is given for this option, it will be
|
|
263
|
+
set to true when either the source textarea is focused, or it
|
|
264
|
+
has an <code>autofocus</code> attribute and no other element is
|
|
265
|
+
focused.</dd>
|
|
266
|
+
</dl>
|
|
267
|
+
|
|
268
|
+
<p>Below this a few more specialized, low-level options are
|
|
269
|
+
listed. These are only useful in very specific situations, you
|
|
270
|
+
might want to skip them the first time you read this manual.</p>
|
|
271
|
+
|
|
272
|
+
<dl>
|
|
273
|
+
<dt id="option_dragDrop"><code><strong>dragDrop</strong>: boolean</code></dt>
|
|
274
|
+
<dd>Controls whether drag-and-drop is enabled. On by default.</dd>
|
|
275
|
+
|
|
276
|
+
<dt id="option_onDragEvent"><code><strong>onDragEvent</strong>: function(instance: CodeMirror, event: Event) → boolean</code></dt>
|
|
277
|
+
<dd>When given, this will be called when the editor is handling
|
|
278
|
+
a <code>dragenter</code>, <code>dragover</code>,
|
|
279
|
+
or <code>drop</code> event. It will be passed the editor instance
|
|
280
|
+
and the event object as arguments. The callback can choose to
|
|
281
|
+
handle the event itself, in which case it should
|
|
282
|
+
return <code>true</code> to indicate that CodeMirror should not
|
|
283
|
+
do anything further.</dd>
|
|
284
|
+
|
|
285
|
+
<dt id="option_onKeyEvent"><code><strong>onKeyEvent</strong>: function(instance: CodeMirror, event: Event) → boolean</code></dt>
|
|
286
|
+
<dd>This provides a rather low-level hook into CodeMirror's key
|
|
287
|
+
handling. If provided, this function will be called on
|
|
288
|
+
every <code>keydown</code>, <code>keyup</code>,
|
|
289
|
+
and <code>keypress</code> event that CodeMirror captures. It
|
|
290
|
+
will be passed two arguments, the editor instance and the key
|
|
291
|
+
event. This key event is pretty much the raw key event, except
|
|
292
|
+
that a <code>stop()</code> method is always added to it. You
|
|
293
|
+
could feed it to, for example, <code>jQuery.Event</code> to
|
|
294
|
+
further normalize it.<br>This function can inspect the key
|
|
295
|
+
event, and handle it if it wants to. It may return true to tell
|
|
296
|
+
CodeMirror to ignore the event. Be wary that, on some browsers,
|
|
297
|
+
stopping a <code>keydown</code> does not stop
|
|
298
|
+
the <code>keypress</code> from firing, whereas on others it
|
|
299
|
+
does. If you respond to an event, you should probably inspect
|
|
300
|
+
its <code>type</code> property and only do something when it
|
|
301
|
+
is <code>keydown</code> (or <code>keypress</code> for actions
|
|
302
|
+
that need character data).</dd>
|
|
303
|
+
|
|
304
|
+
<dt id="option_cursorBlinkRate"><code><strong>cursorBlinkRate</strong>: number</code></dt>
|
|
305
|
+
<dd>Half-period in milliseconds used for cursor blinking. The default blink
|
|
306
|
+
rate is 530ms.</dd>
|
|
307
|
+
|
|
308
|
+
<dt id="option_cursorHeight"><code><strong>cursorHeight</strong>: number</code></dt>
|
|
309
|
+
<dd>Determines the height of the cursor. Default is 1, meaning
|
|
310
|
+
it spans the whole height of the line. For some fonts (and by
|
|
311
|
+
some tastes) a smaller height (for example <code>0.85</code>),
|
|
312
|
+
which causes the cursor to not reach all the way to the bottom
|
|
313
|
+
of the line, looks better</dd>
|
|
314
|
+
|
|
315
|
+
<dt id="option_workTime"><code><strong>workTime</strong>, <strong>workDelay</strong>: number</code></dt>
|
|
316
|
+
<dd>Highlighting is done by a pseudo background-thread that will
|
|
317
|
+
work for <code>workTime</code> milliseconds, and then use
|
|
318
|
+
timeout to sleep for <code>workDelay</code> milliseconds. The
|
|
319
|
+
defaults are 200 and 300, you can change these options to make
|
|
320
|
+
the highlighting more or less aggressive.</dd>
|
|
321
|
+
|
|
322
|
+
<dt id="option_workDelay"><code><strong>workDelay</strong>: number</code></dt>
|
|
323
|
+
<dd>See <a href="#option_workTime"><code>workTime</code></a>.</dd>
|
|
324
|
+
|
|
325
|
+
<dt id="option_pollInterval"><code><strong>pollInterval</strong>: number</code></dt>
|
|
326
|
+
<dd>Indicates how quickly CodeMirror should poll its input
|
|
327
|
+
textarea for changes (when focused). Most input is captured by
|
|
328
|
+
events, but some things, like IME input on some browsers, don't
|
|
329
|
+
generate events that allow CodeMirror to properly detect it.
|
|
330
|
+
Thus, it polls. Default is 100 milliseconds.</dd>
|
|
331
|
+
|
|
332
|
+
<dt id="option_flattenSpans"><code><strong>flattenSpans</strong>: boolean</code></dt>
|
|
333
|
+
<dd>By default, CodeMirror will combine adjacent tokens into a
|
|
334
|
+
single span if they have the same class. This will result in a
|
|
335
|
+
simpler DOM tree, and thus perform better. With some kinds of
|
|
336
|
+
styling (such as rounded corners), this will change the way the
|
|
337
|
+
document looks. You can set this option to false to disable this
|
|
338
|
+
behavior.</dd>
|
|
339
|
+
|
|
340
|
+
<dt id="option_maxHighlightLength"><code><strong>maxHighlightLength</strong>: number</code></dt>
|
|
341
|
+
<dd>When highlighting long lines, in order to stay responsive,
|
|
342
|
+
the editor will give up and simply style the rest of the line as
|
|
343
|
+
plain text when it reaches a certain position. The default is
|
|
344
|
+
10000. You can set this to <code>Infinity</code> to turn off
|
|
345
|
+
this behavior.</dd>
|
|
346
|
+
|
|
347
|
+
<dt id="option_viewportMargin"><code><strong>viewportMargin</strong>: integer</code></dt>
|
|
348
|
+
<dd>Specifies the amount of lines that are rendered above and
|
|
349
|
+
below the part of the document that's currently scrolled into
|
|
350
|
+
view. This affects the amount of updates needed when scrolling,
|
|
351
|
+
and the amount of work that such an update does. You should
|
|
352
|
+
usually leave it at its default, 10. Can be set
|
|
353
|
+
to <code>Infinity</code> to make sure the whole document is
|
|
354
|
+
always rendered, and thus the browser's text search works on it.
|
|
355
|
+
This <em>will</em> have bad effects on performance of big
|
|
356
|
+
documents.</dd>
|
|
357
|
+
</dl>
|
|
358
|
+
|
|
359
|
+
<h2 id="events">Events</h2>
|
|
360
|
+
|
|
361
|
+
<p>A CodeMirror instance emits a number of events, which allow
|
|
362
|
+
client code to react to various situations. These are registered
|
|
363
|
+
with the <a href="#on"><code>on</code></a> method (and
|
|
364
|
+
removed with the <a href="#off"><code>off</code></a>
|
|
365
|
+
method). These are the events that fire on the instance object.
|
|
366
|
+
The name of the event is followed by the arguments that will be
|
|
367
|
+
passed to the handler. The <code>instance</code> argument always
|
|
368
|
+
refers to the editor instance.</p>
|
|
369
|
+
|
|
370
|
+
<dl>
|
|
371
|
+
<dt id="event_change"><code><strong>"change"</strong> (instance: CodeMirror, changeObj: object)</code></dt>
|
|
372
|
+
<dd>Fires every time the content of the editor is changed.
|
|
373
|
+
The <code>changeObj</code> is a <code>{from, to, text, removed,
|
|
374
|
+
next}</code> object containing information about the changes
|
|
375
|
+
that occurred as second argument. <code>from</code>
|
|
376
|
+
and <code>to</code> are the positions (in the pre-change
|
|
377
|
+
coordinate system) where the change started and ended (for
|
|
378
|
+
example, it might be <code>{ch:0, line:18}</code> if the
|
|
379
|
+
position is at the beginning of line #19). <code>text</code> is
|
|
380
|
+
an array of strings representing the text that replaced the
|
|
381
|
+
changed range (split by line). <code>removed</code> is the text
|
|
382
|
+
that used to be between <code>from</code> and <code>to</code>,
|
|
383
|
+
which is overwritten by this change. If multiple changes
|
|
384
|
+
happened during a single operation, the object will have
|
|
385
|
+
a <code>next</code> property pointing to another change object
|
|
386
|
+
(which may point to another, etc).</dd>
|
|
387
|
+
|
|
388
|
+
<dt id="event_beforeChange"><code><strong>"beforeChange"</strong> (instance: CodeMirror, changeObj: object)</code></dt>
|
|
389
|
+
<dd>This event is fired before a change is applied, and its
|
|
390
|
+
handler may choose to modify or cancel the change.
|
|
391
|
+
The <code>changeObj</code> object
|
|
392
|
+
has <code>from</code>, <code>to</code>, and <code>text</code>
|
|
393
|
+
properties, as with
|
|
394
|
+
the <a href="#event_change"><code>"change"</code></a> event, but
|
|
395
|
+
never a <code>next</code> property, since this is fired for each
|
|
396
|
+
individual change, and not batched per operation. It also
|
|
397
|
+
has <code>update(from, to, text)</code>
|
|
398
|
+
and <code>cancel()</code> methods, which may be used to modify
|
|
399
|
+
or cancel the change. All three arguments to <code>update</code>
|
|
400
|
+
are optional, and can be left off to leave the existing value
|
|
401
|
+
for that field intact. <strong>Note:</strong> you may not do
|
|
402
|
+
anything from a <code>"beforeChange"</code> handler that would
|
|
403
|
+
cause changes to the document or its visualization. Doing so
|
|
404
|
+
will, since this handler is called directly from the bowels of
|
|
405
|
+
the CodeMirror implementation, probably cause the editor to
|
|
406
|
+
become corrupted.</dd>
|
|
407
|
+
|
|
408
|
+
<dt id="event_cursorActivity"><code><strong>"cursorActivity"</strong> (instance: CodeMirror)</code></dt>
|
|
409
|
+
<dd>Will be fired when the cursor or selection moves, or any
|
|
410
|
+
change is made to the editor content.</dd>
|
|
411
|
+
|
|
412
|
+
<dt id="event_beforeSelectionChange"><code><strong>"beforeSelectionChange"</strong> (instance: CodeMirror, selection: {head, anchor})</code></dt>
|
|
413
|
+
<dd>This event is fired before the selection is moved. Its
|
|
414
|
+
handler may modify the resulting selection head and anchor.
|
|
415
|
+
The <code>selection</code> parameter is an object
|
|
416
|
+
with <code>head</code> and <code>anchor</code> properties
|
|
417
|
+
holding <code>{line, ch}</code> objects, which the handler can
|
|
418
|
+
read and update. Handlers for this event have the same
|
|
419
|
+
restriction
|
|
420
|
+
as <a href="#event_beforeChange"><code>"beforeChange"</code></a>
|
|
421
|
+
handlers — they should not do anything to directly update the
|
|
422
|
+
state of the editor.</dd>
|
|
423
|
+
|
|
424
|
+
<dt id="event_viewportChange"><code><strong>"viewportChange"</strong> (instance: CodeMirror, from: number, to: number)</code></dt>
|
|
425
|
+
<dd>Fires whenever the <a href="#getViewport">view port</a> of
|
|
426
|
+
the editor changes (due to scrolling, editing, or any other
|
|
427
|
+
factor). The <code>from</code> and <code>to</code> arguments
|
|
428
|
+
give the new start and end of the viewport.</dd>
|
|
429
|
+
|
|
430
|
+
<dt id="event_gutterClick"><code><strong>"gutterClick"</strong> (instance: CodeMirror, line: integer, gutter: string, clickEvent: Event)</code></dt>
|
|
431
|
+
<dd>Fires when the editor gutter (the line-number area) is
|
|
432
|
+
clicked. Will pass the editor instance as first argument, the
|
|
433
|
+
(zero-based) number of the line that was clicked as second
|
|
434
|
+
argument, the CSS class of the gutter that was clicked as third
|
|
435
|
+
argument, and the raw <code>mousedown</code> event object as
|
|
436
|
+
fourth argument.</dd>
|
|
437
|
+
|
|
438
|
+
<dt id="event_focus"><code><strong>"focus"</strong> (instance: CodeMirror)</code></dt>
|
|
439
|
+
<dd>Fires whenever the editor is focused.</dd>
|
|
440
|
+
|
|
441
|
+
<dt id="event_blur"><code><strong>"blur"</strong> (instance: CodeMirror)</code></dt>
|
|
442
|
+
<dd>Fires whenever the editor is unfocused.</dd>
|
|
443
|
+
|
|
444
|
+
<dt id="event_scroll"><code><strong>"scroll"</strong> (instance: CodeMirror)</code></dt>
|
|
445
|
+
<dd>Fires when the editor is scrolled.</dd>
|
|
446
|
+
|
|
447
|
+
<dt id="event_update"><code><strong>"update"</strong> (instance: CodeMirror)</code></dt>
|
|
448
|
+
<dd>Will be fired whenever CodeMirror updates its DOM display.</dd>
|
|
449
|
+
|
|
450
|
+
<dt id="event_renderLine"><code><strong>"renderLine"</strong> (instance: CodeMirror, line: integer, element: Element)</code></dt>
|
|
451
|
+
<dd>Fired whenever a line is (re-)rendered to the DOM. Fired
|
|
452
|
+
right after the DOM element is built, <em>before</em> it is
|
|
453
|
+
added to the document. The handler may mess with the style of
|
|
454
|
+
the resulting element, or add event handlers, but
|
|
455
|
+
should <em>not</em> try to change the state of the editor.</dd>
|
|
456
|
+
</dl>
|
|
457
|
+
|
|
458
|
+
<p>It is also possible to <a href="#on">register</a> events on
|
|
459
|
+
other objects. Use <code>CodeMirror.on(handle, "eventName",
|
|
460
|
+
func)</code> to register handlers on objects that don't have their
|
|
461
|
+
own <code>on</code> method. Document objects (instances
|
|
462
|
+
of <a href="#Doc"><code>CodeMirror.Doc</code></a>) emit the
|
|
463
|
+
following events:</p>
|
|
464
|
+
|
|
465
|
+
<dl>
|
|
466
|
+
<dt id="event_doc_change"><code><strong>"change"</strong> (doc: CodeMirror.Doc, changeObj: object)</code></dt>
|
|
467
|
+
<dd>Fired whenever a change occurs to the
|
|
468
|
+
document. <code>changeObj</code> has a similar type as the
|
|
469
|
+
object passed to the
|
|
470
|
+
editor's <a href="#event_change"><code>"change"</code></a>
|
|
471
|
+
event, but it never has a <code>next</code> property, because
|
|
472
|
+
document change events are not batched (whereas editor change
|
|
473
|
+
events are).</dd>
|
|
474
|
+
|
|
475
|
+
<dt id="event_doc_beforeChange"><code><strong>"beforeChange"</strong> (doc: CodeMirror.Doc, change: object)</code></dt>
|
|
476
|
+
<dd>See the <a href="#event_beforeChange">description of the
|
|
477
|
+
same event</a> on editor instances.</dd>
|
|
478
|
+
|
|
479
|
+
<dt id="event_doc_cursorActivity"><code><strong>"cursorActivity"</strong> (doc: CodeMirror.Doc)</code></dt>
|
|
480
|
+
<dd>Fired whenever the cursor or selection in this document
|
|
481
|
+
changes.</dd>
|
|
482
|
+
|
|
483
|
+
<dt id="event_doc_beforeSelectionChange"><code><strong>"beforeSelectionChange"</strong> (doc: CodeMirror.Doc, selection: {head, anchor})</code></dt>
|
|
484
|
+
<dd>Equivalent to
|
|
485
|
+
the <a href="#event_beforeSelectionChange">event by the same
|
|
486
|
+
name</a> as fired on editor instances.</dd>
|
|
487
|
+
</dl>
|
|
488
|
+
|
|
489
|
+
<p>Line handles (as returned by, for
|
|
490
|
+
example, <a href="#getLineHandle"><code>getLineHandle</code></a>)
|
|
491
|
+
support these events:</p>
|
|
492
|
+
|
|
493
|
+
<dl>
|
|
494
|
+
<dt id="event_delete"><code><strong>"delete"</strong> ()</code></dt>
|
|
495
|
+
<dd>Will be fired when the line object is deleted. A line object
|
|
496
|
+
is associated with the <em>start</em> of the line. Mostly useful
|
|
497
|
+
when you need to find out when your <a href="#setGutterMarker">gutter
|
|
498
|
+
markers</a> on a given line are removed.</dd>
|
|
499
|
+
<dt id="event_line_change"><code><strong>"change"</strong> (line: LineHandle, changeObj: object)</code></dt>
|
|
500
|
+
<dd>Fires when the line's text content is changed in any way
|
|
501
|
+
(but the line is not deleted outright). The <code>change</code>
|
|
502
|
+
object is similar to the one passed
|
|
503
|
+
to <a href="#event_change">change event</a> on the editor
|
|
504
|
+
object.</dd>
|
|
505
|
+
</dl>
|
|
506
|
+
|
|
507
|
+
<p>Marked range handles (<code>CodeMirror.TextMarker</code>), as returned
|
|
508
|
+
by <a href="#markText"><code>markText</code></a>
|
|
509
|
+
and <a href="#setBookmark"><code>setBookmark</code></a>, emit the
|
|
510
|
+
following events:</p>
|
|
511
|
+
|
|
512
|
+
<dl>
|
|
513
|
+
<dt id="event_beforeCursorEnter"><code><strong>"beforeCursorEnter"</strong> ()</code></dt>
|
|
514
|
+
<dd>Fired when the cursor enters the marked range. From this
|
|
515
|
+
event handler, the editor state may be inspected
|
|
516
|
+
but <em>not</em> modified, with the exception that the range on
|
|
517
|
+
which the event fires may be cleared.</dd>
|
|
518
|
+
<dt id="event_clear"><code><strong>"clear"</strong> ()</code></dt>
|
|
519
|
+
<dd>Fired when the range is cleared, either through cursor
|
|
520
|
+
movement in combination
|
|
521
|
+
with <a href="#mark_clearOnEnter"><code>clearOnEnter</code></a>
|
|
522
|
+
or through a call to its <code>clear()</code> method. Will only
|
|
523
|
+
be fired once per handle. Note that deleting the range through
|
|
524
|
+
text editing does not fire this event, because an undo
|
|
525
|
+
action might bring the range back into existence.</dd>
|
|
526
|
+
<dt id="event_hide"><code><strong>"hide"</strong> ()</code></dt>
|
|
527
|
+
<dd>Fired when the last part of the marker is removed from the
|
|
528
|
+
document by editing operations.</dd>
|
|
529
|
+
<dt id="event_unhide"><code><strong>"unhide"</strong> ()</code></dt>
|
|
530
|
+
<dd>Fired when, after the marker was removed by editing, a undo
|
|
531
|
+
operation brought the marker back.</dd>
|
|
532
|
+
</dl>
|
|
533
|
+
|
|
534
|
+
<p>Line widgets (<code>CodeMirror.LineWidget</code>), returned
|
|
535
|
+
by <a href="#addLineWidget"><code>addLineWidget</code></a>, fire
|
|
536
|
+
these events:</p>
|
|
537
|
+
|
|
538
|
+
<dl>
|
|
539
|
+
<dt id="event_redraw"><code><strong>"redraw"</strong> ()</code></dt>
|
|
540
|
+
<dd>Fired whenever the editor re-adds the widget to the DOM.
|
|
541
|
+
This will happen once right after the widget is added (if it is
|
|
542
|
+
scrolled into view), and then again whenever it is scrolled out
|
|
543
|
+
of view and back in again, or when changes to the editor options
|
|
544
|
+
or the line the widget is on require the widget to be
|
|
545
|
+
redrawn.</dd>
|
|
546
|
+
</dl>
|
|
547
|
+
|
|
548
|
+
<h2 id="keymaps">Keymaps</h2>
|
|
549
|
+
|
|
550
|
+
<p>Keymaps are ways to associate keys with functionality. A keymap
|
|
551
|
+
is an object mapping strings that identify the keys to functions
|
|
552
|
+
that implement their functionality.</p>
|
|
553
|
+
|
|
554
|
+
<p>Keys are identified either by name or by character.
|
|
555
|
+
The <code>CodeMirror.keyNames</code> object defines names for
|
|
556
|
+
common keys and associates them with their key codes. Examples of
|
|
557
|
+
names defined here are <code>Enter</code>, <code>F5</code>,
|
|
558
|
+
and <code>Q</code>. These can be prefixed
|
|
559
|
+
with <code>Shift-</code>, <code>Cmd-</code>, <code>Ctrl-</code>,
|
|
560
|
+
and <code>Alt-</code> (in that order!) to specify a modifier. So
|
|
561
|
+
for example, <code>Shift-Ctrl-Space</code> would be a valid key
|
|
562
|
+
identifier.</p>
|
|
563
|
+
|
|
564
|
+
<p>Common example: map the Tab key to insert spaces instead of a tab
|
|
565
|
+
character.</p>
|
|
566
|
+
|
|
567
|
+
<pre data-lang="javascript">
|
|
568
|
+
{
|
|
569
|
+
Tab: function(cm) {
|
|
570
|
+
var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
|
|
571
|
+
cm.replaceSelection(spaces, "end", "+input");
|
|
572
|
+
}
|
|
573
|
+
}</pre>
|
|
574
|
+
|
|
575
|
+
<p>Alternatively, a character can be specified directly by
|
|
576
|
+
surrounding it in single quotes, for example <code>'$'</code>
|
|
577
|
+
or <code>'q'</code>. Due to limitations in the way browsers fire
|
|
578
|
+
key events, these may not be prefixed with modifiers.</p>
|
|
579
|
+
|
|
580
|
+
<p>The <code>CodeMirror.keyMap</code> object associates keymaps
|
|
581
|
+
with names. User code and keymap definitions can assign extra
|
|
582
|
+
properties to this object. Anywhere where a keymap is expected, a
|
|
583
|
+
string can be given, which will be looked up in this object. It
|
|
584
|
+
also contains the <code>"default"</code> keymap holding the
|
|
585
|
+
default bindings.</p>
|
|
586
|
+
|
|
587
|
+
<p id="commands">The values of properties in keymaps can be either functions of
|
|
588
|
+
a single argument (the CodeMirror instance), strings, or
|
|
589
|
+
<code>false</code>. Such strings refer to properties of the
|
|
590
|
+
<code>CodeMirror.commands</code> object, which defines a number of
|
|
591
|
+
common commands that are used by the default keybindings, and maps
|
|
592
|
+
them to functions. If the property is set to <code>false</code>,
|
|
593
|
+
CodeMirror leaves handling of the key up to the browser. A key
|
|
594
|
+
handler function may return <code>CodeMirror.Pass</code> to indicate
|
|
595
|
+
that it has decided not to handle the key, and other handlers (or
|
|
596
|
+
the default behavior) should be given a turn.</p>
|
|
597
|
+
|
|
598
|
+
<p>Keys mapped to command names that start with the
|
|
599
|
+
characters <code>"go"</code> (which should be used for
|
|
600
|
+
cursor-movement actions) will be fired even when an
|
|
601
|
+
extra <code>Shift</code> modifier is present (i.e. <code>"Up":
|
|
602
|
+
"goLineUp"</code> matches both up and shift-up). This is used to
|
|
603
|
+
easily implement shift-selection.</p>
|
|
604
|
+
|
|
605
|
+
<p>Keymaps can defer to each other by defining
|
|
606
|
+
a <code>fallthrough</code> property. This indicates that when a
|
|
607
|
+
key is not found in the map itself, one or more other maps should
|
|
608
|
+
be searched. It can hold either a single keymap or an array of
|
|
609
|
+
keymaps.</p>
|
|
610
|
+
|
|
611
|
+
<p>When a keymap contains a <code>nofallthrough</code> property
|
|
612
|
+
set to <code>true</code>, keys matched against that map will be
|
|
613
|
+
ignored if they don't match any of the bindings in the map (no
|
|
614
|
+
further child maps will be tried, and the default effect of
|
|
615
|
+
inserting a character will not occur).</p>
|
|
616
|
+
|
|
617
|
+
<h2 id="styling">Customized Styling</h2>
|
|
618
|
+
|
|
619
|
+
<p>Up to a certain extent, CodeMirror's look can be changed by
|
|
620
|
+
modifying style sheet files. The style sheets supplied by modes
|
|
621
|
+
simply provide the colors for that mode, and can be adapted in a
|
|
622
|
+
very straightforward way. To style the editor itself, it is
|
|
623
|
+
possible to alter or override the styles defined
|
|
624
|
+
in <a href="../lib/codemirror.css"><code>codemirror.css</code></a>.</p>
|
|
625
|
+
|
|
626
|
+
<p>Some care must be taken there, since a lot of the rules in this
|
|
627
|
+
file are necessary to have CodeMirror function properly. Adjusting
|
|
628
|
+
colors should be safe, of course, and with some care a lot of
|
|
629
|
+
other things can be changed as well. The CSS classes defined in
|
|
630
|
+
this file serve the following roles:</p>
|
|
631
|
+
|
|
632
|
+
<dl>
|
|
633
|
+
<dt id="class_CodeMirror"><code><strong>CodeMirror</strong></code></dt>
|
|
634
|
+
<dd>The outer element of the editor. This should be used for the
|
|
635
|
+
editor width, height, borders and positioning. Can also be used
|
|
636
|
+
to set styles that should hold for everything inside the editor
|
|
637
|
+
(such as font and font size), or to set a background.</dd>
|
|
638
|
+
|
|
639
|
+
<dt id="class_CodeMirror_scroll"><code><strong>CodeMirror-scroll</strong></code></dt>
|
|
640
|
+
<dd>Whether the editor scrolls (<code>overflow: auto</code> +
|
|
641
|
+
fixed height). By default, it does. Setting
|
|
642
|
+
the <code>CodeMirror</code> class to have <code>height:
|
|
643
|
+
auto</code> and giving this class <code>overflow-x: auto;
|
|
644
|
+
overflow-y: hidden;</code> will cause the editor
|
|
645
|
+
to <a href="../demo/resize.html">resize to fit its
|
|
646
|
+
content</a>.</dd>
|
|
647
|
+
|
|
648
|
+
<dt id="class_CodeMirror_focused"><code><strong>CodeMirror-focused</strong></code></dt>
|
|
649
|
+
<dd>Whenever the editor is focused, the top element gets this
|
|
650
|
+
class. This is used to hide the cursor and give the selection a
|
|
651
|
+
different color when the editor is not focused.</dd>
|
|
652
|
+
|
|
653
|
+
<dt id="class_CodeMirror_gutters"><code><strong>CodeMirror-gutters</strong></code></dt>
|
|
654
|
+
<dd>This is the backdrop for all gutters. Use it to set the
|
|
655
|
+
default gutter background color, and optionally add a border on
|
|
656
|
+
the right of the gutters.</dd>
|
|
657
|
+
|
|
658
|
+
<dt id="class_CodeMirror_linenumbers"><code><strong>CodeMirror-linenumbers</strong></code></dt>
|
|
659
|
+
<dd>Use this for giving a background or width to the line number
|
|
660
|
+
gutter.</dd>
|
|
661
|
+
|
|
662
|
+
<dt id="class_CodeMirror_linenumber"><code><strong>CodeMirror-linenumber</strong></code></dt>
|
|
663
|
+
<dd>Used to style the actual individual line numbers. These
|
|
664
|
+
won't be children of the <code>CodeMirror-linenumbers</code>
|
|
665
|
+
(plural) element, but rather will be absolutely positioned to
|
|
666
|
+
overlay it. Use this to set alignment and text properties for
|
|
667
|
+
the line numbers.</dd>
|
|
668
|
+
|
|
669
|
+
<dt id="class_CodeMirror_lines"><code><strong>CodeMirror-lines</strong></code></dt>
|
|
670
|
+
<dd>The visible lines. This is where you specify vertical
|
|
671
|
+
padding for the editor content.</dd>
|
|
672
|
+
|
|
673
|
+
<dt id="class_CodeMirror_cursor"><code><strong>CodeMirror-cursor</strong></code></dt>
|
|
674
|
+
<dd>The cursor is a block element that is absolutely positioned.
|
|
675
|
+
You can make it look whichever way you want.</dd>
|
|
676
|
+
|
|
677
|
+
<dt id="class_CodeMirror_selected"><code><strong>CodeMirror-selected</strong></code></dt>
|
|
678
|
+
<dd>The selection is represented by <code>span</code> elements
|
|
679
|
+
with this class.</dd>
|
|
680
|
+
|
|
681
|
+
<dt id="class_CodeMirror_matchingbracket"><code><strong>CodeMirror-matchingbracket</strong></code>,
|
|
682
|
+
<code>CodeMirror-nonmatchingbracket</code></dt>
|
|
683
|
+
<dd>These are used to style matched (or unmatched) brackets.</dd>
|
|
684
|
+
</dl>
|
|
685
|
+
|
|
686
|
+
<p>If your page's style sheets do funky things to
|
|
687
|
+
all <code>div</code> or <code>pre</code> elements (you probably
|
|
688
|
+
shouldn't do that), you'll have to define rules to cancel these
|
|
689
|
+
effects out again for elements under the <code>CodeMirror</code>
|
|
690
|
+
class.</p>
|
|
691
|
+
|
|
692
|
+
<p>Themes are also simply CSS files, which define colors for
|
|
693
|
+
various syntactic elements. See the files in
|
|
694
|
+
the <a href="../theme/"><code>theme</code></a> directory.</p>
|
|
695
|
+
|
|
696
|
+
<h2 id="api">Programming API</h2>
|
|
697
|
+
|
|
698
|
+
<p>A lot of CodeMirror features are only available through its
|
|
699
|
+
API. Thus, you need to write code (or
|
|
700
|
+
use <a href="#addons">add-ons</a>) if you want to expose them to
|
|
701
|
+
your users.</p>
|
|
702
|
+
|
|
703
|
+
<p>Whenever points in the document are represented, the API uses
|
|
704
|
+
objects with <code>line</code> and <code>ch</code> properties.
|
|
705
|
+
Both are zero-based. CodeMirror makes sure to 'clip' any positions
|
|
706
|
+
passed by client code so that they fit inside the document, so you
|
|
707
|
+
shouldn't worry too much about sanitizing your coordinates. If you
|
|
708
|
+
give <code>ch</code> a value of <code>null</code>, or don't
|
|
709
|
+
specify it, it will be replaced with the length of the specified
|
|
710
|
+
line.</p>
|
|
711
|
+
|
|
712
|
+
<p>Methods prefixed with <code>doc.</code> can, unless otherwise
|
|
713
|
+
specified, be called both on <code>CodeMirror</code> (editor)
|
|
714
|
+
instances and <code>CodeMirror.Doc</code> instances. Methods
|
|
715
|
+
prefixed with <code>cm.</code> are <em>only</em> available
|
|
716
|
+
on <code>CodeMirror</code> instances.</p>
|
|
717
|
+
|
|
718
|
+
<h3 id="api_content">Content manipulation methods</h3>
|
|
719
|
+
|
|
720
|
+
<dl>
|
|
721
|
+
<dt id="getValue"><code><strong>doc.getValue</strong>(?seperator: string) → string</code></dt>
|
|
722
|
+
<dd>Get the current editor content. You can pass it an optional
|
|
723
|
+
argument to specify the string to be used to separate lines
|
|
724
|
+
(defaults to <code>"\n"</code>).</dd>
|
|
725
|
+
<dt id="setValue"><code><strong>doc.setValue</strong>(content: string)</code></dt>
|
|
726
|
+
<dd>Set the editor content.</dd>
|
|
727
|
+
|
|
728
|
+
<dt id="getRange"><code><strong>doc.getRange</strong>(from: {line, ch}, to: {line, ch}, ?seperator: string) → string</code></dt>
|
|
729
|
+
<dd>Get the text between the given points in the editor, which
|
|
730
|
+
should be <code>{line, ch}</code> objects. An optional third
|
|
731
|
+
argument can be given to indicate the line separator string to
|
|
732
|
+
use (defaults to <code>"\n"</code>).</dd>
|
|
733
|
+
<dt id="replaceRange"><code><strong>doc.replaceRange</strong>(replacement: string, from: {line, ch}, to: {line, ch})</code></dt>
|
|
734
|
+
<dd>Replace the part of the document between <code>from</code>
|
|
735
|
+
and <code>to</code> with the given string. <code>from</code>
|
|
736
|
+
and <code>to</code> must be <code>{line, ch}</code>
|
|
737
|
+
objects. <code>to</code> can be left off to simply insert the
|
|
738
|
+
string at position <code>from</code>.</dd>
|
|
739
|
+
|
|
740
|
+
<dt id="getLine"><code><strong>doc.getLine</strong>(n: integer) → string</code></dt>
|
|
741
|
+
<dd>Get the content of line <code>n</code>.</dd>
|
|
742
|
+
<dt id="setLine"><code><strong>doc.setLine</strong>(n: integer, text: string)</code></dt>
|
|
743
|
+
<dd>Set the content of line <code>n</code>.</dd>
|
|
744
|
+
<dt id="removeLine"><code><strong>doc.removeLine</strong>(n: integer)</code></dt>
|
|
745
|
+
<dd>Remove the given line from the document.</dd>
|
|
746
|
+
|
|
747
|
+
<dt id="lineCount"><code><strong>doc.lineCount</strong>() → integer</code></dt>
|
|
748
|
+
<dd>Get the number of lines in the editor.</dd>
|
|
749
|
+
<dt id="firstLine"><code><strong>doc.firstLine</strong>() → integer</code></dt>
|
|
750
|
+
<dd>Get the first line of the editor. This will
|
|
751
|
+
usually be zero but for <a href="#linkedDoc_from">linked sub-views</a>,
|
|
752
|
+
or <a href="#api_doc">documents</a> instantiated with a non-zero
|
|
753
|
+
first line, it might return other values.</dd>
|
|
754
|
+
<dt id="lastLine"><code><strong>doc.lastLine</strong>() → integer</code></dt>
|
|
755
|
+
<dd>Get the last line of the editor. This will
|
|
756
|
+
usually be <code>doc.lineCount() - 1</code>,
|
|
757
|
+
but for <a href="#linkedDoc_from">linked sub-views</a>,
|
|
758
|
+
it might return other values.</dd>
|
|
759
|
+
|
|
760
|
+
<dt id="getLineHandle"><code><strong>doc.getLineHandle</strong>(num: integer) → LineHandle</code></dt>
|
|
761
|
+
<dd>Fetches the line handle for the given line number.</dd>
|
|
762
|
+
<dt id="getLineNumber"><code><strong>doc.getLineNumber</strong>(handle: LineHandle) → integer</code></dt>
|
|
763
|
+
<dd>Given a line handle, returns the current position of that
|
|
764
|
+
line (or <code>null</code> when it is no longer in the
|
|
765
|
+
document).</dd>
|
|
766
|
+
<dt id="eachLine"><code><strong>doc.eachLine</strong>(f: (line: LineHandle))</code></dt>
|
|
767
|
+
<dt><code><strong>doc.eachLine</strong>(start: integer, end: integer, f: (line: LineHandle))</code></dt>
|
|
768
|
+
<dd>Iterate over the whole document, or if <code>start</code>
|
|
769
|
+
and <code>end</code> line numbers are given, the range
|
|
770
|
+
from <code>start</code> up to (not including) <code>end</code>,
|
|
771
|
+
and call <code>f</code> for each line, passing the line handle.
|
|
772
|
+
This is a faster way to visit a range of line handlers than
|
|
773
|
+
calling <a href="#getLineHandle"><code>getLineHandle</code></a>
|
|
774
|
+
for each of them. Note that line handles have
|
|
775
|
+
a <code>text</code> property containing the line's content (as a
|
|
776
|
+
string).</dd>
|
|
777
|
+
|
|
778
|
+
<dt id="markClean"><code><strong>doc.markClean</strong>()</code></dt>
|
|
779
|
+
<dd>Set the editor content as 'clean', a flag that it will
|
|
780
|
+
retain until it is edited, and which will be set again when such
|
|
781
|
+
an edit is undone again. Useful to track whether the content
|
|
782
|
+
needs to be saved.</dd>
|
|
783
|
+
<dt id="isClean"><code><strong>doc.isClean</strong>() → boolean</code></dt>
|
|
784
|
+
<dd>Returns whether the document is currently clean (not
|
|
785
|
+
modified since initialization or the last call
|
|
786
|
+
to <a href="#markClean"><code>markClean</code></a>).</dd>
|
|
787
|
+
</dl>
|
|
788
|
+
|
|
789
|
+
<h3 id="api_selection">Cursor and selection methods</h3>
|
|
790
|
+
|
|
791
|
+
<dl>
|
|
792
|
+
<dt id="getSelection"><code><strong>doc.getSelection</strong>() → string</code></dt>
|
|
793
|
+
<dd>Get the currently selected code.</dd>
|
|
794
|
+
<dt id="replaceSelection"><code><strong>doc.replaceSelection</strong>(replacement: string, ?collapse: string)</code></dt>
|
|
795
|
+
<dd>Replace the selection with the given string. By default, the
|
|
796
|
+
new selection will span the inserted text. The
|
|
797
|
+
optional <code>collapse</code> argument can be used to change
|
|
798
|
+
this—passing <code>"start"</code> or <code>"end"</code> will
|
|
799
|
+
collapse the selection to the start or end of the inserted
|
|
800
|
+
text.</dd>
|
|
801
|
+
|
|
802
|
+
<dt id="getCursor"><code><strong>doc.getCursor</strong>(?start: string) → {line, ch}</code></dt>
|
|
803
|
+
<dd><code>start</code> is a an optional string indicating which
|
|
804
|
+
end of the selection to return. It may
|
|
805
|
+
be <code>"start"</code>, <code>"end"</code>, <code>"head"</code>
|
|
806
|
+
(the side of the selection that moves when you press
|
|
807
|
+
shift+arrow), or <code>"anchor"</code> (the fixed side of the
|
|
808
|
+
selection). Omitting the argument is the same as
|
|
809
|
+
passing <code>"head"</code>. A <code>{line, ch}</code> object
|
|
810
|
+
will be returned.</dd>
|
|
811
|
+
<dt id="somethingSelected"><code><strong>doc.somethingSelected</strong>() → boolean</code></dt>
|
|
812
|
+
<dd>Return true if any text is selected.</dd>
|
|
813
|
+
<dt id="setCursor"><code><strong>doc.setCursor</strong>(pos: {line, ch})</code></dt>
|
|
814
|
+
<dd>Set the cursor position. You can either pass a
|
|
815
|
+
single <code>{line, ch}</code> object, or the line and the
|
|
816
|
+
character as two separate parameters.</dd>
|
|
817
|
+
<dt id="setSelection"><code><strong>doc.setSelection</strong>(anchor: {line, ch}, head: {line, ch})</code></dt>
|
|
818
|
+
<dd>Set the selection range. <code>anchor</code>
|
|
819
|
+
and <code>head</code> should be <code>{line, ch}</code>
|
|
820
|
+
objects. <code>head</code> defaults to <code>anchor</code> when
|
|
821
|
+
not given.</dd>
|
|
822
|
+
<dt id="extendSelection"><code><strong>doc.extendSelection</strong>(from: {line, ch}, ?to: {line, ch})</code></dt>
|
|
823
|
+
<dd>Similar
|
|
824
|
+
to <a href="#setSelection"><code>setSelection</code></a>, but
|
|
825
|
+
will, if shift is held or
|
|
826
|
+
the <a href="#setExtending">extending</a> flag is set, move the
|
|
827
|
+
head of the selection while leaving the anchor at its current
|
|
828
|
+
place. <code>pos2</code> is optional, and can be passed to
|
|
829
|
+
ensure a region (for example a word or paragraph) will end up
|
|
830
|
+
selected (in addition to whatever lies between that region and
|
|
831
|
+
the current anchor).</dd>
|
|
832
|
+
<dt id="setExtending"><code><strong>doc.setExtending</strong>(value: boolean)</code></dt>
|
|
833
|
+
<dd>Sets or clears the 'extending' flag, which acts similar to
|
|
834
|
+
the shift key, in that it will cause cursor movement and calls
|
|
835
|
+
to <a href="#extendSelection"><code>extendSelection</code></a>
|
|
836
|
+
to leave the selection anchor in place.</dd>
|
|
837
|
+
|
|
838
|
+
<dt id="hasFocus"><code><strong>cm.hasFocus</strong>() → boolean</code></dt>
|
|
839
|
+
<dd>Tells you whether the editor currently has focus.</dd>
|
|
840
|
+
|
|
841
|
+
<dt id="findPosH"><code><strong>cm.findPosH</strong>(start: {line, ch}, amount: integer, unit: string, visually: boolean) → {line, ch, ?hitSide: boolean}</code></dt>
|
|
842
|
+
<dd>Used to find the target position for horizontal cursor
|
|
843
|
+
motion. <code>start</code> is a <code>{line, ch}</code>
|
|
844
|
+
object, <code>amount</code> an integer (may be negative),
|
|
845
|
+
and <code>unit</code> one of the
|
|
846
|
+
string <code>"char"</code>, <code>"column"</code>,
|
|
847
|
+
or <code>"word"</code>. Will return a position that is produced
|
|
848
|
+
by moving <code>amount</code> times the distance specified
|
|
849
|
+
by <code>unit</code>. When <code>visually</code> is true, motion
|
|
850
|
+
in right-to-left text will be visual rather than logical. When
|
|
851
|
+
the motion was clipped by hitting the end or start of the
|
|
852
|
+
document, the returned value will have a <code>hitSide</code>
|
|
853
|
+
property set to true.</dd>
|
|
854
|
+
<dt id="findPosV"><code><strong>cm.findPosV</strong>(start: {line, ch}, amount: integer, unit: string) → {line, ch, ?hitSide: boolean}</code></dt>
|
|
855
|
+
<dd>Similar to <a href="#findPosH"><code>findPosH</code></a>,
|
|
856
|
+
but used for vertical motion. <code>unit</code> may
|
|
857
|
+
be <code>"line"</code> or <code>"page"</code>. The other
|
|
858
|
+
arguments and the returned value have the same interpretation as
|
|
859
|
+
they have in <code>findPosH</code>.</dd>
|
|
860
|
+
</dl>
|
|
861
|
+
|
|
862
|
+
<h3 id="api_configuration">Configuration methods</h3>
|
|
863
|
+
|
|
864
|
+
<dl>
|
|
865
|
+
<dt id="setOption"><code><strong>cm.setOption</strong>(option: string, value: any)</code></dt>
|
|
866
|
+
<dd>Change the configuration of the editor. <code>option</code>
|
|
867
|
+
should the name of an <a href="#config">option</a>,
|
|
868
|
+
and <code>value</code> should be a valid value for that
|
|
869
|
+
option.</dd>
|
|
870
|
+
<dt id="getOption"><code><strong>cm.getOption</strong>(option: string) → any</code></dt>
|
|
871
|
+
<dd>Retrieves the current value of the given option for this
|
|
872
|
+
editor instance.</dd>
|
|
873
|
+
|
|
874
|
+
<dt id="addKeyMap"><code><strong>cm.addKeyMap</strong>(map: object, bottom: boolean)</code></dt>
|
|
875
|
+
<dd>Attach an additional <a href="#keymaps">keymap</a> to the
|
|
876
|
+
editor. This is mostly useful for add-ons that need to register
|
|
877
|
+
some key handlers without trampling on
|
|
878
|
+
the <a href="#option_extraKeys"><code>extraKeys</code></a>
|
|
879
|
+
option. Maps added in this way have a higher precedence than
|
|
880
|
+
the <code>extraKeys</code>
|
|
881
|
+
and <a href="#option_keyMap"><code>keyMap</code></a> options,
|
|
882
|
+
and between them, the maps added earlier have a lower precedence
|
|
883
|
+
than those added later, unless the <code>bottom</code> argument
|
|
884
|
+
was passed, in which case they end up below other keymaps added
|
|
885
|
+
with this method.</dd>
|
|
886
|
+
<dt id="removeKeyMap"><code><strong>cm.removeKeyMap</strong>(map: object)</code></dt>
|
|
887
|
+
<dd>Disable a keymap added
|
|
888
|
+
with <a href="#addKeyMap"><code>addKeyMap</code></a>. Either
|
|
889
|
+
pass in the keymap object itself, or a string, which will be
|
|
890
|
+
compared against the <code>name</code> property of the active
|
|
891
|
+
keymaps.</dd>
|
|
892
|
+
|
|
893
|
+
<dt id="addOverlay"><code><strong>cm.addOverlay</strong>(mode: string|object, ?options: object)</code></dt>
|
|
894
|
+
<dd>Enable a highlighting overlay. This is a stateless mini-mode
|
|
895
|
+
that can be used to add extra highlighting. For example,
|
|
896
|
+
the <a href="../demo/search.html">search add-on</a> uses it to
|
|
897
|
+
highlight the term that's currently being
|
|
898
|
+
searched. <code>mode</code> can be a <a href="#option_mode">mode
|
|
899
|
+
spec</a> or a mode object (an object with
|
|
900
|
+
a <a href="#token"><code>token</code></a> method).
|
|
901
|
+
The <code>options</code> parameter is optional. If given, it
|
|
902
|
+
should be an object. Currently, only the <code>opaque</code>
|
|
903
|
+
option is recognized. This defaults to off, but can be given to
|
|
904
|
+
allow the overlay styling, when not <code>null</code>, to
|
|
905
|
+
override the styling of the base mode entirely, instead of the
|
|
906
|
+
two being applied together.</dd>
|
|
907
|
+
<dt id="removeOverlay"><code><strong>cm.removeOverlay</strong>(mode: string|object)</code></dt>
|
|
908
|
+
<dd>Pass this the exact argument passed for
|
|
909
|
+
the <code>mode</code> parameter
|
|
910
|
+
to <a href="#addOverlay"><code>addOverlay</code></a> to remove
|
|
911
|
+
an overlay again.</dd>
|
|
912
|
+
|
|
913
|
+
<dt id="on"><code><strong>cm.on</strong>(type: string, func: (...args))</code></dt>
|
|
914
|
+
<dd>Register an event handler for the given event type (a
|
|
915
|
+
string) on the editor instance. There is also
|
|
916
|
+
a <code>CodeMirror.on(object, type, func)</code> version
|
|
917
|
+
that allows registering of events on any object.</dd>
|
|
918
|
+
<dt id="off"><code><strong>cm.off</strong>(type: string, func: (...args))</code></dt>
|
|
919
|
+
<dd>Remove an event handler on the editor instance. An
|
|
920
|
+
equivalent <code>CodeMirror.off(object, type,
|
|
921
|
+
func)</code> also exists.</dd>
|
|
922
|
+
</dl>
|
|
923
|
+
|
|
924
|
+
<h3 id="api_doc">Document management methods</h3>
|
|
925
|
+
|
|
926
|
+
<p id="Doc">Each editor is associated with an instance
|
|
927
|
+
of <code>CodeMirror.Doc</code>, its document. A document
|
|
928
|
+
represents the editor content, plus a selection, an undo history,
|
|
929
|
+
and a <a href="#option_mode">mode</a>. A document can only be
|
|
930
|
+
associated with a single editor at a time. You can create new
|
|
931
|
+
documents by calling the <code>CodeMirror.Doc(text, mode,
|
|
932
|
+
firstLineNumber)</code> constructor. The last two arguments are
|
|
933
|
+
optional and can be used to set a mode for the document and make
|
|
934
|
+
it start at a line number other than 0, respectively.</p>
|
|
935
|
+
|
|
936
|
+
<dl>
|
|
937
|
+
<dt id="getDoc"><code><strong>cm.getDoc</strong>() → Doc</code></dt>
|
|
938
|
+
<dd>Retrieve the currently active document from an editor.</dd>
|
|
939
|
+
<dt id="getEditor"><code><strong>doc.getEditor</strong>() → CodeMirror</code></dt>
|
|
940
|
+
<dd>Retrieve the editor associated with a document. May
|
|
941
|
+
return <code>null</code>.</dd>
|
|
942
|
+
|
|
943
|
+
<dt id="swapDoc"><code><strong>cm.swapDoc</strong>(doc: CodeMirror.Doc) → Doc</code></dt>
|
|
944
|
+
<dd>Attach a new document to the editor. Returns the old
|
|
945
|
+
document, which is now no longer associated with an editor.</dd>
|
|
946
|
+
|
|
947
|
+
<dt id="copy"><code><strong>doc.copy</strong>(copyHistory: boolean) → Doc</code></dt>
|
|
948
|
+
<dd>Create an identical copy of the given doc.
|
|
949
|
+
When <code>copyHistory</code> is true, the history will also be
|
|
950
|
+
copied. Can not be called directly on an editor.</dd>
|
|
951
|
+
|
|
952
|
+
<dt id="linkedDoc"><code><strong>doc.linkedDoc</strong>(options: object) → Doc</code></dt>
|
|
953
|
+
<dd>Create a new document that's linked to the target document.
|
|
954
|
+
Linked documents will stay in sync (changes to one are also
|
|
955
|
+
applied to the other) until <a href="#unlinkDoc">unlinked</a>.
|
|
956
|
+
These are the options that are supported:
|
|
957
|
+
<dl>
|
|
958
|
+
<dt id="linkedDoc_sharedHist"><code><strong>sharedHist</strong>: boolean</code></dt>
|
|
959
|
+
<dd>When turned on, the linked copy will share an undo
|
|
960
|
+
history with the original. Thus, something done in one of
|
|
961
|
+
the two can be undone in the other, and vice versa.</dd>
|
|
962
|
+
<dt id="linkedDoc_from"><code><strong>from</strong>: integer</code></dt>
|
|
963
|
+
<dt id="linkedDoc_to"><code><strong>to</strong>: integer</code></dt>
|
|
964
|
+
<dd>Can be given to make the new document a subview of the
|
|
965
|
+
original. Subviews only show a given range of lines. Note
|
|
966
|
+
that line coordinates inside the subview will be consistent
|
|
967
|
+
with those of the parent, so that for example a subview
|
|
968
|
+
starting at line 10 will refer to its first line as line 10,
|
|
969
|
+
not 0.</dd>
|
|
970
|
+
<dt id="linkedDoc_mode"><code><strong>mode</strong>: string|object</code></dt>
|
|
971
|
+
<dd>By default, the new document inherits the mode of the
|
|
972
|
+
parent. This option can be set to
|
|
973
|
+
a <a href="#option_mode">mode spec</a> to give it a
|
|
974
|
+
different mode.</dd>
|
|
975
|
+
</dl></dd>
|
|
976
|
+
<dt id="unlinkDoc"><code><strong>doc.unlinkDoc</strong>(doc: CodeMirror.Doc)</code></dt>
|
|
977
|
+
<dd>Break the link between two documents. After calling this,
|
|
978
|
+
changes will no longer propagate between the documents, and, if
|
|
979
|
+
they had a shared history, the history will become
|
|
980
|
+
separate.</dd>
|
|
981
|
+
<dt id="iterLinkedDocs"><code><strong>doc.iterLinkedDocs</strong>(function: (doc: CodeMirror.Doc, sharedHist: boolean))</code></dt>
|
|
982
|
+
<dd>Will call the given function for all documents linked to the
|
|
983
|
+
target document. It will be passed two arguments, the linked document
|
|
984
|
+
and a boolean indicating whether that document shares history
|
|
985
|
+
with the target.</dd>
|
|
986
|
+
</dl>
|
|
987
|
+
|
|
988
|
+
<h3 id="api_history">History-related methods</h3>
|
|
989
|
+
|
|
990
|
+
<dl>
|
|
991
|
+
<dt id="undo"><code><strong>doc.undo</strong>()</code></dt>
|
|
992
|
+
<dd>Undo one edit (if any undo events are stored).</dd>
|
|
993
|
+
<dt id="redo"><code><strong>doc.redo</strong>()</code></dt>
|
|
994
|
+
<dd>Redo one undone edit.</dd>
|
|
995
|
+
|
|
996
|
+
<dt id="historySize"><code><strong>doc.historySize</strong>() → {undo: integer, redo: integer}</code></dt>
|
|
997
|
+
<dd>Returns an object with <code>{undo, redo}</code> properties,
|
|
998
|
+
both of which hold integers, indicating the amount of stored
|
|
999
|
+
undo and redo operations.</dd>
|
|
1000
|
+
<dt id="clearHistory"><code><strong>doc.clearHistory</strong>()</code></dt>
|
|
1001
|
+
<dd>Clears the editor's undo history.</dd>
|
|
1002
|
+
<dt id="getHistory"><code><strong>doc.getHistory</strong>() → object</code></dt>
|
|
1003
|
+
<dd>Get a (JSON-serializeable) representation of the undo history.</dd>
|
|
1004
|
+
<dt id="setHistory"><code><strong>doc.setHistory</strong>(history: object)</code></dt>
|
|
1005
|
+
<dd>Replace the editor's undo history with the one provided,
|
|
1006
|
+
which must be a value as returned
|
|
1007
|
+
by <a href="#getHistory"><code>getHistory</code></a>. Note that
|
|
1008
|
+
this will have entirely undefined results if the editor content
|
|
1009
|
+
isn't also the same as it was when <code>getHistory</code> was
|
|
1010
|
+
called.</dd>
|
|
1011
|
+
</dl>
|
|
1012
|
+
|
|
1013
|
+
<h3 id="api_marker">Text-marking methods</h3>
|
|
1014
|
+
|
|
1015
|
+
<dl>
|
|
1016
|
+
<dt id="markText"><code><strong>doc.markText</strong>(from: {line, ch}, to: {line, ch}, ?options: object) → TextMarker</code></dt>
|
|
1017
|
+
<dd>Can be used to mark a range of text with a specific CSS
|
|
1018
|
+
class name. <code>from</code> and <code>to</code> should
|
|
1019
|
+
be <code>{line, ch}</code> objects. The <code>options</code>
|
|
1020
|
+
parameter is optional. When given, it should be an object that
|
|
1021
|
+
may contain the following configuration options:
|
|
1022
|
+
<dl>
|
|
1023
|
+
<dt id="mark_className"><code><strong>className</strong>: string</code></dt>
|
|
1024
|
+
<dd>Assigns a CSS class to the marked stretch of text.</dd>
|
|
1025
|
+
<dt id="mark_inclusiveLeft"><code><strong>inclusiveLeft</strong>: boolean</code></dt>
|
|
1026
|
+
<dd>Determines whether
|
|
1027
|
+
text inserted on the left of the marker will end up inside
|
|
1028
|
+
or outside of it.</dd>
|
|
1029
|
+
<dt id="mark_inclusiveRight"><code><strong>inclusiveRight</strong>: boolean</code></dt>
|
|
1030
|
+
<dd>Like <code>inclusiveLeft</code>,
|
|
1031
|
+
but for the right side.</dd>
|
|
1032
|
+
<dt id="mark_atomic"><code><strong>atomic</strong>: boolean</code></dt>
|
|
1033
|
+
<dd>Atomic ranges act as a single unit when cursor movement is
|
|
1034
|
+
concerned—i.e. it is impossible to place the cursor inside of
|
|
1035
|
+
them. In atomic ranges, <code>inclusiveLeft</code>
|
|
1036
|
+
and <code>inclusiveRight</code> have a different meaning—they
|
|
1037
|
+
will prevent the cursor from being placed respectively
|
|
1038
|
+
directly before and directly after the range.</dd>
|
|
1039
|
+
<dt id="mark_collapsed"><code><strong>collapsed</strong>: boolean</code></dt>
|
|
1040
|
+
<dd>Collapsed ranges do not show up in the display. Setting a
|
|
1041
|
+
range to be collapsed will automatically make it atomic.</dd>
|
|
1042
|
+
<dt id="mark_clearOnEnter"><code><strong>clearOnEnter</strong>: boolean</code></dt>
|
|
1043
|
+
<dd>When enabled, will cause the mark to clear itself whenever
|
|
1044
|
+
the cursor enters its range. This is mostly useful for
|
|
1045
|
+
text-replacement widgets that need to 'snap open' when the
|
|
1046
|
+
user tries to edit them. The
|
|
1047
|
+
<a href="#event_clear"><code>"clear"</code></a> event
|
|
1048
|
+
fired on the range handle can be used to be notified when this
|
|
1049
|
+
happens.</dd>
|
|
1050
|
+
<dt id="mark_replacedWith"><code><strong>replacedWith</strong>: Element</code></dt>
|
|
1051
|
+
<dd>Use a given node to display this range. Implies both
|
|
1052
|
+
collapsed and atomic. The given DOM node <em>must</em> be an
|
|
1053
|
+
inline element (as opposed to a block element).</dd>
|
|
1054
|
+
<dt id="mark_readOnly"><code><strong>readOnly</strong>: boolean</code></dt>
|
|
1055
|
+
<dd>A read-only span can, as long as it is not cleared, not be
|
|
1056
|
+
modified except by
|
|
1057
|
+
calling <a href="#setValue"><code>setValue</code></a> to reset
|
|
1058
|
+
the whole document. <em>Note:</em> adding a read-only span
|
|
1059
|
+
currently clears the undo history of the editor, because
|
|
1060
|
+
existing undo events being partially nullified by read-only
|
|
1061
|
+
spans would corrupt the history (in the current
|
|
1062
|
+
implementation).</dd>
|
|
1063
|
+
<dt id="mark_addToHistory"><code><strong>addToHistory</strong>: boolean</code></dt>
|
|
1064
|
+
<dd>When set to true (default is false), adding this marker
|
|
1065
|
+
will create an event in the undo history that can be
|
|
1066
|
+
individually undone (clearing the marker).</dd>
|
|
1067
|
+
<dt id="mark_startStyle"><code><strong>startStyle</strong>: string</code></dt><dd>Can be used to specify
|
|
1068
|
+
an extra CSS class to be applied to the leftmost span that
|
|
1069
|
+
is part of the marker.</dd>
|
|
1070
|
+
<dt id="mark_endStyle"><code><strong>endStyle</strong>: string</code></dt><dd>Equivalent
|
|
1071
|
+
to <code>startStyle</code>, but for the rightmost span.</dd>
|
|
1072
|
+
<dt id="mark_shared"><code><strong>shared</strong>: boolean</code></dt><dd>When the
|
|
1073
|
+
target document is <a href="#linkedDoc">linked</a> to other
|
|
1074
|
+
documents, you can set <code>shared</code> to true to make the
|
|
1075
|
+
marker appear in all documents. By default, a marker appears
|
|
1076
|
+
only in its target document.</dd>
|
|
1077
|
+
</dl>
|
|
1078
|
+
The method will return an object that represents the marker
|
|
1079
|
+
(with constuctor <code>CodeMirror.TextMarker</code>), which
|
|
1080
|
+
exposes three methods:
|
|
1081
|
+
<code>clear()</code>, to remove the mark,
|
|
1082
|
+
<code>find()</code>, which returns a <code>{from, to}</code>
|
|
1083
|
+
object (both holding document positions), indicating the current
|
|
1084
|
+
position of the marked range, or <code>undefined</code> if the
|
|
1085
|
+
marker is no longer in the document, and
|
|
1086
|
+
finally <code>getOptions(copyWidget)</code>, which returns an
|
|
1087
|
+
object representing the options for the marker.
|
|
1088
|
+
If <code>copyWidget</code> is given true, it will clone the
|
|
1089
|
+
value of
|
|
1090
|
+
the <a href="#mark_replacedWith"><code>replacedWith</code></a>
|
|
1091
|
+
option, if any.</dd>
|
|
1092
|
+
|
|
1093
|
+
<dt id="setBookmark"><code><strong>doc.setBookmark</strong>(pos: {line, ch}, ?options: object) → TextMarker</code></dt>
|
|
1094
|
+
<dd>Inserts a bookmark, a handle that follows the text around it
|
|
1095
|
+
as it is being edited, at the given position. A bookmark has two
|
|
1096
|
+
methods <code>find()</code> and <code>clear()</code>. The first
|
|
1097
|
+
returns the current position of the bookmark, if it is still in
|
|
1098
|
+
the document, and the second explicitly removes the bookmark.
|
|
1099
|
+
The options argument is optional. If given, the following
|
|
1100
|
+
properties are recognized:
|
|
1101
|
+
<dl>
|
|
1102
|
+
<dt><code><strong>widget</strong>: Element</code></dt><dd>Can be used to display a DOM
|
|
1103
|
+
node at the current location of the bookmark (analogous to
|
|
1104
|
+
the <a href="#mark_replacedWith"><code>replacedWith</code></a>
|
|
1105
|
+
option to <code>markText</code>).</dd>
|
|
1106
|
+
<dt><code><strong>insertLeft</strong>: boolean</code></dt><dd>By default, text typed
|
|
1107
|
+
when the cursor is on top of the bookmark will end up to the
|
|
1108
|
+
right of the bookmark. Set this option to true to make it go
|
|
1109
|
+
to the left instead.</dd>
|
|
1110
|
+
</dl></dd>
|
|
1111
|
+
|
|
1112
|
+
<dt id="findMarksAt"><code><strong>doc.findMarksAt</strong>(pos: {line, ch}) → array<TextMarker></code></dt>
|
|
1113
|
+
<dd>Returns an array of all the bookmarks and marked ranges
|
|
1114
|
+
present at the given position.</dd>
|
|
1115
|
+
<dt id="getAllMarks"><code><strong>doc.getAllMarks</strong>() → array<TextMarker></code></dt>
|
|
1116
|
+
<dd>Returns an array containing all marked ranges in the document.</dd>
|
|
1117
|
+
</dl>
|
|
1118
|
+
|
|
1119
|
+
<h3 id="api_decoration">Widget, gutter, and decoration methods</h3>
|
|
1120
|
+
|
|
1121
|
+
<dl>
|
|
1122
|
+
<dt id="setGutterMarker"><code><strong>cm.setGutterMarker</strong>(line: integer|LineHandle, gutterID: string, value: Element) → LineHandle</code></dt>
|
|
1123
|
+
<dd>Sets the gutter marker for the given gutter (identified by
|
|
1124
|
+
its CSS class, see
|
|
1125
|
+
the <a href="#option_gutters"><code>gutters</code></a> option)
|
|
1126
|
+
to the given value. Value can be either <code>null</code>, to
|
|
1127
|
+
clear the marker, or a DOM element, to set it. The DOM element
|
|
1128
|
+
will be shown in the specified gutter next to the specified
|
|
1129
|
+
line.</dd>
|
|
1130
|
+
|
|
1131
|
+
<dt id="clearGutter"><code><strong>cm.clearGutter</strong>(gutterID: string)</code></dt>
|
|
1132
|
+
<dd>Remove all gutter markers in
|
|
1133
|
+
the <a href="#option_gutters">gutter</a> with the given ID.</dd>
|
|
1134
|
+
|
|
1135
|
+
<dt id="addLineClass"><code><strong>cm.addLineClass</strong>(line: integer|LineHandle, where: string, class: string) → LineHandle</code></dt>
|
|
1136
|
+
<dd>Set a CSS class name for the given line. <code>line</code>
|
|
1137
|
+
can be a number or a line handle. <code>where</code> determines
|
|
1138
|
+
to which element this class should be applied, can can be one
|
|
1139
|
+
of <code>"text"</code> (the text element, which lies in front of
|
|
1140
|
+
the selection), <code>"background"</code> (a background element
|
|
1141
|
+
that will be behind the selection), or <code>"wrap"</code> (the
|
|
1142
|
+
wrapper node that wraps all of the line's elements, including
|
|
1143
|
+
gutter elements). <code>class</code> should be the name of the
|
|
1144
|
+
class to apply.</dd>
|
|
1145
|
+
|
|
1146
|
+
<dt id="removeLineClass"><code><strong>cm.removeLineClass</strong>(line: integer|LineHandle, where: string, class: string) → LineHandle</code></dt>
|
|
1147
|
+
<dd>Remove a CSS class from a line. <code>line</code> can be a
|
|
1148
|
+
line handle or number. <code>where</code> should be one
|
|
1149
|
+
of <code>"text"</code>, <code>"background"</code>,
|
|
1150
|
+
or <code>"wrap"</code>
|
|
1151
|
+
(see <a href="#addLineClass"><code>addLineClass</code></a>). <code>class</code>
|
|
1152
|
+
can be left off to remove all classes for the specified node, or
|
|
1153
|
+
be a string to remove only a specific class.</dd>
|
|
1154
|
+
|
|
1155
|
+
<dt id="lineInfo"><code><strong>cm.lineInfo</strong>(line: integer|LineHandle) → object</code></dt>
|
|
1156
|
+
<dd>Returns the line number, text content, and marker status of
|
|
1157
|
+
the given line, which can be either a number or a line handle.
|
|
1158
|
+
The returned object has the structure <code>{line, handle, text,
|
|
1159
|
+
gutterMarkers, textClass, bgClass, wrapClass, widgets}</code>,
|
|
1160
|
+
where <code>gutterMarkers</code> is an object mapping gutter IDs
|
|
1161
|
+
to marker elements, and <code>widgets</code> is an array
|
|
1162
|
+
of <a href="#addLineWidget">line widgets</a> attached to this
|
|
1163
|
+
line, and the various class properties refer to classes added
|
|
1164
|
+
with <a href="#addLineClass"><code>addLineClass</code></a>.</dd>
|
|
1165
|
+
|
|
1166
|
+
<dt id="addWidget"><code><strong>cm.addWidget</strong>(pos: {line, ch}, node: Element, scrollIntoView: boolean)</code></dt>
|
|
1167
|
+
<dd>Puts <code>node</code>, which should be an absolutely
|
|
1168
|
+
positioned DOM node, into the editor, positioned right below the
|
|
1169
|
+
given <code>{line, ch}</code> position.
|
|
1170
|
+
When <code>scrollIntoView</code> is true, the editor will ensure
|
|
1171
|
+
that the entire node is visible (if possible). To remove the
|
|
1172
|
+
widget again, simply use DOM methods (move it somewhere else, or
|
|
1173
|
+
call <code>removeChild</code> on its parent).</dd>
|
|
1174
|
+
|
|
1175
|
+
<dt id="addLineWidget"><code><strong>cm.addLineWidget</strong>(line: integer|LineHandle, node: Element, ?options: object) → LineWidget</code></dt>
|
|
1176
|
+
<dd>Adds a line widget, an element shown below a line, spanning
|
|
1177
|
+
the whole of the editor's width, and moving the lines below it
|
|
1178
|
+
downwards. <code>line</code> should be either an integer or a
|
|
1179
|
+
line handle, and <code>node</code> should be a DOM node, which
|
|
1180
|
+
will be displayed below the given line. <code>options</code>,
|
|
1181
|
+
when given, should be an object that configures the behavior of
|
|
1182
|
+
the widget. The following options are supported (all default to
|
|
1183
|
+
false) →
|
|
1184
|
+
<dl>
|
|
1185
|
+
<dt><code><strong>coverGutter</strong>: boolean</code></dt>
|
|
1186
|
+
<dd>Whether the widget should cover the gutter.</dd>
|
|
1187
|
+
<dt><code><strong>noHScroll</strong>: boolean</code></dt>
|
|
1188
|
+
<dd>Whether the widget should stay fixed in the face of
|
|
1189
|
+
horizontal scrolling.</dd>
|
|
1190
|
+
<dt><code><strong>above</strong>: boolean</code></dt>
|
|
1191
|
+
<dd>Causes the widget to be placed above instead of below
|
|
1192
|
+
the text of the line.</dd>
|
|
1193
|
+
<dt><code><strong>showIfHidden</strong>: boolean</code></dt>
|
|
1194
|
+
<dd>When true, will cause the widget to be rendered even if
|
|
1195
|
+
the line it is associated with is hidden.</dd>
|
|
1196
|
+
</dl>
|
|
1197
|
+
Note that the widget node will become a descendant of nodes with
|
|
1198
|
+
CodeMirror-specific CSS classes, and those classes might in some
|
|
1199
|
+
cases affect it. This method returns an object that represents
|
|
1200
|
+
the widget placement. It'll have a <code>line</code> property
|
|
1201
|
+
pointing at the line handle that it is associated with, and the following methods:
|
|
1202
|
+
<dl>
|
|
1203
|
+
<dt id="widget_clear"><code><strong>clear</strong>()</code></dt><dd>Removes the widget.</dd>
|
|
1204
|
+
<dt id="widget_changed"><code><strong>changed</strong>()</code></dt><dd>Call
|
|
1205
|
+
this if you made some change to the widget's DOM node that
|
|
1206
|
+
might affect its height. It'll force CodeMirror to update
|
|
1207
|
+
the height of the line that contains the widget.</dd>
|
|
1208
|
+
</dl>
|
|
1209
|
+
</dd>
|
|
1210
|
+
</dl>
|
|
1211
|
+
|
|
1212
|
+
<h3 id="api_sizing">Sizing, scrolling and positioning methods</h3>
|
|
1213
|
+
|
|
1214
|
+
<dl>
|
|
1215
|
+
<dt id="setSize"><code><strong>cm.setSize</strong>(width: number|string, height: number|string)</code></dt>
|
|
1216
|
+
<dd>Programatically set the size of the editor (overriding the
|
|
1217
|
+
applicable <a href="#css-resize">CSS
|
|
1218
|
+
rules</a>). <code>width</code> and <code>height</code> height
|
|
1219
|
+
can be either numbers (interpreted as pixels) or CSS units
|
|
1220
|
+
(<code>"100%"</code>, for example). You can
|
|
1221
|
+
pass <code>null</code> for either of them to indicate that that
|
|
1222
|
+
dimension should not be changed.</dd>
|
|
1223
|
+
|
|
1224
|
+
<dt id="scrollTo"><code><strong>cm.scrollTo</strong>(x: number, y: number)</code></dt>
|
|
1225
|
+
<dd>Scroll the editor to a given (pixel) position. Both
|
|
1226
|
+
arguments may be left as <code>null</code>
|
|
1227
|
+
or <code>undefined</code> to have no effect.</dd>
|
|
1228
|
+
<dt id="getScrollInfo"><code><strong>cm.getScrollInfo</strong>() → {left, top, width, height, clientWidth, clientHeight}</code></dt>
|
|
1229
|
+
<dd>Get an <code>{left, top, width, height, clientWidth,
|
|
1230
|
+
clientHeight}</code> object that represents the current scroll
|
|
1231
|
+
position, the size of the scrollable area, and the size of the
|
|
1232
|
+
visible area (minus scrollbars).</dd>
|
|
1233
|
+
<dt id="scrollIntoView"><code><strong>cm.scrollIntoView</strong>(pos: {line, ch}|{left, top, right, bottom}, ?margin: number)</code></dt>
|
|
1234
|
+
<dd>Scrolls the given element into view. <code>pos</code> may be
|
|
1235
|
+
either a <code>{line, ch}</code> position, referring to a given
|
|
1236
|
+
character, <code>null</code>, to refer to the cursor, or
|
|
1237
|
+
a <code>{left, top, right, bottom}</code> object, in
|
|
1238
|
+
editor-local coordinates. The <code>margin</code> parameter is
|
|
1239
|
+
optional. When given, it indicates the amount of pixels around
|
|
1240
|
+
the given area that should be made visible as well.</dd>
|
|
1241
|
+
|
|
1242
|
+
<dt id="cursorCoords"><code><strong>cm.cursorCoords</strong>(where: boolean|{line, ch}, mode: string) → {left, top, bottom}</code></dt>
|
|
1243
|
+
<dd>Returns an <code>{left, top, bottom}</code> object
|
|
1244
|
+
containing the coordinates of the cursor position.
|
|
1245
|
+
If <code>mode</code> is <code>"local"</code>, they will be
|
|
1246
|
+
relative to the top-left corner of the editable document. If it
|
|
1247
|
+
is <code>"page"</code> or not given, they are relative to the
|
|
1248
|
+
top-left corner of the page. <code>where</code> can be a boolean
|
|
1249
|
+
indicating whether you want the start (<code>true</code>) or the
|
|
1250
|
+
end (<code>false</code>) of the selection, or, if a <code>{line,
|
|
1251
|
+
ch}</code> object is given, it specifies the precise position at
|
|
1252
|
+
which you want to measure.</dd>
|
|
1253
|
+
<dt id="charCoords"><code><strong>cm.charCoords</strong>(pos: {line, ch}, mode: string) → {left, right, top, bottom}</code></dt>
|
|
1254
|
+
<dd>Returns the position and dimensions of an arbitrary
|
|
1255
|
+
character. <code>pos</code> should be a <code>{line, ch}</code>
|
|
1256
|
+
object. This differs from <code>cursorCoords</code> in that
|
|
1257
|
+
it'll give the size of the whole character, rather than just the
|
|
1258
|
+
position that the cursor would have when it would sit at that
|
|
1259
|
+
position.</dd>
|
|
1260
|
+
<dt id="coordsChar"><code><strong>cm.coordsChar</strong>(object: {left, top}, ?mode: string) → {line, ch}</code></dt>
|
|
1261
|
+
<dd>Given an <code>{left, top}</code> object, returns
|
|
1262
|
+
the <code>{line, ch}</code> position that corresponds to it. The
|
|
1263
|
+
optional <code>mode</code> parameter determines relative to what
|
|
1264
|
+
the coordinates are interpreted. It may
|
|
1265
|
+
be <code>"window"</code>, <code>"page"</code> (the default),
|
|
1266
|
+
or <code>"local"</code>.</dd>
|
|
1267
|
+
<dt id="defaultTextHeight"><code><strong>cm.defaultTextHeight</strong>() → number</code></dt>
|
|
1268
|
+
<dd>Returns the line height of the default font for the editor.</dd>
|
|
1269
|
+
<dt id="defaultCharWidth"><code><strong>cm.defaultCharWidth</strong>() → number</code></dt>
|
|
1270
|
+
<dd>Returns the pixel width of an 'x' in the default font for
|
|
1271
|
+
the editor. (Note that for non-monospace fonts, this is mostly
|
|
1272
|
+
useless, and even for monospace fonts, non-ascii characters
|
|
1273
|
+
might have a different width).</dd>
|
|
1274
|
+
|
|
1275
|
+
<dt id="getViewport"><code><strong>cm.getViewport</strong>() → {from: number, to: number}</code></dt>
|
|
1276
|
+
<dd>Returns a <code>{from, to}</code> object indicating the
|
|
1277
|
+
start (inclusive) and end (exclusive) of the currently rendered
|
|
1278
|
+
part of the document. In big documents, when most content is
|
|
1279
|
+
scrolled out of view, CodeMirror will only render the visible
|
|
1280
|
+
part, and a margin around it. See also
|
|
1281
|
+
the <a href="#event_viewportChange"><code>viewportChange</code></a>
|
|
1282
|
+
event.</dd>
|
|
1283
|
+
|
|
1284
|
+
<dt id="refresh"><code><strong>cm.refresh</strong>()</code></dt>
|
|
1285
|
+
<dd>If your code does something to change the size of the editor
|
|
1286
|
+
element (window resizes are already listened for), or unhides
|
|
1287
|
+
it, you should probably follow up by calling this method to
|
|
1288
|
+
ensure CodeMirror is still looking as intended.</dd>
|
|
1289
|
+
</dl>
|
|
1290
|
+
|
|
1291
|
+
<h3 id="api_mode">Mode, state, and token-related methods</h3>
|
|
1292
|
+
|
|
1293
|
+
<p>When writing language-aware functionality, it can often be
|
|
1294
|
+
useful to hook into the knowledge that the CodeMirror language
|
|
1295
|
+
mode has. See <a href="#modeapi">the section on modes</a> for a
|
|
1296
|
+
more detailed description of how these work.</p>
|
|
1297
|
+
|
|
1298
|
+
<dl>
|
|
1299
|
+
<dt id="getMode"><code><strong>doc.getMode</strong>() → object</code></dt>
|
|
1300
|
+
<dd>Gets the mode object for the editor. Note that this is
|
|
1301
|
+
distinct from <code>getOption("mode")</code>, which gives you
|
|
1302
|
+
the mode specification, rather than the resolved, instantiated
|
|
1303
|
+
<a href="#defineMode">mode object</a>.</dd>
|
|
1304
|
+
|
|
1305
|
+
<dt id="getTokenAt"><code><strong>cm.getTokenAt</strong>(pos: {line, ch}) → object</code></dt>
|
|
1306
|
+
<dd>Retrieves information about the token the current mode found
|
|
1307
|
+
before the given position (a <code>{line, ch}</code> object). The
|
|
1308
|
+
returned object has the following properties:
|
|
1309
|
+
<dl>
|
|
1310
|
+
<dt><code><strong>start</strong></code></dt><dd>The character (on the given line) at which the token starts.</dd>
|
|
1311
|
+
<dt><code><strong>end</strong></code></dt><dd>The character at which the token ends.</dd>
|
|
1312
|
+
<dt><code><strong>string</strong></code></dt><dd>The token's string.</dd>
|
|
1313
|
+
<dt><code><strong>type</strong></code></dt><dd>The token type the mode assigned
|
|
1314
|
+
to the token, such as <code>"keyword"</code>
|
|
1315
|
+
or <code>"comment"</code> (may also be null).</dd>
|
|
1316
|
+
<dt><code><strong>state</strong></code></dt><dd>The mode's state at the end of this token.</dd>
|
|
1317
|
+
</dl></dd>
|
|
1318
|
+
|
|
1319
|
+
<dt id="getStateAfter"><code><strong>cm.getStateAfter</strong>(?line: integer) → object</code></dt>
|
|
1320
|
+
<dd>Returns the mode's parser state, if any, at the end of the
|
|
1321
|
+
given line number. If no line number is given, the state at the
|
|
1322
|
+
end of the document is returned. This can be useful for storing
|
|
1323
|
+
parsing errors in the state, or getting other kinds of
|
|
1324
|
+
contextual information for a line.</dd>
|
|
1325
|
+
</dl>
|
|
1326
|
+
|
|
1327
|
+
<h3 id="api_misc">Miscellaneous methods</h3>
|
|
1328
|
+
|
|
1329
|
+
<dl>
|
|
1330
|
+
<dt id="constructor"><code><strong>CodeMirror</strong>(elt: Element|function(elt: Element), ?config: object)</code></dt>
|
|
1331
|
+
<dd>The constructor. See <a href="#usage">Basic Usage</a>.</dd>
|
|
1332
|
+
|
|
1333
|
+
<dt id="operation"><code><strong>cm.operation</strong>(func: () → any) → any</code></dt>
|
|
1334
|
+
<dd>CodeMirror internally buffers changes and only updates its
|
|
1335
|
+
DOM structure after it has finished performing some operation.
|
|
1336
|
+
If you need to perform a lot of operations on a CodeMirror
|
|
1337
|
+
instance, you can call this method with a function argument. It
|
|
1338
|
+
will call the function, buffering up all changes, and only doing
|
|
1339
|
+
the expensive update after the function returns. This can be a
|
|
1340
|
+
lot faster. The return value from this method will be the return
|
|
1341
|
+
value of your function.</dd>
|
|
1342
|
+
|
|
1343
|
+
<dt id="indentLine"><code><strong>cm.indentLine</strong>(line: integer, ?dir: string)</code></dt>
|
|
1344
|
+
<dd>Adjust the indentation of the given line. The second
|
|
1345
|
+
argument (which defaults to <code>"smart"</code>) may be one of:
|
|
1346
|
+
<dl>
|
|
1347
|
+
<dt><code><strong>"prev"</strong></code></dt>
|
|
1348
|
+
<dd>Base indentation on the indentation of the previous line.</dd>
|
|
1349
|
+
<dt><code><strong>"smart"</strong></code></dt>
|
|
1350
|
+
<dd>Use the mode's smart indentation if available, behave
|
|
1351
|
+
like <code>"prev"</code> otherwise.</dd>
|
|
1352
|
+
<dt><code><strong>"add"</strong></code></dt>
|
|
1353
|
+
<dd>Increase the indentation of the line by
|
|
1354
|
+
one <a href="#option_indentUnit">indent unit</a>.</dd>
|
|
1355
|
+
<dt><code><strong>"subtract"</strong></code></dt>
|
|
1356
|
+
<dd>Reduce the indentation of the line.</dd>
|
|
1357
|
+
</dl></dd>
|
|
1358
|
+
|
|
1359
|
+
<dt id="posFromIndex"><code><strong>doc.posFromIndex</strong>(index: integer) → {line, ch}</code></dt>
|
|
1360
|
+
<dd>Calculates and returns a <code>{line, ch}</code> object for a
|
|
1361
|
+
zero-based <code>index</code> who's value is relative to the start of the
|
|
1362
|
+
editor's text. If the <code>index</code> is out of range of the text then
|
|
1363
|
+
the returned object is clipped to start or end of the text
|
|
1364
|
+
respectively.</dd>
|
|
1365
|
+
<dt id="indexFromPos"><code><strong>doc.indexFromPos</strong>(object: {line, ch}) → integer</code></dt>
|
|
1366
|
+
<dd>The reverse of <a href="#posFromIndex"><code>posFromIndex</code></a>.</dd>
|
|
1367
|
+
|
|
1368
|
+
<dt id="focus"><code><strong>cm.focus</strong>()</code></dt>
|
|
1369
|
+
<dd>Give the editor focus.</dd>
|
|
1370
|
+
|
|
1371
|
+
<dt id="getInputField"><code><strong>cm.getInputField</strong>() → TextAreaElement</code></dt>
|
|
1372
|
+
<dd>Returns the hidden textarea used to read input.</dd>
|
|
1373
|
+
<dt id="getWrapperElement"><code><strong>cm.getWrapperElement</strong>() → Element</code></dt>
|
|
1374
|
+
<dd>Returns the DOM node that represents the editor, and
|
|
1375
|
+
controls its size. Remove this from your tree to delete an
|
|
1376
|
+
editor instance.</dd>
|
|
1377
|
+
<dt id="getScrollerElement"><code><strong>cm.getScrollerElement</strong>() → Element</code></dt>
|
|
1378
|
+
<dd>Returns the DOM node that is responsible for the scrolling
|
|
1379
|
+
of the editor.</dd>
|
|
1380
|
+
<dt id="getGutterElement"><code><strong>cm.getGutterElement</strong>() → Element</code></dt>
|
|
1381
|
+
<dd>Fetches the DOM node that contains the editor gutters.</dd>
|
|
1382
|
+
</dl>
|
|
1383
|
+
|
|
1384
|
+
<h3 id="api_static">Static properties</h3>
|
|
1385
|
+
<p>The <code>CodeMirror</code> object itself provides
|
|
1386
|
+
several useful properties.</p>
|
|
1387
|
+
|
|
1388
|
+
<dl>
|
|
1389
|
+
<dt id="version"><code><strong>CodeMirror.version</strong>: string</code></dt>
|
|
1390
|
+
<dd>It contains a string that indicates the version of the
|
|
1391
|
+
library. For releases, this simply
|
|
1392
|
+
contains <code>"major.minor"</code> (for
|
|
1393
|
+
example <code>"2.33"</code>. For beta versions, <code>" B"</code>
|
|
1394
|
+
(space, capital B) is added at the end of the string, for
|
|
1395
|
+
development snapshots, <code>" +"</code> (space, plus) is
|
|
1396
|
+
added.</dd>
|
|
1397
|
+
|
|
1398
|
+
<dt id="fromTextArea"><code><strong>CodeMirror.fromTextArea</strong>(textArea: TextAreaElement, ?config: object)</code></dt>
|
|
1399
|
+
<dd>
|
|
1400
|
+
The method provides another way to initialize an editor. It takes a
|
|
1401
|
+
textarea DOM node as first argument and an optional configuration
|
|
1402
|
+
object as second. It will replace the textarea with a CodeMirror
|
|
1403
|
+
instance, and wire up the form of that textarea (if any) to make
|
|
1404
|
+
sure the editor contents are put into the textarea when the form
|
|
1405
|
+
is submitted. A CodeMirror instance created this way has three
|
|
1406
|
+
additional methods:
|
|
1407
|
+
<dl>
|
|
1408
|
+
<dt id="save"><code><strong>cm.save</strong>()</code></dt>
|
|
1409
|
+
<dd>Copy the content of the editor into the textarea.</dd>
|
|
1410
|
+
|
|
1411
|
+
<dt id="toTextArea"><code><strong>cm.toTextArea</strong>()</code></dt>
|
|
1412
|
+
<dd>Remove the editor, and restore the original textarea (with
|
|
1413
|
+
the editor's current content).</dd>
|
|
1414
|
+
|
|
1415
|
+
<dt id="getTextArea"><code><strong>cm.getTextArea</strong>() → TextAreaElement</code></dt>
|
|
1416
|
+
<dd>Returns the textarea that the instance was based on.</dd>
|
|
1417
|
+
</dl>
|
|
1418
|
+
</dd>
|
|
1419
|
+
|
|
1420
|
+
<dt id="defineExtension"><code><strong>CodeMirror.defineExtension</strong>(name: string, value: any)</code></dt>
|
|
1421
|
+
<dd>If you want to define extra methods in terms of the
|
|
1422
|
+
CodeMirror API, it is possible to
|
|
1423
|
+
use <code>defineExtension</code>. This will cause the given
|
|
1424
|
+
value (usually a method) to be added to all CodeMirror instances
|
|
1425
|
+
created from then on.</dd>
|
|
1426
|
+
|
|
1427
|
+
<dt id="defineDocExtension"><code><strong>CodeMirror.defineDocExtension</strong>(name: string, value: any)</code></dt>
|
|
1428
|
+
<dd>Like <a href="#defineExtenstion"><code>defineExtension</code></a>,
|
|
1429
|
+
but the method will be added to the interface
|
|
1430
|
+
for <a href="#Doc"><code>Doc</code></a> objects instead.</dd>
|
|
1431
|
+
|
|
1432
|
+
<dt id="defineOption"><code><strong>CodeMirror.defineOption</strong>(name: string,
|
|
1433
|
+
default: any, updateFunc: function)</code></dt>
|
|
1434
|
+
<dd>Similarly, <code>defineOption</code> can be used to define new options for
|
|
1435
|
+
CodeMirror. The <code>updateFunc</code> will be called with the
|
|
1436
|
+
editor instance and the new value when an editor is initialized,
|
|
1437
|
+
and whenever the option is modified
|
|
1438
|
+
through <a href="#setOption"><code>setOption</code></a>.</dd>
|
|
1439
|
+
|
|
1440
|
+
<dt id="defineInitHook"><code><strong>CodeMirror.defineInitHook</strong>(func: function)</code></dt>
|
|
1441
|
+
<dd>If your extention just needs to run some
|
|
1442
|
+
code whenever a CodeMirror instance is initialized,
|
|
1443
|
+
use <code>CodeMirror.defineInitHook</code>. Give it a function as
|
|
1444
|
+
its only argument, and from then on, that function will be called
|
|
1445
|
+
(with the instance as argument) whenever a new CodeMirror instance
|
|
1446
|
+
is initialized.</dd>
|
|
1447
|
+
</dl>
|
|
1448
|
+
|
|
1449
|
+
<h2 id="addons">Add-ons</h2>
|
|
1450
|
+
|
|
1451
|
+
<p>The <code>addon</code> directory in the distribution contains a
|
|
1452
|
+
number of reusable components that implement extra editor
|
|
1453
|
+
functionality. In brief, they are:</p>
|
|
1454
|
+
|
|
1455
|
+
<dl>
|
|
1456
|
+
<dt id="addon_dialog"><a href="../addon/dialog/dialog.js"><code>dialog/dialog.js</code></a></dt>
|
|
1457
|
+
<dd>Provides a very simple way to query users for text input.
|
|
1458
|
+
Adds an <code>openDialog</code> method to CodeMirror instances,
|
|
1459
|
+
which can be called with an HTML fragment that provides the
|
|
1460
|
+
prompt (should include an <code>input</code> tag), and a
|
|
1461
|
+
callback function that is called when text has been entered.
|
|
1462
|
+
Depends on <code>addon/dialog/dialog.css</code>.</dd>
|
|
1463
|
+
<dt id="addon_searchcursor"><a href="../addon/search/searchcursor.js"><code>search/searchcursor.js</code></a></dt>
|
|
1464
|
+
<dd>Adds the <code>getSearchCursor(query, start, caseFold) →
|
|
1465
|
+
cursor</code> method to CodeMirror instances, which can be used
|
|
1466
|
+
to implement search/replace functionality. <code>query</code>
|
|
1467
|
+
can be a regular expression or a string (only strings will match
|
|
1468
|
+
across lines—if they contain newlines). <code>start</code>
|
|
1469
|
+
provides the starting position of the search. It can be
|
|
1470
|
+
a <code>{line, ch}</code> object, or can be left off to default
|
|
1471
|
+
to the start of the document. <code>caseFold</code> is only
|
|
1472
|
+
relevant when matching a string. It will cause the search to be
|
|
1473
|
+
case-insensitive. A search cursor has the following methods:
|
|
1474
|
+
<dl>
|
|
1475
|
+
<dt><code><strong>findNext</strong>() → boolean</code></dt>
|
|
1476
|
+
<dt><code><strong>findPrevious</strong>() → boolean</code></dt>
|
|
1477
|
+
<dd>Search forward or backward from the current position.
|
|
1478
|
+
The return value indicates whether a match was found. If
|
|
1479
|
+
matching a regular expression, the return value will be the
|
|
1480
|
+
array returned by the <code>match</code> method, in case you
|
|
1481
|
+
want to extract matched groups.</dd>
|
|
1482
|
+
<dt><code><strong>from</strong>() → {line, ch}</code></dt>
|
|
1483
|
+
<dt><code><strong>to</strong>() → {line, ch}</code></dt>
|
|
1484
|
+
<dd>These are only valid when the last call
|
|
1485
|
+
to <code>findNext</code> or <code>findPrevious</code> did
|
|
1486
|
+
not return false. They will return <code>{line, ch}</code>
|
|
1487
|
+
objects pointing at the start and end of the match.</dd>
|
|
1488
|
+
<dt><code><strong>replace</strong>(text: string)</code></dt>
|
|
1489
|
+
<dd>Replaces the currently found match with the given text
|
|
1490
|
+
and adjusts the cursor position to reflect the
|
|
1491
|
+
replacement.</dd>
|
|
1492
|
+
</dl></dd>
|
|
1493
|
+
|
|
1494
|
+
<dt id="addon_search"><a href="../addon/search/search.js"><code>search/search.js</code></a></dt>
|
|
1495
|
+
<dd>Implements the search commands. CodeMirror has keys bound to
|
|
1496
|
+
these by default, but will not do anything with them unless an
|
|
1497
|
+
implementation is provided. Depends
|
|
1498
|
+
on <code>searchcursor.js</code>, and will make use
|
|
1499
|
+
of <a href="#addon_dialog"><code>openDialog</code></a> when
|
|
1500
|
+
available to make prompting for search queries less ugly.</dd>
|
|
1501
|
+
<dt id="addon_matchbrackets"><a href="../addon/edit/matchbrackets.js"><code>edit/matchbrackets.js</code></a></dt>
|
|
1502
|
+
<dd>Defines an option <code>matchBrackets</code> which, when set
|
|
1503
|
+
to true, causes matching brackets to be highlighted whenever the
|
|
1504
|
+
cursor is next to them. It also adds a
|
|
1505
|
+
method <code>matchBrackets</code> that forces this to happen
|
|
1506
|
+
once, and a method <code>findMatchingBracket</code> that can be
|
|
1507
|
+
used to run the bracket-finding algorithm that this uses
|
|
1508
|
+
internally.</dd>
|
|
1509
|
+
<dt id="addon_closebrackets"><a href="../addon/edit/closebrackets.js"><code>edit/closebrackets.js</code></a></dt>
|
|
1510
|
+
<dd>Defines an option <code>autoCloseBrackets</code> that will
|
|
1511
|
+
auto-close brackets and quotes when typed. By default, it'll
|
|
1512
|
+
auto-close <code>()[]{}''""</code>, but you can pass it a
|
|
1513
|
+
string similar to that (containing pairs of matching characters)
|
|
1514
|
+
to customize it. <a href="../demo/closebrackets.html">Demo
|
|
1515
|
+
here</a>.</dd>
|
|
1516
|
+
<dt id="addon_foldcode"><a href="../addon/fold/foldcode.js"><code>fold/foldcode.js</code></a></dt>
|
|
1517
|
+
<dd>Helps with code folding.
|
|
1518
|
+
See <a href="../demo/folding.html">the demo</a> for an example.
|
|
1519
|
+
Call <code>CodeMirror.newFoldFunction</code> with a range-finder
|
|
1520
|
+
helper function to create a function that will, when applied to
|
|
1521
|
+
a CodeMirror instance and a line number, attempt to fold or
|
|
1522
|
+
unfold the block starting at the given line. A range-finder is a
|
|
1523
|
+
language-specific function that also takes an instance and a
|
|
1524
|
+
line number, and returns an range to be folded, or null if no
|
|
1525
|
+
block is started on that line. There are files in
|
|
1526
|
+
the <a href="../addon/fold/"><code>addon/fold/</code></a>
|
|
1527
|
+
directory providing <code>CodeMirror.braceRangeFinder</code>,
|
|
1528
|
+
which finds blocks in brace languages (JavaScript, C, Java,
|
|
1529
|
+
etc), <code>CodeMirror.indentRangeFinder</code>, for languages
|
|
1530
|
+
where indentation determines block structure (Python, Haskell),
|
|
1531
|
+
and <code>CodeMirror.tagRangeFinder</code>, for XML-style
|
|
1532
|
+
languages.</dd>
|
|
1533
|
+
<dt id="addon_runmode"><a href="../addon/runmode/runmode.js"><code>runmode/runmode.js</code></a></dt>
|
|
1534
|
+
<dd>Can be used to run a CodeMirror mode over text without
|
|
1535
|
+
actually opening an editor instance.
|
|
1536
|
+
See <a href="../demo/runmode.html">the demo</a> for an example.
|
|
1537
|
+
There are alternate versions of the file avaible for
|
|
1538
|
+
running <a href="../addon/runmode/runmode-standalone.js">stand-alone</a>
|
|
1539
|
+
(without including all of CodeMirror) and
|
|
1540
|
+
for <a href="../addon/runmode/runmode.node.js">running under
|
|
1541
|
+
node.js</a>.</dd>
|
|
1542
|
+
<dt id="addon_overlay"><a href="../addon/mode/overlay.js"><code>mode/overlay.js</code></a></dt>
|
|
1543
|
+
<dd>Mode combinator that can be used to extend a mode with an
|
|
1544
|
+
'overlay' — a secondary mode is run over the stream, along with
|
|
1545
|
+
the base mode, and can color specific pieces of text without
|
|
1546
|
+
interfering with the base mode.
|
|
1547
|
+
Defines <code>CodeMirror.overlayMode</code>, which is used to
|
|
1548
|
+
create such a mode. See <a href="../demo/mustache.html">this
|
|
1549
|
+
demo</a> for a detailed example.</dd>
|
|
1550
|
+
<dt id="addon_multiplex"><a href="../addon/mode/multiplex.js"><code>mode/multiplex.js</code></a></dt>
|
|
1551
|
+
<dd>Mode combinator that can be used to easily 'multiplex'
|
|
1552
|
+
between several modes.
|
|
1553
|
+
Defines <code>CodeMirror.multiplexingMode</code> which, when
|
|
1554
|
+
given as first argument a mode object, and as other arguments
|
|
1555
|
+
any number of <code>{open, close, mode [, delimStyle]}</code>
|
|
1556
|
+
objects, will return a mode object that starts parsing using the
|
|
1557
|
+
mode passed as first argument, but will switch to another mode
|
|
1558
|
+
as soon as it encounters a string that occurs in one of
|
|
1559
|
+
the <code>open</code> fields of the passed objects. When in a
|
|
1560
|
+
sub-mode, it will go back to the top mode again when
|
|
1561
|
+
the <code>close</code> string is encountered.
|
|
1562
|
+
Pass <code>"\n"</code> for <code>open</code> or <code>close</code>
|
|
1563
|
+
if you want to switch on a blank line.
|
|
1564
|
+
When <code>delimStyle</code> is specified, it will be the token
|
|
1565
|
+
style returned for the delimiter tokens. The outer mode will not
|
|
1566
|
+
see the content between the delimiters.
|
|
1567
|
+
See <a href="../demo/multiplex.html">this demo</a> for an
|
|
1568
|
+
example.</dd>
|
|
1569
|
+
<dt id="addon_show-hint"><a href="../addon/hint/show-hint.js"><code>hint/show-hint.js</code></a></dt>
|
|
1570
|
+
<dd>Provides a framework for showing autocompletion hints.
|
|
1571
|
+
Defines <code>CodeMirror.showHint</code>, which takes a
|
|
1572
|
+
CodeMirror instance and a hinting function, and pops up a widget
|
|
1573
|
+
that allows the user to select a completion. Hinting functions
|
|
1574
|
+
are function that take an editor instance, and return
|
|
1575
|
+
a <code>{list, from, to}</code> object, where <code>list</code>
|
|
1576
|
+
is an array of strings (the completions), and <code>from</code>
|
|
1577
|
+
and <code>to</code> give the start and end of the token that is
|
|
1578
|
+
being completed. Depends
|
|
1579
|
+
on <code>addon/hint/show-hint.css</code>. See the other files in
|
|
1580
|
+
the <a href="../addon/hint/"><code>addon/hint</code></a> for
|
|
1581
|
+
hint sources for various languages. Check
|
|
1582
|
+
out <a href="../demo/complete.html">the demo</a> for an
|
|
1583
|
+
example.</dd>
|
|
1584
|
+
<dt id="addon_match-highlighter"><a href="../addon/search/match-highlighter.js"><code>match-highlighter.js</code></a></dt>
|
|
1585
|
+
<dd>Adds a <code>highlightSelectionMatches</code> option that
|
|
1586
|
+
can be enabled to highlight all instances of a currently
|
|
1587
|
+
selected word.
|
|
1588
|
+
Demo <a href="../demo/matchhighlighter.html">here</a>.</dd>
|
|
1589
|
+
<dt id="addon_lint"><a href="../addon/lint/lint.js"><code>lint/lint.js</code></a></dt>
|
|
1590
|
+
<dd>Defines an interface component for showing linting warnings,
|
|
1591
|
+
with pluggable warning sources
|
|
1592
|
+
(see <a href="../addon/lint/json-lint.js"><code>json-lint.js</code></a>
|
|
1593
|
+
and <a href="../addon/lint/javascript-lint.js"><code>javascript-lint.js</code></a>
|
|
1594
|
+
in the same directory). Defines a <code>lintWith</code> option
|
|
1595
|
+
that can be set to a warning source (for
|
|
1596
|
+
example <code>CodeMirror.javascriptValidator</code>). Depends
|
|
1597
|
+
on <code>addon/lint/lint.css</code>. A demo can be
|
|
1598
|
+
found <a href="../demo/lint.html">here</a>.</dd>
|
|
1599
|
+
<dt id="addon_mark-selection"><a href="../addon/selection/mark-selection.js"><code>selection/mark-selection.js</code></a></dt>
|
|
1600
|
+
<dd>Causes the selected text to be marked with the CSS class
|
|
1601
|
+
<code>CodeMirror-selectedtext</code> when the <code>styleSelectedText</code> option
|
|
1602
|
+
is enabled. Useful to change the colour of the selection (in addition to the background),
|
|
1603
|
+
like in <a href="../demo/markselection.html">this demo</a>.</dd>
|
|
1604
|
+
<dt id="addon_active-line"><a href="../addon/selection/active-line.js"><code>selection/active-line.js</code></a></dt>
|
|
1605
|
+
<dd>Defines a <code>styleActiveLine</code> option that, when enabled,
|
|
1606
|
+
gives the wrapper of the active line the class <code>CodeMirror-activeline</code>,
|
|
1607
|
+
and adds a background with the class <code>CodeMirror-activeline-background</code>.
|
|
1608
|
+
is enabled. See the <a href="../demo/activeline.html">demo</a>.</dd>
|
|
1609
|
+
<dt id="addon_closetag"><a href="../addon/edit/closetag.js"><code>edit/closetag.js</code></a></dt>
|
|
1610
|
+
<dd>Provides utility functions for adding automatic tag closing
|
|
1611
|
+
to XML modes. See
|
|
1612
|
+
the <a href="../demo/closetag.html">demo</a>.</dd>
|
|
1613
|
+
<dt id="addon_loadmode"><a href="../addon/mode/loadmode.js"><code>mode/loadmode.js</code></a></dt>
|
|
1614
|
+
<dd>Defines a <code>CodeMirror.requireMode(modename,
|
|
1615
|
+
callback)</code> function that will try to load a given mode and
|
|
1616
|
+
call the callback when it succeeded. You'll have to
|
|
1617
|
+
set <code>CodeMirror.modeURL</code> to a string that mode paths
|
|
1618
|
+
can be constructed from, for
|
|
1619
|
+
example <code>"mode/%N/%N.js"</code>—the <code>%N</code>'s will
|
|
1620
|
+
be replaced with the mode name. Also
|
|
1621
|
+
defines <code>CodeMirror.autoLoadMode(instance, mode)</code>,
|
|
1622
|
+
which will ensure the given mode is loaded and cause the given
|
|
1623
|
+
editor instance to refresh its mode when the loading
|
|
1624
|
+
succeeded. See the <a href="../demo/loadmode.html">demo</a>.</dd>
|
|
1625
|
+
<dt id="addon_continuecomment"><a href="../addon/edit/continuecomment.js"><code>edit/continuecomment.js</code></a></dt>
|
|
1626
|
+
<dd>Adds an <code>continueComments</code> option, which can be
|
|
1627
|
+
set to true to have the editor prefix new lines inside C-like
|
|
1628
|
+
block comments with an asterisk when Enter is pressed. It can
|
|
1629
|
+
also be set to a string in order to bind this functionality to a
|
|
1630
|
+
specific key..</dd>
|
|
1631
|
+
<dt id="addon_placeholder"><a href="../addon/display/placeholder.js"><code>display/placeholder.js</code></a></dt>
|
|
1632
|
+
<dd>Adds a <code>placeholder</code> option that can be used to
|
|
1633
|
+
make text appear in the editor when it is empty and not focused.
|
|
1634
|
+
Also gives the editor a <code>CodeMirror-empty</code> CSS class
|
|
1635
|
+
whenever it doesn't contain any text.
|
|
1636
|
+
See <a href="../demo/placeholder.html">the demo</a>.</dd>
|
|
1637
|
+
</dl>
|
|
1638
|
+
|
|
1639
|
+
<h2 id="modeapi">Writing CodeMirror Modes</h2>
|
|
1640
|
+
|
|
1641
|
+
<p>Modes typically consist of a single JavaScript file. This file
|
|
1642
|
+
defines, in the simplest case, a lexer (tokenizer) for your
|
|
1643
|
+
language—a function that takes a character stream as input,
|
|
1644
|
+
advances it past a token, and returns a style for that token. More
|
|
1645
|
+
advanced modes can also handle indentation for the language.</p>
|
|
1646
|
+
|
|
1647
|
+
<p id="defineMode">The mode script should
|
|
1648
|
+
call <code>CodeMirror.defineMode</code> to register itself with
|
|
1649
|
+
CodeMirror. This function takes two arguments. The first should be
|
|
1650
|
+
the name of the mode, for which you should use a lowercase string,
|
|
1651
|
+
preferably one that is also the name of the files that define the
|
|
1652
|
+
mode (i.e. <code>"xml"</code> is defined in <code>xml.js</code>). The
|
|
1653
|
+
second argument should be a function that, given a CodeMirror
|
|
1654
|
+
configuration object (the thing passed to
|
|
1655
|
+
the <code>CodeMirror</code> function) and an optional mode
|
|
1656
|
+
configuration object (as in
|
|
1657
|
+
the <a href="#option_mode"><code>mode</code></a> option), returns
|
|
1658
|
+
a mode object.</p>
|
|
1659
|
+
|
|
1660
|
+
<p>Typically, you should use this second argument
|
|
1661
|
+
to <code>defineMode</code> as your module scope function (modes
|
|
1662
|
+
should not leak anything into the global scope!), i.e. write your
|
|
1663
|
+
whole mode inside this function.</p>
|
|
1664
|
+
|
|
1665
|
+
<p>The main responsibility of a mode script is <em>parsing</em>
|
|
1666
|
+
the content of the editor. Depending on the language and the
|
|
1667
|
+
amount of functionality desired, this can be done in really easy
|
|
1668
|
+
or extremely complicated ways. Some parsers can be stateless,
|
|
1669
|
+
meaning that they look at one element (<em>token</em>) of the code
|
|
1670
|
+
at a time, with no memory of what came before. Most, however, will
|
|
1671
|
+
need to remember something. This is done by using a <em>state
|
|
1672
|
+
object</em>, which is an object that is always passed when
|
|
1673
|
+
reading a token, and which can be mutated by the tokenizer.</p>
|
|
1674
|
+
|
|
1675
|
+
<p id="startState">Modes that use a state must define
|
|
1676
|
+
a <code>startState</code> method on their mode object. This is a
|
|
1677
|
+
function of no arguments that produces a state object to be used
|
|
1678
|
+
at the start of a document.</p>
|
|
1679
|
+
|
|
1680
|
+
<p id="token">The most important part of a mode object is
|
|
1681
|
+
its <code>token(stream, state)</code> method. All modes must
|
|
1682
|
+
define this method. It should read one token from the stream it is
|
|
1683
|
+
given as an argument, optionally update its state, and return a
|
|
1684
|
+
style string, or <code>null</code> for tokens that do not have to
|
|
1685
|
+
be styled. For your styles, you are encouraged to use the
|
|
1686
|
+
'standard' names defined in the themes (without
|
|
1687
|
+
the <code>cm-</code> prefix). If that fails, it is also possible
|
|
1688
|
+
to come up with your own and write your own CSS theme file.<p>
|
|
1689
|
+
|
|
1690
|
+
<p id="StringStream">The stream object that's passed
|
|
1691
|
+
to <code>token</code> encapsulates a line of code (tokens may
|
|
1692
|
+
never span lines) and our current position in that line. It has
|
|
1693
|
+
the following API:</p>
|
|
1694
|
+
|
|
1695
|
+
<dl>
|
|
1696
|
+
<dt><code><strong></strong><strong>eol</strong>() → boolean</code></dt>
|
|
1697
|
+
<dd>Returns true only if the stream is at the end of the
|
|
1698
|
+
line.</dd>
|
|
1699
|
+
<dt><code><strong></strong><strong>sol</strong>() → boolean</code></dt>
|
|
1700
|
+
<dd>Returns true only if the stream is at the start of the
|
|
1701
|
+
line.</dd>
|
|
1702
|
+
|
|
1703
|
+
<dt><code><strong>peek</strong>() → string</code></dt>
|
|
1704
|
+
<dd>Returns the next character in the stream without advancing
|
|
1705
|
+
it. Will return an <code>null</code> at the end of the
|
|
1706
|
+
line.</dd>
|
|
1707
|
+
<dt><code><strong>next</strong>() → string</code></dt>
|
|
1708
|
+
<dd>Returns the next character in the stream and advances it.
|
|
1709
|
+
Also returns <code>null</code> when no more characters are
|
|
1710
|
+
available.</dd>
|
|
1711
|
+
|
|
1712
|
+
<dt><code><strong>eat</strong>(match: string|regexp|function(char: string) → boolean) → string</code></dt>
|
|
1713
|
+
<dd><code>match</code> can be a character, a regular expression,
|
|
1714
|
+
or a function that takes a character and returns a boolean. If
|
|
1715
|
+
the next character in the stream 'matches' the given argument,
|
|
1716
|
+
it is consumed and returned. Otherwise, <code>undefined</code>
|
|
1717
|
+
is returned.</dd>
|
|
1718
|
+
<dt><code><strong>eatWhile</strong>(match: string|regexp|function(char: string) → boolean) → boolean</code></dt>
|
|
1719
|
+
<dd>Repeatedly calls <code>eat</code> with the given argument,
|
|
1720
|
+
until it fails. Returns true if any characters were eaten.</dd>
|
|
1721
|
+
<dt><code><strong>eatSpace</strong>() → boolean</code></dt>
|
|
1722
|
+
<dd>Shortcut for <code>eatWhile</code> when matching
|
|
1723
|
+
white-space.</dd>
|
|
1724
|
+
<dt><code><strong>skipToEnd</strong>()</code></dt>
|
|
1725
|
+
<dd>Moves the position to the end of the line.</dd>
|
|
1726
|
+
<dt><code><strong>skipTo</strong>(ch: string) → boolean</code></dt>
|
|
1727
|
+
<dd>Skips to the next occurrence of the given character, if
|
|
1728
|
+
found on the current line (doesn't advance the stream if the
|
|
1729
|
+
character does not occur on the line). Returns true if the
|
|
1730
|
+
character was found.</dd>
|
|
1731
|
+
<dt><code><strong>match</strong>(pattern: string, ?consume: boolean, ?caseFold: boolean) → boolean</code></dt>
|
|
1732
|
+
<dt><code><strong>match</strong>(pattern: regexp, ?consume: boolean) → array<string></code></dt>
|
|
1733
|
+
<dd>Act like a
|
|
1734
|
+
multi-character <code>eat</code>—if <code>consume</code> is true
|
|
1735
|
+
or not given—or a look-ahead that doesn't update the stream
|
|
1736
|
+
position—if it is false. <code>pattern</code> can be either a
|
|
1737
|
+
string or a regular expression starting with <code>^</code>.
|
|
1738
|
+
When it is a string, <code>caseFold</code> can be set to true to
|
|
1739
|
+
make the match case-insensitive. When successfully matching a
|
|
1740
|
+
regular expression, the returned value will be the array
|
|
1741
|
+
returned by <code>match</code>, in case you need to extract
|
|
1742
|
+
matched groups.</dd>
|
|
1743
|
+
|
|
1744
|
+
<dt><code><strong>backUp</strong>(n: integer)</code></dt>
|
|
1745
|
+
<dd>Backs up the stream <code>n</code> characters. Backing it up
|
|
1746
|
+
further than the start of the current token will cause things to
|
|
1747
|
+
break, so be careful.</dd>
|
|
1748
|
+
<dt><code><strong>column</strong>() → integer</code></dt>
|
|
1749
|
+
<dd>Returns the column (taking into account tabs) at which the
|
|
1750
|
+
current token starts.</dd>
|
|
1751
|
+
<dt><code><strong>indentation</strong>() → integer</code></dt>
|
|
1752
|
+
<dd>Tells you how far the current line has been indented, in
|
|
1753
|
+
spaces. Corrects for tab characters.</dd>
|
|
1754
|
+
|
|
1755
|
+
<dt><code><strong>current</strong>() → string</code></dt>
|
|
1756
|
+
<dd>Get the string between the start of the current token and
|
|
1757
|
+
the current stream position.</dd>
|
|
1758
|
+
</dl>
|
|
1759
|
+
|
|
1760
|
+
<p id="blankLine">By default, blank lines are simply skipped when
|
|
1761
|
+
tokenizing a document. For languages that have significant blank
|
|
1762
|
+
lines, you can define a <code>blankLine(state)</code> method on
|
|
1763
|
+
your mode that will get called whenever a blank line is passed
|
|
1764
|
+
over, so that it can update the parser state.</p>
|
|
1765
|
+
|
|
1766
|
+
<p id="copyState">Because state object are mutated, and CodeMirror
|
|
1767
|
+
needs to keep valid versions of a state around so that it can
|
|
1768
|
+
restart a parse at any line, copies must be made of state objects.
|
|
1769
|
+
The default algorithm used is that a new state object is created,
|
|
1770
|
+
which gets all the properties of the old object. Any properties
|
|
1771
|
+
which hold arrays get a copy of these arrays (since arrays tend to
|
|
1772
|
+
be used as mutable stacks). When this is not correct, for example
|
|
1773
|
+
because a mode mutates non-array properties of its state object, a
|
|
1774
|
+
mode object should define a <code>copyState</code> method,
|
|
1775
|
+
which is given a state and should return a safe copy of that
|
|
1776
|
+
state.</p>
|
|
1777
|
+
|
|
1778
|
+
<p id="indent">If you want your mode to provide smart indentation
|
|
1779
|
+
(through the <a href="#indentLine"><code>indentLine</code></a>
|
|
1780
|
+
method and the <code>indentAuto</code>
|
|
1781
|
+
and <code>newlineAndIndent</code> commands, to which keys can be
|
|
1782
|
+
<a href="#option_extraKeys">bound</a>), you must define
|
|
1783
|
+
an <code>indent(state, textAfter)</code> method on your mode
|
|
1784
|
+
object.</p>
|
|
1785
|
+
|
|
1786
|
+
<p>The indentation method should inspect the given state object,
|
|
1787
|
+
and optionally the <code>textAfter</code> string, which contains
|
|
1788
|
+
the text on the line that is being indented, and return an
|
|
1789
|
+
integer, the amount of spaces to indent. It should usually take
|
|
1790
|
+
the <a href="#option_indentUnit"><code>indentUnit</code></a>
|
|
1791
|
+
option into account. An indentation method may
|
|
1792
|
+
return <code>CodeMirror.Pass</code> to indicate that it
|
|
1793
|
+
could not come up with a precise indentation.</p>
|
|
1794
|
+
|
|
1795
|
+
<p id="electricChars">Finally, a mode may define
|
|
1796
|
+
an <code>electricChars</code> property, which should hold a string
|
|
1797
|
+
containing all the characters that should trigger the behaviour
|
|
1798
|
+
described for
|
|
1799
|
+
the <a href="#option_electricChars"><code>electricChars</code></a>
|
|
1800
|
+
option.</p>
|
|
1801
|
+
|
|
1802
|
+
<p>So, to summarize, a mode <em>must</em> provide
|
|
1803
|
+
a <code>token</code> method, and it <em>may</em>
|
|
1804
|
+
provide <code>startState</code>, <code>copyState</code>,
|
|
1805
|
+
and <code>indent</code> methods. For an example of a trivial mode,
|
|
1806
|
+
see the <a href="../mode/diff/diff.js">diff mode</a>, for a more
|
|
1807
|
+
involved example, see the <a href="../mode/clike/clike.js">C-like
|
|
1808
|
+
mode</a>.</p>
|
|
1809
|
+
|
|
1810
|
+
<p>Sometimes, it is useful for modes to <em>nest</em>—to have one
|
|
1811
|
+
mode delegate work to another mode. An example of this kind of
|
|
1812
|
+
mode is the <a href="../mode/htmlmixed/htmlmixed.js">mixed-mode HTML
|
|
1813
|
+
mode</a>. To implement such nesting, it is usually necessary to
|
|
1814
|
+
create mode objects and copy states yourself. To create a mode
|
|
1815
|
+
object, there are <code>CodeMirror.getMode(options,
|
|
1816
|
+
parserConfig)</code>, where the first argument is a configuration
|
|
1817
|
+
object as passed to the mode constructor function, and the second
|
|
1818
|
+
argument is a mode specification as in
|
|
1819
|
+
the <a href="#option_mode"><code>mode</code></a> option. To copy a
|
|
1820
|
+
state object, call <code>CodeMirror.copyState(mode, state)</code>,
|
|
1821
|
+
where <code>mode</code> is the mode that created the given
|
|
1822
|
+
state.</p>
|
|
1823
|
+
|
|
1824
|
+
<p id="innerMode">In a nested mode, it is recommended to add an
|
|
1825
|
+
extra methods, <code>innerMode</code> which, given a state object,
|
|
1826
|
+
returns a <code>{state, mode}</code> object with the inner mode
|
|
1827
|
+
and its state for the current position. These are used by utility
|
|
1828
|
+
scripts such as the <a href="#addon_closetag">tag closer</a> to
|
|
1829
|
+
get context information. Use the <code>CodeMirror.innerMode</code>
|
|
1830
|
+
helper function to, starting from a mode and a state, recursively
|
|
1831
|
+
walk down to the innermost mode and state.</p>
|
|
1832
|
+
|
|
1833
|
+
<p>To make indentation work properly in a nested parser, it is
|
|
1834
|
+
advisable to give the <code>startState</code> method of modes that
|
|
1835
|
+
are intended to be nested an optional argument that provides the
|
|
1836
|
+
base indentation for the block of code. The JavaScript and CSS
|
|
1837
|
+
parser do this, for example, to allow JavaScript and CSS code
|
|
1838
|
+
inside the mixed-mode HTML mode to be properly indented.</p>
|
|
1839
|
+
|
|
1840
|
+
<p>It is possible, and encouraged, to associate your mode, or a
|
|
1841
|
+
certain configuration of your mode, with
|
|
1842
|
+
a <a href="http://en.wikipedia.org/wiki/MIME">MIME</a> type. For
|
|
1843
|
+
example, the JavaScript mode associates itself
|
|
1844
|
+
with <code>text/javascript</code>, and its JSON variant
|
|
1845
|
+
with <code>application/json</code>. To do this,
|
|
1846
|
+
call <code>CodeMirror.defineMIME(mime, modeSpec)</code>,
|
|
1847
|
+
where <code>modeSpec</code> can be a string or object specifying a
|
|
1848
|
+
mode, as in the <a href="#option_mode"><code>mode</code></a>
|
|
1849
|
+
option.</p>
|
|
1850
|
+
|
|
1851
|
+
<p id="extendMode">Sometimes, it is useful to add or override mode
|
|
1852
|
+
object properties from external code.
|
|
1853
|
+
The <code>CodeMirror.extendMode</code> can be used to add
|
|
1854
|
+
properties to mode objects produced for a specific mode. Its first
|
|
1855
|
+
argument is the name of the mode, its second an object that
|
|
1856
|
+
specifies the properties that should be added. This is mostly
|
|
1857
|
+
useful to add utilities that can later be looked
|
|
1858
|
+
up through <a href="#getMode"><code>getMode</code></a>.</p>
|
|
1859
|
+
|
|
1860
|
+
</div><div class="rightsmall blk">
|
|
1861
|
+
|
|
1862
|
+
<h2>Contents</h2>
|
|
1863
|
+
|
|
1864
|
+
<ul>
|
|
1865
|
+
<li><a href="#overview">Overview</a></li>
|
|
1866
|
+
<li><a href="#usage">Basic Usage</a></li>
|
|
1867
|
+
<li><a href="#config">Configuration</a></li>
|
|
1868
|
+
<li><a href="#events">Events</a></li>
|
|
1869
|
+
<li><a href="#keymaps">Keymaps</a></li>
|
|
1870
|
+
<li><a href="#styling">Customized Styling</a></li>
|
|
1871
|
+
<li><a href="#api">Programming API</a>
|
|
1872
|
+
<ul>
|
|
1873
|
+
<li><a href="#api_content">Content manipulation</a></li>
|
|
1874
|
+
<li><a href="#api_selection">Selection</a></li>
|
|
1875
|
+
<li><a href="#api_configuration">Configuration</a></li>
|
|
1876
|
+
<li><a href="#api_doc">Document management</a></li>
|
|
1877
|
+
<li><a href="#api_history">History</a></li>
|
|
1878
|
+
<li><a href="#api_marker">Text-marking</a></li>
|
|
1879
|
+
<li><a href="#api_decoration">Widget, gutter, and decoration</a></li>
|
|
1880
|
+
<li><a href="#api_sizing">Sizing, scrolling, and positioning</a></li>
|
|
1881
|
+
<li><a href="#api_mode">Mode, state, and tokens</a></li>
|
|
1882
|
+
<li><a href="#api_misc">Miscellaneous methods</a></li>
|
|
1883
|
+
<li><a href="#api_static">Static properties</a></li>
|
|
1884
|
+
</ul>
|
|
1885
|
+
</li>
|
|
1886
|
+
<li><a href="#addons">Add-ons</a></li>
|
|
1887
|
+
<li><a href="#modeapi">Writing CodeMirror Modes</a></li>
|
|
1888
|
+
</ul>
|
|
1889
|
+
|
|
1890
|
+
</div></div>
|
|
1891
|
+
|
|
1892
|
+
<div style="height: 2em"> </div>
|
|
1893
|
+
|
|
1894
|
+
<script>setTimeout(function(){CodeMirror.colorize();}, 20);</script>
|
|
1895
|
+
|
|
1896
|
+
</body>
|
|
1897
|
+
</html>
|