diff options
Diffstat (limited to 'subprojects/frontend/src/editor/EditorArea.tsx')
-rw-r--r-- | subprojects/frontend/src/editor/EditorArea.tsx | 41 |
1 files changed, 19 insertions, 22 deletions
diff --git a/subprojects/frontend/src/editor/EditorArea.tsx b/subprojects/frontend/src/editor/EditorArea.tsx index dba20f6e..14294371 100644 --- a/subprojects/frontend/src/editor/EditorArea.tsx +++ b/subprojects/frontend/src/editor/EditorArea.tsx | |||
@@ -1,17 +1,13 @@ | |||
1 | import { Command, EditorView } from '@codemirror/view'; | ||
2 | import { closeSearchPanel, openSearchPanel } from '@codemirror/search'; | ||
3 | import { closeLintPanel, openLintPanel } from '@codemirror/lint'; | 1 | import { closeLintPanel, openLintPanel } from '@codemirror/lint'; |
2 | import { closeSearchPanel, openSearchPanel } from '@codemirror/search'; | ||
3 | import { type Command, EditorView } from '@codemirror/view'; | ||
4 | import { observer } from 'mobx-react-lite'; | 4 | import { observer } from 'mobx-react-lite'; |
5 | import React, { | 5 | import React, { useCallback, useEffect, useRef, useState } from 'react'; |
6 | useCallback, | ||
7 | useEffect, | ||
8 | useRef, | ||
9 | useState, | ||
10 | } from 'react'; | ||
11 | 6 | ||
12 | import { EditorParent } from './EditorParent'; | ||
13 | import { useRootStore } from '../RootStore'; | 7 | import { useRootStore } from '../RootStore'; |
14 | import { getLogger } from '../utils/logger'; | 8 | import getLogger from '../utils/getLogger'; |
9 | |||
10 | import EditorParent from './EditorParent'; | ||
15 | 11 | ||
16 | const log = getLogger('editor.EditorArea'); | 12 | const log = getLogger('editor.EditorArea'); |
17 | 13 | ||
@@ -70,10 +66,12 @@ function fixCodeMirrorAccessibility(editorView: EditorView) { | |||
70 | contentDOM.setAttribute('aria-label', 'Code editor'); | 66 | contentDOM.setAttribute('aria-label', 'Code editor'); |
71 | } | 67 | } |
72 | 68 | ||
73 | export const EditorArea = observer(() => { | 69 | function EditorArea(): JSX.Element { |
74 | const { editorStore } = useRootStore(); | 70 | const { editorStore } = useRootStore(); |
75 | const editorParentRef = useRef<HTMLDivElement | null>(null); | 71 | const editorParentRef = useRef<HTMLDivElement | null>(null); |
76 | const [editorViewState, setEditorViewState] = useState<EditorView | null>(null); | 72 | const [editorViewState, setEditorViewState] = useState<EditorView | null>( |
73 | null, | ||
74 | ); | ||
77 | 75 | ||
78 | const setSearchPanelOpen = usePanel( | 76 | const setSearchPanelOpen = usePanel( |
79 | 'search', | 77 | 'search', |
@@ -131,22 +129,21 @@ export const EditorArea = observer(() => { | |||
131 | editorView.destroy(); | 129 | editorView.destroy(); |
132 | log.info('Editor destroyed'); | 130 | log.info('Editor destroyed'); |
133 | }; | 131 | }; |
134 | }, [ | 132 | }, [editorStore, setSearchPanelOpen, setLintPanelOpen]); |
135 | editorParentRef, | ||
136 | editorStore, | ||
137 | setSearchPanelOpen, | ||
138 | setLintPanelOpen, | ||
139 | ]); | ||
140 | 133 | ||
141 | return ( | 134 | return ( |
142 | <EditorParent | 135 | <EditorParent |
143 | className="dark" | 136 | className="dark" |
144 | sx={{ | 137 | sx={{ |
145 | '.cm-lineNumbers': editorStore.showLineNumbers ? {} : { | 138 | '.cm-lineNumbers': editorStore.showLineNumbers |
146 | display: 'none !important', | 139 | ? {} |
147 | }, | 140 | : { |
141 | display: 'none !important', | ||
142 | }, | ||
148 | }} | 143 | }} |
149 | ref={editorParentRef} | 144 | ref={editorParentRef} |
150 | /> | 145 | /> |
151 | ); | 146 | ); |
152 | }); | 147 | } |
148 | |||
149 | export default observer(EditorArea); | ||