facebook · slorber · Sep 29, 2021 · Sep 16, 2021 · Sep 16, 2021 · Sep 16, 2021
@@ -83,3 +83,50 @@ exports[`non text phrasing content 1`] = `
 ## \`inline.code()\`
 "
 `;
+
+exports[`should process all heading levels 1`] = `
+"export const toc = [
+	{
+		value: 'Bravo',
+		id: 'bravo',
+		children: [
+			{
+				value: 'Charlie',
+				id: 'charlie',
+				children: [
+					{
+						value: 'Delta',
+						id: 'delta',
+						children: [
+							{
+								value: 'Echo',
+								id: 'echo',
+								children: [
+									{
+										value: 'Foxtrot',
+										id: 'foxtrot',
+										children: []
+									}
+								]
+							}
+						]
+					}
+				]
+			}
+		]
+	}
+];
+
+# Alpha
+
+## Bravo
+
+### Charlie
+
+#### Delta
+
+##### Echo
+
+###### Foxtrot
+"
+`;
diff --git a/...ages/docusaurus-mdx-loader/src/remark/toc/__tests__/fixtures/maximum-depth-6.md b/...ages/docusaurus-mdx-loader/src/remark/toc/__tests__/fixtures/maximum-depth-6.md
@@ -0,0 +1,11 @@
+# Alpha
+
+## Bravo
+
+### Charlie
+
+#### Delta
+
+##### Echo
+
+###### Foxtrot
@@ -12,7 +12,7 @@ import vfile from 'to-vfile';
 import plugin from '../index';
 import headings from '../../headings/index';
 
