3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-03 20:27:20 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: various TOC improvements (#5627)

Browse source
This commit is contained in:
Alexey Pyltsyn 2021-09-30 13:22:32 +03:00 • committed by GitHub
parent 725e7e3da1
commit 4dbc458a22
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/docusaurus-theme-classic/src/theme/Heading/index.tsx
View file

@ -44,7 +44,7 @@ const createAnchorHeading = (
return ( return (
<Tag <Tag
{...props} {...props}
className={clsx('anchor', `anchor__${Tag}`, { className={clsx('anchor', {
[styles.anchorWithHideOnScrollNavbar]: hideOnScroll, [styles.anchorWithHideOnScrollNavbar]: hideOnScroll,
[styles.anchorWithStickyNavbar]: !hideOnScroll, [styles.anchorWithStickyNavbar]: !hideOnScroll,
})} })}

5
packages/docusaurus-theme-classic/src/theme/TOCInline/index.tsx
View file

@ -6,7 +6,6 @@
*/ */
import React from 'react'; import React from 'react';
import clsx from 'clsx';
import type {TOCInlineProps} from '@theme/TOCInline'; import type {TOCInlineProps} from '@theme/TOCInline';
import styles from './styles.module.css'; import styles from './styles.module.css';
import TOCItems from '@theme/TOCItems'; import TOCItems from '@theme/TOCItems';
@ -17,13 +16,13 @@ function TOCInline({
maxHeadingLevel, maxHeadingLevel,
}: TOCInlineProps): JSX.Element { }: TOCInlineProps): JSX.Element {
return ( return (
<div className={clsx(styles.tableOfContentsInline)}> <div className={styles.tableOfContentsInline}>
<TOCItems <TOCItems
toc={toc} toc={toc}
minHeadingLevel={minHeadingLevel} minHeadingLevel={minHeadingLevel}
maxHeadingLevel={maxHeadingLevel} maxHeadingLevel={maxHeadingLevel}
className="table-of-contents" className="table-of-contents"
linkClassName="" linkClassName={null}
/> />
</div> </div>
); );

10
packages/docusaurus-theme-classic/src/theme/TOCItems/index.tsx
View file

@ -19,25 +19,25 @@ import {
/* eslint-disable jsx-a11y/control-has-associated-label */ /* eslint-disable jsx-a11y/control-has-associated-label */
function TOCItemList({ function TOCItemList({
toc, toc,
className = 'table-of-contents table-of-contents__left-border', className,
linkClassName = 'table-of-contents__link', linkClassName,
isChild, isChild,
}: { }: {
readonly toc: readonly TOCItem[]; readonly toc: readonly TOCItem[];
readonly className: string; readonly className: string;
readonly linkClassName: string; readonly linkClassName: string | null;
readonly isChild?: boolean; readonly isChild?: boolean;
}): JSX.Element | null { }): JSX.Element | null {
if (!toc.length) { if (!toc.length) {
return null; return null;
} }
return ( return (
<ul className={isChild ? '' : className}> <ul className={isChild ? undefined : className}>
{toc.map((heading) => ( {toc.map((heading) => (
<li key={heading.id}> <li key={heading.id}>
<a <a
href={`#${heading.id}`} href={`#${heading.id}`}
className={linkClassName} className={linkClassName ?? undefined}
// Developer provided the HTML, so assume it's safe. // Developer provided the HTML, so assume it's safe.
// eslint-disable-next-line react/no-danger // eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{__html: heading.value}} dangerouslySetInnerHTML={{__html: heading.value}}

2
packages/docusaurus-theme-classic/src/types.d.ts vendored
View file

@ -578,7 +578,7 @@ declare module '@theme/TOCItems' {
readonly minHeadingLevel?: number; readonly minHeadingLevel?: number;
readonly maxHeadingLevel?: number; readonly maxHeadingLevel?: number;
readonly className?: string; readonly className?: string;
readonly linkClassName?: string; readonly linkClassName?: string | null;
readonly linkActiveClassName?: string; readonly linkActiveClassName?: string;
}; };

7
packages/docusaurus-theme-common/src/utils/useTOCHighlight.ts
View file

@ -38,11 +38,12 @@ function getAnchors({
}) { }) {
const selectors = []; const selectors = [];
for (let i = minHeadingLevel; i <= maxHeadingLevel; i += 1) { 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( function getActiveAnchor(