fix(docs): footenote links from toc (#27937)

The footnote link/anchor was incorrect because the getAnchor logic doesn't check if the component comes with its own id (which overrides the generated id), and the anchor must match the id. This is the case for footnote headings, which are auto-generated by remarkGfm.

apps/docs/components/GuidesTableOfContents.tsx

@@ -88,6 +88,7 @@ const GuidesTableOfContents = ({
       const headings = Array.from(
         document.querySelector('#sb-docs-guide-main-article')?.querySelectorAll('h2, h3') ?? []
       )
+
       const newHeadings = headings
         .filter((heading) => heading.id)
         .map((heading) => {

packages/ui/src/components/CustomHTMLElements/CustomHTMLElements.utils.ts

@@ -1,5 +1,11 @@
 // Check if heading has custom anchor first, before forming the anchor based on the title
-export const getAnchor = (text: any): string | undefined => {
+export const getAnchor = (text: any, { id }: { id?: string } = {}): string | undefined => {
+  if (id) {
+    // Component already defines its own id. Since the anchor must match the
+    // id, return it directly.
+    return id
+  }
+
   if (typeof text === 'object') {
     if (Array.isArray(text)) {
       const customAnchor = text.find((x) => typeof x === 'string' && hasCustomAnchor(x))

packages/ui/src/components/CustomHTMLElements/Heading.tsx

@@ -9,13 +9,6 @@ import {
   unHighlightSelectedTocItems,
 } from './CustomHTMLElements.utils'
 
-/**
- * [Joshen] The trick with rootMargin
- * We are shrinking the top of the root element by 20 percent, which is currently our entire page,
- * and the bottom by 35 percent. Therefore, when a header is at the top 20 percent and bottom 35 percent
- * of our page, it will not be counted as visible.
- */
-
 interface Props extends HTMLAttributes<HTMLHeadingElement> {
   tag?: string
   parseAnchors?: boolean
@@ -34,7 +27,7 @@ interface Props extends HTMLAttributes<HTMLHeadingElement> {
 const Heading = forwardRef(
   ({ tag, customAnchor, children, ...props }: React.PropsWithChildren<Props>, forwardedRef) => {
     const HeadingTag = `${tag}` as any
-    const anchor = customAnchor ? customAnchor : getAnchor(children)
+    const anchor = customAnchor ? customAnchor : getAnchor(children, props)
     const link = `#${anchor}`
 
     const { ref: viewRef } = useInView({