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