From 71b40612788ea2cdbcadccad4724ac628650027a Mon Sep 17 00:00:00 2001
From: Deep Singhvi <deep@usebirch.com>
Date: Thu, 24 Aug 2023 15:11:21 -0400
Subject: [PATCH] fix: link headers in table of contents to actual section
 (#43)

* link headers in table of contents to actual section

* fix impl for getSlugFromText

* inherit styling from parent

* update search
---
 .../app/src/custom-docs-page/TableOfContents.tsx |  8 +++++++-
 packages/ui/app/src/mdx/base-components.tsx      | 16 ++++++++++------
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/ui/app/src/custom-docs-page/TableOfContents.tsx b/packages/ui/app/src/custom-docs-page/TableOfContents.tsx
index 51ea0020bf..c4d6a6a1b3 100644
--- a/packages/ui/app/src/custom-docs-page/TableOfContents.tsx
+++ b/packages/ui/app/src/custom-docs-page/TableOfContents.tsx
@@ -2,6 +2,7 @@ import { Text } from "@blueprintjs/core";
 import classNames from "classnames";
 import { marked } from "marked";
 import { useMemo } from "react";
+import { getSlugFromText } from "../mdx/base-components";
 
 export declare namespace TableOfContents {
     export interface Props {
@@ -32,7 +33,12 @@ export const TableOfContents: React.FC<TableOfContents.Props> = ({ className, ma
                             style={{ marginLeft: 8 * (heading.depth - minDepth) }}
                             ellipsize
                         >
-                            {heading.text}
+                            <a
+                                href={`#${getSlugFromText(heading.text)}`}
+                                style={{ textDecoration: "none", color: "inherit" }}
+                            >
+                                {heading.text}
+                            </a>
                         </Text>
                     ))}
                 </div>
diff --git a/packages/ui/app/src/mdx/base-components.tsx b/packages/ui/app/src/mdx/base-components.tsx
index 8d28fbb9fa..dbf5638aad 100644
--- a/packages/ui/app/src/mdx/base-components.tsx
+++ b/packages/ui/app/src/mdx/base-components.tsx
@@ -107,7 +107,7 @@ const flatten = (
 export const H1: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({ className, ...rest }) => {
     const children = React.Children.toArray(rest.children);
     const text = children.reduce(flatten, "");
-    const slug = text.toLowerCase().replace(/\W/g, "-");
+    const slug = getSlugFromText(text);
     return (
         <h1
             id={slug}
@@ -126,7 +126,7 @@ export const H1: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({ className, ..
 export const H2: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({ className, ...rest }) => {
     const children = React.Children.toArray(rest.children);
     const text = children.reduce(flatten, "");
-    const slug = text.toLowerCase().replace(/\W/g, "-");
+    const slug = getSlugFromText(text);
     return (
         <h2
             id={slug}
@@ -145,7 +145,7 @@ export const H2: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({ className, ..
 export const H3: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({ className, ...rest }) => {
     const children = React.Children.toArray(rest.children);
     const text = children.reduce(flatten, "");
-    const slug = text.toLowerCase().replace(/\W/g, "-");
+    const slug = getSlugFromText(text);
     return (
         <h3
             id={slug}
@@ -164,7 +164,7 @@ export const H3: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({ className, ..
 export const H4: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({ className, ...rest }) => {
     const children = React.Children.toArray(rest.children);
     const text = children.reduce(flatten, "");
-    const slug = text.toLowerCase().replace(/\W/g, "-");
+    const slug = getSlugFromText(text);
     return (
         <h4
             id={slug}
@@ -183,7 +183,7 @@ export const H4: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({ className, ..
 export const H5: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({ className, ...rest }) => {
     const children = React.Children.toArray(rest.children);
     const text = children.reduce(flatten, "");
-    const slug = text.toLowerCase().replace(/\W/g, "-");
+    const slug = getSlugFromText(text);
     return (
         <h5
             id={slug}
@@ -202,7 +202,7 @@ export const H5: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({ className, ..
 export const H6: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({ className, ...rest }) => {
     const children = React.Children.toArray(rest.children);
     const text = children.reduce(flatten, "");
-    const slug = text.toLowerCase().replace(/\W/g, "-");
+    const slug = getSlugFromText(text);
     return (
         <h6
             id={slug}
@@ -275,3 +275,7 @@ export const A: React.FC<HTMLAttributes<HTMLAnchorElement>> = ({ className, ...r
         />
     );
 };
+
+export function getSlugFromText(text: string): string {
+    return text.toLowerCase().replace(/\W/g, "-");
+}