Function HeadingWithCopyLink

web/src/components/docs/mdx/mdx-components.tsx:31–182

({
    className,
    children,
    ...props
  }: HTMLAttributes<HTMLHeadingElement>)

  defaultClasses: string,
) => {
  const HeadingWithCopyLink = ({
    className,
    children,
    ...props
  }: HTMLAttributes<HTMLHeadingElement>) => {
    const [copied, setCopied] = useState(false)
    const [showMobileBadge, setShowMobileBadge] = useState(false)
    const isMobile = useIsMobile()

    useEffect(() => {
      if (copied) {
        const timer = setTimeout(() => setCopied(false), 2000)
        return () => clearTimeout(timer)
      }
      return undefined
    }, [copied])

    // Auto-hide mobile badge after 3 seconds
    useEffect(() => {
      if (isMobile && showMobileBadge) {
        const timer = setTimeout(() => setShowMobileBadge(false), 3000)
        return () => clearTimeout(timer)
      }
      return undefined
    }, [isMobile, showMobileBadge])

    const title = children?.toString()

    // Generate hierarchical ID by including heading level context
    const generateHierarchicalId = (text: string, level: string) => {
      const baseId = text
        ?.toLowerCase()
        .replace(/\s+/g, '-')
        .replace(/[^\w-]/g, '')

      // Use heading level to create meaningful hierarchy
      const levelNum = parseInt(level.replace('h', ''))

      // For h1, use as-is. For h2+, prefix with level to ensure uniqueness
      // This creates URLs like: #overview (h1), #h2-overview (h2), etc.
      return levelNum === 1 ? baseId : `${level}-${baseId}`
    }

    const id = title
      ? generateHierarchicalId(title, HeadingComponent)
      : undefined

    if (!title) {
      return (
        <HeadingComponent
          {...props}
          className={cn(
            'hover:cursor-pointer hover:underline scroll-m-20',
            defaultClasses,
            className,
          )}
        >
          {children}