From a3ca009680a97431fc30fd36d2023b9da28b3eff Mon Sep 17 00:00:00 2001
From: Charis <26616127+charislam@users.noreply.github.com>
Date: Mon, 15 Jul 2024 04:18:05 -0400
Subject: [PATCH] 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           | 1 +
 .../CustomHTMLElements/CustomHTMLElements.utils.ts       | 8 +++++++-
 .../ui/src/components/CustomHTMLElements/Heading.tsx     | 9 +--------
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/docs/components/GuidesTableOfContents.tsx b/apps/docs/components/GuidesTableOfContents.tsx
index 31756b9ff9d..78b438090a9 100644
--- a/apps/docs/components/GuidesTableOfContents.tsx
+++ b/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) => {
diff --git a/packages/ui/src/components/CustomHTMLElements/CustomHTMLElements.utils.ts b/packages/ui/src/components/CustomHTMLElements/CustomHTMLElements.utils.ts
index 337f48b2bbf..244210c945a 100644
--- a/packages/ui/src/components/CustomHTMLElements/CustomHTMLElements.utils.ts
+++ b/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))
diff --git a/packages/ui/src/components/CustomHTMLElements/Heading.tsx b/packages/ui/src/components/CustomHTMLElements/Heading.tsx
index eb6cf22f309..b4016393522 100644
--- a/packages/ui/src/components/CustomHTMLElements/Heading.tsx
+++ b/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({