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

packages/valaxy-addon-algolia/components/AlgoliaSearchBox.vue

@@ -44,35 +44,6 @@ async function update() {
   })
 }
 
-onMounted(() => {
-  const options = {
-    ...algolia.value.options,
-    ...algolia.value.options?.locales?.[locale.value],
-  }
-
-  // now only lang:en
-  // const rawFacetFilters = options.searchParameters?.facetFilters ?? []
-  // const facetFilters = [
-  //   ...(Array.isArray(rawFacetFilters)
-  //     ? rawFacetFilters
-  //     : [rawFacetFilters]
-  //   ).filter(f => !f.startsWith('lang:')),
-  //   `lang:${locale.value}`,
-  // ]
-
-  if (options && options.apiKey && options.appId && options.indexName) {
-    if (!document.querySelector('.DocSearch-Container')) {
-      initialize({
-        ...options as AlgoliaSearchOptions,
-        searchParameters: {
-          ...options.searchParameters,
-          // facetFilters,
-        },
-      })
-    }
-  }
-})
-
 function initialize(userOptions: AlgoliaSearchOptions) {
   // note: multi-lang search support is removed since the theme
   // doesn't support multiple locales as of now.

packages/valaxy-theme-press/components/PressAlgoliaSearch.vue

@@ -1,10 +1,51 @@
 <script lang="ts" setup>
 import { useAddonAlgolia } from 'valaxy-addon-algolia'
+import { onMounted, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 
-const { loaded, load } = useAddonAlgolia()
+const { loaded, load, dispatchEvent } = useAddonAlgolia()
+
+defineExpose({
+  loaded,
+  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>