#535 - retain scroll position

CHANGELOG.md

@@ -22,6 +22,7 @@
 - [#522](https://github.com/estruyf/vscode-front-matter/issues/522): Configuration support added for [Astro](https://astro.build)
 - [#523](https://github.com/estruyf/vscode-front-matter/issues/523): Added support for `floating`/`decimal` numbers with a new number field property called `numberOptions`
 - [#524](https://github.com/estruyf/vscode-front-matter/issues/524): Removed the **Global settings** view from the panel. You can still get it back by configuring a [custom view mode](https://frontmatter.codes/docs/panel#view-modes).
+- [#535](https://github.com/estruyf/vscode-front-matter/issues/535): Retain the scroll position after selecting a media file
 
 ### ⚡️ Optimizations
 

src/panelWebView/ViewPanel.tsx

@@ -13,7 +13,8 @@ import { FeatureFlag } from '../components/features/FeatureFlag';
 import { FEATURE_FLAG } from '../constants/Features';
 import { GitAction } from './components/Git/GitAction';
 import { CustomView } from './components/CustomView';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { usePrevious } from './hooks/usePrevious';
 
 export interface IViewPanelProps { }
 
@@ -31,11 +32,37 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (
     unsetFocus,
     mode
   } = useMessages();
+  const prevMediaSelection = usePrevious(mediaSelecting);
+  const [scrollY, setScrollY] = useState(0);
 
   const allPanelValues = useMemo(() => {
     return Object.values(FEATURE_FLAG.panel).filter(v => v !== FEATURE_FLAG.panel.globalSettings)
   }, [FEATURE_FLAG.panel]);
 
+  const scollListener = useCallback((e: Event) => {
+    if (!mediaSelecting) {
+      setScrollY(window.scrollY);
+    }
+  }, [mediaSelecting]);
+
+  useEffect(() => {
+    if (prevMediaSelection && !mediaSelecting) {
+      setTimeout(() => {
+        window.scrollTo({
+          top: scrollY,
+        })
+      }, 0);
+    }
+  }, [mediaSelecting, prevMediaSelection]);
+
+  useEffect(() => {
+    window.addEventListener('scroll', scollListener, true);
+
+    return () => {
+      window.removeEventListener('scroll', scollListener, true);
+    }
+  }, [mediaSelecting]);
+
   useEffect(() => {
     if (window.fmExternal && window.fmExternal.isDevelopment) {
       setIsDevMode(true);