TocAnchorsProvider() — supabase Function Reference

Architecture documentation for the TocAnchorsProvider() function in GuidesMdx.client.tsx from the supabase codebase.

Function tsx DocumentationSystem ReferenceGen calls 1

Entity Profile

DocumentationSystem→ ReferenceGen→ TocAnchorsProvider() — supabase Function Reference

Dependency Diagram

graph TD
  04d2d6a9_41ea_fdba_84bf_c54d618046b0["TocAnchorsProvider()"]
  e27bf408_3e3f_3dc8_9d17_ce504e6e6bb4["useSubscribeTocRerender()"]
  04d2d6a9_41ea_fdba_84bf_c54d618046b0 -->|calls| e27bf408_3e3f_3dc8_9d17_ce504e6e6bb4
  style 04d2d6a9_41ea_fdba_84bf_c54d618046b0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/docs/features/docs/GuidesMdx.client.tsx lines 14–64

const TocAnchorsProvider = ({ children }: PropsWithChildren) => {
  const [tocList, setTocList] = useState<TOCHeader[]>([])
  useSubscribeTocRerender()

  const displayedList = tocList
  const toc = displayedList.map((item) => ({
    title: item.text,
    url: item.link,
    depth: item.level,
  }))

  useEffect(() => {
    /**
     * Because we're directly querying the DOM, needs the setTimeout so the DOM
     * update will happen first.
     */
    const timeoutHandle = setTimeout(() => {
      const headings = Array.from(
        document.querySelector('#sb-docs-guide-main-article')?.querySelectorAll('h2, h3') ?? []
      )

      const newHeadings = headings
        .filter((heading) => heading.id)
        .map((heading) => {
          const text = heading.textContent?.replace('#', '') || ''
          const link = heading.id ? `#${heading.id}` : null

          const level = heading.tagName === 'H2' ? 2 : 3

          return { text, link, level } as Partial<TOCHeader>
        })
        .filter((x): x is TOCHeader => !!x && !!x.text && !!x.link && !!x.level)
      setTocList(newHeadings)
    })

    return () => clearTimeout(timeoutHandle)
    /**
     * window.location.href needed to recalculate toc when page changes,
     * `useSubscribeTocRerender` above will trigger the rerender
     */
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [typeof window !== 'undefined' && window.location.href])

  return (
    <TocAnchorsContext.Provider value={{ toc }}>
      <AnchorProvider toc={toc} single={false}>
        {children}
      </AnchorProvider>
    </TocAnchorsContext.Provider>
  )
}