10690085094

Committed 03 Sep 2024 08:24PM UTC coverage: 31.912% (+0.03%) from 31.878%

Build # 10690085094

Build Type

Pull #9704

github

Committed by

ben-pace

Commit Message

wip

Pull Request Pull Request #9704: Curation Page

Run Details

5027 of 41144 branches covered (12.22%)

Branch coverage included in aggregate %.

55 of 89 new or added lines in 14 files covered. (61.8%)

879 existing lines in 27 files now uncovered.

29390 of 66706 relevant lines covered (44.06%)

188.35 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

10.73

/packages/lesswrong/components/posts/TableOfContents/FixedPositionToC.tsx

import React, { FC, MouseEvent, useEffect, useState } from 'react';
import { Components, registerComponent } from '../../../lib/vulcan-lib';
import withErrorBoundary from '../../common/withErrorBoundary'
import { isServer } from '../../../lib/executionEnvironment';
import { useLocation } from '../../../lib/routeUtil';
import type { ToCSection, ToCSectionWithOffset } from '../../../lib/tableOfContents';
import qs from 'qs'
import isEmpty from 'lodash/isEmpty';
import isEqual from 'lodash/isEqual';
import filter from 'lodash/filter';
import { getCurrentSectionMark, ScrollHighlightLandmark, useScrollHighlight } from '../../hooks/useScrollHighlight';
import { useNavigate } from '../../../lib/reactRouterWrapper';
import { usePostReadProgress } from '../usePostReadProgress';
import { usePostsPageContext } from '../PostsPage/PostsPageContext';
import classNames from 'classnames';
import { ToCDisplayOptions, adjustHeadingText, getAnchorY, isRegularClick, jumpToY } from './TableOfContentsList';
import { HOVER_CLASSNAME } from './MultiToCLayout';


function normalizeOffsets(sections: (ToCSection | ToCSectionWithOffset)[]): ToCSectionWithOffset[] {
  if (sections.length === 0) {
    return [];
  }
  
  const titleSection: ToCSectionWithOffset = { ...sections[0], offset: sections[0].offset ?? 0 };

  const remainingSections = sections.slice(1);

  const normalizedSections: ToCSectionWithOffset[] = remainingSections.map((section, idx) => ({
    ...section,
    offset: section.divider ? (1 - (sections[idx].offset ?? 0)) : ((section.offset ?? 0) - (sections[idx].offset ?? 0))
  }));

  return [titleSection, ...normalizedSections];
};

function getSectionsWithOffsets(sectionHeaders: Element[], filteredSections: ToCSection[]) {
  let sectionsWithOffsets;
  const parentContainer = sectionHeaders[0]?.parentElement;
  // If we have any section headers, assign offsets to them
  if (parentContainer) {
    const containerHeight = parentContainer.getBoundingClientRect().height;

    const anchorOffsets = sectionHeaders.map(sectionHeader => ({
      anchorHref: sectionHeader.getAttribute('id'),
      offset: ((sectionHeader as HTMLElement).offsetTop - parentContainer.offsetTop)  / containerHeight
    }));

    sectionsWithOffsets = filteredSections.map((section) => {
      const anchorOffset = anchorOffsets.find((anchorOffset) => anchorOffset.anchorHref === section.anchor);
      return {
        ...section,
        offset: anchorOffset?.offset,
      };
    });
  } else {
    // Otherwise, we'll just default to assigning the entire offset to the comments "section" in the ToC in `normalizeOffsets`
    sectionsWithOffsets = filteredSections;
  }
  return sectionsWithOffsets;
}

