ReadonlycontentThe editable DOM element holding the editor content. You should not, usually, interact with this content directly though the DOM, since the editor will immediately undo most of the changes you make. Instead, dispatch transactions to modify content, and decorations to style it.
ReadonlydomThe DOM element that wraps the entire editor view.
ReadonlyscrollThe DOM element that can be styled to scroll. (Note that it may not have been, so you can't assume this is scrollable.)
Indicates whether the user is currently composing text via IME, and at least one change has been made in the current composition.
Indicates whether the user is currently in composing state. Note that on some platforms, like Android, this will be the case a lot, since just putting the cursor on a word starts a composition there.
The editor's total content height.
The default width of a character in the editor. May not accurately reflect the width of all characters (given variable width fonts or styling of invididual ranges).
The default height of a line in the editor. May not be accurate for all lines.
Reports the padding above and below the document.
The top position of the document, in screen coordinates. This may be negative when the editor is scrolled down. Points directly to the top of the first line, not above the padding.
Check whether the editor has focus.
Returns false when the editor is entirely scrolled out of view or otherwise hidden.
Whether this editor wraps lines
(as determined by the
white-space
CSS property of its content element).
The document or shadow root that the view lives in.
If the editor is transformed with CSS, this provides the scale along the X axis. Otherwise, it will just be 1. Note that transforms other than translation and scaling are not supported.
Provide the CSS transformed scale along the Y axis.
The current editor state.
The text direction
(direction
CSS property) of the editor's content element.
Get the CSS classes for the currently active editor themes.
To be able to display large documents without consuming too much memory or overloading the browser, CodeMirror only draws the code that is visible (plus a margin around it) to the DOM. This property tells you the extent of the current drawn viewport, in document positions.
Get the extent and vertical position of all line blocks in the viewport. Positions are relative to the top of the document;
When there are, for example, large collapsed ranges in the viewport, its size can be a lot bigger than the actual visible content. Thus, if you are doing something like styling the content in the viewport, it is preferable to only do so for these ranges, which are the subset of the viewport that is actually drawn.
Returns the bidirectional text structure of the given line (which should be in the current document) as an array of span objects. The order of these spans matches the text direction—if that is left-to-right, the leftmost spans come first, otherwise the rightmost spans come first.
Get the screen coordinates at the given document position.
side determines whether the coordinates are based on the
element before (-1) or after (1) the position (if no element is
available on the given side, the method will transparently use
another strategy to get reasonable coordinates).
Optionalside: 1 | -1Return the rectangle around a given character. If pos does not
point in front of a character that is in the viewport and
rendered (i.e. not replaced, not a line break), this will return
null. For space characters that are a line wrap point, this will
return the position before the line break.
Clean up this editor view, removing its element from the document, unregistering event handlers, and notifying plugins. The view instance can no longer be used after calling this.
All regular editor state updates should go through this. It takes a transaction, array of transactions, or transaction spec and updates the view to show the new state produced by that transaction. Its implementation can be overridden with an option. This function is bound to the view instance, so it does not have to be called as a method.
Note that when multiple TransactionSpec arguments are
provided, these define a single transaction (the specs will be
merged), not a sequence of transactions.
All regular editor state updates should go through this. It takes a transaction, array of transactions, or transaction spec and updates the view to show the new state produced by that transaction. Its implementation can be overridden with an option. This function is bound to the view instance, so it does not have to be called as a method.
Note that when multiple TransactionSpec arguments are
provided, these define a single transaction (the specs will be
merged), not a sequence of transactions.
All regular editor state updates should go through this. It takes a transaction, array of transactions, or transaction spec and updates the view to show the new state produced by that transaction. Its implementation can be overridden with an option. This function is bound to the view instance, so it does not have to be called as a method.
Note that when multiple TransactionSpec arguments are
provided, these define a single transaction (the specs will be
merged), not a sequence of transactions.
Find the DOM parent node and offset (child offset if node is
an element, character offset when it is a text node) at the
given document position.
Note that for positions that aren't currently in
visibleRanges, the resulting DOM position isn't necessarily
meaningful (it may just point before or after a placeholder
element).
Optionalside: 1 | -1Find the text line or block widget at the given vertical position (which is interpreted as relative to the top of the document).
Put focus on the editor.
Find the line block around the given document position. A line block is a range delimited on both sides by either a non-hidden line break, or the start/end of the document. It will usually just hold a line of text, but may be broken into multiple textblocks by block widgets.
Find the line block (see
lineBlockAt) at the given
height, again interpreted relative to the top of the
document.
Move a cursor position by grapheme
cluster. forward determines whether
the motion is away from the line start, or towards it. In
bidirectional text, the line is traversed in visual order, using
the editor's text direction.
When the start position was the last one on the line, the
returned position will be across the line break. If there is no
further line, the original position is returned.
By default, this method moves over a single cluster. The
optional by argument can be used to move across more. It will
be called with the first cluster as argument, and should return
a predicate that determines, for each subsequent cluster,
whether it should also be moved over.
Optionalby: (initial: string) => (next: string) => booleanMove a cursor position across the next group of either letters or non-letter non-whitespace characters.
Move to the next line boundary in the given direction. If
includeWrap is true, line wrapping is on, and there is a
further wrap point on the current line, the wrap point will be
returned. Otherwise this function will return the start or end
of the line.
OptionalincludeWrap: booleanMove a cursor position vertically. When distance isn't given,
it defaults to moving to the next line (including wrapped
lines). Otherwise, distance should provide a positive distance
in pixels.
When start has a
goalColumn, the vertical
motion will use that as a target horizontal position. Otherwise,
the cursor's own horizontal position is used. The returned
cursor will have its goal column set to whichever column was
used.
Optionaldistance: numberGet the value of a specific plugin, if present. Note that plugins that crash can be dropped from a view, so even when you know you registered a given plugin, it is recommended to check the return value of this method.
Like posAtCoords, but also
returns which side of the position the coordinates are closest
to. For example, for coordinates on the left side of a
left-to-right character, the position before that letter is
returned, with assoc 1, whereas on the right side, you'd get
the position after the character, with assoc -1.
Like posAtCoords, but also
returns which side of the position the coordinates are closest
to. For example, for coordinates on the left side of a
left-to-right character, the position before that letter is
returned, with assoc 1, whereas on the right side, you'd get
the position after the character, with assoc -1.
Get the document position at the given screen coordinates. For
positions not covered by the visible viewport's DOM structure,
this will return null, unless false is passed as second
argument, in which case it'll return an estimated position that
would be near the coordinates if it were rendered.
Get the document position at the given screen coordinates. For
positions not covered by the visible viewport's DOM structure,
this will return null, unless false is passed as second
argument, in which case it'll return an estimated position that
would be near the coordinates if it were rendered.
Find the document position at the given DOM node. Can be useful
for associating positions with DOM events. Will raise an error
when node isn't part of the editor content.
Optionaloffset: numberSchedule a layout measurement, optionally providing callbacks to do custom DOM measuring followed by a DOM write phase. Using this is preferable reading DOM layout directly from, for example, an event handler, because it'll make sure measuring and drawing done by other components is synchronized, avoiding unnecessary DOM layout computations.
Optionalrequest: MeasureRequest<T>Return an effect that resets the editor to its current (at the
time this method was called) scroll position. Note that this
only affects the editor's own scrollable element, not parents.
See also
EditorViewConfig.scrollTo.
The effect should be used with a document identical to the one it was created for. Failing to do so is not an error, but may not scroll to the expected position. You can map the effect to account for changes.
Update the root in which the editor lives. This is only necessary when moving the editor's existing DOM to a new window or shadow root.
Reset the view to the given state. (This will cause the entire
document to be redrawn and all view plugins to be reinitialized,
so you should probably only use it when the new state isn't
derived from the old state. Otherwise, use
dispatch instead.)
Enable or disable tab-focus mode, which disables key bindings for Tab and Shift-Tab, letting the browser's default focus-changing behavior go through instead. This is useful to prevent trapping keyboard users in your editor.
Without argument, this toggles the mode. With a boolean, it enables (true) or disables it (false). Given a number, it temporarily enables the mode until that number of milliseconds have passed or another non-Tab key is pressed.
Optionalto: number | booleanFind the text direction of the block at the given position, as
assigned by CSS. If
perLineTextDirection
isn't enabled, or the given position is outside of the viewport,
this will always return the same as
textDirection. Note that
this may trigger a DOM layout.
Update the view for the given array of transactions. This will
update the visible document and selection to match the state
produced by the transactions, and notify view plugins of the
change. You should usually call
dispatch instead, which uses this
as a primitive.
Get the cursor position visually at the start or end of a line.
Note that this may differ from the logical position at its
start or end (which is simply at line.from/line.to) if text
at the start or end goes against the line's base text direction.
An editor view represents the editor's user interface. It holds the editable DOM surface, and possibly other elements such as the line number gutter. It handles events and dispatches state transactions for editing actions.