Mercurial

comparison .cms/lib/codemirror/doc/upgrade_v2.2.html @ 0:78edf6b517a0 draft

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