const styles = (theme: ThemeType) => ({
  root: {
    left: 0,
    top: 0,
    maxHeight: '100vh',
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
    paddingTop: 22,
    //Override bottom border of title row for FixedToC but not in other uses of TableOfContentsRow
    '& .TableOfContentsRow-title': {
      borderBottom: "none",
    },
    wordBreak: 'break-word',
    transition: 'opacity .25s ease-in-out 0.5s, transform .5s ease-in-out 0.5s, height 0.4s ease-in-out, max-height 0.4s ease-in-out',
  },
  hover: {
    '& $rowOpacity': {
      opacity: 1,
    },
    '& $tocTitle': {
      opacity: 1,
    }
  },
  rowWrapper: {
    position: "relative",
    zIndex: 1,
    display: "flex",
    flexDirection: "column-reverse",
  },
  rowOpacity: {
    transition: '.25s',
    opacity: 0,
  },
  rowDotContainer: {
    display: "flex",
    alignItems: "center"
  },
  rowDot: {
    fontSize: 9,
    height: 9,
    background: theme.palette.background.pageActiveAreaBackground,
    marginLeft: 2,
    marginRight: 8,
    zIndex: 1,
    color: theme.palette.grey[700]
  },
  tocWrapper: {
    marginLeft: 13,
  },
  //Use our PostTitle styling with small caps
  tocTitle: {
    ...theme.typography.postStyle,
    ...theme.typography.smallCaps,
    fontSize: "1.3rem",
  },
  wrapper: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    flexGrow: 1,
  },
  progressBarContainer: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-evenly',
    '--scrollAmount': '0%',
    marginRight: -4,
    marginBottom: 20,
    width: 1,
    background: theme.palette.grey[400],
    overflowY: 'clip',
  },
  progressBar: {
    flex: 'var(--scrollAmount)',
    display: 'flex',
    [theme.breakpoints.down('sm')]: {
      marginLeft: -8,
      marginRight: -8
    },
    "&:after": {
      content: "''",
      marginLeft: -0.5,
      paddingLeft: 2,
      alignSelf: 'end',
      height: 'var(--windowHeight)',
      background: theme.palette.grey[600],
    }
  },
  unfilledProgressBar: {
    width: 1,
    flex: 'calc(100% - var(--scrollAmount))',
    [theme.breakpoints.down('sm')]: {
      marginLeft: -8,
      marginRight: -8
    },
  },
  rows: {
    display: 'flex',
    flexDirection: 'column',
    flexGrow: 1,
    '& .TableOfContentsRow-link': {
      background: theme.palette.panelBackground.default
    },
    '& .TableOfContentsDivider-divider': {
      marginLeft: 4,
    },
  },
});

