89 lines
3.1 KiB
TypeScript
89 lines
3.1 KiB
TypeScript
import {
|
|
keymap,
|
|
highlightSpecialChars,
|
|
drawSelection,
|
|
highlightActiveLine,
|
|
dropCursor,
|
|
rectangularSelection,
|
|
crosshairCursor,
|
|
highlightActiveLineGutter,
|
|
} from "@codemirror/view";
|
|
import { Extension, EditorState } from "@codemirror/state";
|
|
import {
|
|
defaultHighlightStyle,
|
|
syntaxHighlighting,
|
|
indentOnInput,
|
|
bracketMatching,
|
|
} from "@codemirror/language";
|
|
import { defaultKeymap, historyKeymap, history } from "@codemirror/commands";
|
|
import { highlightSelectionMatches } from "@codemirror/search";
|
|
import {
|
|
autocompletion,
|
|
closeBrackets,
|
|
closeBracketsKeymap,
|
|
} from "@codemirror/autocomplete";
|
|
import { lintKeymap } from "@codemirror/lint";
|
|
|
|
// (The superfluous function calls around the list of extensions work
|
|
// around current limitations in tree-shaking software.)
|
|
|
|
/// This is an extension value that just pulls together a number of
|
|
/// extensions that you might want in a basic editor. It is meant as a
|
|
/// convenient helper to quickly set up CodeMirror without installing
|
|
/// and importing a lot of separate packages.
|
|
///
|
|
/// Specifically, it includes...
|
|
///
|
|
/// - [the default command bindings](#commands.defaultKeymap)
|
|
/// - [line numbers](#view.lineNumbers)
|
|
/// - [special character highlighting](#view.highlightSpecialChars)
|
|
/// - [the undo history](#commands.history)
|
|
/// - [a fold gutter](#language.foldGutter)
|
|
/// - [custom selection drawing](#view.drawSelection)
|
|
/// - [drop cursor](#view.dropCursor)
|
|
/// - [multiple selections](#state.EditorState^allowMultipleSelections)
|
|
/// - [reindentation on input](#language.indentOnInput)
|
|
/// - [the default highlight style](#language.defaultHighlightStyle) (as fallback)
|
|
/// - [bracket matching](#language.bracketMatching)
|
|
/// - [bracket closing](#autocomplete.closeBrackets)
|
|
/// - [autocompletion](#autocomplete.autocompletion)
|
|
/// - [rectangular selection](#view.rectangularSelection) and [crosshair cursor](#view.crosshairCursor)
|
|
/// - [active line highlighting](#view.highlightActiveLine)
|
|
/// - [active line gutter highlighting](#view.highlightActiveLineGutter)
|
|
/// - [selection match highlighting](#search.highlightSelectionMatches)
|
|
/// - [search](#search.searchKeymap)
|
|
/// - [linting](#lint.lintKeymap)
|
|
///
|
|
/// (You'll probably want to add some language package to your setup
|
|
/// too.)
|
|
///
|
|
/// This extension does not allow customization. The idea is that,
|
|
/// once you decide you want to configure your editor more precisely,
|
|
/// you take this package's source (which is just a bunch of imports
|
|
/// and an array literal), copy it into your own code, and adjust it
|
|
/// as desired.
|
|
|
|
export const editorSetup: Extension = (() => [
|
|
highlightActiveLineGutter(),
|
|
highlightSpecialChars(),
|
|
history(),
|
|
drawSelection(),
|
|
dropCursor(),
|
|
EditorState.allowMultipleSelections.of(true),
|
|
indentOnInput(),
|
|
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
|
|
bracketMatching(),
|
|
closeBrackets(),
|
|
autocompletion(),
|
|
rectangularSelection(),
|
|
crosshairCursor(),
|
|
highlightActiveLine(),
|
|
highlightSelectionMatches(),
|
|
keymap.of([
|
|
...closeBracketsKeymap,
|
|
...defaultKeymap,
|
|
...historyKeymap,
|
|
...lintKeymap,
|
|
]),
|
|
])();
|