diff options
Diffstat (limited to 'language-web/src/main/js/editor')
-rw-r--r-- | language-web/src/main/js/editor/EditorParent.ts | 28 | ||||
-rw-r--r-- | language-web/src/main/js/editor/EditorStore.ts | 9 | ||||
-rw-r--r-- | language-web/src/main/js/editor/semanticHighlighting.ts | 34 |
3 files changed, 70 insertions, 1 deletions
diff --git a/language-web/src/main/js/editor/EditorParent.ts b/language-web/src/main/js/editor/EditorParent.ts index a19759a4..ea8c13b6 100644 --- a/language-web/src/main/js/editor/EditorParent.ts +++ b/language-web/src/main/js/editor/EditorParent.ts | |||
@@ -133,6 +133,34 @@ export const EditorParent = styled('div')(({ theme }) => { | |||
133 | '.cmt-variableName': { | 133 | '.cmt-variableName': { |
134 | color: '#c8ae9d', | 134 | color: '#c8ae9d', |
135 | }, | 135 | }, |
136 | '.cmt-problem-node': { | ||
137 | '&, & .cmt-variableName': { | ||
138 | color: theme.palette.text.secondary, | ||
139 | }, | ||
140 | }, | ||
141 | '.cmt-problem-unique': { | ||
142 | '&, & .cmt-variableName': { | ||
143 | color: theme.palette.text.primary, | ||
144 | }, | ||
145 | }, | ||
146 | '.cmt-problem-abstract, .cmt-problem-new': { | ||
147 | fontStyle: 'italic', | ||
148 | }, | ||
149 | '.cmt-problem-containment': { | ||
150 | fontWeight: 700, | ||
151 | }, | ||
152 | '.cmt-problem-error': { | ||
153 | '&, & .cmt-typeName': { | ||
154 | color: theme.palette.error.main, | ||
155 | }, | ||
156 | }, | ||
157 | '.cmt-problem-builtin': { | ||
158 | '&, & .cmt-typeName, & .cmt-atom, & .cmt-variableName': { | ||
159 | color: theme.palette.primary.main, | ||
160 | fontWeight: 400, | ||
161 | fontStyle: 'normal', | ||
162 | }, | ||
163 | }, | ||
136 | '.cm-tooltip-autocomplete': { | 164 | '.cm-tooltip-autocomplete': { |
137 | background: theme.palette.background.paper, | 165 | background: theme.palette.background.paper, |
138 | boxShadow: `0px 2px 4px -1px rgb(0 0 0 / 20%), | 166 | boxShadow: `0px 2px 4px -1px rgb(0 0 0 / 20%), |
diff --git a/language-web/src/main/js/editor/EditorStore.ts b/language-web/src/main/js/editor/EditorStore.ts index 78cf763c..f47f47a0 100644 --- a/language-web/src/main/js/editor/EditorStore.ts +++ b/language-web/src/main/js/editor/EditorStore.ts | |||
@@ -30,6 +30,7 @@ import { | |||
30 | TransactionSpec, | 30 | TransactionSpec, |
31 | } from '@codemirror/state'; | 31 | } from '@codemirror/state'; |
32 | import { | 32 | import { |
33 | DecorationSet, | ||
33 | drawSelection, | 34 | drawSelection, |
34 | EditorView, | 35 | EditorView, |
35 | highlightActiveLine, | 36 | highlightActiveLine, |
@@ -43,8 +44,9 @@ import { | |||
43 | } from 'mobx'; | 44 | } from 'mobx'; |
44 | 45 | ||
45 | import { problemLanguageSupport } from '../language/problemLanguageSupport'; | 46 | import { problemLanguageSupport } from '../language/problemLanguageSupport'; |
46 | import { getLogger } from '../utils/logger'; | 47 | import { semanticHighlighting, setSemanticHighlighting } from './semanticHighlighting'; |
47 | import type { ThemeStore } from '../theme/ThemeStore'; | 48 | import type { ThemeStore } from '../theme/ThemeStore'; |
49 | import { getLogger } from '../utils/logger'; | ||
48 | import { XtextClient } from '../xtext/XtextClient'; | 50 | import { XtextClient } from '../xtext/XtextClient'; |
49 | 51 | ||
50 | const log = getLogger('editor.EditorStore'); | 52 | const log = getLogger('editor.EditorStore'); |
@@ -103,6 +105,7 @@ export class EditorStore { | |||
103 | top: true, | 105 | top: true, |
104 | matchCase: true, | 106 | matchCase: true, |
105 | }), | 107 | }), |
108 | semanticHighlighting, | ||
106 | // We add the gutters to `extensions` in the order we want them to appear. | 109 | // We add the gutters to `extensions` in the order we want them to appear. |
107 | foldGutter(), | 110 | foldGutter(), |
108 | lineNumbers(), | 111 | lineNumbers(), |
@@ -201,6 +204,10 @@ export class EditorStore { | |||
201 | return null; | 204 | return null; |
202 | } | 205 | } |
203 | 206 | ||
207 | updateSemanticHighlighting(decorations: DecorationSet): void { | ||
208 | this.dispatch(setSemanticHighlighting(decorations)); | ||
209 | } | ||
210 | |||
204 | /** | 211 | /** |
205 | * @returns `true` if there is history to undo | 212 | * @returns `true` if there is history to undo |
206 | */ | 213 | */ |
diff --git a/language-web/src/main/js/editor/semanticHighlighting.ts b/language-web/src/main/js/editor/semanticHighlighting.ts new file mode 100644 index 00000000..2d6804f8 --- /dev/null +++ b/language-web/src/main/js/editor/semanticHighlighting.ts | |||
@@ -0,0 +1,34 @@ | |||
1 | import { StateEffect, StateField, TransactionSpec } from '@codemirror/state'; | ||
2 | import { EditorView, Decoration, DecorationSet } from '@codemirror/view'; | ||
3 | |||
4 | const setSemanticHighlightingEffect = StateEffect.define<DecorationSet>(); | ||
5 | |||
6 | export function setSemanticHighlighting(decorations: DecorationSet): TransactionSpec { | ||
7 | return { | ||
8 | effects: [ | ||
9 | setSemanticHighlightingEffect.of(decorations), | ||
10 | ], | ||
11 | }; | ||
12 | } | ||
13 | |||
14 | export const semanticHighlighting = StateField.define<DecorationSet>({ | ||
15 | create() { | ||
16 | return Decoration.none; | ||
17 | }, | ||
18 | update(currentDecorations, transaction) { | ||
19 | let newDecorations: DecorationSet | null = null; | ||
20 | transaction.effects.forEach((effect) => { | ||
21 | if (effect.is(setSemanticHighlightingEffect)) { | ||
22 | newDecorations = effect.value; | ||
23 | } | ||
24 | }); | ||
25 | if (newDecorations === null) { | ||
26 | if (transaction.docChanged) { | ||
27 | return currentDecorations.map(transaction.changes); | ||
28 | } | ||
29 | return currentDecorations; | ||
30 | } | ||
31 | return newDecorations; | ||
32 | }, | ||
33 | provide: (f) => EditorView.decorations.from(f), | ||
34 | }); | ||