fix(theme-yun): cmd + k to search when first mounted, completes #567

packages/valaxy-theme-yun/components/YunSearchTrigger.vue

@@ -16,7 +16,7 @@ function togglePopup() {
 
 const algoliaRef = ref()
 onMounted(() => {
-  // algolia has its own hotkey
+  // algolia has its own hotkey handling in YunAlgoliaSearch component
   if (isFuse.value)
     useHotKey('k', togglePopup)
 })

packages/valaxy-theme-yun/components/third/YunAlgoliaSearch.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { isEmptyAddon } from 'valaxy'
 import * as addonAlgolia from 'valaxy-addon-algolia'
+import { onMounted, onUnmounted } from 'vue'
 
 defineProps<{
   open: boolean
@@ -16,6 +17,40 @@ defineExpose({
   load,
   dispatchEvent,
 })
+
+function isEditingContent(event: KeyboardEvent): boolean {
+  const element = event.target as HTMLElement
+  const tagName = element.tagName
+
+  return (
+    element.isContentEditable
+    || tagName === 'INPUT'
+    || tagName === 'SELECT'
+    || tagName === 'TEXTAREA'
+  )
+}
+
+onMounted(() => {
+  const handleSearchHotKey = (event: KeyboardEvent) => {
+    if (
+      (event.key?.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey))
+      || (!isEditingContent(event) && event.key === '/')
+    ) {
+      event.preventDefault()
+      load()
+      // eslint-disable-next-line ts/no-use-before-define
+      remove()
+    }
+  }
+
+  const remove = () => {
+    window.removeEventListener('keydown', handleSearchHotKey)
+  }
+
+  window.addEventListener('keydown', handleSearchHotKey)
+
+  onUnmounted(remove)
+})
 </script>
 
 <template>