fix(algolia): properly forward placeholder/translations to DocSearch …

…components (facebook#10799)
weixiabing · Dec 26, 2024 · e8ad392 · e8ad392
1 parent e7a8c9d
commit e8ad392
Show file tree

Hide file tree

Showing 2 changed files with 30 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,
         )}