third-party/codemirror-3.15/doc/upgrade_v2.2.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8"/>
   5     <title>CodeMirror: Upgrading to v2.2</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   </head>
   9   <body>
  10
  11 <h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
  12
  13 <div class="grey">
  14 <img src="baboon.png" class="logo" alt="logo"/>
  15 <pre>
  16 /* Upgrading to
  17    v2.2 */
  18 </pre>
  19 </div>
  20
  21 <div class="left">
  22
  23 <p>There are a few things in the 2.2 release that require some care
  24 when upgrading.</p>
  25
  26 <h2>No more default.css</h2>
  27
  28 <p>The default theme is now included
  29 in <a href="../lib/codemirror.css"><code>codemirror.css</code></a>, so
  30 you do not have to included it separately anymore. (It was tiny, so
  31 even if you're not using it, the extra data overhead is negligible.)
  32
  33 <h2>Different key customization</h2>
  34
  35 <p>CodeMirror has moved to a system
  36 where <a href="manual.html#option_keyMap">keymaps</a> are used to
  37 bind behavior to keys. This means <a href="../demo/emacs.html">custom
  38 bindings</a> are now possible.</p>
  39
  40 <p>Three options that influenced key
  41 behavior, <code>tabMode</code>, <code>enterMode</code>,
  42 and <code>smartHome</code>, are no longer supported. Instead, you can
  43 provide custom bindings to influence the way these keys act. This is
  44 done through the
  45 new <a href="manual.html#option_extraKeys"><code>extraKeys</code></a>
  46 option, which can hold an object mapping key names to functionality. A
  47 simple example would be:</p>
  48
  49 <pre>  extraKeys: {
  50     "Ctrl-S": function(instance) { saveText(instance.getValue()); },
  51     "Ctrl-/": "undo"
  52   }</pre>
  53
  54 <p>Keys can be mapped either to functions, which will be given the
  55 editor instance as argument, or to strings, which are mapped through
  56 functions through the <code>CodeMirror.commands</code> table, which
  57 contains all the built-in editing commands, and can be inspected and
  58 extended by external code.</p>
  59
  60 <p>By default, the <code>Home</code> key is bound to
  61 the <code>"goLineStartSmart"</code> command, which moves the cursor to
  62 the first non-whitespace character on the line. You can set do this to
  63 make it always go to the very start instead:</p>
  64
  65 <pre>  extraKeys: {"Home": "goLineStart"}</pre>
  66
  67 <p>Similarly, <code>Enter</code> is bound
  68 to <code>"newlineAndIndent"</code> by default. You can bind it to
  69 something else to get different behavior. To disable special handling
  70 completely and only get a newline character inserted, you can bind it
  71 to <code>false</code>:</p>
  72
  73 <pre>  extraKeys: {"Enter": false}</pre>
  74
  75 <p>The same works for <code>Tab</code>. If you don't want CodeMirror
  76 to handle it, bind it to <code>false</code>. The default behaviour is
  77 to indent the current line more (<code>"indentMore"</code> command),
  78 and indent it less when shift is held (<code>"indentLess"</code>).
  79 There are also <code>"indentAuto"</code> (smart indent)
  80 and <code>"insertTab"</code> commands provided for alternate
  81 behaviors. Or you can write your own handler function to do something
  82 different altogether.</p>
  83
  84 <h2>Tabs</h2>
  85
  86 <p>Handling of tabs changed completely. The display width of tabs can
  87 now be set with the <code>tabSize</code> option, and tabs can
  88 be <a href="../demo/visibletabs.html">styled</a> by setting CSS rules
  89 for the <code>cm-tab</code> class.</p>
  90
  91 <p>The default width for tabs is now 4, as opposed to the 8 that is
  92 hard-wired into browsers. If you are relying on 8-space tabs, make
  93 sure you explicitly set <code>tabSize: 8</code> in your options.</p>
  94
  95 </div>
  96
  97   </body>
  98 </html>