const FixedPositionToc = ({tocSections, title, onClickSection, displayOptions, classes, hover, commentCount, answerCount}: {
  tocSections: ToCSection[],
  title: string|null,
  onClickSection?: () => void,
  displayOptions?: ToCDisplayOptions,
  classes: ClassesType<typeof styles>,
  hover?: boolean,
  commentCount?: number,
  answerCount?: number,
}) => {
  const { TableOfContentsRow, AnswerTocRow } = Components;

  const navigate = useNavigate();
  const location = useLocation();
  const { query } = location;

  const [normalizedSections, setNormalizedSections] = useState<ToCSectionWithOffset[]>([]);
  const [hasLoaded, setHasLoaded] = useState(false);

  const postContext = usePostsPageContext()?.fullPost;
  const disableProgressBar = (!postContext || isServer || postContext.shortform);

  const { readingProgressBarRef } = usePostReadProgress({
    updateProgressBar: (element, scrollPercent) => element.style.setProperty("--scrollAmount", `${scrollPercent}%`),
    disabled: disableProgressBar || !hasLoaded,
    setScrollWindowHeight: (element, height) => element.style.setProperty("--windowHeight", `${height}px`),
    useFirstViewportHeight: true
  });

  const jumpToAnchor = (anchor: string) => {
    if (isServer) return;

    const anchorY = getAnchorY(anchor);
    if (anchorY !== null) {
      delete query.commentId;
      navigate({
        search: isEmpty(query) ? '' : `?${qs.stringify(query)}`,
        hash: `#${anchor}`,
      });
      let sectionYdocumentSpace = anchorY + window.scrollY;
      jumpToY(sectionYdocumentSpace);
    }
  }

  let filteredSections = (displayOptions?.maxHeadingDepth && tocSections)
    ? filter(tocSections, s=>s.level <= displayOptions.maxHeadingDepth!)
    : tocSections;

  if (displayOptions?.addedRows) {
    filteredSections = [...filteredSections, ...displayOptions.addedRows];
  }

  // Filter out answers in the full-height ToC, along with the section heading and divider (which are only present if there's at least one answer)
  if (filteredSections.some(section => section.answer)) {
    filteredSections = filteredSections.filter(section => !['answers', 'postAnswersDivider'].includes(section.anchor) && !section.answer);
  }
  
  const { landmarkName: currentSection } = useScrollHighlight([
    ...filteredSections.map((section): ScrollHighlightLandmark => ({
      landmarkName: section.anchor,
      elementId: section.anchor,
      position: "centerOfElement",
      offset: -(getCurrentSectionMark() * 2)
    })),
    {
      landmarkName: "comments",
      elementId: "postBody",
      position: "bottomOfElement",
      offset: -(getCurrentSectionMark() * 2)
    },
  ]);

  const handleClick = async (ev: React.SyntheticEvent, jumpToSection: () => void): Promise<void> => {
    ev.preventDefault();
    if (onClickSection) {
      onClickSection();
      // One of the things this callback can do is expand folded-up text which
      // might contain the anchor we want to scroll to. We wait for a setTimeout
      // here, to allow React re-rendering to finish in that case.
      await new Promise((resolve,reject) => setTimeout(resolve, 0));
    }
    jumpToSection();
  }

  useEffect(() => {
    const postBodyRef = document.getElementById('postBody');
    if (!postBodyRef) return;
    //Get all elements with href corresponding to anchors from the table of contents
    const postImages = Array.from(postBodyRef.getElementsByTagName('img'));
    function updateImageLoadingState(this: HTMLImageElement) {
      if (postImages.every(image => image.complete)) setHasLoaded(true)
      this.removeEventListener('load', updateImageLoadingState);
    };
    postImages.forEach((postImage) => postImage.addEventListener('load', updateImageLoadingState));
    if (postImages.every(image => image.complete)) setHasLoaded(true);
    return () => {
      postImages.forEach((postImage) => postImage.removeEventListener('load', updateImageLoadingState));
    }
  }, [])

  useEffect(() => {
    const postBodyRef = document.getElementById('postBody');
    if (!postBodyRef) return;
    const postBodyBlocks = Array.from(postBodyRef.querySelectorAll('[id]'));
    const sectionHeaders = postBodyBlocks.filter(block => filteredSections.map(section => section.anchor).includes(block.getAttribute('id') ?? ''));
    const sectionsWithOffsets = getSectionsWithOffsets(sectionHeaders, filteredSections);
    const newNormalizedSections = normalizeOffsets(sectionsWithOffsets);

    if (!isEqual(normalizedSections, newNormalizedSections)) {
      setNormalizedSections(newNormalizedSections);
    }
  }, [filteredSections, normalizedSections, hasLoaded]);

  const titleRow = (
    <div className={classes.rowWrapper} key={"#"}>
      <div className={classes.rowDotContainer}>
        <span className={classNames(HOVER_CLASSNAME, classes.rowOpacity, classes.tocWrapper)}>
          <TableOfContentsRow indentLevel={1} key="postTitle" href="#" offset={0} fullHeight
            highlighted={currentSection === "above"}
            onClick={ev => {
              if (isRegularClick(ev)) {
              void handleClick(ev, () => {
                navigate("#");
                jumpToY(0)
              });
              }
            }}
          >
            <div className={classes.tocTitle}>
              {title?.trim()}
            </div>
          </TableOfContentsRow>
        </span>
      </div>
    </div>
  );
  
  const renderedSections = normalizedSections.filter(row => !row.divider && row.anchor !== "comments");

  const rows = renderedSections.map((section, index) => {
    const offsetStyling = section.offset !== undefined ? { flex: section.offset } : undefined;

    const tocRow = (
      <TableOfContentsRow
        indentLevel={section.level}
        divider={section.divider}
        href={"#"+section.anchor}
        offset={section.offset}
        highlighted={section.anchor === currentSection}
        onClick={(ev) => {
          if (isRegularClick(ev)) {
            void handleClick(ev, () => {
              jumpToAnchor(section.anchor)
            });
          }
        }}
        answer={!!section.answer}
        fullHeight
      >
        {section.answer
          ? <AnswerTocRow answer={section.answer} />
          : <span>{adjustHeadingText(section.title)}</span>
        }
      </TableOfContentsRow>
    )

    return (
      <div className={classes.rowWrapper} style={offsetStyling} key={section.anchor}>
        <div className={classes.rowDotContainer}>
          <div className={classes.rowDot}>•</div>
          <span className={classNames(classes.rowOpacity, HOVER_CLASSNAME)}>
            {tocRow}
          </span>
        </div>
      </div>
    )
  });

  if (!tocSections || !hasLoaded)
    return <div/>

  return <div className={classNames(classes.root, { [classes.hover]: hover })}>
    <div className={classes.wrapper}>
      <div className={classes.progressBarContainer} ref={readingProgressBarRef}>
        <div className={classes.progressBar} />
        <div className={classes.unfilledProgressBar}/>
      </div>
      <div className={classes.rows}>
        {titleRow}
        {rows}
      </div>
    </div>
  </div>
}

