From bdc387b0bcd7f91971c4e1aa27ff09bcd3bf9da3 Mon Sep 17 00:00:00 2001
From: abhijeet nardele
 <234410808+abhijeetnardele24-hash@users.noreply.github.com>
Date: Wed, 1 Jul 2026 00:20:07 +0530
Subject: [PATCH] feat(theme): navigate to next/prev page with arrow keys

Resolves #5221
---
 src/client/theme-default/components/VPDoc.vue | 39 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue
index 4ac18bd9..7d3fa4bf 100644
--- a/src/client/theme-default/components/VPDoc.vue
+++ b/src/client/theme-default/components/VPDoc.vue
@@ -1,19 +1,54 @@
 <script setup lang="ts">
-import { useRoute } from 'vitepress'
-import { computed } from 'vue'
+import { useRoute, useRouter } from 'vitepress'
+import { computed, onMounted, onUnmounted } from 'vue'
 import { useData } from '../composables/data'
 import { useLayout } from '../composables/layout'
+import { usePrevNext } from '../composables/prev-next'
 import VPDocAside from './VPDocAside.vue'
 import VPDocFooter from './VPDocFooter.vue'
 
 const { theme } = useData()
 
 const route = useRoute()
+const router = useRouter()
 const { hasSidebar, hasAside, leftAside } = useLayout()
+const control = usePrevNext()
 
 const pageName = computed(() =>
   route.path.replace(/[./]+/g, '_').replace(/_html$/, '')
 )
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return
+  if (e.defaultPrevented) return
+
+  const activeElement = document.activeElement
+  if (activeElement) {
+    const tagName = activeElement.tagName
+    if (
+      tagName === 'INPUT' ||
+      tagName === 'TEXTAREA' ||
+      tagName === 'SELECT' ||
+      (activeElement as HTMLElement).isContentEditable
+    ) {
+      return
+    }
+  }
+
+  if (e.key === 'ArrowLeft' && control.value.prev?.link) {
+    router.go(control.value.prev.link)
+  } else if (e.key === 'ArrowRight' && control.value.next?.link) {
+    router.go(control.value.next.link)
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', onKeydown)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', onKeydown)
+})
 </script>
 
 <template>