[docs] Add option to automatically open spotlight (mantinedev#3825)

* open spotlight when url param `search` is found * [docs] auto open spotlight * [docs] fix test --------- Co-authored-by: Josiah Ayres <josiah@lend.com.au>
milhamm · Mar 21, 2023 · 6aa75e0 · 6aa75e0
1 parent 5c06d0c
commit 6aa75e0
Showing 1 changed file with 24 additions and 2 deletions.
diff --git a/docs/src/components/Layout/LayoutInner.tsx b/docs/src/components/Layout/LayoutInner.tsx
@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { graphql, useStaticQuery, navigate } from 'gatsby';
 import { randomId, useMediaQuery } from '@mantine/hooks';
 import { Notifications } from '@mantine/notifications';
 import { ModalsProvider, ContextModalProps } from '@mantine/modals';
-import { SpotlightProvider, SpotlightAction } from '@mantine/spotlight';
+import { SpotlightProvider, SpotlightAction, useSpotlight } from '@mantine/spotlight';
 import { Text, Button, rem, em } from '@mantine/core';
 import { IconSearch } from '@tabler/icons-react';
 import MdxProvider from '../MdxPage/MdxProvider/MdxProvider';
@@ -92,13 +92,32 @@ function getActions(data: ReturnType<typeof getDocsData>): SpotlightAction[] {
   }, []);
 }
 
+const searchParamName = 'search';
+
+// Separate component to allow calling useSpotlight hook.
+function AutoOpenSpotlight() {
+  const spotlight = useSpotlight();
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    if (params.has(searchParamName)) {
+      spotlight.openSpotlight();
+    }
+  }, []);
+
+  return null;
+}
+
 export function LayoutInner({ children, location }: LayoutProps) {
   const navbarCollapsed = useMediaQuery(`(max-width: ${em(NAVBAR_BREAKPOINT)})`);
   const shouldRenderHeader = !shouldExcludeHeader(location.pathname);
   const shouldRenderNavbar = !shouldExcludeNavbar(location.pathname) || navbarCollapsed;
   const { classes, cx } = useStyles({ shouldRenderHeader });
   const [navbarOpened, setNavbarState] = useState(false);
   const data = getDocsData(useStaticQuery(query));
+  const [spotlightQuery, setSpotlightQuery] = useState(
+    new URLSearchParams(window.location.search).get(searchParamName) || ''
+  );
 
   return (
     <SpotlightProvider
@@ -107,6 +126,8 @@ export function LayoutInner({ children, location }: LayoutProps) {
       searchPlaceholder="Search documentation"
       shortcut={['mod + K', 'mod + P', '/']}
       highlightQuery
+      query={spotlightQuery}
+      onQueryChange={setSpotlightQuery}
       searchInputProps={{
         id: randomId(),
         name: randomId(),
@@ -122,6 +143,7 @@ export function LayoutInner({ children, location }: LayoutProps) {
       }}
     >
       <Notifications />
+      <AutoOpenSpotlight />
       <div
         className={cx({
           [classes.withNavbar]: shouldRenderNavbar,