refactor: various TOC improvements (#5627)

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,
         })}

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>
   );

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}}

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;
   };
 

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(