-const processFixture = async (name, options) => {
+const processFixture = async (name, options?) => {
   const path = join(__dirname, 'fixtures', `${name}.md`);
   const file = await vfile.read(path);
   const result = await remark()
@@ -210,3 +210,8 @@ test('empty headings', async () => {
     "
   `);
 });
+
+test('should process all heading levels', async () => {
+  const result = await processFixture('maximum-depth-6');
+  expect(result).toMatchSnapshot();
+});
@@ -8,40 +8,83 @@
 import toString from 'mdast-util-to-string';
 import visit, {Visitor} from 'unist-util-visit';
 import {toValue} from '../utils';
-import type {TOCItem as TOC} from '@docusaurus/types';
+import type {TOCItem} from '@docusaurus/types';
 import type {Node} from 'unist';
 import type {Heading} from 'mdast';
 
-// Visit all headings. We `slug` all headings (to account for
-// duplicates), but only take h2 and h3 headings.
-export default function search(node: Node): TOC[] {
-  const headings: TOC[] = [];
-  let current = -1;
-  let currentDepth = 0;
+// Intermediate interface for TOC algorithm
+interface SearchItem {
+  node: TOCItem;
+  level: number;
+  parentIndex: number;
+}
+
+/**
+ *
+ * Generate a TOC AST from the raw Markdown contents
+ */
+export default function search(node: Node): TOCItem[] {
+  const headings: SearchItem[] = [];
 
   const visitor: Visitor<Heading> = (child, _index, parent) => {
     const value = toString(child);
 
-    if (parent !== node || !value || child.depth > 3 || child.depth < 2) {
+    // depth:1 headings are titles and not included in the TOC
+    if (parent !== node || !value || child.depth < 2) {
       return;
     }
 
-    const entry: TOC = {
-      value: toValue(child),
-      id: child.data!.id as string,
-      children: [],
-    };
+    headings.push({
+      node: {
+        value: toValue(child),
+        id: child.data!.id as string,
+        children: [],
+      },
+      level: child.depth,
+      parentIndex: -1,
+    });
+  };
 
-    if (!headings.length || currentDepth >= child.depth) {
-      headings.push(entry);
-      current += 1;
-      currentDepth = child.depth;
-    } else {
-      headings[current].children.push(entry);
+  visit(node, 'heading', visitor);
+
+  const getParentIndex = (prevParentIndex: number, currLevel: number) => {
+    let parentIndex = prevParentIndex;
+    // We start at the parent of the previous heading
+    // Recurse through its ancestors until the current heading would be a child
+    while (parentIndex >= 0 && currLevel < headings[parentIndex].level) {
+      parentIndex = headings[parentIndex].parentIndex;
     }
+    return parentIndex >= 0 ? headings[parentIndex].parentIndex : parentIndex;
   };
 
-  visit(node, 'heading', visitor);
+  // Assign the correct `parentIndex` for each heading.
+  headings.forEach((curr, currIndex) => {
+    if (currIndex > 0) {
+      const prevIndex = currIndex - 1;
+      const prev = headings[prevIndex];
+      if (curr.level > prev.level) {
+        curr.parentIndex = prevIndex;
+      } else if (curr.level < prev.level) {
+        curr.parentIndex = getParentIndex(prev.parentIndex, curr.level);
+      } else {
+        curr.parentIndex = prev.parentIndex;
+      }
+    }
+  });
+
+  const rootNodeIndexes: number[] = [];
+
+  // For a given parentIndex, add each Node into that parent's `children` array
+  headings.forEach((heading, i) => {
+    if (heading.parentIndex >= 0) {
+      headings[heading.parentIndex].node.children.push(heading.node);
+    } else {
+      rootNodeIndexes.push(i);
+    }
+  });
 
-  return headings;
+  const toc = headings
+    .filter((_, k) => rootNodeIndexes.includes(k)) // only return root nodes
+    .map((heading) => heading.node); // only return Node, no metadata
+  return toc;
 }
@@ -91,6 +91,9 @@ describe('themeConfig', () => {
         },
         copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc. Built with Docusaurus.`,
       },
+      tableOfContents: {
+        maxDepth: 4,
+      },
     };
     expect(testValidateThemeConfig(userConfig)).toEqual({
       ...DEFAULT_CONFIG,

@@ -12,6 +12,7 @@ import useTOCHighlight, {
 } from '@theme/hooks/useTOCHighlight';
 import type {TOCProps, TOCHeadingsProps} from '@theme/TOC';
 import styles from './styles.module.css';
+import {useThemeConfig} from '@docusaurus/theme-common';
 
 const LINK_CLASS_NAME = 'table-of-contents__link';
 
@@ -24,10 +25,16 @@ const TOC_HIGHLIGHT_PARAMS: TOCHighlightParams = {
 export function TOCHeadings({
   toc,
   isChild,
+  depth: headingLevel,
 }: TOCHeadingsProps): JSX.Element | null {
+  const {tableOfContents} = useThemeConfig();
+  const maxDepth = tableOfContents?.maxDepth ?? 3;
   if (!toc.length) {
     return null;
   }
+  if (headingLevel > maxDepth) {
+    return null;
+  }
   return (
     <ul
       className={
@@ -42,7 +49,11 @@ export function TOCHeadings({
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{__html: heading.value}}
           />
-          <TOCHeadings isChild toc={heading.children} />
+          <TOCHeadings
+            isChild
+            toc={heading.children}
+            depth={headingLevel + 1}
+          />
         </li>
       ))}
     </ul>
@@ -53,7 +64,7 @@ function TOC({toc}: TOCProps): JSX.Element {
   useTOCHighlight(TOC_HIGHLIGHT_PARAMS);
   return (
     <div className={clsx(styles.tableOfContents, 'thin-scrollbar')}>
-      <TOCHeadings toc={toc} />
+      <TOCHeadings toc={toc} depth={2} />
     </div>
   );
 }

@@ -45,7 +45,7 @@ export default function TOCCollapsible({
         lazy
         className={styles.tocCollapsibleContent}
         collapsed={collapsed}>
-        <TOCHeadings toc={toc} />
+        <TOCHeadings toc={toc} depth={2} />
       </Collapsible>
     </div>
   );

@@ -25,19 +25,26 @@ function isInViewportTopHalf(boundingRect: DOMRect) {
   return boundingRect.top > 0 && boundingRect.bottom < window.innerHeight / 2;
 }
 
-function getAnchors() {
-  // For toc highlighting, we only consider h2/h3 anchors
-  const selector = '.anchor.anchor__h2, .anchor.anchor__h3';
-  return Array.from(document.querySelectorAll(selector)) as HTMLElement[];
-}
+function getAnchors(maxDepth: number = 3) {
+  const selectors = [];
+
+  for (let i = 2; i <= maxDepth; i += 1) {
+    selectors.push(`.anchor.anchor__h${i}`);
+  }
 
-function getActiveAnchor({
-  anchorTopOffset,
-}: {
-  anchorTopOffset: number;
-}): Element | null {
-  const anchors = getAnchors();
+  return Array.from(
+    document.querySelectorAll(selectors.join(', ')),
+  ) as HTMLElement[];
+}
 
+function getActiveAnchor(
+  anchors: HTMLElement[],
+  {
+    anchorTopOffset,
+  }: {
+    anchorTopOffset: number;
+  },
+): Element | null {
   // Naming is hard
   // The "nextVisibleAnchor" is the first anchor that appear under the viewport top boundary
   // Note: it does not mean this anchor is visible yet, but if user continues scrolling down, it will be the first to become visible
@@ -100,6 +107,7 @@ function useTOCHighlight(params: Params): void {
   const lastActiveLinkRef = useRef<HTMLAnchorElement | undefined>(undefined);
 
   const anchorTopOffsetRef = useAnchorTopOffsetRef();
+  const {tableOfContents} = useThemeConfig();
 
   useEffect(() => {
     const {linkClassName, linkActiveClassName} = params;
@@ -118,7 +126,8 @@ function useTOCHighlight(params: Params): void {
 
     function updateActiveLink() {
       const links = getLinks(linkClassName);
-      const activeAnchor = getActiveAnchor({
+      const anchors = getAnchors(tableOfContents?.maxDepth);
+      const activeAnchor = getActiveAnchor(anchors, {
         anchorTopOffset: anchorTopOffsetRef.current,
       });
       const activeLink = links.find(

@@ -591,6 +591,7 @@ declare module '@theme/TOC' {
   export type TOCHeadingsProps = {
     readonly toc: readonly TOCItem[];
     readonly isChild?: boolean;
+    readonly depth: number;
   };
 
   export const TOCHeadings: (props: TOCHeadingsProps) => JSX.Element;

@@ -41,6 +41,9 @@ const DEFAULT_CONFIG = {
     items: [],
   },
   hideableSidebar: false,
+  tableOfContents: {
+    maxDepth: 3,
+  },
 };
 exports.DEFAULT_CONFIG = DEFAULT_CONFIG;
 
@@ -329,6 +332,13 @@ const ThemeConfigSchema = Joi.object({
     'any.unknown':
       'The themeConfig.sidebarCollapsible has been moved to docs plugin options. See: https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-docs',
   }),
+  tableOfContents: Joi.object({
+    maxDepth: Joi.number()
+      .integer()
+      .min(2)
+      .max(6)
+      .default(DEFAULT_CONFIG.tableOfContents.maxDepth),
+  }),
 });
 
 export {ThemeConfigSchema};

@@ -85,6 +85,10 @@ export type Footer = {
   links: FooterLinks[];
 };
 
+export type TableOfContents = {
+  maxDepth: number;
+};
+
 export type ThemeConfig = {
   docs: {
     versionPersistence: DocsVersionPersistence;
@@ -104,6 +108,7 @@ export type ThemeConfig = {
   image?: string;
   metadatas: Array<Record<string, string>>;
   sidebarCollapsible: boolean;
+  tableOfContents: TableOfContents;
 };
 
 export function useThemeConfig(): ThemeConfig {

@@ -757,6 +757,32 @@ module.exports = {
 };
 ```
 
+## Table of Contents {#table-of-contents}
+
+You can adjust the table of contents via `themeConfig.tableOfContents`.
+
+<small>
+
+| Name       | Type     | Default | Description                            |
+| ---------- | -------- | ------- | -------------------------------------- |
+| `maxDepth` | `number` | `3`     | Max heading level displayed in the TOC |
+
+</small>
+
+Example configuration:
+
+```js title="docusaurus.config.js"
+module.exports = {
+  themeConfig: {
+    // highlight-start
+    tableOfContents: {
+      maxDepth: 5,
+    },
+    // highlight-end
+  },
+};
+```
+
 ## Hooks {#hooks}
 
 ### `useThemeContext` {#usethemecontext}