diff --git a/packages/docsearch/DocSearch.astro b/packages/docsearch/DocSearch.astro index f50c208dc01..66845b0e734 100644 --- a/packages/docsearch/DocSearch.astro +++ b/packages/docsearch/DocSearch.astro @@ -119,6 +119,21 @@ const docsearchTranslations: DocSearchTranslationProps = { mask-size: 100%; background-color: currentColor; } + .DocSearch-Button-Key:first-child { + margin-right: 0.4em; + } + .DocSearch-Button-Key { + display: inline-block; + font-size: 0.75em; + font-weight: 600; + opacity: 0.8; + border: 1px solid var(--sl-color-gray-4); + border-radius: 0.25rem; + padding: 0.125rem 0.375rem; + background-color: var(--sl-color-gray-6); + color: var(--sl-color-gray-1); + line-height: 1; + } } @@ -136,6 +151,27 @@ const docsearchTranslations: DocSearchTranslationProps = { Object.assign(options, translations); } catch {} docsearch(options); + + const keyboardShortcuts = options.keyboardShortcuts ?? {}; + const slashEnabled = keyboardShortcuts?.['/'] !== false; + const ctrlCmdKEnabled = keyboardShortcuts?.['Ctrl/Cmd+K'] !== false; + + if (slashEnabled && !ctrlCmdKEnabled) { + const styleContainer = document.createElement('style'); + styleContainer.innerHTML = ` + .DocSearch-Button-Keys::before { + content: ''; + width: 1em; + height: 1em; + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 2H7a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5Zm3 15a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10Z'%3E%3C/path%3E%3Cpath d='M15.293 6.707a1 1 0 1 1 1.414 1.414l-8.485 8.486a1 1 0 0 1-1.414-1.415l8.485-8.485Z'%3E%3C/path%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 2H7a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5Zm3 15a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10Z'%3E%3C/path%3E%3Cpath d='M15.293 6.707a1 1 0 1 1 1.414 1.414l-8.485 8.486a1 1 0 0 1-1.414-1.415l8.485-8.485Z'%3E%3C/path%3E%3C/svg%3E"); + -webkit-mask-size: 100%; + mask-size: 100%; + background-color: currentColor; + } + `; + document.head.appendChild(styleContainer); + } }); } } diff --git a/packages/docsearch/index.ts b/packages/docsearch/index.ts index e8cc7e5df26..6c88e076b23 100644 --- a/packages/docsearch/index.ts +++ b/packages/docsearch/index.ts @@ -43,6 +43,18 @@ const DocSearchConfigSchema = z * @see https://www.algolia.com/doc/api-reference/search-api-parameters/ */ searchParameters: z.custom(), + /** + * Configuration for keyboard shortcuts that trigger the DocSearch modal. + * @see https://docsearch.algolia.com/docs/api/#keyboardshortcuts + */ + keyboardShortcuts: z + .object({ + /** Enable/disable Ctrl/Cmd+K shortcut. @default true */ + 'Ctrl/Cmd+K': z.boolean().optional(), + /** Enable/disable / shortcut. @default true */ + '/': z.boolean().optional(), + }) + .optional(), }) .strict() .or(