feat(frontend): overlay scrollbars for editor

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 @@
 import Box from '@mui/material/Box';
 import { useTheme } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect } from 'react';
 
-import EditorAreaDecorations from './EditorAreaDecorations';
 import type EditorStore from './EditorStore';
 import EditorTheme from './EditorTheme';
 
@@ -15,41 +14,26 @@ export default observer(function EditorArea({
   const {
     palette: { mode: paletteMode },
   } = useTheme();
-  const [parent, setParent] = useState<HTMLElement | undefined>();
-  const [scroller, setScroller] = useState<HTMLElement | undefined>();
 
   useEffect(
     () => editorStore.setDarkMode(paletteMode === 'dark'),
     [editorStore, paletteMode],
   );
 
-  const parentRef = useCallback(
-    (value: HTMLElement | null) => setParent(value ?? undefined),
-    [],
-  );
-
   const editorParentRef = useCallback(
     (editorParent: HTMLDivElement | null) => {
       editorStore.setEditorParent(editorParent ?? undefined);
-      setScroller(editorStore.view?.scrollDOM);
     },
-    [editorStore, setScroller],
+    [editorStore],
   );
 
   return (
-    <Box
-      ref={parentRef}
-      position="relative"
-      flexGrow={1}
-      flexShrink={1}
-      overflow="auto"
-    >
+    <Box flexGrow={1} flexShrink={1} overflow="auto">
       <EditorTheme
         showLineNumbers={editorStore.showLineNumbers}
         showActiveLine={!editorStore.hasSelection}
         ref={editorParentRef}
       />
-      <EditorAreaDecorations parent={parent} scroller={scroller} />
     </Box>
   );
 });