diffdown.com
Diffdown is a real-time collaborative Markdown editor/previewer built on the AT Protocol
diffdown.com
1import { lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine, keymap } from '@codemirror/view';
2export { EditorView } from '@codemirror/view';
3import { EditorState } from '@codemirror/state';
4import { foldGutter, indentOnInput, syntaxHighlighting, defaultHighlightStyle, bracketMatching, foldKeymap } from '@codemirror/language';
5import { history, defaultKeymap, historyKeymap } from '@codemirror/commands';
6import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
7import { closeBrackets, autocompletion, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete';
8import { lintKeymap } from '@codemirror/lint';
9
10// (The superfluous function calls around the list of extensions work
11// around current limitations in tree-shaking software.)
12/**
13This is an extension value that just pulls together a number of
14extensions that you might want in a basic editor. It is meant as a
15convenient helper to quickly set up CodeMirror without installing
16and importing a lot of separate packages.
17
18Specifically, it includes...
19
20 - [the default command bindings](https://codemirror.net/6/docs/ref/#commands.defaultKeymap)
21 - [line numbers](https://codemirror.net/6/docs/ref/#view.lineNumbers)
22 - [special character highlighting](https://codemirror.net/6/docs/ref/#view.highlightSpecialChars)
23 - [the undo history](https://codemirror.net/6/docs/ref/#commands.history)
24 - [a fold gutter](https://codemirror.net/6/docs/ref/#language.foldGutter)
25 - [custom selection drawing](https://codemirror.net/6/docs/ref/#view.drawSelection)
26 - [drop cursor](https://codemirror.net/6/docs/ref/#view.dropCursor)
27 - [multiple selections](https://codemirror.net/6/docs/ref/#state.EditorState^allowMultipleSelections)
28 - [reindentation on input](https://codemirror.net/6/docs/ref/#language.indentOnInput)
29 - [the default highlight style](https://codemirror.net/6/docs/ref/#language.defaultHighlightStyle) (as fallback)
30 - [bracket matching](https://codemirror.net/6/docs/ref/#language.bracketMatching)
31 - [bracket closing](https://codemirror.net/6/docs/ref/#autocomplete.closeBrackets)
32 - [autocompletion](https://codemirror.net/6/docs/ref/#autocomplete.autocompletion)
33 - [rectangular selection](https://codemirror.net/6/docs/ref/#view.rectangularSelection) and [crosshair cursor](https://codemirror.net/6/docs/ref/#view.crosshairCursor)
34 - [active line highlighting](https://codemirror.net/6/docs/ref/#view.highlightActiveLine)
35 - [active line gutter highlighting](https://codemirror.net/6/docs/ref/#view.highlightActiveLineGutter)
36 - [selection match highlighting](https://codemirror.net/6/docs/ref/#search.highlightSelectionMatches)
37 - [search](https://codemirror.net/6/docs/ref/#search.searchKeymap)
38 - [linting](https://codemirror.net/6/docs/ref/#lint.lintKeymap)
39
40(You'll probably want to add some language package to your setup
41too.)
42
43This extension does not allow customization. The idea is that,
44once you decide you want to configure your editor more precisely,
45you take this package's source (which is just a bunch of imports
46and an array literal), copy it into your own code, and adjust it
47as desired.
48*/
49const basicSetup = /*@__PURE__*/(() => [
50 lineNumbers(),
51 highlightActiveLineGutter(),
52 highlightSpecialChars(),
53 history(),
54 foldGutter(),
55 drawSelection(),
56 dropCursor(),
57 EditorState.allowMultipleSelections.of(true),
58 indentOnInput(),
59 syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
60 bracketMatching(),
61 closeBrackets(),
62 autocompletion(),
63 rectangularSelection(),
64 crosshairCursor(),
65 highlightActiveLine(),
66 highlightSelectionMatches(),
67 keymap.of([
68 ...closeBracketsKeymap,
69 ...defaultKeymap,
70 ...searchKeymap,
71 ...historyKeymap,
72 ...foldKeymap,
73 ...completionKeymap,
74 ...lintKeymap
75 ])
76])();
77/**
78A minimal set of extensions to create a functional editor. Only
79includes [the default keymap](https://codemirror.net/6/docs/ref/#commands.defaultKeymap), [undo
80history](https://codemirror.net/6/docs/ref/#commands.history), [special character
81highlighting](https://codemirror.net/6/docs/ref/#view.highlightSpecialChars), [custom selection
82drawing](https://codemirror.net/6/docs/ref/#view.drawSelection), and [default highlight
83style](https://codemirror.net/6/docs/ref/#language.defaultHighlightStyle).
84*/
85const minimalSetup = /*@__PURE__*/(() => [
86 highlightSpecialChars(),
87 history(),
88 drawSelection(),
89 syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
90 keymap.of([
91 ...defaultKeymap,
92 ...historyKeymap,
93 ])
94])();
95
96export { basicSetup, minimalSetup };