Table of Contents

1"use client"
2 
3import * as React from "react"
4import {
5  createContext,
6  useContext,
7  useRef,
8  useState,
9  useEffect,
10  useMemo,
11  useLayoutEffect,
12  type ReactNode,
13  type RefObject,
14  type ComponentProps,
15  type HTMLAttributes,
16} from "react"
17import { cn } from "@/lib/utils"
18 
19// ============================================================================
20// Types
21// ============================================================================
22 
23export interface TOCItemType {
24  title: ReactNode
25  url: string
26  depth: number
27}
28 
29export type TableOfContents = TOCItemType[]
30 
31// ============================================================================
32// Contexts
33// ============================================================================
34 
35const ActiveAnchorContext = createContext<string[]>([])
36const ScrollContext = createContext<RefObject<HTMLElement | null>>({ current: null })
37const TOCContext = createContext<TOCItemType[]>([])
38 
39// ============================================================================
40// Hooks
41// ============================================================================
42 
43/**
44 * The id of visible anchors
45 */
46export function useActiveAnchors(): string[] {
47  return useContext(ActiveAnchorContext)
48}
49 
50/**
51 * The estimated active heading ID
52 */
53export function useActiveAnchor(): string | undefined {
54  return useContext(ActiveAnchorContext)[0]
55}
56 
57/**
58 * Get TOC items from context
59 */
60export function useTOCItems(): TOCItemType[] {
61  return useContext(TOCContext)
62}
63 
64// ============================================================================
65// Utility Functions
66// ============================================================================
67 
68function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T> {
69  return value => {
70    refs.forEach(ref => {
71      if (typeof ref === "function") {
72        ref(value)
73      } else if (ref != null) {
74        ;(ref as React.MutableRefObject<T | null>).current = value
75      }
76    })
77  }
78}
79 
80/**
81 * Find the active heading of page using IntersectionObserver
82 */
83function useAnchorObserver(watch: string[], single: boolean): string[] {
84  const observerRef = useRef<IntersectionObserver | null>(null)
85  const [activeAnchor, setActiveAnchor] = useState<string[]>([])
86  const stateRef = useRef<{ visible: Set<string> } | null>(null)
87 
88  const onChange = React.useCallback(
89    (entries: IntersectionObserverEntry[]) => {
90      stateRef.current ??= { visible: new Set() }
91// … truncated