From 42b7bf33b8151d1d8a9d65a3bdc88b563e362e14 Mon Sep 17 00:00:00 2001
From: shellRaining <shellRaining@gmail.com>
Date: Sat, 29 Jun 2024 00:21:17 +0800
Subject: [PATCH] feat: add new key binding (ctrl-p and ctrl-n) to select
 adjacent search items for mac platform

---
 .../components/VPLocalSearchBox.vue           | 47 ++++++++++++++-----
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/src/client/theme-default/components/VPLocalSearchBox.vue b/src/client/theme-default/components/VPLocalSearchBox.vue
index 15a62efe..e557a0fc 100644
--- a/src/client/theme-default/components/VPLocalSearchBox.vue
+++ b/src/client/theme-default/components/VPLocalSearchBox.vue
@@ -299,26 +299,40 @@ function scrollToSelectedResult() {
   })
 }
 
-onKeyStroke('ArrowUp', (event) => {
-  event.preventDefault()
-  selectedIndex.value--
-  if (selectedIndex.value < 0) {
-    selectedIndex.value = results.value.length - 1
-  }
+function goRelativeItem(offset: number) {
+  const resNum = results.value.length
+  selectedIndex.value = (selectedIndex.value + resNum + (offset % resNum)) % resNum
   disableMouseOver.value = true
   scrollToSelectedResult()
+}
+
+onKeyStroke('ArrowUp', (event) => {
+  event.preventDefault()
+  goRelativeItem(-1)
 })
 
 onKeyStroke('ArrowDown', (event) => {
   event.preventDefault()
-  selectedIndex.value++
-  if (selectedIndex.value >= results.value.length) {
-    selectedIndex.value = 0
-  }
-  disableMouseOver.value = true
-  scrollToSelectedResult()
+  goRelativeItem(1)
 })
 
+const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0
+if (isMac) {
+  onKeyStroke('n', (event) => {
+    if (event.ctrlKey) {
+      event.preventDefault()
+      goRelativeItem(1)
+    }
+  })
+
+  onKeyStroke('p', (event) => {
+    if (event.ctrlKey) {
+      event.preventDefault()
+      goRelativeItem(-1)
+    }
+  })
+}
+
 const router = useRouter()
 
 onKeyStroke('Enter', (e) => {
@@ -540,9 +554,18 @@ function formMarkRegex(terms: Set<string>) {
             <kbd :aria-label="translate('modal.footer.navigateUpKeyAriaLabel')">
               <span class="vpi-arrow-up navigate-icon" />
             </kbd>
+            <span>/</span>
+            <kbd :aria-label="translate('modal.footer.navigateDownKeyAriaLabel')">
+              <span class="navigate-icon">ctrl-p</span>
+            </kbd>
+            <span>and</span>
             <kbd :aria-label="translate('modal.footer.navigateDownKeyAriaLabel')">
               <span class="vpi-arrow-down navigate-icon" />
             </kbd>
+            <span>/</span>
+            <kbd :aria-label="translate('modal.footer.navigateDownKeyAriaLabel')">
+              <span class="navigate-icon">ctrl-n</span>
+            </kbd>
             {{ translate('modal.footer.navigateText') }}
           </span>
           <span>