diff options
author | Kristóf Marussy <kristof@marussy.com> | 2022-08-16 21:14:50 +0200 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2022-08-16 21:14:50 +0200 |
commit | 19cd11118cde7160cd447c81bc965007c0437479 (patch) | |
tree | 5fea613e7a46d69380995368a68cc72f186078a4 /subprojects/frontend/src/editor/createEditorState.ts | |
parent | chore(deps): bump frontend dependencies (diff) | |
download | refinery-19cd11118cde7160cd447c81bc965007c0437479.tar.gz refinery-19cd11118cde7160cd447c81bc965007c0437479.tar.zst refinery-19cd11118cde7160cd447c81bc965007c0437479.zip |
refactor(frondend): improve editor store and theme
Also bumps frontend dependencies.
Diffstat (limited to 'subprojects/frontend/src/editor/createEditorState.ts')
-rw-r--r-- | subprojects/frontend/src/editor/createEditorState.ts | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/subprojects/frontend/src/editor/createEditorState.ts b/subprojects/frontend/src/editor/createEditorState.ts new file mode 100644 index 00000000..33346c05 --- /dev/null +++ b/subprojects/frontend/src/editor/createEditorState.ts | |||
@@ -0,0 +1,121 @@ | |||
1 | import { | ||
2 | closeBrackets, | ||
3 | closeBracketsKeymap, | ||
4 | autocompletion, | ||
5 | completionKeymap, | ||
6 | } from '@codemirror/autocomplete'; | ||
7 | import { | ||
8 | defaultKeymap, | ||
9 | history, | ||
10 | historyKeymap, | ||
11 | indentWithTab, | ||
12 | } from '@codemirror/commands'; | ||
13 | import { | ||
14 | bracketMatching, | ||
15 | codeFolding, | ||
16 | foldGutter, | ||
17 | foldKeymap, | ||
18 | indentOnInput, | ||
19 | syntaxHighlighting, | ||
20 | } from '@codemirror/language'; | ||
21 | import { lintKeymap, lintGutter } from '@codemirror/lint'; | ||
22 | import { search, searchKeymap } from '@codemirror/search'; | ||
23 | import { EditorState } from '@codemirror/state'; | ||
24 | import { | ||
25 | drawSelection, | ||
26 | highlightActiveLine, | ||
27 | highlightActiveLineGutter, | ||
28 | highlightSpecialChars, | ||
29 | keymap, | ||
30 | lineNumbers, | ||
31 | rectangularSelection, | ||
32 | } from '@codemirror/view'; | ||
33 | import { classHighlighter } from '@lezer/highlight'; | ||
34 | |||
35 | import problemLanguageSupport from '../language/problemLanguageSupport'; | ||
36 | |||
37 | import type EditorStore from './EditorStore'; | ||
38 | import editorClassNames from './editorClassNames'; | ||
39 | import findOccurrences from './findOccurrences'; | ||
40 | import semanticHighlighting from './semanticHighlighting'; | ||
41 | |||
42 | export default function createEditorState( | ||
43 | initialValue: string, | ||
44 | store: EditorStore, | ||
45 | ): EditorState { | ||
46 | return EditorState.create({ | ||
47 | doc: initialValue, | ||
48 | extensions: [ | ||
49 | autocompletion({ | ||
50 | activateOnTyping: true, | ||
51 | override: [(context) => store.contentAssist(context)], | ||
52 | }), | ||
53 | closeBrackets(), | ||
54 | bracketMatching(), | ||
55 | drawSelection(), | ||
56 | EditorState.allowMultipleSelections.of(true), | ||
57 | findOccurrences, | ||
58 | highlightActiveLine(), | ||
59 | highlightActiveLineGutter(), | ||
60 | highlightSpecialChars(), | ||
61 | history(), | ||
62 | indentOnInput(), | ||
63 | rectangularSelection(), | ||
64 | search({ top: true }), | ||
65 | syntaxHighlighting(classHighlighter), | ||
66 | semanticHighlighting, | ||
67 | // We add the gutters to `extensions` in the order we want them to appear. | ||
68 | lintGutter(), | ||
69 | lineNumbers(), | ||
70 | codeFolding({ | ||
71 | placeholderDOM(_view, onClick) { | ||
72 | const button = document.createElement('button'); | ||
73 | button.className = editorClassNames.foldPlaceholder; | ||
74 | button.ariaLabel = 'Unfold lines'; | ||
75 | button.innerText = '...'; | ||
76 | button.onclick = onClick; | ||
77 | return button; | ||
78 | }, | ||
79 | }), | ||
80 | foldGutter({ | ||
81 | markerDOM(open) { | ||
82 | const button = document.createElement('button'); | ||
83 | button.className = [ | ||
84 | editorClassNames.foldMarker, | ||
85 | open | ||
86 | ? editorClassNames.foldMarkerOpen | ||
87 | : editorClassNames.foldMarkerClosed, | ||
88 | ].join(' '); | ||
89 | button.ariaPressed = open ? 'true' : 'false'; | ||
90 | button.ariaLabel = 'Fold lines'; | ||
91 | return button; | ||
92 | }, | ||
93 | }), | ||
94 | keymap.of([ | ||
95 | { key: 'Mod-Shift-f', run: () => store.formatText() }, | ||
96 | ...closeBracketsKeymap, | ||
97 | ...completionKeymap, | ||
98 | ...foldKeymap, | ||
99 | ...historyKeymap, | ||
100 | indentWithTab, | ||
101 | // Override keys in `lintKeymap` to go through the `EditorStore`. | ||
102 | { key: 'Mod-Shift-m', run: () => store.lintPanel.open() }, | ||
103 | ...lintKeymap, | ||
104 | // Override keys in `searchKeymap` to go through the `EditorStore`. | ||
105 | { | ||
106 | key: 'Mod-f', | ||
107 | run: () => store.searchPanel.open(), | ||
108 | scope: 'editor search-panel', | ||
109 | }, | ||
110 | { | ||
111 | key: 'Escape', | ||
112 | run: () => store.searchPanel.close(), | ||
113 | scope: 'editor search-panel', | ||
114 | }, | ||
115 | ...searchKeymap, | ||
116 | ...defaultKeymap, | ||
117 | ]), | ||
118 | problemLanguageSupport(), | ||
119 | ], | ||
120 | }); | ||
121 | } | ||