Add HashContext and HashProvider for managing URL hash state (#3541)

Co-authored-by: Nicolas Dorseuil <[email protected]>

Author: conico974

packages/gitbook/src/components/RootLayout/ClientContexts.tsx

@@ -5,6 +5,7 @@ import type React from 'react';
 import { TranslateContext } from '@/intl/client';
 import type { TranslationLanguage } from '@/intl/translations';
 import { TooltipProvider } from '@radix-ui/react-tooltip';
+import { HashProvider } from '../hooks';
 import { LoadingStateProvider } from '../primitives/LoadingStateProvider';
 
 export function ClientContexts(props: {
@@ -16,7 +17,9 @@ export function ClientContexts(props: {
     return (
         <TranslateContext.Provider value={language}>
             <TooltipProvider delayDuration={200}>
-                <LoadingStateProvider>{children}</LoadingStateProvider>
+                <HashProvider>
+                    <LoadingStateProvider>{children}</LoadingStateProvider>
+                </HashProvider>
             </TooltipProvider>
         </TranslateContext.Provider>
     );

packages/gitbook/src/components/hooks/useHash.ts

@@ -0,0 +1,52 @@
+'use client';
+import React from 'react';
+
+export const HashContext = React.createContext<{
+    hash: string | null;
+    /**
+     * Updates the hash value from the URL provided here.
+     * It will then be used by the `useHash` hook.
+     * URL can be relative or absolute.
+     */
+    updateHashFromUrl: (href: string) => void;
+}>({
+    hash: null,
+    updateHashFromUrl: () => {},
+});
+
+function getHash(): string | null {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+    return window.location.hash.slice(1);
+}
+
+export const HashProvider: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
+    const [hash, setHash] = React.useState<string | null>(getHash);
+    const updateHashFromUrl = React.useCallback((href: string) => {
+        const url = new URL(
+            href,
+            typeof window !== 'undefined' ? window.location.origin : 'http://localhost'
+        );
+        setHash(url.hash.slice(1));
+    }, []);
+    const memoizedValue = React.useMemo(
+        () => ({ hash, updateHashFromUrl }),
+        [hash, updateHashFromUrl]
+    );
+    return <HashContext.Provider value={memoizedValue}>{children}</HashContext.Provider>;
+};
+
+/**
+ * Hook to get the current hash from the URL.
+ * @see https://github.com/vercel/next.js/discussions/49465
+ * We use a different hack than this one, because for same page link it don't work
+ * We can't use the `hashChange` event because it doesn't fire for `replaceState` and `pushState` which are used by Next.js.
+ * Since we have a single Link component that handles all links, we can use a context to share the hash.
+ */
+export function useHash() {
+    // const params = useParams();
+    const { hash } = React.useContext(HashContext);
+
+    return hash;
+}

packages/gitbook/src/components/hooks/useHash.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import { tcls } from '@/lib/tailwind';
 import { SiteExternalLinksTarget } from '@gitbook/api';
 import { type TrackEventInput, useTrackEvent } from '../Insights';
+import { HashContext } from '../hooks';
 import { isExternalLink } from '../utils/link';
 import { type DesignTokenName, useClassnames } from './StyleProvider';
 
@@ -71,13 +72,17 @@ export const Link = React.forwardRef(function Link(
 ) {
     const { href, prefetch, children, insights, classNames, className, ...domProps } = props;
     const { externalLinksTarget } = React.useContext(LinkSettingsContext);
+    const { updateHashFromUrl } = React.useContext(HashContext);
     const trackEvent = useTrackEvent();
     const forwardedClassNames = useClassnames(classNames || []);
     const isExternal = isExternalLink(href);
     const { target, rel } = getTargetProps(props, { externalLinksTarget, isExternal });
 
     const onClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
         const isExternalWithOrigin = isExternalLink(href, window.location.origin);
+        if (!isExternal) {
+            updateHashFromUrl(href);
+        }
 
         if (insights) {
             trackEvent(insights, undefined, { immediate: isExternalWithOrigin });