From 8839970295c38fac1e4116138e2534b196249e56 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Fri, 27 Dec 2024 11:12:23 +0200
Subject: [PATCH] docs: allow scroll with keys (#10752)

---
 .../src/hooks/use-scroll-utils/index.tsx      | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/www/packages/docs-ui/src/hooks/use-scroll-utils/index.tsx b/www/packages/docs-ui/src/hooks/use-scroll-utils/index.tsx
index a3bd4ea514..9b6085dc59 100644
--- a/www/packages/docs-ui/src/hooks/use-scroll-utils/index.tsx
+++ b/www/packages/docs-ui/src/hooks/use-scroll-utils/index.tsx
@@ -20,6 +20,7 @@ import React, {
   useState,
 } from "react"
 import { getScrolledTop as getScrolledTopUtil, isElmWindow } from "../../utils"
+import { useKeyboardShortcut } from "../use-keyboard-shortcut"
 
 type EventFunc = (...args: never[]) => unknown
 
@@ -141,6 +142,52 @@ export function ScrollControllerProvider({
   const value = useScrollControllerContextValue({
     scrollableSelector,
   })
+  useKeyboardShortcut({
+    metakey: false,
+    shortcutKeys: ["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End"],
+    action: (e) => {
+      // check that document or body are focused
+      const activeElement = document.activeElement
+      if (
+        isElmWindow(value.scrollableElement) ||
+        !value.scrollableElement ||
+        (activeElement !== document.body &&
+          activeElement !== document.documentElement)
+      ) {
+        return
+      }
+
+      let newScroll = value.scrollableElement.scrollTop
+      const scrollThreshold = 50
+      const pageScrollAmount =
+        value.scrollableElement.clientHeight - scrollThreshold
+
+      switch (e.key) {
+        case "ArrowUp":
+          newScroll = -scrollThreshold
+          break
+        case "ArrowDown":
+          newScroll = scrollThreshold
+          break
+        case "PageUp":
+          newScroll = -pageScrollAmount
+          break
+        case "PageDown":
+          newScroll = pageScrollAmount
+          break
+        case "Home":
+          newScroll = -newScroll
+          break
+        case "End":
+          newScroll = value.scrollableElement.scrollHeight
+      }
+
+      value.scrollableElement?.scrollBy({
+        top: newScroll,
+        behavior: "smooth",
+      })
+    },
+  })
   return (
     <ScrollMonitorContext.Provider value={value}>
       {children}