diff options
Diffstat (limited to 'subprojects/frontend/src/editor/EditorArea.tsx')
-rw-r--r-- | subprojects/frontend/src/editor/EditorArea.tsx | 22 |
1 files changed, 3 insertions, 19 deletions
diff --git a/subprojects/frontend/src/editor/EditorArea.tsx b/subprojects/frontend/src/editor/EditorArea.tsx index e6227672..95f0f92e 100644 --- a/subprojects/frontend/src/editor/EditorArea.tsx +++ b/subprojects/frontend/src/editor/EditorArea.tsx | |||
@@ -1,9 +1,8 @@ | |||
1 | import Box from '@mui/material/Box'; | 1 | import Box from '@mui/material/Box'; |
2 | import { useTheme } from '@mui/material/styles'; | 2 | import { useTheme } from '@mui/material/styles'; |
3 | import { observer } from 'mobx-react-lite'; | 3 | import { observer } from 'mobx-react-lite'; |
4 | import React, { useCallback, useEffect, useState } from 'react'; | 4 | import React, { useCallback, useEffect } from 'react'; |
5 | 5 | ||
6 | import EditorAreaDecorations from './EditorAreaDecorations'; | ||
7 | import type EditorStore from './EditorStore'; | 6 | import type EditorStore from './EditorStore'; |
8 | import EditorTheme from './EditorTheme'; | 7 | import EditorTheme from './EditorTheme'; |
9 | 8 | ||
@@ -15,41 +14,26 @@ export default observer(function EditorArea({ | |||
15 | const { | 14 | const { |
16 | palette: { mode: paletteMode }, | 15 | palette: { mode: paletteMode }, |
17 | } = useTheme(); | 16 | } = useTheme(); |
18 | const [parent, setParent] = useState<HTMLElement | undefined>(); | ||
19 | const [scroller, setScroller] = useState<HTMLElement | undefined>(); | ||
20 | 17 | ||
21 | useEffect( | 18 | useEffect( |
22 | () => editorStore.setDarkMode(paletteMode === 'dark'), | 19 | () => editorStore.setDarkMode(paletteMode === 'dark'), |
23 | [editorStore, paletteMode], | 20 | [editorStore, paletteMode], |
24 | ); | 21 | ); |
25 | 22 | ||
26 | const parentRef = useCallback( | ||
27 | (value: HTMLElement | null) => setParent(value ?? undefined), | ||
28 | [], | ||
29 | ); | ||
30 | |||
31 | const editorParentRef = useCallback( | 23 | const editorParentRef = useCallback( |
32 | (editorParent: HTMLDivElement | null) => { | 24 | (editorParent: HTMLDivElement | null) => { |
33 | editorStore.setEditorParent(editorParent ?? undefined); | 25 | editorStore.setEditorParent(editorParent ?? undefined); |
34 | setScroller(editorStore.view?.scrollDOM); | ||
35 | }, | 26 | }, |
36 | [editorStore, setScroller], | 27 | [editorStore], |
37 | ); | 28 | ); |
38 | 29 | ||
39 | return ( | 30 | return ( |
40 | <Box | 31 | <Box flexGrow={1} flexShrink={1} overflow="auto"> |
41 | ref={parentRef} | ||
42 | position="relative" | ||
43 | flexGrow={1} | ||
44 | flexShrink={1} | ||
45 | overflow="auto" | ||
46 | > | ||
47 | <EditorTheme | 32 | <EditorTheme |
48 | showLineNumbers={editorStore.showLineNumbers} | 33 | showLineNumbers={editorStore.showLineNumbers} |
49 | showActiveLine={!editorStore.hasSelection} | 34 | showActiveLine={!editorStore.hasSelection} |
50 | ref={editorParentRef} | 35 | ref={editorParentRef} |
51 | /> | 36 | /> |
52 | <EditorAreaDecorations parent={parent} scroller={scroller} /> | ||
53 | </Box> | 37 | </Box> |
54 | ); | 38 | ); |
55 | }); | 39 | }); |