From 5ca17c155affc8a47d7197c966529f73d5ff416a Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Wed, 27 Mar 2024 04:47:31 +0000
Subject: [PATCH] fix(core): editor pgup/pgdn issues (#6331)

fix https://github.com/toeverything/AFFiNE/issues/6232
---
 .../pages/workspace/detail-page/detail-page.tsx  | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
index 17e81f22cd..93bd3b6a31 100644
--- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
+++ b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
@@ -27,13 +27,14 @@ import {
 } from '@toeverything/infra';
 import clsx from 'clsx';
 import { useSetAtom } from 'jotai';
-import type { ReactElement } from 'react';
+import type { KeyboardEventHandler, ReactElement } from 'react';
 import {
   memo,
   useCallback,
   useEffect,
   useLayoutEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 import { useParams } from 'react-router-dom';
@@ -202,6 +203,17 @@ const DetailPageImpl = memo(function DetailPageImpl() {
   );
 
   const isWindowsDesktop = environment.isDesktop && environment.isWindows;
+  const scrollableRef = useRef<HTMLDivElement>(null);
+  const keydownHandler: KeyboardEventHandler = useCallback(e => {
+    // prevent pgup/pgdown from scrolling the page
+    if (e.key === 'PageUp' || e.key === 'PageDown') {
+      e.preventDefault();
+      scrollableRef.current?.scrollBy({
+        top: e.key === 'PageUp' ? -window.innerHeight : window.innerHeight,
+        behavior: 'smooth',
+      });
+    }
+  }, []);
 
   return (
     <>
@@ -218,6 +230,8 @@ const DetailPageImpl = memo(function DetailPageImpl() {
             <TopTip pageId={currentPageId} workspace={currentWorkspace} />
             <Scrollable.Root>
               <Scrollable.Viewport
+                ref={scrollableRef}
+                onKeyDown={keydownHandler}
                 className={clsx(
                   'affine-page-viewport',
                   styles.affineDocViewport,