diff --git a/beta/next.config.js b/beta/next.config.js index 39f3d5fc963..bb4829b0133 100644 --- a/beta/next.config.js +++ b/beta/next.config.js @@ -40,6 +40,9 @@ module.exports = { ); } + // Don't bundle the shim unnecessarily. + config.resolve.alias['use-sync-external-store/shim'] = 'react'; + const {IgnorePlugin} = require('webpack'); config.plugins.push( new IgnorePlugin({ diff --git a/beta/src/components/Search.tsx b/beta/src/components/Search.tsx index 87c298a7429..a71a9770da2 100644 --- a/beta/src/components/Search.tsx +++ b/beta/src/components/Search.tsx @@ -3,7 +3,6 @@ */ // @ts-ignore -import {useDocSearchKeyboardEvents} from '@docsearch/react'; import {IconSearch} from 'components/Icon/IconSearch'; import Head from 'next/head'; import Link from 'next/link'; @@ -37,6 +36,58 @@ function Kbd(props: {children?: React.ReactNode}) { ); } +// Copy-pasted from @docsearch/react to avoid importing the whole bundle. +// Slightly trimmed to features we use. +// (c) Algolia, Inc. +function isEditingContent(event: any) { + var element = event.target; + var tagName = element.tagName; + return ( + element.isContentEditable || + tagName === 'INPUT' || + tagName === 'SELECT' || + tagName === 'TEXTAREA' + ); +} +function useDocSearchKeyboardEvents({ + isOpen, + onOpen, + onClose, +}: { + isOpen: boolean; + onOpen: () => void; + onClose: () => void; +}) { + React.useEffect(() => { + function onKeyDown(event: any) { + function open() { + // We check that no other DocSearch modal is showing before opening + // another one. + if (!document.body.classList.contains('DocSearch--active')) { + onOpen(); + } + } + if ( + (event.keyCode === 27 && isOpen) || + (event.key === 'k' && (event.metaKey || event.ctrlKey)) || + (!isEditingContent(event) && event.key === '/' && !isOpen) + ) { + event.preventDefault(); + if (isOpen) { + onClose(); + } else if (!document.body.classList.contains('DocSearch--active')) { + open(); + } + } + } + + window.addEventListener('keydown', onKeyDown); + return function () { + window.removeEventListener('keydown', onKeyDown); + }; + }, [isOpen, onOpen, onClose]); +} + const options = { appId: siteConfig.algolia.appId, apiKey: siteConfig.algolia.apiKey,