diff options
Diffstat (limited to 'subprojects/frontend/src/editor')
4 files changed, 43 insertions, 37 deletions
diff --git a/subprojects/frontend/src/editor/EditorParent.ts b/subprojects/frontend/src/editor/EditorParent.ts index 94ca24ea..9aaf541a 100644 --- a/subprojects/frontend/src/editor/EditorParent.ts +++ b/subprojects/frontend/src/editor/EditorParent.ts | |||
@@ -119,48 +119,48 @@ export const EditorParent = styled('div')(({ theme }) => { | |||
119 | borderColor: theme.palette.text.disabled, | 119 | borderColor: theme.palette.text.disabled, |
120 | color: theme.palette.text.secondary, | 120 | color: theme.palette.text.secondary, |
121 | }, | 121 | }, |
122 | '.cmt-comment': { | 122 | '.tok-comment': { |
123 | fontStyle: 'italic', | 123 | fontStyle: 'italic', |
124 | color: theme.palette.text.disabled, | 124 | color: theme.palette.text.disabled, |
125 | }, | 125 | }, |
126 | '.cmt-number': { | 126 | '.tok-number': { |
127 | color: '#6188a6', | 127 | color: '#6188a6', |
128 | }, | 128 | }, |
129 | '.cmt-string': { | 129 | '.tok-string': { |
130 | color: theme.palette.secondary.dark, | 130 | color: theme.palette.secondary.dark, |
131 | }, | 131 | }, |
132 | '.cmt-keyword': { | 132 | '.tok-keyword': { |
133 | color: theme.palette.primary.main, | 133 | color: theme.palette.primary.main, |
134 | }, | 134 | }, |
135 | '.cmt-typeName, .cmt-macroName, .cmt-atom': { | 135 | '.tok-typeName, .tok-macroName, .tok-atom': { |
136 | color: theme.palette.text.primary, | 136 | color: theme.palette.text.primary, |
137 | }, | 137 | }, |
138 | '.cmt-variableName': { | 138 | '.tok-variableName': { |
139 | color: '#c8ae9d', | 139 | color: '#c8ae9d', |
140 | }, | 140 | }, |
141 | '.cmt-problem-node': { | 141 | '.tok-problem-node': { |
142 | '&, & .cmt-variableName': { | 142 | '&, & .tok-variableName': { |
143 | color: theme.palette.text.secondary, | 143 | color: theme.palette.text.secondary, |
144 | }, | 144 | }, |
145 | }, | 145 | }, |
146 | '.cmt-problem-individual': { | 146 | '.tok-problem-individual': { |
147 | '&, & .cmt-variableName': { | 147 | '&, & .tok-variableName': { |
148 | color: theme.palette.text.primary, | 148 | color: theme.palette.text.primary, |
149 | }, | 149 | }, |
150 | }, | 150 | }, |
151 | '.cmt-problem-abstract, .cmt-problem-new': { | 151 | '.tok-problem-abstract, .tok-problem-new': { |
152 | fontStyle: 'italic', | 152 | fontStyle: 'italic', |
153 | }, | 153 | }, |
154 | '.cmt-problem-containment': { | 154 | '.tok-problem-containment': { |
155 | fontWeight: 700, | 155 | fontWeight: 700, |
156 | }, | 156 | }, |
157 | '.cmt-problem-error': { | 157 | '.tok-problem-error': { |
158 | '&, & .cmt-typeName': { | 158 | '&, & .tok-typeName': { |
159 | color: theme.palette.error.main, | 159 | color: theme.palette.error.main, |
160 | }, | 160 | }, |
161 | }, | 161 | }, |
162 | '.cmt-problem-builtin': { | 162 | '.tok-problem-builtin': { |
163 | '&, & .cmt-typeName, & .cmt-atom, & .cmt-variableName': { | 163 | '&, & .tok-typeName, & .tok-atom, & .tok-variableName': { |
164 | color: theme.palette.primary.main, | 164 | color: theme.palette.primary.main, |
165 | fontWeight: 400, | 165 | fontWeight: 400, |
166 | fontStyle: 'normal', | 166 | fontStyle: 'normal', |
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts index 5760de28..0f4d2936 100644 --- a/subprojects/frontend/src/editor/EditorStore.ts +++ b/subprojects/frontend/src/editor/EditorStore.ts | |||
@@ -1,27 +1,32 @@ | |||
1 | import { autocompletion, completionKeymap } from '@codemirror/autocomplete'; | ||
2 | import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets'; | ||
3 | import { defaultKeymap, indentWithTab } from '@codemirror/commands'; | ||
4 | import { commentKeymap } from '@codemirror/comment'; | ||
5 | import { foldGutter, foldKeymap } from '@codemirror/fold'; | ||
6 | import { highlightActiveLineGutter, lineNumbers } from '@codemirror/gutter'; | ||
7 | import { classHighlightStyle } from '@codemirror/highlight'; | ||
8 | import { | 1 | import { |
2 | closeBrackets, | ||
3 | closeBracketsKeymap, | ||
4 | autocompletion, | ||
5 | completionKeymap, | ||
6 | } from '@codemirror/autocomplete'; | ||
7 | import { | ||
8 | defaultKeymap, | ||
9 | history, | 9 | history, |
10 | historyKeymap, | 10 | historyKeymap, |
11 | indentWithTab, | ||
11 | redo, | 12 | redo, |
12 | redoDepth, | 13 | redoDepth, |
13 | undo, | 14 | undo, |
14 | undoDepth, | 15 | undoDepth, |
15 | } from '@codemirror/history'; | 16 | } from '@codemirror/commands'; |
16 | import { indentOnInput } from '@codemirror/language'; | 17 | import { |
18 | bracketMatching, | ||
19 | foldGutter, | ||
20 | foldKeymap, | ||
21 | indentOnInput, | ||
22 | syntaxHighlighting, | ||
23 | } from '@codemirror/language'; | ||
17 | import { | 24 | import { |
18 | Diagnostic, | 25 | Diagnostic, |
19 | lintKeymap, | 26 | lintKeymap, |
20 | setDiagnostics, | 27 | setDiagnostics, |
21 | } from '@codemirror/lint'; | 28 | } from '@codemirror/lint'; |
22 | import { bracketMatching } from '@codemirror/matchbrackets'; | 29 | import { search, searchKeymap } from '@codemirror/search'; |
23 | import { rectangularSelection } from '@codemirror/rectangular-selection'; | ||
24 | import { searchConfig, searchKeymap } from '@codemirror/search'; | ||
25 | import { | 30 | import { |
26 | EditorState, | 31 | EditorState, |
27 | StateCommand, | 32 | StateCommand, |
@@ -33,9 +38,13 @@ import { | |||
33 | drawSelection, | 38 | drawSelection, |
34 | EditorView, | 39 | EditorView, |
35 | highlightActiveLine, | 40 | highlightActiveLine, |
41 | highlightActiveLineGutter, | ||
36 | highlightSpecialChars, | 42 | highlightSpecialChars, |
37 | keymap, | 43 | keymap, |
44 | lineNumbers, | ||
45 | rectangularSelection, | ||
38 | } from '@codemirror/view'; | 46 | } from '@codemirror/view'; |
47 | import { classHighlighter } from '@lezer/highlight'; | ||
39 | import { | 48 | import { |
40 | makeAutoObservable, | 49 | makeAutoObservable, |
41 | observable, | 50 | observable, |
@@ -91,7 +100,6 @@ export class EditorStore { | |||
91 | (context) => this.client.contentAssist(context), | 100 | (context) => this.client.contentAssist(context), |
92 | ], | 101 | ], |
93 | }), | 102 | }), |
94 | classHighlightStyle.extension, | ||
95 | closeBrackets(), | 103 | closeBrackets(), |
96 | bracketMatching(), | 104 | bracketMatching(), |
97 | drawSelection(), | 105 | drawSelection(), |
@@ -106,10 +114,11 @@ export class EditorStore { | |||
106 | history(), | 114 | history(), |
107 | indentOnInput(), | 115 | indentOnInput(), |
108 | rectangularSelection(), | 116 | rectangularSelection(), |
109 | searchConfig({ | 117 | search({ |
110 | top: true, | 118 | top: true, |
111 | matchCase: true, | 119 | caseSensitive: true, |
112 | }), | 120 | }), |
121 | syntaxHighlighting(classHighlighter), | ||
113 | semanticHighlighting, | 122 | semanticHighlighting, |
114 | // We add the gutters to `extensions` in the order we want them to appear. | 123 | // We add the gutters to `extensions` in the order we want them to appear. |
115 | lineNumbers(), | 124 | lineNumbers(), |
@@ -117,7 +126,6 @@ export class EditorStore { | |||
117 | keymap.of([ | 126 | keymap.of([ |
118 | { key: 'Mod-Shift-f', run: () => this.formatText() }, | 127 | { key: 'Mod-Shift-f', run: () => this.formatText() }, |
119 | ...closeBracketsKeymap, | 128 | ...closeBracketsKeymap, |
120 | ...commentKeymap, | ||
121 | ...completionKeymap, | 129 | ...completionKeymap, |
122 | ...foldKeymap, | 130 | ...foldKeymap, |
123 | ...historyKeymap, | 131 | ...historyKeymap, |
diff --git a/subprojects/frontend/src/editor/findOccurrences.ts b/subprojects/frontend/src/editor/findOccurrences.ts index 92102746..c4a4e8ec 100644 --- a/subprojects/frontend/src/editor/findOccurrences.ts +++ b/subprojects/frontend/src/editor/findOccurrences.ts | |||
@@ -1,5 +1,4 @@ | |||
1 | import { Range, RangeSet } from '@codemirror/rangeset'; | 1 | import { Range, RangeSet, type TransactionSpec } from '@codemirror/state'; |
2 | import type { TransactionSpec } from '@codemirror/state'; | ||
3 | import { Decoration } from '@codemirror/view'; | 2 | import { Decoration } from '@codemirror/view'; |
4 | 3 | ||
5 | import { decorationSetExtension } from './decorationSetExtension'; | 4 | import { decorationSetExtension } from './decorationSetExtension'; |
diff --git a/subprojects/frontend/src/editor/semanticHighlighting.ts b/subprojects/frontend/src/editor/semanticHighlighting.ts index 2aed421b..a5d0af7a 100644 --- a/subprojects/frontend/src/editor/semanticHighlighting.ts +++ b/subprojects/frontend/src/editor/semanticHighlighting.ts | |||
@@ -1,5 +1,4 @@ | |||
1 | import { RangeSet } from '@codemirror/rangeset'; | 1 | import { RangeSet, type TransactionSpec } from '@codemirror/state'; |
2 | import type { TransactionSpec } from '@codemirror/state'; | ||
3 | import { Decoration } from '@codemirror/view'; | 2 | import { Decoration } from '@codemirror/view'; |
4 | 3 | ||
5 | import { decorationSetExtension } from './decorationSetExtension'; | 4 | import { decorationSetExtension } from './decorationSetExtension'; |
@@ -16,7 +15,7 @@ const [setSemanticHighlightingInternal, semanticHighlighting] = decorationSetExt | |||
16 | 15 | ||
17 | export function setSemanticHighlighting(ranges: IHighlightRange[]): TransactionSpec { | 16 | export function setSemanticHighlighting(ranges: IHighlightRange[]): TransactionSpec { |
18 | const rangeSet = RangeSet.of(ranges.map(({ from, to, classes }) => Decoration.mark({ | 17 | const rangeSet = RangeSet.of(ranges.map(({ from, to, classes }) => Decoration.mark({ |
19 | class: classes.map((c) => `cmt-problem-${c}`).join(' '), | 18 | class: classes.map((c) => `tok-problem-${c}`).join(' '), |
20 | }).range(from, to)), true); | 19 | }).range(from, to)), true); |
21 | return setSemanticHighlightingInternal(rangeSet); | 20 | return setSemanticHighlightingInternal(rangeSet); |
22 | } | 21 | } |