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

close AF-1011

https://github.com/user-attachments/assets/d2dfeee2-926f-4760-b3fb-8baf5ff90aa9

Author: JimmFly

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';
@@ -33,7 +33,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';
@@ -227,28 +227,36 @@ const DetailPageImpl = memo(function DetailPageImpl() {
         })
       );
 
-      editor.setEditorContainer(editorContainer);
       const unbind = editor.bindEditorContainer(
         editorContainer,
-        (editorContainer as any).docTitle // set from proxy
+        (editorContainer as any).docTitle, // set from proxy
+        scrollViewportRef.current
       );
 
       return () => {
         unbind();
-        editor.setEditorContainer(null);
         disposable.dispose();
       };
     },
     [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 handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+    const scrollTop = e.currentTarget.scrollTop;
+
+    const hasScrollTop = scrollTop > 0;
+    setHasScrollTop(hasScrollTop);
+  }, []);
+
   return (
     <FrameworkScope scope={editor.scope}>
       <ViewHeader>
@@ -265,7 +273,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/desktop/pages/workspace/share/share-page.tsx

@@ -234,11 +234,7 @@ const SharePageInner = ({
       if (!editor) {
         return;
       }
-      editor.setEditorContainer(editorContainer);
-      const unbind = editor.bindEditorContainer(
-        editorContainer,
-        (editorContainer as any).docTitle
-      );
+      const unbind = editor.bindEditorContainer(editorContainer);
 
       const disposable = new DisposableGroup();
       const refNodeSlots =
@@ -263,7 +259,6 @@ const SharePageInner = ({
 
       return () => {
         unbind();
-        editor.setEditorContainer(null);
       };
     },
     [editor, setActiveBlocksuiteEditor, jumpToPageBlock, openPage, workspaceId]

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

@@ -32,7 +32,7 @@ import {
   WorkspaceService,
 } from '@toeverything/infra';
 import clsx from 'clsx';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { PageHeader } from '../../../components';
@@ -67,6 +67,8 @@ const DetailPageImpl = () => {
 
   const isInTrash = useLiveData(doc.meta$.map(meta => meta.trash));
   const { openPage, jumpToPageBlock } = useNavigateHelper();
+  const scrollViewportRef = useRef<HTMLDivElement | null>(null);
+
   const editorContainer = useLiveData(editor.editorContainer$);
 
   const enableKeyboardToolbar =
@@ -157,7 +159,11 @@ const DetailPageImpl = () => {
         );
       }
 
-      editor.setEditorContainer(editorContainer);
+      editor.bindEditorContainer(
+        editorContainer,
+        null,
+        scrollViewportRef.current
+      );
 
       return () => {
         disposable.dispose();
@@ -171,6 +177,7 @@ const DetailPageImpl = () => {
       <div className={styles.mainContainer}>
         <div
           data-mode={mode}
+          ref={scrollViewportRef}
           className={clsx(
             'affine-page-viewport',
             styles.affineDocViewport,

packages/frontend/core/src/modules/editor/entities/editor.ts

@@ -1,8 +1,8 @@
 import type { DefaultOpenProperty } from '@affine/core/components/doc-properties';
-import type {
-  DocMode,
+import {
+  type DocMode,
   EdgelessRootService,
-  ReferenceParams,
+  type ReferenceParams,
 } from '@blocksuite/affine/blocks';
 import type {
   AffineEditorContainer,
@@ -13,6 +13,7 @@ import { effect } from '@preact/signals-core';
 import type { DocService, WorkspaceService } from '@toeverything/infra';
 import { Entity, LiveData } from '@toeverything/infra';
 import { defaults, isEqual, omit } from 'lodash-es';
+import { skip } from 'rxjs';
 
 import { paramsParseOptions, preprocessParams } from '../../navigation/utils';
 import type { WorkbenchView } from '../../workbench';
@@ -34,6 +35,34 @@ export class Editor extends Entity {
   readonly defaultOpenProperty$ = new LiveData<DefaultOpenProperty | undefined>(
     undefined
   );
+  workbenchView: WorkbenchView | null = null;
+  defaultScrollPosition:
+    | number
+    | {
+        centerX: number;
+        centerY: number;
+        zoom: number;
+      }
+    | null = null;
+
+  private readonly focusAt$ = LiveData.computed(get => {
+    const selector = get(this.selector$);
+    const mode = get(this.mode$);
+    let id = selector?.blockIds?.[0];
+    let key = 'blockIds';
+
+    if (mode === 'edgeless') {
+      const elementId = selector?.elementIds?.[0];
+      if (elementId) {
+        id = elementId;
+        key = 'elementIds';
+      }
+    }
+
+    if (!id) return null;
+
+    return { id, key, mode, refreshKey: selector?.refreshKey };
+  });
 
   isPresenting$ = new LiveData<boolean>(false);
 
@@ -61,10 +90,6 @@ export class Editor extends Entity {
     this.mode$.next(mode);
   }
 
-  setEditorContainer(editorContainer: AffineEditorContainer | null) {
-    this.editorContainer$.next(editorContainer);
-  }
-
   setDefaultOpenProperty(defaultOpenProperty: DefaultOpenProperty | undefined) {
     this.defaultOpenProperty$.next(defaultOpenProperty);
   }
@@ -73,6 +98,12 @@ export class Editor extends Entity {
    * sync editor params with view query string
    */
   bindWorkbenchView(view: WorkbenchView) {
+    if (this.workbenchView) {
+      throw new Error('already bound');
+    }
+    this.workbenchView = view;
+    this.defaultScrollPosition = view.getScrollPosition() ?? null;
+
     const stablePrimaryMode = this.doc.getPrimaryMode();
 
     // eslint-disable-next-line rxjs/finnish
@@ -147,49 +178,103 @@ export class Editor extends Entity {
     });
 
     return () => {
+      this.workbenchView = null;
       unsubscribeEditorParams.unsubscribe();
       unsubscribeViewParams.unsubscribe();
     };
   }
 
   bindEditorContainer(
     editorContainer: AffineEditorContainer,
-    docTitle: DocTitle | null
+    docTitle?: DocTitle | null,
+    scrollViewport?: HTMLElement | null
   ) {
+    if (this.editorContainer$.value) {
+      throw new Error('already bound');
+    }
+    this.editorContainer$.next(editorContainer);
     const unsubs: (() => void)[] = [];
 
-    const focusAt$ = LiveData.computed(get => {
-      const selector = get(this.selector$);
-      const mode = get(this.mode$);
-      let id = selector?.blockIds?.[0];
-      let key = 'blockIds';
-
-      if (mode === 'edgeless') {
-        const elementId = selector?.elementIds?.[0];
-        if (elementId) {
-          id = elementId;
-          key = 'elementIds';
-        }
+    const rootService = editorContainer.host?.std.getService('affine:page');
+
+    // ----- Scroll Position and Selection -----
+    if (this.defaultScrollPosition) {
+      // if we have default scroll position, we should restore it
+      if (
+        this.mode$.value === 'page' &&
+        typeof this.defaultScrollPosition === 'number'
+      ) {
+        scrollViewport?.scrollTo(0, this.defaultScrollPosition || 0);
+      } else if (
+        this.mode$.value === 'edgeless' &&
+        typeof this.defaultScrollPosition === 'object' &&
+        rootService instanceof EdgelessRootService
+      ) {
+        rootService.viewport.setViewport(this.defaultScrollPosition.zoom, [
+          this.defaultScrollPosition.centerX,
+          this.defaultScrollPosition.centerY,
+        ]);
       }
 
-      if (!id) return null;
+      this.defaultScrollPosition = null; // reset default scroll position
+    } else {
+      const initialFocusAt = this.focusAt$.value;
+
+      if (initialFocusAt === null) {
+        const title = docTitle?.querySelector<
+          HTMLElement & { inlineEditor: InlineEditor | null }
+        >('rich-text');
+        title?.inlineEditor?.focusEnd();
+      } else {
+        const selection = editorContainer.host?.std.selection;
+
+        const { id, key, mode } = initialFocusAt;
 
-      return { id, key, mode, refreshKey: selector?.refreshKey };
+        if (mode === this.mode$.value) {
+          selection?.setGroup('scene', [
+            selection?.create('highlight', {
+              mode,
+              [key]: [id],
+            }),
+          ]);
+        }
+      }
+    }
+
+    // update scroll position when scrollViewport scroll
+    const saveScrollPosition = () => {
+      if (this.mode$.value === 'page' && scrollViewport) {
+        this.workbenchView?.setScrollPosition(scrollViewport.scrollTop);
+      } else if (
+        this.mode$.value === 'edgeless' &&
+        rootService instanceof EdgelessRootService
+      ) {
+        this.workbenchView?.setScrollPosition({
+          centerX: rootService.viewport.centerX,
+          centerY: rootService.viewport.centerY,
+          zoom: rootService.viewport.zoom,
+        });
+      }
+    };
+    scrollViewport?.addEventListener('scroll', saveScrollPosition);
+    unsubs.push(() => {
+      scrollViewport?.removeEventListener('scroll', saveScrollPosition);
     });
-    if (focusAt$.value === null && docTitle) {
-      const title = docTitle.querySelector<
-        HTMLElement & { inlineEditor: InlineEditor | null }
-      >('rich-text');
-      title?.inlineEditor?.focusEnd();
+    if (rootService instanceof EdgelessRootService) {
+      unsubs.push(
+        rootService.viewport.viewportUpdated.on(saveScrollPosition).dispose
+      );
     }
 
-    const subscription = focusAt$
+    // update selection when focusAt$ changed
+    const subscription = this.focusAt$
       .distinctUntilChanged(
         (a, b) =>
           a?.id === b?.id &&
           a?.key === b?.key &&
           a?.refreshKey === b?.refreshKey
       )
+      .pipe(skip(1))
       .subscribe(anchor => {
         if (!anchor) return;
 
@@ -207,6 +292,7 @@ export class Editor extends Entity {
       });
     unsubs.push(subscription.unsubscribe.bind(subscription));
 
+    // ----- Presenting -----
     const edgelessPage = editorContainer.host?.querySelector(
       'affine-edgeless-root'
     );
@@ -226,6 +312,7 @@ export class Editor extends Entity {
     }
 
     return () => {
+      this.editorContainer$.next(null);
       for (const unsub of unsubs) {
         unsub();
       }

packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx

@@ -108,7 +108,6 @@ function DocPeekPreviewEditor({
         })
       );
 
-      editor.setEditorContainer(editorContainer);
       const unbind = editor.bindEditorContainer(
         editorContainer,
         (editorContainer as any).title
@@ -120,7 +119,6 @@ function DocPeekPreviewEditor({
 
       return () => {
         unbind();
-        editor.setEditorContainer(null);
         disposableGroup.dispose();
       };
     },