List of Core Extensions
This document provides an overview of the extensions and options
available when configuring a
CodeMirror editor.
Editing
Whitespace
tabSize configures the size of a tab (in spaces) in your editor.
lineSeparator can be used to configure a line separator.
indentUnit sets the whitespace to add for one level of indentation.
indentOnInput configures whether some (language-specific) inputs trigger reindentation of the current line.
Read-only
There are two facets controlling whether the editor allow modification of its content. Different combinations of these are appropriate in different circumstances.
editable determines whether the editor view behaves like an editable control (showing a cursor, etc).
readOnly determines whether editing commands can modify the content.
Editing Helpers
allowMultipleSelections can be turned on to allow the selection to have multiple ranges (see also drawSelection, which actually draws these secondary selections).
autocompletion is a set of extensions that enable content hints as the user types (or explicitly queries for completions).
closeBrackets causes matching close brackets to be inserted when the user types an opening bracket.
codeFolding allows the user to collapse (hide) parts of the document. See also foldGutter.
atomicRanges
history provides an undo/redo history.
search configures the search panel.
Presentation
Styling
theme can be used to define a theme (see for example @codemirror/theme-one-dark).
baseTheme defines generic base styling, to be included with extensions that define new UI elements.
styleModule is a primitive that allows you to ensure the editor loads a given CSS module.
editorAttributes adds HTML attributes to the editor's outer DOM element.
contentAttributes adds attributes to the element holding the editor's content.
decorations is a primitive for adding styling to the editor's content, used as a building block in various extensions.
Presentation Features
drawSelection replaces the native selection with a custom-drawn selection in traditional text editor style, with support for multiple selection ranges.
lineWrapping enables line wrapping.
highlightActiveLine adds an extra style to the line with the cursor (see also highlightActiveLineGutter).
highlightSpecialChars replaces non-printable or otherwise confusing characters with a placeholder widget.
scrollPastEnd allows the user to scroll down until the last line is at the top of the viewport.
bracketMatching highlights the bracket that matches the one the cursor is currently on (if any).
highlightSelectionMatches highlights instances of the currently selected text.
placeholder displays a placeholder text when the editor is empty.
phrases allows you to translate the text used in the editor interface.
Gutters
lineNumbers adds a line number gutter to the side of the editor.
foldGutter provides a gutter that shows which lines can be folded and whether they currently are folded.
lintGutter lists lint errors beside the lines in which they occur.
gutters can be used to configure the behavior of the gutters.
highlightActiveLineGutter adds a style to the gutters alongside the line with the cursor on it.
gutter is a primitive for defining custom editor gutters.
Tooltips
tooltips configures the behavior of editor tooltips (such as autocompletion prompts).
hoverTooltip can be used to display a tooltip when the pointer hovers over some parts of the content.
domEventHandlers provides handlers for raw browser events.
dropCursor shows a pseudo-cursor at the current drop point when the user drags content over the editor.
keymap is the facet used to add keymaps to the editor. The core libraries define a number of keymaps: standardKeymap, defaultKeymap, foldKeymap, historyKeymap, searchKeymap, completionKeymap, closeBracketsKeymap, lintKeymap.
inputHandler allows a function to intercept and handle user text input.
mouseSelectionStyle provides a hook to implement custom handling for some types of mouse selection.
dragMovesSelection determines when dragging text in the editor moves (versus copies) it.
clickAddsSelectionRange configures which kind of clicks add a new selection range.
rectangularSelection makes pointer selection with Alt held down select a rectangular region.
crosshairCursor displays the pointer as a cross when Alt is held.
Language
Language-related extensions are usually imported from language-specific packages. For example, @codemirror/lang-javascript exports javascript(), which can be added to a configuration to get JavaScript highlighting and completion.
Language objects are added to a configuration to select the language to use.
Language.data can be used to register language-specific data (such as an autocompletion source).
syntaxHighlighting enables a given code highlighting style.
foldService defines a source of code folding information. Usually best specified through the syntax tree.
indentService defines a source of autoindentation. Again, best provided via the syntax tree.
linter can be used to register a linter, and show the diagnostics it produces in the editor (see also lintGutter).
Primitives
StateFields are added to the editor by including them in its set of extensions.
ViewPlugin instances can be used as extensions, registering their plugin.
exceptionSink is used to route exceptions caught by the editor to your code.
updateListener registers a function that will be called for every update to the editor.
Transactions
The following facets can be used to inspect and alter transactions before they take effect.
changeFilter filters or suppresses document changes.
transactionFilter can modify, extend, or cancel entire transaction.
transactionExtender adds extra metadata or effects to transactions.
Extension Bundles
basicSetup is an array of extensions that enables many of the features listed on this page.
minimalSetup is a much more minimal collection of extensions, containing just the ones that are recommended for every editor.