feat(core): remember the scroll position of doc when routing forward and backward

packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx

@@ -1,4 +1,4 @@
-import { notify, Scrollable, useHasScrollTop } from '@affine/component';
+import { notify, Scrollable } from '@affine/component';
 import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton';
 import type { ChatPanel } from '@affine/core/blocksuite/presets/ai';
 import { AIProvider } from '@affine/core/blocksuite/presets/ai';
@@ -32,7 +32,7 @@ import {
   WorkspaceService,
 } from '@toeverything/infra';
 import clsx from 'clsx';
-import { memo, useCallback, useEffect, useRef } from 'react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { AffineErrorBoundary } from '../../../../components/affine/affine-error-boundary';
@@ -233,13 +233,39 @@ const DetailPageImpl = memo(function DetailPageImpl() {
     [editor, openPage, docCollection.id, jumpToPageBlock, t]
   );
 
-  const [refCallback, hasScrollTop] = useHasScrollTop();
+  const [hasScrollTop, setHasScrollTop] = useState(false);
 
   const openOutlinePanel = useCallback(() => {
     workbench.openSidebar();
     view.activeSidebarTab('outline');
   }, [workbench, view]);
 
+  const scrollViewportRef = useRef<HTMLDivElement | null>(null);
+  const [scrolled, setScrolled] = useState(false);
+
+  const handleScroll = useCallback(
+    (e: React.UIEvent<HTMLDivElement>) => {
+      const scrollTop = e.currentTarget.scrollTop;
+
+      const hasScrollTop = scrollTop > 0;
+      setHasScrollTop(hasScrollTop);
+      view.setScrollPosition(scrollTop);
+    },
+    [view]
+  );
+
+  useEffect(() => {
+    if (mode === 'page') {
+      setTimeout(() => {
+        scrollViewportRef?.current?.scrollTo(
+          0,
+          view.scrollPositions.get(view.history.location) || 0
+        );
+        setScrolled(true);
+      }, 50);
+    }
+  }, [mode, scrolled, view]);
+
   return (
     <FrameworkScope scope={editor.scope}>
       <ViewHeader>
@@ -256,7 +282,8 @@ const DetailPageImpl = memo(function DetailPageImpl() {
             <TopTip pageId={doc.id} workspace={workspace} />
             <Scrollable.Root>
               <Scrollable.Viewport
-                ref={refCallback}
+                onScroll={handleScroll}
+                ref={scrollViewportRef}
                 className={clsx(
                   'affine-page-viewport',
                   styles.affineDocViewport,

packages/frontend/core/src/modules/workbench/entities/view.ts

@@ -30,6 +30,8 @@ export class View extends Entity<{
 
   sidebarTabs$ = new LiveData<SidebarTab[]>([]);
 
+  scrollPositions = new WeakMap<Location, number>();
+
   // _activeTabId may point to a non-existent tab.
   // In this case, we still retain the activeTabId data and wait for the non-existent tab to be mounted.
   _activeSidebarTabId$ = new LiveData<string | null>(null);
@@ -161,6 +163,14 @@ export class View extends Entity<{
     this._activeSidebarTabId$.next(id);
   }
 
+  getScrollPosition(location: Location): number {
+    return this.scrollPositions.get(location) ?? 0;
+  }
+
+  setScrollPosition(position: number) {
+    this.scrollPositions.set(this.history.location, position);
+  }
+
   setTitle(title: string) {
     this.title$.next(title);
   }

packages/frontend/core/src/modules/workbench/view/browser-adapter.ts

@@ -36,10 +36,6 @@ export function useBindWorkbenchToBrowserRouter(
       if (update.action === 'POP') {
         // This is because the history of view and browser are two different stacks,
         // the POP action cannot be synchronized.
-        throw new Error('POP view history is not allowed on browser');
-      }
-
-      if (update.location.state === 'fromBrowser') {
         return;
       }
 
@@ -48,13 +44,11 @@ export function useBindWorkbenchToBrowserRouter(
         basename
       );
 
-      if (locationIsEqual(browserLocation, newBrowserLocation)) {
-        return;
-      }
-
       navigate(newBrowserLocation, {
-        state: 'fromView',
-        replace: update.action === 'REPLACE',
+        state: 'fromView,' + newBrowserLocation.key,
+        replace:
+          update.action === 'REPLACE' ||
+          newBrowserLocation.state === 'fromBrowser',
       });
     });
   }, [basename, browserLocation, navigate, view]);
@@ -67,7 +61,25 @@ export function useBindWorkbenchToBrowserRouter(
     if (newLocation === null) {
       return;
     }
-
+    if (
+      typeof newLocation.state === 'string' &&
+      newLocation.state.startsWith('fromView')
+    ) {
+      const fromViewKey = newLocation.state.substring('fromView,'.length);
+      if (fromViewKey === view.location$.value.key) {
+        return;
+      } else {
+        const target = view.history.entries.findIndex(
+          entry => entry.key === fromViewKey
+        );
+        if (target !== -1) {
+          const now = view.history.index;
+          const delta = target - now;
+          view.history.go(delta);
+          return;
+        }
+      }
+    }
     view.history.push(newLocation, 'fromBrowser');
   }, [basename, browserLocation, view]);
 }
@@ -94,12 +106,3 @@ function viewLocationToBrowserLocation(
     pathname: `${basename}${location.pathname}`,
   };
 }
-
-function locationIsEqual(a: Location, b: Location) {
-  return (
-    a.hash === b.hash &&
-    a.pathname === b.pathname &&
-    a.search === b.search &&
-    a.state === b.state
-  );
-}