Merge branch 'main' into vale/refine-rules

apollographql · Jan 10, 2024 · 1280790 · 1280790
2 parents ec959fc + 326e67e
commit 1280790
Showing 1 changed file with 23 additions and 4 deletions.
diff --git a/src/components/TableOfContents.js b/src/components/TableOfContents.js
@@ -12,18 +12,37 @@ export default function TableOfContents({
 }) {
   const [activeId, setActiveId] = useState(null);
   const scrollDisabled = useRef(false);
+  const [pageHeadings, setPageHeadings] = useState(headings);
+  useEffect(() => {
+    setPageHeadings(
+      [
+        ...document
+          .querySelector('main')
+          .querySelectorAll('h2[id],h3[id],h4[id],h5[id],h6[id]')
+          .values()
+      ].map(heading => {
+        const link = heading.querySelector('a');
+        return {
+          value: heading.title || link?.innerText || heading.innerText,
+          depth: parseInt(heading.tagName[1]),
+          id: heading.id
+        };
+      })
+    );
+  }, []);
+
   const toc = useMemo(() => {
     const slugger = new GithubSlugger();
-    return headings
+    return pageHeadings
       .filter(
         heading =>
           heading.depth >= MIN_HEADING_DEPTH && heading.depth <= headingDepth
       )
       .map(heading => ({
-        ...heading,
-        id: slugger.slug(heading.value)
+        id: slugger.slug(heading.value),
+        ...heading
       }));
-  }, [headings, headingDepth]);
+  }, [pageHeadings, headingDepth]);
 
   useEffect(() => {
     function handleScroll(event) {