feat(frontend): editor area scroll shadow styling

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 @@
+import Box from '@mui/material/Box';
 import { useTheme } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
+import EditorAreaDecorations from './EditorAreaDecorations';
 import type EditorStore from './EditorStore';
 import EditorTheme from './EditorTheme';
 
@@ -13,23 +15,40 @@ 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],
+    [editorStore, setScroller],
   );
 
   return (
-    <EditorTheme
-      showLineNumbers={editorStore.showLineNumbers}
-      ref={editorParentRef}
-    />
+    <Box
+      ref={parentRef}
+      position="relative"
+      flexGrow={1}
+      flexShrink={1}
+      overflow="auto"
+    >
+      <EditorTheme
+        showLineNumbers={editorStore.showLineNumbers}
+        ref={editorParentRef}
+      />
+      <EditorAreaDecorations parent={parent} scroller={scroller} />
+    </Box>
   );
 });