From 4dbc458a2209b04b79e2d689c17f5a7f5287500c Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Thu, 30 Sep 2021 13:22:32 +0300
Subject: [PATCH] refactor: various TOC improvements (#5627)

---
 .../src/theme/Heading/index.tsx                        |  2 +-
 .../src/theme/TOCInline/index.tsx                      |  5 ++---
 .../src/theme/TOCItems/index.tsx                       | 10 +++++-----
 packages/docusaurus-theme-classic/src/types.d.ts       |  2 +-
 .../src/utils/useTOCHighlight.ts                       |  7 ++++---
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/Heading/index.tsx b/packages/docusaurus-theme-classic/src/theme/Heading/index.tsx
index 8439f747b2..2a04c267e7 100644
--- a/packages/docusaurus-theme-classic/src/theme/Heading/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Heading/index.tsx
@@ -44,7 +44,7 @@ const createAnchorHeading = (
     return (
       <Tag
         {...props}
-        className={clsx('anchor', `anchor__${Tag}`, {
+        className={clsx('anchor', {
           [styles.anchorWithHideOnScrollNavbar]: hideOnScroll,
           [styles.anchorWithStickyNavbar]: !hideOnScroll,
         })}
diff --git a/packages/docusaurus-theme-classic/src/theme/TOCInline/index.tsx b/packages/docusaurus-theme-classic/src/theme/TOCInline/index.tsx
index 5210ae2e7e..ba3bc13275 100644
--- a/packages/docusaurus-theme-classic/src/theme/TOCInline/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/TOCInline/index.tsx
@@ -6,7 +6,6 @@
  */
 
 import React from 'react';
-import clsx from 'clsx';
 import type {TOCInlineProps} from '@theme/TOCInline';
 import styles from './styles.module.css';
 import TOCItems from '@theme/TOCItems';
@@ -17,13 +16,13 @@ function TOCInline({
   maxHeadingLevel,
 }: TOCInlineProps): JSX.Element {
   return (
-    <div className={clsx(styles.tableOfContentsInline)}>
+    <div className={styles.tableOfContentsInline}>
       <TOCItems
         toc={toc}
         minHeadingLevel={minHeadingLevel}
         maxHeadingLevel={maxHeadingLevel}
         className="table-of-contents"
-        linkClassName=""
+        linkClassName={null}
       />
     </div>
   );
diff --git a/packages/docusaurus-theme-classic/src/theme/TOCItems/index.tsx b/packages/docusaurus-theme-classic/src/theme/TOCItems/index.tsx
index d93850f31c..3e12fedb6a 100644
--- a/packages/docusaurus-theme-classic/src/theme/TOCItems/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/TOCItems/index.tsx
@@ -19,25 +19,25 @@ import {
 /* eslint-disable jsx-a11y/control-has-associated-label */
 function TOCItemList({
   toc,
-  className = 'table-of-contents table-of-contents__left-border',
-  linkClassName = 'table-of-contents__link',
+  className,
+  linkClassName,
   isChild,
 }: {
   readonly toc: readonly TOCItem[];
   readonly className: string;
-  readonly linkClassName: string;
+  readonly linkClassName: string | null;
   readonly isChild?: boolean;
 }): JSX.Element | null {
   if (!toc.length) {
     return null;
   }
   return (
-    <ul className={isChild ? '' : className}>
+    <ul className={isChild ? undefined : className}>
       {toc.map((heading) => (
         <li key={heading.id}>
           <a
             href={`#${heading.id}`}
-            className={linkClassName}
+            className={linkClassName ?? undefined}
             // Developer provided the HTML, so assume it's safe.
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{__html: heading.value}}
diff --git a/packages/docusaurus-theme-classic/src/types.d.ts b/packages/docusaurus-theme-classic/src/types.d.ts
index eeeb65bfa2..714def2a66 100644
--- a/packages/docusaurus-theme-classic/src/types.d.ts
+++ b/packages/docusaurus-theme-classic/src/types.d.ts
@@ -578,7 +578,7 @@ declare module '@theme/TOCItems' {
     readonly minHeadingLevel?: number;
     readonly maxHeadingLevel?: number;
     readonly className?: string;
-    readonly linkClassName?: string;
+    readonly linkClassName?: string | null;
     readonly linkActiveClassName?: string;
   };
 
diff --git a/packages/docusaurus-theme-common/src/utils/useTOCHighlight.ts b/packages/docusaurus-theme-common/src/utils/useTOCHighlight.ts
index 06d8f901e6..2283176e02 100644
--- a/packages/docusaurus-theme-common/src/utils/useTOCHighlight.ts
+++ b/packages/docusaurus-theme-common/src/utils/useTOCHighlight.ts
@@ -38,11 +38,12 @@ function getAnchors({
 }) {
   const selectors = [];
   for (let i = minHeadingLevel; i <= maxHeadingLevel; i += 1) {
-    selectors.push(`.anchor.anchor__h${i}`);
+    selectors.push(`h${i}.anchor`);
   }
-  const selector = selectors.join(', ');
 
-  return Array.from(document.querySelectorAll(selector)) as HTMLElement[];
+  return Array.from(
+    document.querySelectorAll(selectors.join()),
+  ) as HTMLElement[];
 }
 
 function getActiveAnchor(