CodeMirror

Upgrading to v2.2

There are a few things in the 2.2 release that require some care when upgrading.

No more default.css

The default theme is now included in codemirror.css, so you do not have to included it separately anymore. (It was tiny, so even if you're not using it, the extra data overhead is negligible.)

Different key customization

CodeMirror has moved to a system where keymaps are used to bind behavior to keys. This means custom bindings are now possible.

Three options that influenced key behavior, tabMode, enterMode, and smartHome, are no longer supported. Instead, you can provide custom bindings to influence the way these keys act. This is done through the new extraKeys option, which can hold an object mapping key names to functionality. A simple example would be:

  extraKeys: {
    "Ctrl-S": function(instance) { saveText(instance.getValue()); },
    "Ctrl-/": "undo"
  }

Keys can be mapped either to functions, which will be given the editor instance as argument, or to strings, which are mapped through functions through the CodeMirror.commands table, which contains all the built-in editing commands, and can be inspected and extended by external code.

By default, the Home key is bound to the "goLineStartSmart" command, which moves the cursor to the first non-whitespace character on the line. You can set do this to make it always go to the very start instead:

  extraKeys: {"Home": "goLineStart"}

Similarly, Enter is bound to "newlineAndIndent" by default. You can bind it to something else to get different behavior. To disable special handling completely and only get a newline character inserted, you can bind it to false:

  extraKeys: {"Enter": false}

The same works for Tab. If you don't want CodeMirror to handle it, bind it to false. The default behaviour is to indent the current line more ("indentMore" command), and indent it less when shift is held ("indentLess"). There are also "indentAuto" (smart indent) and "insertTab" commands provided for alternate behavior. Or you can write your own handler function to do something different altogether.

Tabs

Handling of tabs changed completely. The display width of tabs can now be set with the tabSize option, and tabs can be styled by setting CSS rules for the cm-tab class.

The default width for tabs is now 4, as opposed to the 8 that is hard-wired into browsers. If you are relying on 8-space tabs, make sure you explicitly set tabSize: 8 in your options.