From bb900e1bd40a6b7efd7a538114d985ea7f7e3e88 Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Wed, 17 Aug 2022 21:43:29 +0200
Subject: feat(frontend): custom search panel

Also improves editor styling (to enable panel styling).
---
 subprojects/frontend/src/editor/EditorArea.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

(limited to 'subprojects/frontend/src/editor/EditorArea.tsx')

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 @@
+import Portal from '@mui/material/Portal';
 import { useTheme } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import React, { useCallback, useEffect } from 'react';
@@ -5,9 +6,12 @@ import React, { useCallback, useEffect } from 'react';
 import { useRootStore } from '../RootStore';
 
 import EditorTheme from './EditorTheme';
+import SearchToolbar from './SearchToolbar';
 
 function EditorArea(): JSX.Element {
   const { editorStore } = useRootStore();
+  const { searchPanel: searchPanelStore } = editorStore;
+  const { element: searchPanelContainer } = searchPanelStore;
   const {
     palette: { mode: paletteMode },
   } = useTheme();
@@ -19,7 +23,7 @@ function EditorArea(): JSX.Element {
 
   const editorParentRef = useCallback(
     (editorParent: HTMLDivElement | null) => {
-      editorStore.setEditorParent(editorParent);
+      editorStore.setEditorParent(editorParent ?? undefined);
     },
     [editorStore],
   );
@@ -28,7 +32,13 @@ function EditorArea(): JSX.Element {
     <EditorTheme
       showLineNumbers={editorStore.showLineNumbers}
       ref={editorParentRef}
-    />
+    >
+      {searchPanelContainer !== undefined && (
+        <Portal container={searchPanelContainer}>
+          <SearchToolbar store={searchPanelStore} />
+        </Portal>
+      )}
+    </EditorTheme>
   );
 }
 
-- 
cgit v1.2.3-54-g00ecf