properly forward placeholder/translations to DocSearch

facebook · Dec 26, 2024 · ff516c8 · ff516c8
1 parent e7a8c9d
commit ff516c8
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 17 deletions.
diff --git a/packages/docusaurus-theme-search-algolia/src/theme-search-algolia.d.ts b/packages/docusaurus-theme-search-algolia/src/theme-search-algolia.d.ts
@@ -7,23 +7,36 @@
 
 declare module '@docusaurus/theme-search-algolia' {
   import type {DeepPartial} from 'utility-types';
+  import type {DocSearchProps} from '@docsearch/react';
 
-  export type ThemeConfig = {
-    algolia: {
-      contextualSearch: boolean;
-      externalUrlRegex?: string;
-      appId: string;
-      apiKey: string;
-      indexName: string;
-      searchParameters: {[key: string]: unknown};
-      searchPagePath: string | false | null;
-      replaceSearchResultPathname?: {
-        from: string;
-        to: string;
-      };
-      insights?: boolean;
+  // DocSearch props that Docusaurus exposes directly through props forwarding
+  type DocusaurusDocSearchProps = Pick<
+    DocSearchProps,
+    | 'appId'
+    | 'apiKey'
+    | 'indexName'
+    | 'placeholder'
+    | 'translations'
+    | 'searchParameters'
+    | 'insights'
+    | 'initialQuery'
+  >;
+
+  type ThemeConfigAlgolia = DocusaurusDocSearchProps & {
+    // Docusaurus custom options, not coming from DocSearch
+    contextualSearch: boolean;
+    externalUrlRegex?: string;
+    searchPagePath: string | false | null;
+    replaceSearchResultPathname?: {
+      from: string;
+      to: string;
     };
   };
+
+  export type ThemeConfig = DocusaurusDocSearchProps & {
+    algolia: ThemeConfigAlgolia;
+  };
+
   export type UserThemeConfig = DeepPartial<ThemeConfig>;
 }
 

diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.tsx b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.tsx
@@ -242,7 +242,7 @@ function DocSearch({
         onMouseOver={importDocSearchModalIfNeeded}
         onClick={openModal}
         ref={searchButtonRef}
-        translations={translations.button}
+        translations={props.translations?.button ?? translations.button}
       />
 
       {isOpen &&
@@ -260,10 +260,10 @@ function DocSearch({
             {...(props.searchPagePath && {
               resultsFooterComponent,
             })}
+            placeholder={translations.placeholder}
             {...props}
+            translations={props.translations?.modal ?? translations.modal}
             searchParameters={searchParameters}
-            placeholder={translations.placeholder}
-            translations={translations.modal}
           />,
           searchContainer.current,
         )}

diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
@@ -613,6 +613,12 @@ export default async function createConfigAsync() {
         appId: 'X1Z85QJPUV',
         apiKey: 'bf7211c161e8205da2f933a02534105a',
         indexName: 'docusaurus-2',
+        placeholder: 'TEST',
+        translations: {
+          button: {
+            buttonText: 'BUT',
+          },
+        },
         replaceSearchResultPathname:
           isDev || isDeployPreview
             ? {