# { } 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 behaviors. 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.