const FixedPositionTocComponent = registerComponent(
  "FixedPositionToC", FixedPositionToc, {
    hocs: [withErrorBoundary],
    styles
  }
);

declare global {
  interface ComponentTypes {
    FixedPositionToC: typeof FixedPositionTocComponent
  }
}

1	import React, { FC, MouseEvent, useEffect, useState } from 'react';	1✔
2	import { Components, registerComponent } from '../../../lib/vulcan-lib';	1✔
3	import withErrorBoundary from '../../common/withErrorBoundary'	1✔
4	import { isServer } from '../../../lib/executionEnvironment';	1✔
5	import { useLocation } from '../../../lib/routeUtil';	1✔
6	import type { ToCSection, ToCSectionWithOffset } from '../../../lib/tableOfContents';
7	import qs from 'qs'	1✔
8	import isEmpty from 'lodash/isEmpty';	1✔
9	import isEqual from 'lodash/isEqual';	1✔
10	import filter from 'lodash/filter';	1✔
11	import { getCurrentSectionMark, ScrollHighlightLandmark, useScrollHighlight } from '../../hooks/useScrollHighlight';	1✔
12	import { useNavigate } from '../../../lib/reactRouterWrapper';	1✔
13	import { usePostReadProgress } from '../usePostReadProgress';	1✔
14	import { usePostsPageContext } from '../PostsPage/PostsPageContext';	1✔
15	import classNames from 'classnames';	1✔
16	import { ToCDisplayOptions, adjustHeadingText, getAnchorY, isRegularClick, jumpToY } from './TableOfContentsList';	1✔
17	import { HOVER_CLASSNAME } from './MultiToCLayout';	1✔
18
19
20	function normalizeOffsets(sections: (ToCSection \| ToCSectionWithOffset)[]): ToCSectionWithOffset[] {
UNCOV 21	if (sections.length === 0) {	×
UNCOV 22	return [];	×
23	}
24
25	const titleSection: ToCSectionWithOffset = { ...sections[0], offset: sections[0].offset ?? 0 };	×
26
UNCOV 27	const remainingSections = sections.slice(1);	×
28
UNCOV 29	const normalizedSections: ToCSectionWithOffset[] = remainingSections.map((section, idx) => ({	×
30	...section,
31	offset: section.divider ? (1 - (sections[idx].offset ?? 0)) : ((section.offset ?? 0) - (sections[idx].offset ?? 0))	×
32	}));
33
34	return [titleSection, ...normalizedSections];	×
35	};
36
37	function getSectionsWithOffsets(sectionHeaders: Element[], filteredSections: ToCSection[]) {
38	let sectionsWithOffsets;
UNCOV 39	const parentContainer = sectionHeaders[0]?.parentElement;	×
40	// If we have any section headers, assign offsets to them
UNCOV 41	if (parentContainer) {	×
UNCOV 42	const containerHeight = parentContainer.getBoundingClientRect().height;	×
43
UNCOV 44	const anchorOffsets = sectionHeaders.map(sectionHeader => ({	×
45	anchorHref: sectionHeader.getAttribute('id'),
46	offset: ((sectionHeader as HTMLElement).offsetTop - parentContainer.offsetTop) / containerHeight
47	}));
48
UNCOV 49	sectionsWithOffsets = filteredSections.map((section) => {	×
UNCOV 50	const anchorOffset = anchorOffsets.find((anchorOffset) => anchorOffset.anchorHref === section.anchor);	×
UNCOV 51	return {	×
52	...section,
53	offset: anchorOffset?.offset,	×
54	};
55	});
56	} else {
57	// Otherwise, we'll just default to assigning the entire offset to the comments "section" in the ToC in `normalizeOffsets`
58	sectionsWithOffsets = filteredSections;	×
59	}
60	return sectionsWithOffsets;	×
61	}
62
63	const styles = (theme: ThemeType) => ({	1✔
64	root: {
65	left: 0,
66	top: 0,
67	maxHeight: '100vh',
68	height: '100%',
69	display: 'flex',
70	flexDirection: 'column',
71	paddingTop: 22,
72	//Override bottom border of title row for FixedToC but not in other uses of TableOfContentsRow
73	'& .TableOfContentsRow-title': {
74	borderBottom: "none",
75	},
76	wordBreak: 'break-word',
77	transition: 'opacity .25s ease-in-out 0.5s, transform .5s ease-in-out 0.5s, height 0.4s ease-in-out, max-height 0.4s ease-in-out',
78	},
79	hover: {
80	'& $rowOpacity': {
81	opacity: 1,
82	},
83	'& $tocTitle': {
84	opacity: 1,
85	}
86	},
87	rowWrapper: {
88	position: "relative",
89	zIndex: 1,
90	display: "flex",
91	flexDirection: "column-reverse",
92	},
93	rowOpacity: {
94	transition: '.25s',
95	opacity: 0,
96	},
97	rowDotContainer: {
98	display: "flex",
99	alignItems: "center"
100	},
101	rowDot: {
102	fontSize: 9,
103	height: 9,
104	background: theme.palette.background.pageActiveAreaBackground,
105	marginLeft: 2,
106	marginRight: 8,
107	zIndex: 1,
108	color: theme.palette.grey[700]
109	},
110	tocWrapper: {
111	marginLeft: 13,
112	},
113	//Use our PostTitle styling with small caps
114	tocTitle: {
115	...theme.typography.postStyle,
116	...theme.typography.smallCaps,
117	fontSize: "1.3rem",
118	},
119	wrapper: {
120	display: 'flex',
121	flexDirection: 'row',
122	justifyContent: 'space-evenly',
123	flexGrow: 1,
124	},
125	progressBarContainer: {
126	display: 'flex',
127	flexDirection: 'column',
128	justifyContent: 'space-evenly',
129	'--scrollAmount': '0%',
130	marginRight: -4,
131	marginBottom: 20,
132	width: 1,
133	background: theme.palette.grey[400],
134	overflowY: 'clip',
135	},
136	progressBar: {
137	flex: 'var(--scrollAmount)',
138	display: 'flex',
139	[theme.breakpoints.down('sm')]: {
140	marginLeft: -8,
141	marginRight: -8
142	},
143	"&:after": {
144	content: "''",
145	marginLeft: -0.5,
146	paddingLeft: 2,
147	alignSelf: 'end',
148	height: 'var(--windowHeight)',
149	background: theme.palette.grey[600],
150	}
151	},
152	unfilledProgressBar: {
153	width: 1,
154	flex: 'calc(100% - var(--scrollAmount))',
155	[theme.breakpoints.down('sm')]: {
156	marginLeft: -8,
157	marginRight: -8
158	},
159	},
160	rows: {
161	display: 'flex',
162	flexDirection: 'column',
163	flexGrow: 1,
164	'& .TableOfContentsRow-link': {
165	background: theme.palette.panelBackground.default
166	},
167	'& .TableOfContentsDivider-divider': {
168	marginLeft: 4,
169	},
170	},
171	});
172
173	const FixedPositionToc = ({tocSections, title, onClickSection, displayOptions, classes, hover, commentCount, answerCount}: {	1✔
174	tocSections: ToCSection[],
175	title: string\|null,
176	onClickSection?: () => void,
177	displayOptions?: ToCDisplayOptions,
178	classes: ClassesType<typeof styles>,
179	hover?: boolean,
180	commentCount?: number,
181	answerCount?: number,
182	}) => {
UNCOV 183	const { TableOfContentsRow, AnswerTocRow } = Components;	×
184
UNCOV 185	const navigate = useNavigate();	×
UNCOV 186	const location = useLocation();	×
UNCOV 187	const { query } = location;	×
188
UNCOV 189	const [normalizedSections, setNormalizedSections] = useState<ToCSectionWithOffset[]>([]);	×
UNCOV 190	const [hasLoaded, setHasLoaded] = useState(false);	×
191
UNCOV 192	const postContext = usePostsPageContext()?.fullPost;	×
UNCOV 193	const disableProgressBar = (!postContext \|\| isServer \|\| postContext.shortform);	×
194
UNCOV 195	const { readingProgressBarRef } = usePostReadProgress({	×
UNCOV 196	updateProgressBar: (element, scrollPercent) => element.style.setProperty("--scrollAmount", `${scrollPercent}%`),	×
197	disabled: disableProgressBar \|\| !hasLoaded,	×
UNCOV 198	setScrollWindowHeight: (element, height) => element.style.setProperty("--windowHeight", `${height}px`),	×
199	useFirstViewportHeight: true
200	});
201
UNCOV 202	const jumpToAnchor = (anchor: string) => {	×
UNCOV 203	if (isServer) return;	×
204
UNCOV 205	const anchorY = getAnchorY(anchor);	×
UNCOV 206	if (anchorY !== null) {	×
UNCOV 207	delete query.commentId;	×
UNCOV 208	navigate({	×
209	search: isEmpty(query) ? '' : `?${qs.stringify(query)}`,	×
210	hash: `#${anchor}`,
211	});
212	let sectionYdocumentSpace = anchorY + window.scrollY;	×
213	jumpToY(sectionYdocumentSpace);	×
214	}
215	}
216
217	let filteredSections = (displayOptions?.maxHeadingDepth && tocSections)	×
UNCOV 218	? filter(tocSections, s=>s.level <= displayOptions.maxHeadingDepth!)	×
219	: tocSections;
220
UNCOV 221	if (displayOptions?.addedRows) {	×
222	filteredSections = [...filteredSections, ...displayOptions.addedRows];	×
223	}
224
225	// Filter out answers in the full-height ToC, along with the section heading and divider (which are only present if there's at least one answer)
UNCOV 226	if (filteredSections.some(section => section.answer)) {	×
UNCOV 227	filteredSections = filteredSections.filter(section => !['answers', 'postAnswersDivider'].includes(section.anchor) && !section.answer);	×
228	}
229
230	const { landmarkName: currentSection } = useScrollHighlight([	×
UNCOV 231	...filteredSections.map((section): ScrollHighlightLandmark => ({	×
232	landmarkName: section.anchor,
233	elementId: section.anchor,
234	position: "centerOfElement",
235	offset: -(getCurrentSectionMark() * 2)
236	})),
237	{
238	landmarkName: "comments",
239	elementId: "postBody",
240	position: "bottomOfElement",
241	offset: -(getCurrentSectionMark() * 2)
242	},
243	]);
244
245	const handleClick = async (ev: React.SyntheticEvent, jumpToSection: () => void): Promise<void> => {	×
UNCOV 246	ev.preventDefault();	×
UNCOV 247	if (onClickSection) {	×
248	onClickSection();	×
249	// One of the things this callback can do is expand folded-up text which
250	// might contain the anchor we want to scroll to. We wait for a setTimeout
251	// here, to allow React re-rendering to finish in that case.
UNCOV 252	await new Promise((resolve,reject) => setTimeout(resolve, 0));	×
253	}
254	jumpToSection();	×
255	}
256
257	useEffect(() => {	×
258	const postBodyRef = document.getElementById('postBody');	×
UNCOV 259	if (!postBodyRef) return;	×
260	//Get all elements with href corresponding to anchors from the table of contents
UNCOV 261	const postImages = Array.from(postBodyRef.getElementsByTagName('img'));	×
262	function updateImageLoadingState(this: HTMLImageElement) {
UNCOV 263	if (postImages.every(image => image.complete)) setHasLoaded(true)	×
UNCOV 264	this.removeEventListener('load', updateImageLoadingState);	×
265	};
UNCOV 266	postImages.forEach((postImage) => postImage.addEventListener('load', updateImageLoadingState));	×
UNCOV 267	if (postImages.every(image => image.complete)) setHasLoaded(true);	×
UNCOV 268	return () => {	×
UNCOV 269	postImages.forEach((postImage) => postImage.removeEventListener('load', updateImageLoadingState));	×
270	}
271	}, [])
272
273	useEffect(() => {	×
UNCOV 274	const postBodyRef = document.getElementById('postBody');	×
UNCOV 275	if (!postBodyRef) return;	×
UNCOV 276	const postBodyBlocks = Array.from(postBodyRef.querySelectorAll('[id]'));	×
277	const sectionHeaders = postBodyBlocks.filter(block => filteredSections.map(section => section.anchor).includes(block.getAttribute('id') ?? ''));	×
UNCOV 278	const sectionsWithOffsets = getSectionsWithOffsets(sectionHeaders, filteredSections);	×
279	const newNormalizedSections = normalizeOffsets(sectionsWithOffsets);	×
280
UNCOV 281	if (!isEqual(normalizedSections, newNormalizedSections)) {	×
282	setNormalizedSections(newNormalizedSections);	×
283	}
284	}, [filteredSections, normalizedSections, hasLoaded]);
285
286	const titleRow = (
UNCOV 287	<div className={classes.rowWrapper} key={"#"}>	×
288	<div className={classes.rowDotContainer}>
289	<span className={classNames(HOVER_CLASSNAME, classes.rowOpacity, classes.tocWrapper)}>
290	<TableOfContentsRow indentLevel={1} key="postTitle" href="#" offset={0} fullHeight
291	highlighted={currentSection === "above"}
292	onClick={ev => {
UNCOV 293	if (isRegularClick(ev)) {	×
294	void handleClick(ev, () => {	×
295	navigate("#");	×
UNCOV 296	jumpToY(0)	×
297	});
298	}
299	}}
300	>
301	<div className={classes.tocTitle}>
302	{title?.trim()}	×
303	</div>
304	</TableOfContentsRow>
305	</span>
306	</div>
307	</div>
308	);
309
UNCOV 310	const renderedSections = normalizedSections.filter(row => !row.divider && row.anchor !== "comments");	×
311
312	const rows = renderedSections.map((section, index) => {	×
313	const offsetStyling = section.offset !== undefined ? { flex: section.offset } : undefined;	×
314
315	const tocRow = (
UNCOV 316	<TableOfContentsRow	×
317	indentLevel={section.level}
318	divider={section.divider}
319	href={"#"+section.anchor}
320	offset={section.offset}
321	highlighted={section.anchor === currentSection}
322	onClick={(ev) => {
UNCOV 323	if (isRegularClick(ev)) {	×
UNCOV 324	void handleClick(ev, () => {	×
UNCOV 325	jumpToAnchor(section.anchor)	×
326	});
327	}
328	}}
329	answer={!!section.answer}
330	fullHeight
331	>
332	{section.answer
333	? <AnswerTocRow answer={section.answer} />	×
334	: <span>{adjustHeadingText(section.title)}</span>
335	}
336	</TableOfContentsRow>
337	)
338
UNCOV 339	return (	×
340	<div className={classes.rowWrapper} style={offsetStyling} key={section.anchor}>
341	<div className={classes.rowDotContainer}>
342	<div className={classes.rowDot}>•</div>
343	<span className={classNames(classes.rowOpacity, HOVER_CLASSNAME)}>
344	{tocRow}
345	</span>
346	</div>
347	</div>
348	)
349	});
350
UNCOV 351	if (!tocSections \|\| !hasLoaded)	×
UNCOV 352	return <div/>	×
353
UNCOV 354	return <div className={classNames(classes.root, { [classes.hover]: hover })}>	×
355	<div className={classes.wrapper}>
356	<div className={classes.progressBarContainer} ref={readingProgressBarRef}>
357	<div className={classes.progressBar} />
358	<div className={classes.unfilledProgressBar}/>
359	</div>
360	<div className={classes.rows}>
361	{titleRow}
362	{rows}
363	</div>
364	</div>
365	</div>
366	}
367
368	const FixedPositionTocComponent = registerComponent(	1✔
369	"FixedPositionToC", FixedPositionToc, {
370	hocs: [withErrorBoundary],
371	styles
372	}
373	);
374
375	declare global {
376	interface ComponentTypes {
377	FixedPositionToC: typeof FixedPositionTocComponent
378	}
379	}

ForumMagnum / ForumMagnum / 10690085094

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous