diff options
Diffstat (limited to 'subprojects/frontend/src/editor/EditorArea.tsx')
-rw-r--r-- | subprojects/frontend/src/editor/EditorArea.tsx | 14 |
1 files changed, 12 insertions, 2 deletions
diff --git a/subprojects/frontend/src/editor/EditorArea.tsx b/subprojects/frontend/src/editor/EditorArea.tsx index e5712461..915ec657 100644 --- a/subprojects/frontend/src/editor/EditorArea.tsx +++ b/subprojects/frontend/src/editor/EditorArea.tsx | |||
@@ -1,3 +1,4 @@ | |||
1 | import Portal from '@mui/material/Portal'; | ||
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 } from 'react'; |
@@ -5,9 +6,12 @@ import React, { useCallback, useEffect } from 'react'; | |||
5 | import { useRootStore } from '../RootStore'; | 6 | import { useRootStore } from '../RootStore'; |
6 | 7 | ||
7 | import EditorTheme from './EditorTheme'; | 8 | import EditorTheme from './EditorTheme'; |
9 | import SearchToolbar from './SearchToolbar'; | ||
8 | 10 | ||
9 | function EditorArea(): JSX.Element { | 11 | function EditorArea(): JSX.Element { |
10 | const { editorStore } = useRootStore(); | 12 | const { editorStore } = useRootStore(); |
13 | const { searchPanel: searchPanelStore } = editorStore; | ||
14 | const { element: searchPanelContainer } = searchPanelStore; | ||
11 | const { | 15 | const { |
12 | palette: { mode: paletteMode }, | 16 | palette: { mode: paletteMode }, |
13 | } = useTheme(); | 17 | } = useTheme(); |
@@ -19,7 +23,7 @@ function EditorArea(): JSX.Element { | |||
19 | 23 | ||
20 | const editorParentRef = useCallback( | 24 | const editorParentRef = useCallback( |
21 | (editorParent: HTMLDivElement | null) => { | 25 | (editorParent: HTMLDivElement | null) => { |
22 | editorStore.setEditorParent(editorParent); | 26 | editorStore.setEditorParent(editorParent ?? undefined); |
23 | }, | 27 | }, |
24 | [editorStore], | 28 | [editorStore], |
25 | ); | 29 | ); |
@@ -28,7 +32,13 @@ function EditorArea(): JSX.Element { | |||
28 | <EditorTheme | 32 | <EditorTheme |
29 | showLineNumbers={editorStore.showLineNumbers} | 33 | showLineNumbers={editorStore.showLineNumbers} |
30 | ref={editorParentRef} | 34 | ref={editorParentRef} |
31 | /> | 35 | > |
36 | {searchPanelContainer !== undefined && ( | ||
37 | <Portal container={searchPanelContainer}> | ||
38 | <SearchToolbar store={searchPanelStore} /> | ||
39 | </Portal> | ||
40 | )} | ||
41 | </EditorTheme> | ||
32 | ); | 42 | ); |
33 | } | 43 | } |
34 | 44 | ||