diff options
Diffstat (limited to 'subprojects/frontend/src/editor/EditorStore.ts')
-rw-r--r-- | subprojects/frontend/src/editor/EditorStore.ts | 44 |
1 files changed, 23 insertions, 21 deletions
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts index 4bad68b3..2ed7f5ce 100644 --- a/subprojects/frontend/src/editor/EditorStore.ts +++ b/subprojects/frontend/src/editor/EditorStore.ts | |||
@@ -3,11 +3,8 @@ import { redo, redoDepth, undo, undoDepth } from '@codemirror/commands'; | |||
3 | import { | 3 | import { |
4 | type Diagnostic, | 4 | type Diagnostic, |
5 | setDiagnostics, | 5 | setDiagnostics, |
6 | closeLintPanel, | ||
7 | openLintPanel, | ||
8 | nextDiagnostic, | 6 | nextDiagnostic, |
9 | } from '@codemirror/lint'; | 7 | } from '@codemirror/lint'; |
10 | import { closeSearchPanel, openSearchPanel } from '@codemirror/search'; | ||
11 | import { | 8 | import { |
12 | type StateCommand, | 9 | type StateCommand, |
13 | StateEffect, | 10 | StateEffect, |
@@ -17,11 +14,13 @@ import { | |||
17 | } from '@codemirror/state'; | 14 | } from '@codemirror/state'; |
18 | import { type Command, EditorView } from '@codemirror/view'; | 15 | import { type Command, EditorView } from '@codemirror/view'; |
19 | import { action, computed, makeObservable, observable } from 'mobx'; | 16 | import { action, computed, makeObservable, observable } from 'mobx'; |
17 | import { nanoid } from 'nanoid'; | ||
20 | 18 | ||
21 | import getLogger from '../utils/getLogger'; | 19 | import getLogger from '../utils/getLogger'; |
22 | import XtextClient from '../xtext/XtextClient'; | 20 | import XtextClient from '../xtext/XtextClient'; |
23 | 21 | ||
24 | import PanelStore from './PanelStore'; | 22 | import LintPanelStore from './LintPanelStore'; |
23 | import SearchPanelStore from './SearchPanelStore'; | ||
25 | import createEditorState from './createEditorState'; | 24 | import createEditorState from './createEditorState'; |
26 | import { type IOccurrence, setOccurrences } from './findOccurrences'; | 25 | import { type IOccurrence, setOccurrences } from './findOccurrences'; |
27 | import { | 26 | import { |
@@ -32,15 +31,17 @@ import { | |||
32 | const log = getLogger('editor.EditorStore'); | 31 | const log = getLogger('editor.EditorStore'); |
33 | 32 | ||
34 | export default class EditorStore { | 33 | export default class EditorStore { |
34 | readonly id: string; | ||
35 | |||
35 | state: EditorState; | 36 | state: EditorState; |
36 | 37 | ||
37 | private readonly client: XtextClient; | 38 | private readonly client: XtextClient; |
38 | 39 | ||
39 | view: EditorView | undefined; | 40 | view: EditorView | undefined; |
40 | 41 | ||
41 | readonly searchPanel: PanelStore; | 42 | readonly searchPanel: SearchPanelStore; |
42 | 43 | ||
43 | readonly lintPanel: PanelStore; | 44 | readonly lintPanel: LintPanelStore; |
44 | 45 | ||
45 | showLineNumbers = false; | 46 | showLineNumbers = false; |
46 | 47 | ||
@@ -51,20 +52,11 @@ export default class EditorStore { | |||
51 | infoCount = 0; | 52 | infoCount = 0; |
52 | 53 | ||
53 | constructor(initialValue: string) { | 54 | constructor(initialValue: string) { |
55 | this.id = nanoid(); | ||
54 | this.state = createEditorState(initialValue, this); | 56 | this.state = createEditorState(initialValue, this); |
55 | this.client = new XtextClient(this); | 57 | this.client = new XtextClient(this); |
56 | this.searchPanel = new PanelStore( | 58 | this.searchPanel = new SearchPanelStore(this); |
57 | 'search', | 59 | this.lintPanel = new LintPanelStore(this); |
58 | openSearchPanel, | ||
59 | closeSearchPanel, | ||
60 | this, | ||
61 | ); | ||
62 | this.lintPanel = new PanelStore( | ||
63 | 'panel-lint', | ||
64 | openLintPanel, | ||
65 | closeLintPanel, | ||
66 | this, | ||
67 | ); | ||
68 | makeObservable(this, { | 60 | makeObservable(this, { |
69 | state: observable.ref, | 61 | state: observable.ref, |
70 | view: observable.ref, | 62 | view: observable.ref, |
@@ -100,11 +92,11 @@ export default class EditorStore { | |||
100 | }); | 92 | }); |
101 | } | 93 | } |
102 | 94 | ||
103 | setEditorParent(editorParent: Element | null): void { | 95 | setEditorParent(editorParent: Element | undefined): void { |
104 | if (this.view !== undefined) { | 96 | if (this.view !== undefined) { |
105 | this.view.destroy(); | 97 | this.view.destroy(); |
106 | } | 98 | } |
107 | if (editorParent === null) { | 99 | if (editorParent === undefined) { |
108 | this.view = undefined; | 100 | this.view = undefined; |
109 | return; | 101 | return; |
110 | } | 102 | } |
@@ -129,9 +121,15 @@ export default class EditorStore { | |||
129 | this.lintPanel.synchronizeStateToView(); | 121 | this.lintPanel.synchronizeStateToView(); |
130 | 122 | ||
131 | // Reported by Lighthouse 8.3.0. | 123 | // Reported by Lighthouse 8.3.0. |
132 | const { contentDOM } = view; | 124 | const { contentDOM, dom: containerDOM } = view; |
133 | contentDOM.removeAttribute('aria-expanded'); | 125 | contentDOM.removeAttribute('aria-expanded'); |
134 | contentDOM.setAttribute('aria-label', 'Code editor'); | 126 | contentDOM.setAttribute('aria-label', 'Code editor'); |
127 | const lineNumbersGutter = containerDOM.querySelector('.cm-lineNumbers'); | ||
128 | if (lineNumbersGutter === null) { | ||
129 | log.error('No line numbers in editor'); | ||
130 | } else { | ||
131 | lineNumbersGutter.id = this.lineNumbersId; | ||
132 | } | ||
135 | 133 | ||
136 | log.info('Editor created'); | 134 | log.info('Editor created'); |
137 | } | 135 | } |
@@ -244,6 +242,10 @@ export default class EditorStore { | |||
244 | log.debug('Redo', this.doStateCommand(redo)); | 242 | log.debug('Redo', this.doStateCommand(redo)); |
245 | } | 243 | } |
246 | 244 | ||
245 | get lineNumbersId(): string { | ||
246 | return `${this.id}-lineNumbers`; | ||
247 | } | ||
248 | |||
247 | toggleLineNumbers(): void { | 249 | toggleLineNumbers(): void { |
248 | this.showLineNumbers = !this.showLineNumbers; | 250 | this.showLineNumbers = !this.showLineNumbers; |
249 | log.debug('Show line numbers', this.showLineNumbers); | 251 | log.debug('Show line numbers', this.showLineNumbers); |