feat(docsearch): support initialQuery

Closes #51

src/DocSearch.tsx

@@ -27,11 +27,13 @@ export interface DocSearchProps
   }): JSX.Element | null;
   transformSearchClient?(searchClient: SearchClient): SearchClient;
   disableUserPersonalization?: boolean;
+  initialQuery?: string;
 }
 
 export function DocSearch(props: DocSearchProps) {
-  const [isOpen, setIsOpen] = React.useState(false);
   const searchButtonRef = React.useRef<HTMLButtonElement>(null);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [initialQuery, setInitialQuery] = React.useState(undefined);
 
   const onOpen = React.useCallback(() => {
     setIsOpen(true);
@@ -41,7 +43,18 @@ export function DocSearch(props: DocSearchProps) {
     setIsOpen(false);
   }, [setIsOpen]);
 
-  useDocSearchKeyboardEvents({ isOpen, onOpen, onClose, searchButtonRef });
+  function onInput(event) {
+    setIsOpen(true);
+    setInitialQuery(event.key);
+  }
+
+  useDocSearchKeyboardEvents({
+    isOpen,
+    onOpen,
+    onClose,
+    onInput,
+    searchButtonRef,
+  });
 
   return (
     <>
@@ -52,6 +65,7 @@ export function DocSearch(props: DocSearchProps) {
           <DocSearchModal
             {...props}
             initialScrollY={window.scrollY}
+            initialQuery={initialQuery}
             onClose={onClose}
           />,
           document.body

src/DocSearchModal.tsx

@@ -41,6 +41,7 @@ export function DocSearchModal({
   initialScrollY = 0,
   transformSearchClient = identity,
   disableUserPersonalization = false,
+  initialQuery: initialQueryFromProp = '',
 }: DocSearchModalProps) {
   const [state, setState] = React.useState<
     AutocompleteState<InternalDocSearchHit>
@@ -55,7 +56,7 @@ export function DocSearchModal({
   const inputRef = React.useRef<HTMLInputElement | null>(null);
   const snipetLength = React.useRef<number>(10);
   const initialQuery = React.useRef(
-    typeof window !== 'undefined'
+    initialQueryFromProp || typeof window !== 'undefined'
       ? window.getSelection()!.toString().slice(0, MAX_QUERY_SIZE)
       : ''
   ).current;

src/useDocSearchKeyboardEvents.ts

@@ -1,11 +1,20 @@
 import React from 'react';
 
+interface UseDocSearchKeyboardEventsProps {
+  isOpen: boolean;
+  onOpen(): void;
+  onClose(): void;
+  onInput?(event: KeyboardEvent): void;
+  searchButtonRef?: React.RefObject<HTMLButtonElement>;
+}
+
 export function useDocSearchKeyboardEvents({
   isOpen,
   onOpen,
   onClose,
+  onInput,
   searchButtonRef,
-}) {
+}: UseDocSearchKeyboardEventsProps) {
   React.useEffect(() => {
     function onKeyDown(event: KeyboardEvent) {
       if (
@@ -27,10 +36,11 @@ export function useDocSearchKeyboardEvents({
 
       if (
         searchButtonRef &&
-        searchButtonRef.current === document.activeElement
+        searchButtonRef.current === document.activeElement &&
+        onInput
       ) {
         if (/[a-zA-Z0-9]/.test(String.fromCharCode(event.keyCode))) {
-          onOpen();
+          onInput(event);
         }
       }
     }
@@ -40,5 +50,5 @@ export function useDocSearchKeyboardEvents({
     return () => {
       window.removeEventListener('keydown', onKeyDown);
     };
-  }, [isOpen, onOpen, onClose, searchButtonRef]);
+  }, [isOpen, onOpen, onClose, onInput, searchButtonRef]);
 }