Consolidate useScrollToHash with details implementation

Author: BrettJephson

packages/gitbook/src/components/DocumentView/Expandable/Details.tsx

@@ -1,23 +1,9 @@
 'use client';
 
-import { useParams } from 'next/navigation';
 import React from 'react';
 
 import { ClassValue, tcls } from '@/lib/tailwind';
-
-function useHash() {
-    const params = useParams();
-    const [hash, setHash] = React.useState<string>(global.location?.hash?.slice(1));
-    React.useEffect(() => {
-        function updateHash() {
-            setHash(global.location?.hash?.slice(1));
-        }
-        global.addEventListener('hashchange', updateHash);
-        updateHash();
-        return () => global.removeEventListener('hashchange', updateHash);
-    }, [params]);
-    return hash;
-}
+import { useHash } from '@/components/hooks';
 
 /**
  * Details component rendered on client so it can expand dependent on url hash changes.
@@ -36,23 +22,24 @@ export function Details(props: {
     const [anchorElement, setAnchorElement] = React.useState<Element | null | undefined>();
 
     const hash = useHash();
+    /**
+     * Open the details element if the url hash refers to the id of the details element
+     * or the id of some element contained within the details element.
+     */
     React.useEffect(() => {
-        if (!hash) {
+        if (!hash || !detailsRef.current) {
             return;
         }
-        const descendant =
-            hash === id ? detailsRef.current : detailsRef.current?.querySelector(`#${hash}`);
-        setAnchorElement(descendant);
-    }, [hash, id]);
-
-    React.useLayoutEffect(() => {
-        if (anchorElement) {
-            anchorElement.scrollIntoView({
-                block: 'start',
-                behavior: 'smooth',
-            });
+        if (hash === id) {
+            setAnchorElement(detailsRef.current)
         }
-    }, [anchorElement]);
+        else {
+            const activeElement = document.getElementById(hash);
+            if (activeElement && detailsRef.current?.contains(activeElement)) {
+                setAnchorElement(activeElement);
+            }
+        }
+    }, [hash, id]);
 
     return (
         <details

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

@@ -1,2 +1,3 @@
 export * from './useScrollActiveId';
 export * from './useScrollToHash';
+export * from './useHash';

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

@@ -0,0 +1,19 @@
+import { useParams } from 'next/navigation';
+import React from 'react';
+
+export function useHash() {
+    const params = useParams();
+    const [hash, setHash] = React.useState<string>(global.location?.hash?.slice(1));
+    React.useEffect(() => {
+        function updateHash() {
+            setHash(global.location?.hash?.slice(1));
+        }
+        global.addEventListener('hashchange', updateHash);
+        updateHash();
+        return () => global.removeEventListener('hashchange', updateHash);
+    // With next.js, the hashchange event is not triggered when the hash changes
+    // Instead a hack is to use the `useParams` hook to listen to changes in the hash
+    // https://github.com/vercel/next.js/discussions/49465#discussioncomment-5845312
+    }, [params]);
+    return hash;
+}

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

@@ -1,29 +1,20 @@
-import { useParams } from 'next/navigation';
 import React from 'react';
+import { useHash } from './useHash';
 
 /**
  * Scroll to the current URL hash everytime the URL changes.
  */
 export function useScrollToHash() {
-    const params = useParams();
-
-    const scrollToHash = React.useCallback(() => {
-        const hash = window.location.hash;
+    const hash = useHash();
+    React.useLayoutEffect(() => {
         if (hash) {
-            const element = document.getElementById(hash.slice(1));
+            const element = document.getElementById(hash);
             if (element) {
                 element.scrollIntoView({
                     block: 'start',
                     behavior: 'smooth',
                 });
             }
         }
-    }, []);
-
-    // With next.js, the hashchange event is not triggered when the hash changes
-    // Instead a hack is to use the `useParams` hook to listen to changes in the hash
-    // https://github.com/vercel/next.js/discussions/49465#discussioncomment-5845312
-    React.useEffect(() => {
-        scrollToHash();
-    }, [params, scrollToHash]);
+    }, [hash]);
 }