diff --git a/CHANGELOG.md b/CHANGELOG.md index 39fdd304..bab0c4fe 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/panelWebView/ViewPanel.tsx b/src/panelWebView/ViewPanel.tsx index c3d50cd8..c6bd40f6 100644 --- a/src/panelWebView/ViewPanel.tsx +++ b/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 = ( 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);