-
-
Notifications
You must be signed in to change notification settings - Fork 4.9k
/
manual.html
3161 lines (2809 loc) · 177 KB
/
manual.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<title>CodeMirror: User Manual</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="docs.css">
<script src="activebookmark.js"></script>
<script src="../lib/codemirror.js"></script>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../addon/runmode/runmode.js"></script>
<script src="../addon/runmode/colorize.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../mode/xml/xml.js"></script>
<script src="../mode/css/css.js"></script>
<script src="../mode/htmlmixed/htmlmixed.js"></script>
<style>
dt { text-indent: -2em; padding-left: 2em; margin-top: 1em; }
dd { margin-left: 1.5em; margin-bottom: 1em; }
dt {margin-top: 1em;}
dd dl, dd dt, dd dd, dd ul { margin-top: 0; margin-bottom: 0; }
dt + dt { margin-top: 0; }
dt.command { position: relative; }
span.keybinding { position: absolute; right: 0; font-size: 80%; color: #555; text-indent: 0; }
</style>
<div id=nav>
<a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="logo.png"></a>
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="#overview" class=active data-default="true">Manual</a></li>
<li><a href="https://github.com/codemirror/codemirror">Code</a></li>
</ul>
<ul>
<li><a href="#usage">Basic Usage</a></li>
<li><a href="#config">Configuration</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#keymaps">Key maps</a></li>
<li><a href="#commands">Commands</a></li>
<li><a href="#styling">Customized Styling</a></li>
<li><a href="#api">Programming API</a>
<ul>
<li><a href="#api_constructor">Constructor</a></li>
<li><a href="#api_content">Content manipulation</a></li>
<li><a href="#api_selection">Selection</a></li>
<li><a href="#api_configuration">Configuration</a></li>
<li><a href="#api_doc">Document management</a></li>
<li><a href="#api_history">History</a></li>
<li><a href="#api_marker">Text-marking</a></li>
<li><a href="#api_decoration">Widget, gutter, and decoration</a></li>
<li><a href="#api_sizing">Sizing, scrolling, and positioning</a></li>
<li><a href="#api_mode">Mode, state, and tokens</a></li>
<li><a href="#api_misc">Miscellaneous methods</a></li>
<li><a href="#api_static">Static properties</a></li>
</ul>
</li>
<li><a href="#addons">Addons</a></li>
<li><a href="#modeapi">Writing CodeMirror Modes</a></li>
</ul>
</div>
<article>
<section class=first id=overview>
<h2 style="position: relative">
User manual and reference guide
<span style="color: #888; font-size: 1rem; position: absolute; right: 0; bottom: 0">version 5.2.0</span>
</h2>
<p>CodeMirror is a code-editor component that can be embedded in
Web pages. The core library provides <em>only</em> the editor
component, no accompanying buttons, auto-completion, or other IDE
functionality. It does provide a rich API on top of which such
functionality can be straightforwardly implemented. See
the <a href="#addons">addons</a> included in the distribution,
and the <a href="https://github.com/codemirror/CodeMirror/wiki/CodeMirror-addons">list
of externally hosted addons</a>, for reusable
implementations of extra features.</p>
<p>CodeMirror works with language-specific modes. Modes are
JavaScript programs that help color (and optionally indent) text
written in a given language. The distribution comes with a number
of modes (see the <a href="../mode/"><code>mode/</code></a>
directory), and it isn't hard to <a href="#modeapi">write new
ones</a> for other languages.</p>
</section>
<section id=usage>
<h2>Basic Usage</h2>
<p>The easiest way to use CodeMirror is to simply load the script
and style sheet found under <code>lib/</code> in the distribution,
plus a mode script from one of the <code>mode/</code> directories.
(See <a href="compress.html">the compression helper</a> for an
easy way to combine scripts.) For example:</p>
<pre data-lang="text/html"><script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="mode/javascript/javascript.js"></script></pre>
<p>(Alternatively, use a module loader. <a href="#modloader">More
about that later.</a>)</p>
<p>Having done this, an editor instance can be created like
this:</p>
<pre data-lang="javascript">var myCodeMirror = CodeMirror(document.body);</pre>
<p>The editor will be appended to the document body, will start
empty, and will use the mode that we loaded. To have more control
over the new editor, a configuration object can be passed
to <a href="#CodeMirror"><code>CodeMirror</code></a> as a second
argument:</p>
<pre data-lang="javascript">var myCodeMirror = CodeMirror(document.body, {
value: "function myScript(){return 100;}\n",
mode: "javascript"
});</pre>
<p>This will initialize the editor with a piece of code already in
it, and explicitly tell it to use the JavaScript mode (which is
useful when multiple modes are loaded).
See <a href="#config">below</a> for a full discussion of the
configuration options that CodeMirror accepts.</p>
<p>In cases where you don't want to append the editor to an
element, and need more control over the way it is inserted, the
first argument to the <code>CodeMirror</code> function can also
be a function that, when given a DOM element, inserts it into the
document somewhere. This could be used to, for example, replace a
textarea with a real editor:</p>
<pre data-lang="javascript">var myCodeMirror = CodeMirror(function(elt) {
myTextArea.parentNode.replaceChild(elt, myTextArea);
}, {value: myTextArea.value});</pre>
<p>However, for this use case, which is a common way to use
CodeMirror, the library provides a much more powerful
shortcut:</p>
<pre data-lang="javascript">var myCodeMirror = CodeMirror.fromTextArea(myTextArea);</pre>
<p>This will, among other things, ensure that the textarea's value
is updated with the editor's contents when the form (if it is part
of a form) is submitted. See the <a href="#fromTextArea">API
reference</a> for a full description of this method.</p>
<h3 id=modloader>Module loaders</h3>
<p>The files in the CodeMirror distribution contain shims for
loading them (and their dependencies) in AMD or CommonJS
environments. If the variables <code>exports</code>
and <code>module</code> exist and have type object, CommonJS-style
require will be used. If not, but there is a
function <code>define</code> with an <code>amd</code> property
present, AMD-style (RequireJS) will be used.</p>
<p>It is possible to
use <a href="http://browserify.org/">Browserify</a> or similar
tools to statically build modules using CodeMirror. Alternatively,
use <a href="http://requirejs.org/">RequireJS</a> to dynamically
load dependencies at runtime. Both of these approaches have the
advantage that they don't use the global namespace and can, thus,
do things like load multiple versions of CodeMirror alongside each
other.</p>
<p>Here's a simple example of using RequireJS to load CodeMirror:</p>
<pre data-lang="javascript">require([
"cm/lib/codemirror", "cm/mode/htmlmixed/htmlmixed"
], function(CodeMirror) {
CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
mode: "htmlmixed"
});
});</pre>
<p>It will automatically load the modes that the mixed HTML mode
depends on (XML, JavaScript, and CSS).</p>
</section>
<section id=config>
<h2>Configuration</h2>
<p>Both the <a href="#CodeMirror"><code>CodeMirror</code></a>
function and its <code>fromTextArea</code> method take as second
(optional) argument an object containing configuration options.
Any option not supplied like this will be taken
from <a href="#defaults"><code>CodeMirror.defaults</code></a>, an
object containing the default options. You can update this object
to change the defaults on your page.</p>
<p>Options are not checked in any way, so setting bogus option
values is bound to lead to odd errors.</p>
<p>These are the supported options:</p>
<dl>
<dt id="option_value"><code><strong>value</strong>: string|CodeMirror.Doc</code></dt>
<dd>The starting value of the editor. Can be a string, or
a <a href="#api_doc">document object</a>.</dd>
<dt id="option_mode"><code><strong>mode</strong>: string|object</code></dt>
<dd>The mode to use. When not given, this will default to the
first mode that was loaded. It may be a string, which either
simply names the mode or is
a <a href="http://en.wikipedia.org/wiki/MIME">MIME</a> type
associated with the mode. Alternatively, it may be an object
containing configuration options for the mode, with
a <code>name</code> property that names the mode (for
example <code>{name: "javascript", json: true}</code>). The demo
pages for each mode contain information about what configuration
parameters the mode supports. You can ask CodeMirror which modes
and MIME types have been defined by inspecting
the <code>CodeMirror.modes</code>
and <code>CodeMirror.mimeModes</code> objects. The first maps
mode names to their constructors, and the second maps MIME types
to mode specs.</dd>
<dt id="option_theme"><code><strong>theme</strong>: string</code></dt>
<dd>The theme to style the editor with. You must make sure the
CSS file defining the corresponding <code>.cm-s-[name]</code>
styles is loaded (see
the <a href="../theme/"><code>theme</code></a> directory in the
distribution). The default is <code>"default"</code>, for which
colors are included in <code>codemirror.css</code>. It is
possible to use multiple theming classes at once—for
example <code>"foo bar"</code> will assign both
the <code>cm-s-foo</code> and the <code>cm-s-bar</code> classes
to the editor.</dd>
<dt id="option_indentUnit"><code><strong>indentUnit</strong>: integer</code></dt>
<dd>How many spaces a block (whatever that means in the edited
language) should be indented. The default is 2.</dd>
<dt id="option_smartIndent"><code><strong>smartIndent</strong>: boolean</code></dt>
<dd>Whether to use the context-sensitive indentation that the
mode provides (or just indent the same as the line before).
Defaults to true.</dd>
<dt id="option_tabSize"><code><strong>tabSize</strong>: integer</code></dt>
<dd>The width of a tab character. Defaults to 4.</dd>
<dt id="option_indentWithTabs"><code><strong>indentWithTabs</strong>: boolean</code></dt>
<dd>Whether, when indenting, the first N*<code>tabSize</code>
spaces should be replaced by N tabs. Default is false.</dd>
<dt id="option_electricChars"><code><strong>electricChars</strong>: boolean</code></dt>
<dd>Configures whether the editor should re-indent the current
line when a character is typed that might change its proper
indentation (only works if the mode supports indentation).
Default is true.</dd>
<dt id="option_specialChars"><code><strong>specialChars</strong>: RegExp</code></dt>
<dd>A regular expression used to determine which characters
should be replaced by a
special <a href="#option_specialCharPlaceholder">placeholder</a>.
Mostly useful for non-printing special characters. The default
is <code>/[\u0000-\u0019\u00ad\u200b-\u200f\u2028\u2029\ufeff]/</code>.</dd>
<dt id="option_specialCharPlaceholder"><code><strong>specialCharPlaceholder</strong>: function(char) → Element</code></dt>
<dd>A function that, given a special character identified by
the <a href="#option_specialChars"><code>specialChars</code></a>
option, produces a DOM node that is used to represent the
character. By default, a red dot (<span style="color: red">•</span>)
is shown, with a title tooltip to indicate the character code.</dd>
<dt id="option_rtlMoveVisually"><code><strong>rtlMoveVisually</strong>: boolean</code></dt>
<dd>Determines whether horizontal cursor movement through
right-to-left (Arabic, Hebrew) text is visual (pressing the left
arrow moves the cursor left) or logical (pressing the left arrow
moves to the next lower index in the string, which is visually
right in right-to-left text). The default is <code>false</code>
on Windows, and <code>true</code> on other platforms.</dd>
<dt id="option_keyMap"><code><strong>keyMap</strong>: string</code></dt>
<dd>Configures the key map to use. The default
is <code>"default"</code>, which is the only key map defined
in <code>codemirror.js</code> itself. Extra key maps are found in
the <a href="../keymap/"><code>key map</code></a> directory. See
the <a href="#keymaps">section on key maps</a> for more
information.</dd>
<dt id="option_extraKeys"><code><strong>extraKeys</strong>: object</code></dt>
<dd>Can be used to specify extra key bindings for the editor,
alongside the ones defined
by <a href="#option_keyMap"><code>keyMap</code></a>. Should be
either null, or a valid <a href="#keymaps">key map</a> value.</dd>
<dt id="option_lineWrapping"><code><strong>lineWrapping</strong>: boolean</code></dt>
<dd>Whether CodeMirror should scroll or wrap for long lines.
Defaults to <code>false</code> (scroll).</dd>
<dt id="option_lineNumbers"><code><strong>lineNumbers</strong>: boolean</code></dt>
<dd>Whether to show line numbers to the left of the editor.</dd>
<dt id="option_firstLineNumber"><code><strong>firstLineNumber</strong>: integer</code></dt>
<dd>At which number to start counting lines. Default is 1.</dd>
<dt id="option_lineNumberFormatter"><code><strong>lineNumberFormatter</strong>: function(line: integer) → string</code></dt>
<dd>A function used to format line numbers. The function is
passed the line number, and should return a string that will be
shown in the gutter.</dd>
<dt id="option_gutters"><code><strong>gutters</strong>: array<string></code></dt>
<dd>Can be used to add extra gutters (beyond or instead of the
line number gutter). Should be an array of CSS class names, each
of which defines a <code>width</code> (and optionally a
background), and which will be used to draw the background of
the gutters. <em>May</em> include
the <code>CodeMirror-linenumbers</code> class, in order to
explicitly set the position of the line number gutter (it will
default to be to the right of all other gutters). These class
names are the keys passed
to <a href="#setGutterMarker"><code>setGutterMarker</code></a>.</dd>
<dt id="option_fixedGutter"><code><strong>fixedGutter</strong>: boolean</code></dt>
<dd>Determines whether the gutter scrolls along with the content
horizontally (false) or whether it stays fixed during horizontal
scrolling (true, the default).</dd>
<dt id="option_scrollbarStyle"><code><strong>scrollbarStyle</strong>: string</code></dt>
<dd>Chooses a scrollbar implementation. The default
is <code>"native"</code>, showing native scrollbars. The core
library also provides the <code>"null"</code> style, which
completely hides the
scrollbars. <a href="#addon_simplescrollbars">Addons</a> can
implement additional scrollbar models.</dd>
<dt id="option_coverGutterNextToScrollbar"><code><strong>coverGutterNextToScrollbar</strong>: boolean</code></dt>
<dd>When <a href="#option_fixedGutter"><code>fixedGutter</code></a>
is on, and there is a horizontal scrollbar, by default the
gutter will be visible to the left of this scrollbar. If this
option is set to true, it will be covered by an element with
class <code>CodeMirror-gutter-filler</code>.</dd>
<dt id="option_inputStyle"><code><strong>inputStyle</strong>: string</code></dt>
<dd>Selects the way CodeMirror handles input and focus. The core
library defines the <code>"textarea"</code>
and <code>"contenteditable"</code> input models. On mobile
browsers, the default is <code>"contenteditable"</code>. On
desktop browsers, the default is <code>"textarea"</code>.
Support for IME and screen readers is better in
the <code>"contenteditable"</code> model. The intention is to
make it the default on modern desktop browsers in the
future.</dd>
<dt id="option_readOnly"><code><strong>readOnly</strong>: boolean|string</code></dt>
<dd>This disables editing of the editor content by the user. If
the special value <code>"nocursor"</code> is given (instead of
simply <code>true</code>), focusing of the editor is also
disallowed.</dd>
<dt id="option_showCursorWhenSelecting"><code><strong>showCursorWhenSelecting</strong>: boolean</code></dt>
<dd>Whether the cursor should be drawn when a selection is
active. Defaults to false.</dd>
<dt id="option_lineWiseCopyCut"><code><strong>lineWiseCopyCut</strong>: boolean</code></dt>
<dd>When enabled, which is the default, doing copy or cut when
there is no selection will copy or cut the whole lines that have
cursors on them.</dd>
<dt id="option_undoDepth"><code><strong>undoDepth</strong>: integer</code></dt>
<dd>The maximum number of undo levels that the editor stores.
Note that this includes selection change events. Defaults to
200.</dd>
<dt id="option_historyEventDelay"><code><strong>historyEventDelay</strong>: integer</code></dt>
<dd>The period of inactivity (in milliseconds) that will cause a
new history event to be started when typing or deleting.
Defaults to 1250.</dd>
<dt id="option_tabindex"><code><strong>tabindex</strong>: integer</code></dt>
<dd>The <a href="http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex">tab
index</a> to assign to the editor. If not given, no tab index
will be assigned.</dd>
<dt id="option_autofocus"><code><strong>autofocus</strong>: boolean</code></dt>
<dd>Can be used to make CodeMirror focus itself on
initialization. Defaults to off.
When <a href="#fromTextArea"><code>fromTextArea</code></a> is
used, and no explicit value is given for this option, it will be
set to true when either the source textarea is focused, or it
has an <code>autofocus</code> attribute and no other element is
focused.</dd>
</dl>
<p>Below this a few more specialized, low-level options are
listed. These are only useful in very specific situations, you
might want to skip them the first time you read this manual.</p>
<dl>
<dt id="option_dragDrop"><code><strong>dragDrop</strong>: boolean</code></dt>
<dd>Controls whether drag-and-drop is enabled. On by default.</dd>
<dt id="option_cursorBlinkRate"><code><strong>cursorBlinkRate</strong>: number</code></dt>
<dd>Half-period in milliseconds used for cursor blinking. The default blink
rate is 530ms. By setting this to zero, blinking can be disabled. A
negative value hides the cursor entirely.</dd>
<dt id="option_cursorScrollMargin"><code><strong>cursorScrollMargin</strong>: number</code></dt>
<dd>How much extra space to always keep above and below the
cursor when approaching the top or bottom of the visible view in
a scrollable document. Default is 0.</dd>
<dt id="option_cursorHeight"><code><strong>cursorHeight</strong>: number</code></dt>
<dd>Determines the height of the cursor. Default is 1, meaning
it spans the whole height of the line. For some fonts (and by
some tastes) a smaller height (for example <code>0.85</code>),
which causes the cursor to not reach all the way to the bottom
of the line, looks better</dd>
<dt id="option_resetSelectionOnContextMenu"><code><strong>resetSelectionOnContextMenu</strong>: boolean</code></dt>
<dd>Controls whether, when the context menu is opened with a
click outside of the current selection, the cursor is moved to
the point of the click. Defaults to <code>true</code>.</dd>
<dt id="option_workTime"><code id="option_wordkDelay"><strong>workTime</strong>, <strong>workDelay</strong>: number</code></dt>
<dd>Highlighting is done by a pseudo background-thread that will
work for <code>workTime</code> milliseconds, and then use
timeout to sleep for <code>workDelay</code> milliseconds. The
defaults are 200 and 300, you can change these options to make
the highlighting more or less aggressive.</dd>
<dt id="option_pollInterval"><code><strong>pollInterval</strong>: number</code></dt>
<dd>Indicates how quickly CodeMirror should poll its input
textarea for changes (when focused). Most input is captured by
events, but some things, like IME input on some browsers, don't
generate events that allow CodeMirror to properly detect it.
Thus, it polls. Default is 100 milliseconds.</dd>
<dt id="option_flattenSpans"><code><strong>flattenSpans</strong>: boolean</code></dt>
<dd>By default, CodeMirror will combine adjacent tokens into a
single span if they have the same class. This will result in a
simpler DOM tree, and thus perform better. With some kinds of
styling (such as rounded corners), this will change the way the
document looks. You can set this option to false to disable this
behavior.</dd>
<dt id="option_addModeClass"><code><strong>addModeClass</strong>: boolean</code></dt>
<dd>When enabled (off by default), an extra CSS class will be
added to each token, indicating the
(<a href="#innerMode">inner</a>) mode that produced it, prefixed
with <code>"cm-m-"</code>. For example, tokens from the XML mode
will get the <code>cm-m-xml</code> class.</dd>
<dt id="option_maxHighlightLength"><code><strong>maxHighlightLength</strong>: number</code></dt>
<dd>When highlighting long lines, in order to stay responsive,
the editor will give up and simply style the rest of the line as
plain text when it reaches a certain position. The default is
10 000. You can set this to <code>Infinity</code> to turn off
this behavior.</dd>
<dt id="option_viewportMargin"><code><strong>viewportMargin</strong>: integer</code></dt>
<dd>Specifies the amount of lines that are rendered above and
below the part of the document that's currently scrolled into
view. This affects the amount of updates needed when scrolling,
and the amount of work that such an update does. You should
usually leave it at its default, 10. Can be set
to <code>Infinity</code> to make sure the whole document is
always rendered, and thus the browser's text search works on it.
This <em>will</em> have bad effects on performance of big
documents.</dd>
</dl>
</section>
<section id=events>
<h2>Events</h2>
<p>Various CodeMirror-related objects emit events, which allow
client code to react to various situations. Handlers for such
events can be registered with the <a href="#on"><code>on</code></a>
and <a href="#off"><code>off</code></a> methods on the objects
that the event fires on. To fire your own events,
use <code>CodeMirror.signal(target, name, args...)</code>,
where <code>target</code> is a non-DOM-node object.</p>
<p>An editor instance fires the following events.
The <code>instance</code> argument always refers to the editor
itself.</p>
<dl>
<dt id="event_change"><code><strong>"change"</strong> (instance: CodeMirror, changeObj: object)</code></dt>
<dd>Fires every time the content of the editor is changed.
The <code>changeObj</code> is a <code>{from, to, text, removed,
origin}</code> object containing information about the changes
that occurred as second argument. <code>from</code>
and <code>to</code> are the positions (in the pre-change
coordinate system) where the change started and ended (for
example, it might be <code>{ch:0, line:18}</code> if the
position is at the beginning of line #19). <code>text</code> is
an array of strings representing the text that replaced the
changed range (split by line). <code>removed</code> is the text
that used to be between <code>from</code> and <code>to</code>,
which is overwritten by this change.</dd>
<dt id="event_changes"><code><strong>"changes"</strong> (instance: CodeMirror, changes: array<object>)</code></dt>
<dd>Like the <a href="#event_change"><code>"change"</code></a>
event, but batched per <a href="#operation">operation</a>,
passing an array containing all the changes that happened in the
operation.</dd>
<dt id="event_beforeChange"><code><strong>"beforeChange"</strong> (instance: CodeMirror, changeObj: object)</code></dt>
<dd>This event is fired before a change is applied, and its
handler may choose to modify or cancel the change.
The <code>changeObj</code> object
has <code>from</code>, <code>to</code>, and <code>text</code>
properties, as with
the <a href="#event_change"><code>"change"</code></a> event. It
also has a <code>cancel()</code> method, which can be called to
cancel the change, and, <strong>if</strong> the change isn't
coming from an undo or redo event, an <code>update(from, to,
text)</code> method, which may be used to modify the change.
Undo or redo changes can't be modified, because they hold some
metainformation for restoring old marked ranges that is only
valid for that specific change. All three arguments
to <code>update</code> are optional, and can be left off to
leave the existing value for that field
intact. <strong>Note:</strong> you may not do anything from
a <code>"beforeChange"</code> handler that would cause changes
to the document or its visualization. Doing so will, since this
handler is called directly from the bowels of the CodeMirror
implementation, probably cause the editor to become
corrupted.</dd>
<dt id="event_cursorActivity"><code><strong>"cursorActivity"</strong> (instance: CodeMirror)</code></dt>
<dd>Will be fired when the cursor or selection moves, or any
change is made to the editor content.</dd>
<dt id="event_keyHandled"><code><strong>"keyHandled"</strong> (instance: CodeMirror, name: string, event: Event)</code></dt>
<dd>Fired after a key is handled through a
key map. <code>name</code> is the name of the handled key (for
example <code>"Ctrl-X"</code> or <code>"'q'"</code>),
and <code>event</code> is the DOM <code>keydown</code>
or <code>keypress</code> event.</dd>
<dt id="event_inputRead"><code><strong>"inputRead"</strong> (instance: CodeMirror, changeObj: object)</code></dt>
<dd>Fired whenever new input is read from the hidden textarea
(typed or pasted by the user).</dd>
<dt id="event_electricInput"><code><strong>"electrictInput"</strong> (instance: CodeMirror, line: integer)</code></dt>
<dd>Fired if text input matched the
mode's <a href="#option_electricChars">electric</a> patterns,
and this caused the line's indentation to change.</dd>
<dt id="event_beforeSelectionChange"><code><strong>"beforeSelectionChange"</strong> (instance: CodeMirror, obj: {ranges, update})</code></dt>
<dd>This event is fired before the selection is moved. Its
handler may inspect the set of selection ranges, present as an
array of <code>{anchor, head}</code> objects in
the <code>ranges</code> property of the <code>obj</code>
argument, and optionally change them by calling
the <code>update</code> method on this object, passing an array
of ranges in the same format. Handlers for this event have the
same restriction
as <a href="#event_beforeChange"><code>"beforeChange"</code></a>
handlers — they should not do anything to directly update the
state of the editor.</dd>
<dt id="event_viewportChange"><code><strong>"viewportChange"</strong> (instance: CodeMirror, from: number, to: number)</code></dt>
<dd>Fires whenever the <a href="#getViewport">view port</a> of
the editor changes (due to scrolling, editing, or any other
factor). The <code>from</code> and <code>to</code> arguments
give the new start and end of the viewport.</dd>
<dt id="event_swapDoc"><code><strong>"swapDoc"</strong> (instance: CodeMirror, oldDoc: Doc)</code></dt>
<dd>This is signalled when the editor's document is replaced
using the <a href="#swapDoc"><code>swapDoc</code></a>
method.</dd>
<dt id="event_gutterClick"><code><strong>"gutterClick"</strong> (instance: CodeMirror, line: integer, gutter: string, clickEvent: Event)</code></dt>
<dd>Fires when the editor gutter (the line-number area) is
clicked. Will pass the editor instance as first argument, the
(zero-based) number of the line that was clicked as second
argument, the CSS class of the gutter that was clicked as third
argument, and the raw <code>mousedown</code> event object as
fourth argument.</dd>
<dt id="event_gutterContextMenu"><code><strong>"gutterContextMenu"</strong> (instance: CodeMirror, line: integer, gutter: string, contextMenu: Event: Event)</code></dt>
<dd>Fires when the editor gutter (the line-number area)
receives a <code>contextmenu</code> event. Will pass the editor
instance as first argument, the (zero-based) number of the line
that was clicked as second argument, the CSS class of the
gutter that was clicked as third argument, and the raw
<code>contextmenu</code> mouse event object as fourth argument.
You can <code>preventDefault</code> the event, to signal that
CodeMirror should do no further handling.</dd>
<dt id="event_focus"><code><strong>"focus"</strong> (instance: CodeMirror)</code></dt>
<dd>Fires whenever the editor is focused.</dd>
<dt id="event_blur"><code><strong>"blur"</strong> (instance: CodeMirror)</code></dt>
<dd>Fires whenever the editor is unfocused.</dd>
<dt id="event_scroll"><code><strong>"scroll"</strong> (instance: CodeMirror)</code></dt>
<dd>Fires when the editor is scrolled.</dd>
<dt id="event_scrollCursorIntoView"><code><strong>"scrollCursorIntoView"</strong> (instance: CodeMirror, event: Event)</code></dt>
<dd>Fires when the editor tries to scroll its cursor into view.
Can be hooked into to take care of additional scrollable
containers around the editor. When the event object has
its <code>preventDefault</code> method called, CodeMirror will
not itself try to scroll the window.</dd>
<dt id="event_update"><code><strong>"update"</strong> (instance: CodeMirror)</code></dt>
<dd>Will be fired whenever CodeMirror updates its DOM display.</dd>
<dt id="event_renderLine"><code><strong>"renderLine"</strong> (instance: CodeMirror, line: LineHandle, element: Element)</code></dt>
<dd>Fired whenever a line is (re-)rendered to the DOM. Fired
right after the DOM element is built, <em>before</em> it is
added to the document. The handler may mess with the style of
the resulting element, or add event handlers, but
should <em>not</em> try to change the state of the editor.</dd>
<dt id="event_dom"><code><strong>"mousedown"</strong>,
<strong>"dblclick"</strong>, <strong>"contextmenu"</strong>, <strong>"keydown"</strong>, <strong>"keypress"</strong>,
<strong>"keyup"</strong>, <strong>"dragstart"</strong>, <strong>"dragenter"</strong>,
<strong>"dragover"</strong>, <strong>"drop"</strong>
(instance: CodeMirror, event: Event)</code></dt>
<dd>Fired when CodeMirror is handling a DOM event of this type.
You can <code>preventDefault</code> the event, or give it a
truthy <code>codemirrorIgnore</code> property, to signal that
CodeMirror should do no further handling.</dd>
</dl>
<p>Document objects (instances
of <a href="#Doc"><code>CodeMirror.Doc</code></a>) emit the
following events:</p>
<dl>
<dt id="event_doc_change"><code><strong>"change"</strong> (doc: CodeMirror.Doc, changeObj: object)</code></dt>
<dd>Fired whenever a change occurs to the
document. <code>changeObj</code> has a similar type as the
object passed to the
editor's <a href="#event_change"><code>"change"</code></a>
event.</dd>
<dt id="event_doc_beforeChange"><code><strong>"beforeChange"</strong> (doc: CodeMirror.Doc, change: object)</code></dt>
<dd>See the <a href="#event_beforeChange">description of the
same event</a> on editor instances.</dd>
<dt id="event_doc_cursorActivity"><code><strong>"cursorActivity"</strong> (doc: CodeMirror.Doc)</code></dt>
<dd>Fired whenever the cursor or selection in this document
changes.</dd>
<dt id="event_doc_beforeSelectionChange"><code><strong>"beforeSelectionChange"</strong> (doc: CodeMirror.Doc, selection: {head, anchor})</code></dt>
<dd>Equivalent to
the <a href="#event_beforeSelectionChange">event by the same
name</a> as fired on editor instances.</dd>
</dl>
<p>Line handles (as returned by, for
example, <a href="#getLineHandle"><code>getLineHandle</code></a>)
support these events:</p>
<dl>
<dt id="event_delete"><code><strong>"delete"</strong> ()</code></dt>
<dd>Will be fired when the line object is deleted. A line object
is associated with the <em>start</em> of the line. Mostly useful
when you need to find out when your <a href="#setGutterMarker">gutter
markers</a> on a given line are removed.</dd>
<dt id="event_line_change"><code><strong>"change"</strong> (line: LineHandle, changeObj: object)</code></dt>
<dd>Fires when the line's text content is changed in any way
(but the line is not deleted outright). The <code>change</code>
object is similar to the one passed
to <a href="#event_change">change event</a> on the editor
object.</dd>
</dl>
<p>Marked range handles (<code>CodeMirror.TextMarker</code>), as returned
by <a href="#markText"><code>markText</code></a>
and <a href="#setBookmark"><code>setBookmark</code></a>, emit the
following events:</p>
<dl>
<dt id="event_beforeCursorEnter"><code><strong>"beforeCursorEnter"</strong> ()</code></dt>
<dd>Fired when the cursor enters the marked range. From this
event handler, the editor state may be inspected
but <em>not</em> modified, with the exception that the range on
which the event fires may be cleared.</dd>
<dt id="event_clear"><code><strong>"clear"</strong> (from: {line, ch}, to: {line, ch})</code></dt>
<dd>Fired when the range is cleared, either through cursor
movement in combination
with <a href="#mark_clearOnEnter"><code>clearOnEnter</code></a>
or through a call to its <code>clear()</code> method. Will only
be fired once per handle. Note that deleting the range through
text editing does not fire this event, because an undo action
might bring the range back into existence. <code>from</code>
and <code>to</code> give the part of the document that the range
spanned when it was cleared.</dd>
<dt id="event_hide"><code><strong>"hide"</strong> ()</code></dt>
<dd>Fired when the last part of the marker is removed from the
document by editing operations.</dd>
<dt id="event_unhide"><code><strong>"unhide"</strong> ()</code></dt>
<dd>Fired when, after the marker was removed by editing, a undo
operation brought the marker back.</dd>
</dl>
<p>Line widgets (<code>CodeMirror.LineWidget</code>), returned
by <a href="#addLineWidget"><code>addLineWidget</code></a>, fire
these events:</p>
<dl>
<dt id="event_redraw"><code><strong>"redraw"</strong> ()</code></dt>
<dd>Fired whenever the editor re-adds the widget to the DOM.
This will happen once right after the widget is added (if it is
scrolled into view), and then again whenever it is scrolled out
of view and back in again, or when changes to the editor options
or the line the widget is on require the widget to be
redrawn.</dd>
</dl>
</section>
<section id=keymaps>
<h2>Key Maps</h2>
<p>Key maps are ways to associate keys with functionality. A key map
is an object mapping strings that identify the keys to functions
that implement their functionality.</p>
<p>The CodeMirror distributions comes
with <a href="../demo/emacs.html">Emacs</a>, <a href="../demo/vim.html">Vim</a>,
and <a href="../demo/sublime.html">Sublime Text</a>-style keymaps.</p>
<p>Keys are identified either by name or by character.
The <code>CodeMirror.keyNames</code> object defines names for
common keys and associates them with their key codes. Examples of
names defined here are <code>Enter</code>, <code>F5</code>,
and <code>Q</code>. These can be prefixed
with <code>Shift-</code>, <code>Cmd-</code>, <code>Ctrl-</code>,
and <code>Alt-</code> to specify a modifier. So for
example, <code>Shift-Ctrl-Space</code> would be a valid key
identifier.</p>
<p>Common example: map the Tab key to insert spaces instead of a tab
character.</p>
<pre data-lang="javascript">
editor.setOption("extraKeys", {
Tab: function(cm) {
var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
cm.replaceSelection(spaces);
}
});</pre>
<p>Alternatively, a character can be specified directly by
surrounding it in single quotes, for example <code>'$'</code>
or <code>'q'</code>. Due to limitations in the way browsers fire
key events, these may not be prefixed with modifiers.</p>
<p id="normalizeKeyMap">Multi-stroke key bindings can be specified
by separating the key names by spaces in the property name, for
example <code>Ctrl-X Ctrl-V</code>. When a map contains
multi-stoke bindings or keys with modifiers that are not specified
in the default order (<code>Shift-Cmd-Ctrl-Alt</code>), you must
call <code>CodeMirror.normalizeKeyMap</code> on it before it can
be used. This function takes a keymap and modifies it to normalize
modifier order and properly recognize multi-stroke bindings. It
will return the keymap itself.</p>
<p>The <code>CodeMirror.keyMap</code> object associates key maps
with names. User code and key map definitions can assign extra
properties to this object. Anywhere where a key map is expected, a
string can be given, which will be looked up in this object. It
also contains the <code>"default"</code> key map holding the
default bindings.</p>
<p>The values of properties in key maps can be either functions of
a single argument (the CodeMirror instance), strings, or
<code>false</code>. Strings refer
to <a href="#commands">commands</a>, which are described below. If
the property is set to <code>false</code>, CodeMirror leaves
handling of the key up to the browser. A key handler function may
return <code>CodeMirror.Pass</code> to indicate that it has
decided not to handle the key, and other handlers (or the default
behavior) should be given a turn.</p>
<p>Keys mapped to command names that start with the
characters <code>"go"</code> or to functions that have a
truthy <code>motion</code> property (which should be used for
cursor-movement actions) will be fired even when an
extra <code>Shift</code> modifier is present (i.e. <code>"Up":
"goLineUp"</code> matches both up and shift-up). This is used to
easily implement shift-selection.</p>
<p>Key maps can defer to each other by defining
a <code>fallthrough</code> property. This indicates that when a
key is not found in the map itself, one or more other maps should
be searched. It can hold either a single key map or an array of
key maps.</p>
<p>When a key map needs to set something up when it becomes
active, or tear something down when deactivated, it can
contain <code>attach</code> and/or <code>detach</code> properties,
which should hold functions that take the editor instance and the
next or previous keymap. Note that this only works for the
<a href="#option_keyMap">top-level keymap</a>, not for fallthrough
maps or maps added
with <a href="#option_extraKeys"><code>extraKeys</code></a>
or <a href="#addKeyMap"><code>addKeyMap</code></a>.</p>
</section>
<section id=commands>
<h2>Commands</h2>
<p>Commands are parameter-less actions that can be performed on an
editor. Their main use is for key bindings. Commands are defined by
adding properties to the <code>CodeMirror.commands</code> object.
A number of common commands are defined by the library itself,
most of them used by the default key bindings. The value of a
command property must be a function of one argument (an editor
instance).</p>
<p>Some of the commands below are referenced in the default
key map, but not defined by the core library. These are intended to
be defined by user code or addons.</p>
<p>Commands can also be run with
the <a href="#execCommand"><code>execCommand</code></a>
method.</p>
<dl>
<dt class=command id=command_selectAll><code><strong>selectAll</strong></code><span class=keybinding>Ctrl-A (PC), Cmd-A (Mac)</span></dt>
<dd>Select the whole content of the editor.</dd>
<dt class=command id=command_singleSelection><code><strong>singleSelection</strong></code><span class=keybinding>Esc</span></dt>
<dd>When multiple selections are present, this deselects all but
the primary selection.</dd>
<dt class=command id=command_killLine><code><strong>killLine</strong></code><span class=keybinding>Ctrl-K (Mac)</span></dt>
<dd>Emacs-style line killing. Deletes the part of the line after
the cursor. If that consists only of whitespace, the newline at
the end of the line is also deleted.</dd>
<dt class=command id=command_deleteLine><code><strong>deleteLine</strong></code><span class=keybinding>Ctrl-D (PC), Cmd-D (Mac)</span></dt>
<dd>Deletes the whole line under the cursor, including newline at the end.</dd>
<dt class=command id=command_delLineLeft><code><strong>delLineLeft</strong></code></dt>
<dd>Delete the part of the line before the cursor.</dd>
<dt class=command id=command_delWrappedLineLeft><code><strong>delWrappedLineLeft</strong></code><span class=keybinding>Cmd-Backspace (Mac)</span></dt>
<dd>Delete the part of the line from the left side of the visual line the cursor is on to the cursor.</dd>
<dt class=command id=command_delWrappedLineRight><code><strong>delWrappedLineRight</strong></code><span class=keybinding>Cmd-Delete (Mac)</span></dt>
<dd>Delete the part of the line from the cursor to the right side of the visual line the cursor is on.</dd>
<dt class=command id=command_undo><code><strong>undo</strong></code><span class=keybinding>Ctrl-Z (PC), Cmd-Z (Mac)</span></dt>
<dd>Undo the last change.</dd>
<dt class=command id=command_redo><code><strong>redo</strong></code><span class=keybinding>Ctrl-Y (PC), Shift-Cmd-Z (Mac), Cmd-Y (Mac)</span></dt>
<dd>Redo the last undone change.</dd>
<dt class=command id=command_undoSelection><code><strong>undoSelection</strong></code><span class=keybinding>Ctrl-U (PC), Cmd-U (Mac)</span></dt>
<dd>Undo the last change to the selection, or if there are no
selection-only changes at the top of the history, undo the last
change.</dd>
<dt class=command id=command_redoSelection><code><strong>redoSelection</strong></code><span class=keybinding>Alt-U (PC), Shift-Cmd-U (Mac)</span></dt>
<dd>Redo the last change to the selection, or the last text change if
no selection changes remain.</dd>
<dt class=command id=command_goDocStart><code><strong>goDocStart</strong></code><span class=keybinding>Ctrl-Home (PC), Cmd-Up (Mac), Cmd-Home (Mac)</span></dt>
<dd>Move the cursor to the start of the document.</dd>
<dt class=command id=command_goDocEnd><code><strong>goDocEnd</strong></code><span class=keybinding>Ctrl-End (PC), Cmd-End (Mac), Cmd-Down (Mac)</span></dt>
<dd>Move the cursor to the end of the document.</dd>
<dt class=command id=command_goLineStart><code><strong>goLineStart</strong></code><span class=keybinding>Alt-Left (PC), Ctrl-A (Mac)</span></dt>
<dd>Move the cursor to the start of the line.</dd>
<dt class=command id=command_goLineStartSmart><code><strong>goLineStartSmart</strong></code><span class=keybinding>Home</span></dt>
<dd>Move to the start of the text on the line, or if we are
already there, to the actual start of the line (including
whitespace).</dd>
<dt class=command id=command_goLineEnd><code><strong>goLineEnd</strong></code><span class=keybinding>Alt-Right (PC), Ctrl-E (Mac)</span></dt>
<dd>Move the cursor to the end of the line.</dd>
<dt class=command id=command_goLineRight><code><strong>goLineRight</strong></code><span class=keybinding>Cmd-Right (Mac)</span></dt>
<dd>Move the cursor to the right side of the visual line it is on.</dd>
<dt class=command id=command_goLineLeft><code><strong>goLineLeft</strong></code><span class=keybinding>Cmd-Left (Mac)</span></dt>
<dd>Move the cursor to the left side of the visual line it is on. If
this line is wrapped, that may not be the start of the line.</dd>
<dt class=command id=command_goLineLeftSmart><code><strong>goLineLeftSmart</strong></code></dt>
<dd>Move the cursor to the left side of the visual line it is
on. If that takes it to the start of the line, behave
like <a href="#command_goLineStartSmart"><code>goLineStartSmart</code></a>.</dd>
<dt class=command id=command_goLineUp><code><strong>goLineUp</strong></code><span class=keybinding>Up, Ctrl-P (Mac)</span></dt>
<dd>Move the cursor up one line.</dd>
<dt class=command id=command_goLineDown><code><strong>goLineDown</strong></code><span class=keybinding>Down, Ctrl-N (Mac)</span></dt>
<dd>Move down one line.</dd>
<dt class=command id=command_goPageUp><code><strong>goPageUp</strong></code><span class=keybinding>PageUp, Shift-Ctrl-V (Mac)</span></dt>
<dd>Move the cursor up one screen, and scroll up by the same distance.</dd>
<dt class=command id=command_goPageDown><code><strong>goPageDown</strong></code><span class=keybinding>PageDown, Ctrl-V (Mac)</span></dt>
<dd>Move the cursor down one screen, and scroll down by the same distance.</dd>
<dt class=command id=command_goCharLeft><code><strong>goCharLeft</strong></code><span class=keybinding>Left, Ctrl-B (Mac)</span></dt>
<dd>Move the cursor one character left, going to the previous line
when hitting the start of line.</dd>
<dt class=command id=command_goCharRight><code><strong>goCharRight</strong></code><span class=keybinding>Right, Ctrl-F (Mac)</span></dt>
<dd>Move the cursor one character right, going to the next line
when hitting the end of line.</dd>
<dt class=command id=command_goColumnLeft><code><strong>goColumnLeft</strong></code></dt>
<dd>Move the cursor one character left, but don't cross line boundaries.</dd>
<dt class=command id=command_goColumnRight><code><strong>goColumnRight</strong></code></dt>
<dd>Move the cursor one character right, don't cross line boundaries.</dd>
<dt class=command id=command_goWordLeft><code><strong>goWordLeft</strong></code><span class=keybinding>Alt-B (Mac)</span></dt>
<dd>Move the cursor to the start of the previous word.</dd>
<dt class=command id=command_goWordRight><code><strong>goWordRight</strong></code><span class=keybinding>Alt-F (Mac)</span></dt>
<dd>Move the cursor to the end of the next word.</dd>
<dt class=command id=command_goGroupLeft><code><strong>goGroupLeft</strong></code><span class=keybinding>Ctrl-Left (PC), Alt-Left (Mac)</span></dt>
<dd>Move to the left of the group before the cursor. A group is
a stretch of word characters, a stretch of punctuation
characters, a newline, or a stretch of <em>more than one</em>
whitespace character.</dd>
<dt class=command id=command_goGroupRight><code><strong>goGroupRight</strong></code><span class=keybinding>Ctrl-Right (PC), Alt-Right (Mac)</span></dt>
<dd>Move to the right of the group after the cursor
(see <a href="#command_goGroupLeft">above</a>).</dd>
<dt class=command id=command_delCharBefore><code><strong>delCharBefore</strong></code><span class=keybinding>Shift-Backspace, Ctrl-H (Mac)</span></dt>
<dd>Delete the character before the cursor.</dd>
<dt class=command id=command_delCharAfter><code><strong>delCharAfter</strong></code><span class=keybinding>Delete, Ctrl-D (Mac)</span></dt>
<dd>Delete the character after the cursor.</dd>
<dt class=command id=command_delWordBefore><code><strong>delWordBefore</strong></code><span class=keybinding>Alt-Backspace (Mac)</span></dt>
<dd>Delete up to the start of the word before the cursor.</dd>
<dt class=command id=command_delWordAfter><code><strong>delWordAfter</strong></code><span class=keybinding>Alt-D (Mac)</span></dt>
<dd>Delete up to the end of the word after the cursor.</dd>
<dt class=command id=command_delGroupBefore><code><strong>delGroupBefore</strong></code><span class=keybinding>Ctrl-Backspace (PC), Alt-Backspace (Mac)</span></dt>
<dd>Delete to the left of the <a href="#command_goGroupLeft">group</a> before the cursor.</dd>
<dt class=command id=command_delGroupAfter><code><strong>delGroupAfter</strong></code><span class=keybinding>Ctrl-Delete (PC), Ctrl-Alt-Backspace (Mac), Alt-Delete (Mac)</span></dt>
<dd>Delete to the start of the <a href="#command_goGroupLeft">group</a> after the cursor.</dd>
<dt class=command id=command_indentAuto><code><strong>indentAuto</strong></code><span class=keybinding>Shift-Tab</span></dt>
<dd>Auto-indent the current line or selection.</dd>
<dt class=command id=command_indentMore><code><strong>indentMore</strong></code><span class=keybinding>Ctrl-] (PC), Cmd-] (Mac)</span></dt>
<dd>Indent the current line or selection by one <a href="#option_indentUnit">indent unit</a>.</dd>
<dt class=command id=command_indentLess><code><strong>indentLess</strong></code><span class=keybinding>Ctrl-[ (PC), Cmd-[ (Mac)</span></dt>
<dd>Dedent the current line or selection by one <a href="#option_indentUnit">indent unit</a>.</dd>
<dt class=command id=command_insertTab><code><strong>insertTab</strong></code></dt>
<dd>Insert a tab character at the cursor.</dd>
<dt class=command id=command_insertSoftTab><code><strong>insertSoftTab</strong></code></dt>
<dd>Insert the amount of spaces that match the width a tab at
the cursor position would have.</dd>
<dt class=command id=command_defaultTab><code><strong>defaultTab</strong></code><span class=keybinding>Tab</span></dt>
<dd>If something is selected, indent it by
one <a href="#option_indentUnit">indent unit</a>. If nothing is
selected, insert a tab character.</dd>
<dt class=command id=command_transposeChars><code><strong>transposeChars</strong></code><span class=keybinding>Ctrl-T (Mac)</span></dt>
<dd>Swap the characters before and after the cursor.</dd>
<dt class=command id=command_newlineAndIndent><code><strong>newlineAndIndent</strong></code><span class=keybinding>Enter</span></dt>
<dd>Insert a newline and auto-indent the new line.</dd>
<dt class=command id=command_toggleOverwrite><code><strong>toggleOverwrite</strong></code><span class=keybinding>Insert</span></dt>
<dd>Flip the <a href="#toggleOverwrite">overwrite</a> flag.</dd>
<dt class=command id=command_save><code><strong>save</strong></code><span class=keybinding>Ctrl-S (PC), Cmd-S (Mac)</span></dt>
<dd>Not defined by the core library, only referred to in
key maps. Intended to provide an easy way for user code to define
a save command.</dd>
<dt class=command id=command_find><code><strong>find</strong></code><span class=keybinding>Ctrl-F (PC), Cmd-F (Mac)</span></dt>
<dt class=command id=command_findNext><code><strong>findNext</strong></code><span class=keybinding>Ctrl-G (PC), Cmd-G (Mac)</span></dt>
<dt class=command id=command_findPrev><code><strong>findPrev</strong></code><span class=keybinding>Shift-Ctrl-G (PC), Shift-Cmd-G (Mac)</span></dt>
<dt class=command id=command_replace><code><strong>replace</strong></code><span class=keybinding>Shift-Ctrl-F (PC), Cmd-Alt-F (Mac)</span></dt>
<dt class=command id=command_replaceAll><code><strong>replaceAll</strong></code><span class=keybinding>Shift-Ctrl-R (PC), Shift-Cmd-Alt-F (Mac)</span></dt>
<dd>Not defined by the core library, but defined in
the <a href="#addon_search">search addon</a> (or custom client
addons).</dd>
</dl>
</section>
<section id=styling>
<h2>Customized Styling</h2>
<p>Up to a certain extent, CodeMirror's look can be changed by