10855098233

Committed 13 Sep 2024 07:37PM UTC coverage: 31.872% (+0.001%) from 31.871%

Build # 10855098233

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9743 from ForumMagnum/better-mobile-footnotes

Better mobile footnotes

Run Details

5070 of 41302 branches covered (12.28%)

Branch coverage included in aggregate %.

11 of 25 new or added lines in 4 files covered. (44.0%)

1 existing line in 1 file now uncovered.

29413 of 66889 relevant lines covered (43.97%)

185.06 hits per line

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

13.89

/packages/lesswrong/components/linkPreview/FootnotePreview.tsx

import React, { useCallback, useState } from 'react';
import Card from '@material-ui/core/Card';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import { useHover } from '../common/withHover';
import { EXPAND_FOOTNOTES_EVENT } from '../posts/PostsPage/CollapsedFootnotes';
import { hasCollapsedFootnotes, hasSidenotes } from '@/lib/betas';
import classNames from 'classnames';
import { parseDocumentFromString } from '@/lib/domParser';
import { usePostsPageContext } from '../posts/PostsPage/PostsPageContext';
import { RIGHT_COLUMN_WIDTH_WITH_SIDENOTES, sidenotesHiddenBreakpoint } from '../posts/PostsPage/PostsPage';
import { useIsAboveBreakpoint } from '../hooks/useScreenWidth';
import { useHasSideItemsSidebar } from '../contents/SideItems';
import { useDialog } from '../common/withDialog';
import { isRegularClick } from "@/components/posts/TableOfContents/TableOfContentsList";
import { useTheme } from '../themes/useTheme';
import { isMobile } from '@/lib/utils/isMobile';

const footnotePreviewStyles = (theme: ThemeType) => ({
  hovercard: {
    padding: 16,
    ...theme.typography.body2,
    fontSize: "1.1rem",
    ...theme.typography.commentStyle,
    color: theme.palette.grey[800],
    maxWidth: 500,
    '& a': {
      color: theme.palette.primary.main,
    },
    
    "& .footnote-back-link": {
      display: "none",
    },
  },
  
  anchorHover: {
    border: `2px solid ${theme.palette.primary.dark}`,
    margin: -2,
    borderRadius: 2,
  },

  sidenote: {
    [sidenotesHiddenBreakpoint(theme)]: {
      display: "none",
    },
    "& .footnote-back-link": {
      display: "none",
    },

    width: RIGHT_COLUMN_WIDTH_WITH_SIDENOTES,
    padding: 12,
    
    "& .footnote-content": {
      width: "auto !important",
      maxWidth: "100%",
    },
  },

  footnoteMobileIndicator: {
    display: "none",
    [sidenotesHiddenBreakpoint(theme)]: {
      display: "inline-block",
    },
  },
  
  lineColor: {
    background: theme.palette.sideItemIndicator.footnote,
  },

  sidenoteWithIndex: {
    display: "flex",
  },

  sidenoteIndex: {
    display: "inline-block",
    verticalAlign: "top",
    fontSize: 15,
    marginRight: 0,
    whiteSpace: "nowrap",
    lineHeight: "19px",

    color: theme.palette.greyAlpha(0.65),
    "$sidenoteHover &": {
      color: theme.palette.text.normal,
    },
  },
  
  sidenoteContent: {
    display: "inline-block",
    position: "relative",
    verticalAlign: "top",
    fontSize: 15,
    lineHeight: "19px",
    maxWidth: "100%",
    maxHeight: 200,
    overflow: "hidden",

    color: theme.palette.greyAlpha(0.65),
    "$sidenoteHover &": {
      color: theme.palette.text.normal,
    },
    "& li": {
      fontSize: "0.9em",
      lineHeight: "1.4em",
    },
  },
  
  overflowFade: {
    position: "absolute",
    top: 160,
    height: 40,
    width: "100%",
    background: `linear-gradient(0deg,${theme.palette.background.pageActiveAreaBackground},transparent)`,
  },
  
  sidenoteHover: {
    background: theme.palette.background.sidenoteBackground,
    
    "& $sidenoteContent": {
      maxHeight: "unset",
    },
    "& $overflowFade": {
      display: "none",
    },
  },
})

const FootnotePreview = ({classes, href, id, rel, children}: {
  classes: ClassesType<typeof footnotePreviewStyles>,
  href: string,
  id?: string,
  rel?: string,
  children: React.ReactNode,
}) => {
  const { ContentStyles, SideItem, SideItemLine, LWPopper } = Components
  const { openDialog } = useDialog();
  const [disableHover, setDisableHover] = useState(false);
  const theme = useTheme();
  const { eventHandlers: anchorEventHandlers, hover: anchorHovered, anchorEl } = useHover({
    eventProps: {
      pageElementContext: "linkPreview",
      hoverPreviewType: "DefaultPreview",
      href,
    },
  });
  const { eventHandlers: sidenoteEventHandlers, hover: sidenoteHovered } = useHover();
  const eitherHovered = anchorHovered || sidenoteHovered;
  
  let footnoteContentsNonempty = false;
  let footnoteHTML = "";
  
  // Get the contents of the linked footnote.
  // This has a try-catch-ignore around it because the link doesn't necessarily
  // make a valid CSS selector; eg there are some posts in the DB with internal
  // links to anchors like "#fn:1" which will crash this because it has a ':' in
  // it.
  try {
    // `href` is (probably) an anchor link, of the form `#fn1234`. Since it starts
    // with a hash it can also be used as a CSS selector, which finds its contents
    // in the footer.
    const footnoteContentsElement = document.querySelector(href);
    footnoteHTML = footnoteContentsElement?.innerHTML || "";
    
    // Decide whether the footnote is nonempty. This is tricky because while there
    // are consistently formatted footnotes created by our editor plugins, there
    // are also wacky irregular footnotes present in imported HTML and similar
    // things. Eg https://www.lesswrong.com/posts/ACGeaAk6KButv2xwQ/the-halo-effect
    // We can't just condition on the footnote containing non-whitespace text,
    // because footnotes sometimes have their number and backlink in a place that
    // would be mistaken for their body. Our current heuristic is that a footnote
    // is nonempty if it contains at least one <p> which contains non-whitespace
    // text, which might false-negative on rare cases like an image-only footnote
    // but which seems to work in practice.
    footnoteContentsNonempty = !!footnoteContentsElement
      && !!Array.from(footnoteContentsElement.querySelectorAll("p"))
        .reduce((acc, p) => acc + p.textContent, "").trim();
  // eslint-disable-next-line no-empty
  } catch(e) { }
  
  // TODO: Getting the footnote content from the DOM didn't necessarily work;
  // for example if the page was only showing an excerpt (with the rest hidden
  // behind a Read More), it won't be available, and might require a separate
  // network request to get the rest of the post/comment. Unfortunately in this
  // context, figuring out what that network request *is* is pretty complicated;
  // it could be anything with a content-editable field in it, and that
  // information isn't wired to pass through the hover-preview system.

  const onClick = useCallback((ev: React.MouseEvent) => {
    window.dispatchEvent(new CustomEvent(EXPAND_FOOTNOTES_EVENT, {detail: href}));
    
    if (isRegularClick(ev) && isMobile()) {
      setDisableHover(true);
      openDialog({
        componentName: "FootnoteDialog",
        componentProps: {
          footnoteHTML: footnoteHTML,
        },
      });
      ev.preventDefault();
    }
  }, [href, footnoteHTML, openDialog]);
  
  const postPageContext = usePostsPageContext();
  const post = postPageContext?.fullPost ?? postPageContext?.postPreload;
  const sidenotesDisabledOnPost = post?.disableSidenotes;
  const screenIsWideEnoughForSidenotes = useIsAboveBreakpoint("lg");
  const hasSideItemsSidebar = useHasSideItemsSidebar();
  const sidenoteIsVisible = hasSidenotes && hasSideItemsSidebar && !sidenotesDisabledOnPost && screenIsWideEnoughForSidenotes;

  return (
    <span>
      {footnoteContentsNonempty && !disableHover && <LWPopper
        open={anchorHovered && !sidenoteIsVisible}
        anchorEl={anchorEl}
        placement="bottom-start"
        allowOverflow
      >
        <Card>
          <ContentStyles contentType="postHighlight" className={classes.hovercard}>
            <div dangerouslySetInnerHTML={{__html: footnoteHTML || ""}} />
          </ContentStyles>
        </Card>
      </LWPopper>}
      
      {hasSidenotes && !sidenotesDisabledOnPost && footnoteContentsNonempty &&
        <SideItem options={{offsetTop: -6}}>
          <div
            {...sidenoteEventHandlers}
            className={classNames(
              classes.sidenote,
              eitherHovered && classes.sidenoteHover
            )}
          >
            <SidenoteDisplay
              footnoteHref={href}
              footnoteHTML={footnoteHTML}
              classes={classes}
            />
          </div>
          <span className={classes.footnoteMobileIndicator} onClick={onClick}>
            <SideItemLine colorClass={classes.lineColor}/>
          </span>
        </SideItem>
      }

      <a
        {...anchorEventHandlers}
        href={hasCollapsedFootnotes ? undefined : href}
        id={id}
        rel={rel}
        onClick={onClick}
        className={classNames(eitherHovered && classes.anchorHover)}
      >
        {children}
      </a>
    </span>
  );
}

const SidenoteDisplay = ({footnoteHref, footnoteHTML, classes}: {
  footnoteHref: string,
  footnoteHTML: string,
  classes: ClassesType,
}) => {
  const { ContentStyles } = Components;
  const footnoteIndex = getFootnoteIndex(footnoteHref, footnoteHTML);

  return (
    <ContentStyles contentType="postHighlight">
      <span className={classes.sidenoteWithIndex}>
        {footnoteIndex !== null && <span className={classes.sidenoteIndex}>
          {footnoteIndex}{"."}
        </span>}
        <div className={classes.sidenoteContent}>
          <div dangerouslySetInnerHTML={{__html: footnoteHTML}} />
          <div className={classes.overflowFade} />
        </div>
      </span>
    </ContentStyles>
  );
}

function getFootnoteId(href: string, html: string): string|null {
  if (href.match(/^#fn.*/)) {
    return href.substring(3);
  } else {
    const { document: parsedFootnote } = parseDocumentFromString(html);
    const footnoteId = parsedFootnote
      .getElementsByClassName("footnote-back-link")
      ?.[0]
      ?.getAttribute("data-footnote-id")
    return footnoteId;
  }
}

/**
 * Given a footnote link (in the form of a link-anchor, and inner HTML for the
 * footnote reference), return a footnote-number (or null if we can't find one).
 * Because of different versions of the CkEditor footnote plugin, imported
 * posts, etc, we have several different strategies for doing this:
 *  - Find the footnote reference, and use the data-footnote-index prop
 *  - Find the footnote in the post footer, and if it's inside an <ol> tag, use
 *    its position within that tag's list of children
 */
function getFootnoteIndex(href: string, html: string): string|null {
  // Parse the footnote for its data-footnote-id, use that to find the footnote
  // reference (which is a span that wraps around the part of the footnote that
  // got hover-preview-ified), and take the data-footnote-index from that to
  // display.
  const footnoteId = getFootnoteId(href, html);
  if (!footnoteId) return null;

  const fromFootnoteIndexAttribute = document.getElementById("fnref"+footnoteId)
    ?.getAttribute("data-footnote-index");
  if (fromFootnoteIndexAttribute)
    return fromFootnoteIndexAttribute;
  
  const footnoteElement = document.getElementById("fn"+footnoteId);
  if (footnoteElement) {
    const parentElement = footnoteElement.parentElement;
    if (parentElement && parentElement.tagName === 'OL') {
      const olStartAttr = parentElement.getAttribute("start");
      const olStart = olStartAttr ? parseInt(olStartAttr) : 1;

      let numPrecedingLiElements = 0;
      for (let i=0; i<parentElement.children.length; i++) {
        const elem = parentElement.children.item(i);
        if (elem === footnoteElement) {
          break;
        }
        if (elem?.tagName === 'LI') {
          numPrecedingLiElements++;
        }
      }
      return ""+(numPrecedingLiElements+olStart);
    }
  }
  

  return null;
}

const FootnotePreviewComponent = registerComponent('FootnotePreview', FootnotePreview, {
  styles: footnotePreviewStyles,
});

declare global {
  interface ComponentTypes {
    FootnotePreview: typeof FootnotePreviewComponent
  }
}

1	import React, { useCallback, useState } from 'react';	1✔
2	import Card from '@material-ui/core/Card';	1✔
3	import { Components, registerComponent } from '../../lib/vulcan-lib';	1✔
4	import { useHover } from '../common/withHover';	1✔
5	import { EXPAND_FOOTNOTES_EVENT } from '../posts/PostsPage/CollapsedFootnotes';	1✔
6	import { hasCollapsedFootnotes, hasSidenotes } from '@/lib/betas';	1✔
7	import classNames from 'classnames';	1✔
8	import { parseDocumentFromString } from '@/lib/domParser';	1✔
9	import { usePostsPageContext } from '../posts/PostsPage/PostsPageContext';	1✔
10	import { RIGHT_COLUMN_WIDTH_WITH_SIDENOTES, sidenotesHiddenBreakpoint } from '../posts/PostsPage/PostsPage';	1✔
11	import { useIsAboveBreakpoint } from '../hooks/useScreenWidth';	1✔
12	import { useHasSideItemsSidebar } from '../contents/SideItems';	1✔
13	import { useDialog } from '../common/withDialog';	1✔
14	import { isRegularClick } from "@/components/posts/TableOfContents/TableOfContentsList";	1✔
15	import { useTheme } from '../themes/useTheme';	1✔
16	import { isMobile } from '@/lib/utils/isMobile';	1✔
17
18	const footnotePreviewStyles = (theme: ThemeType) => ({	1✔
19	hovercard: {
20	padding: 16,
21	...theme.typography.body2,
22	fontSize: "1.1rem",
23	...theme.typography.commentStyle,
24	color: theme.palette.grey[800],
25	maxWidth: 500,
26	'& a': {
27	color: theme.palette.primary.main,
28	},
29
30	"& .footnote-back-link": {
31	display: "none",
32	},
33	},
34
35	anchorHover: {
36	border: `2px solid ${theme.palette.primary.dark}`,
37	margin: -2,
38	borderRadius: 2,
39	},
40
41	sidenote: {
42	[sidenotesHiddenBreakpoint(theme)]: {
43	display: "none",
44	},
45	"& .footnote-back-link": {
46	display: "none",
47	},
48
49	width: RIGHT_COLUMN_WIDTH_WITH_SIDENOTES,
50	padding: 12,
51
52	"& .footnote-content": {
53	width: "auto !important",
54	maxWidth: "100%",
55	},
56	},
57
58	footnoteMobileIndicator: {
59	display: "none",
60	[sidenotesHiddenBreakpoint(theme)]: {
61	display: "inline-block",
62	},
63	},
64
65	lineColor: {
66	background: theme.palette.sideItemIndicator.footnote,
67	},
68
69	sidenoteWithIndex: {
70	display: "flex",
71	},
72
73	sidenoteIndex: {
74	display: "inline-block",
75	verticalAlign: "top",
76	fontSize: 15,
77	marginRight: 0,
78	whiteSpace: "nowrap",
79	lineHeight: "19px",
80
81	color: theme.palette.greyAlpha(0.65),
82	"$sidenoteHover &": {
83	color: theme.palette.text.normal,
84	},
85	},
86
87	sidenoteContent: {
88	display: "inline-block",
89	position: "relative",
90	verticalAlign: "top",
91	fontSize: 15,
92	lineHeight: "19px",
93	maxWidth: "100%",
94	maxHeight: 200,
95	overflow: "hidden",
96
97	color: theme.palette.greyAlpha(0.65),
98	"$sidenoteHover &": {
99	color: theme.palette.text.normal,
100	},
101	"& li": {
102	fontSize: "0.9em",
103	lineHeight: "1.4em",
104	},
105	},
106
107	overflowFade: {
108	position: "absolute",
109	top: 160,
110	height: 40,
111	width: "100%",
112	background: `linear-gradient(0deg,${theme.palette.background.pageActiveAreaBackground},transparent)`,
113	},
114
115	sidenoteHover: {
116	background: theme.palette.background.sidenoteBackground,
117
118	"& $sidenoteContent": {
119	maxHeight: "unset",
120	},
121	"& $overflowFade": {
122	display: "none",
123	},
124	},
125	})
126
127	const FootnotePreview = ({classes, href, id, rel, children}: {	1✔
128	classes: ClassesType<typeof footnotePreviewStyles>,
129	href: string,
130	id?: string,
131	rel?: string,
132	children: React.ReactNode,
133	}) => {
NEW 134	const { ContentStyles, SideItem, SideItemLine, LWPopper } = Components	×
NEW 135	const { openDialog } = useDialog();	×
NEW 136	const [disableHover, setDisableHover] = useState(false);	×
NEW 137	const theme = useTheme();	×
UNCOV 138	const { eventHandlers: anchorEventHandlers, hover: anchorHovered, anchorEl } = useHover({	×
139	eventProps: {
140	pageElementContext: "linkPreview",
141	hoverPreviewType: "DefaultPreview",
142	href,
143	},
144	});
145	const { eventHandlers: sidenoteEventHandlers, hover: sidenoteHovered } = useHover();	×
146	const eitherHovered = anchorHovered \|\| sidenoteHovered;	×
147
148	let footnoteContentsNonempty = false;	×
149	let footnoteHTML = "";	×
150
151	// Get the contents of the linked footnote.
152	// This has a try-catch-ignore around it because the link doesn't necessarily
153	// make a valid CSS selector; eg there are some posts in the DB with internal
154	// links to anchors like "#fn:1" which will crash this because it has a ':' in
155	// it.
156	try {	×
157	// `href` is (probably) an anchor link, of the form `#fn1234`. Since it starts
158	// with a hash it can also be used as a CSS selector, which finds its contents
159	// in the footer.
160	const footnoteContentsElement = document.querySelector(href);	×
161	footnoteHTML = footnoteContentsElement?.innerHTML \|\| "";	×
162
163	// Decide whether the footnote is nonempty. This is tricky because while there
164	// are consistently formatted footnotes created by our editor plugins, there
165	// are also wacky irregular footnotes present in imported HTML and similar
166	// things. Eg https://www.lesswrong.com/posts/ACGeaAk6KButv2xwQ/the-halo-effect
167	// We can't just condition on the footnote containing non-whitespace text,
168	// because footnotes sometimes have their number and backlink in a place that
169	// would be mistaken for their body. Our current heuristic is that a footnote
170	// is nonempty if it contains at least one <p> which contains non-whitespace
171	// text, which might false-negative on rare cases like an image-only footnote
172	// but which seems to work in practice.
173	footnoteContentsNonempty = !!footnoteContentsElement	×
174	&& !!Array.from(footnoteContentsElement.querySelectorAll("p"))
175	.reduce((acc, p) => acc + p.textContent, "").trim();	×
176	// eslint-disable-next-line no-empty
177	} catch(e) { }
178
179	// TODO: Getting the footnote content from the DOM didn't necessarily work;
180	// for example if the page was only showing an excerpt (with the rest hidden
181	// behind a Read More), it won't be available, and might require a separate
182	// network request to get the rest of the post/comment. Unfortunately in this
183	// context, figuring out what that network request is is pretty complicated;
184	// it could be anything with a content-editable field in it, and that
185	// information isn't wired to pass through the hover-preview system.
186
NEW 187	const onClick = useCallback((ev: React.MouseEvent) => {	×
188	window.dispatchEvent(new CustomEvent(EXPAND_FOOTNOTES_EVENT, {detail: href}));	×
189
NEW 190	if (isRegularClick(ev) && isMobile()) {	×
NEW 191	setDisableHover(true);	×
NEW 192	openDialog({	×
193	componentName: "FootnoteDialog",
194	componentProps: {
195	footnoteHTML: footnoteHTML,
196	},
197	});
NEW 198	ev.preventDefault();	×
199	}
200	}, [href, footnoteHTML, openDialog]);
201
202	const postPageContext = usePostsPageContext();	×
203	const post = postPageContext?.fullPost ?? postPageContext?.postPreload;	×
204	const sidenotesDisabledOnPost = post?.disableSidenotes;	×
205	const screenIsWideEnoughForSidenotes = useIsAboveBreakpoint("lg");	×
206	const hasSideItemsSidebar = useHasSideItemsSidebar();	×
207	const sidenoteIsVisible = hasSidenotes && hasSideItemsSidebar && !sidenotesDisabledOnPost && screenIsWideEnoughForSidenotes;	×
208
209	return (	×
210	<span>
211	{footnoteContentsNonempty && !disableHover && <LWPopper	×
212	open={anchorHovered && !sidenoteIsVisible}	×
213	anchorEl={anchorEl}
214	placement="bottom-start"
215	allowOverflow
216	>
217	<Card>
218	<ContentStyles contentType="postHighlight" className={classes.hovercard}>
219	<div dangerouslySetInnerHTML={{__html: footnoteHTML \|\| ""}} />	×
220	</ContentStyles>
221	</Card>
222	</LWPopper>}
223
224	{hasSidenotes && !sidenotesDisabledOnPost && footnoteContentsNonempty &&	×
225	<SideItem options={{offsetTop: -6}}>
226	<div
227	{...sidenoteEventHandlers}
228	className={classNames(
229	classes.sidenote,
230	eitherHovered && classes.sidenoteHover	×
231	)}
232	>
233	<SidenoteDisplay
234	footnoteHref={href}
235	footnoteHTML={footnoteHTML}
236	classes={classes}
237	/>
238	</div>
239	<span className={classes.footnoteMobileIndicator} onClick={onClick}>
240	<SideItemLine colorClass={classes.lineColor}/>
241	</span>
242	</SideItem>
243	}
244
245	<a
246	{...anchorEventHandlers}
247	href={hasCollapsedFootnotes ? undefined : href}	×
248	id={id}
249	rel={rel}
250	onClick={onClick}
251	className={classNames(eitherHovered && classes.anchorHover)}	×
252	>
253	{children}
254	</a>
255	</span>
256	);
257	}
258
259	const SidenoteDisplay = ({footnoteHref, footnoteHTML, classes}: {	1✔
260	footnoteHref: string,
261	footnoteHTML: string,
262	classes: ClassesType,
263	}) => {
264	const { ContentStyles } = Components;	×
265	const footnoteIndex = getFootnoteIndex(footnoteHref, footnoteHTML);	×
266
267	return (	×
268	<ContentStyles contentType="postHighlight">
269	<span className={classes.sidenoteWithIndex}>
270	{footnoteIndex !== null && <span className={classes.sidenoteIndex}>	×
271	{footnoteIndex}{"."}
272	</span>}
273	<div className={classes.sidenoteContent}>
274	<div dangerouslySetInnerHTML={{__html: footnoteHTML}} />
275	<div className={classes.overflowFade} />
276	</div>
277	</span>
278	</ContentStyles>
279	);
280	}
281
282	function getFootnoteId(href: string, html: string): string\|null {
283	if (href.match(/^#fn.*/)) {	×
284	return href.substring(3);	×
285	} else {
286	const { document: parsedFootnote } = parseDocumentFromString(html);	×
287	const footnoteId = parsedFootnote	×
288	.getElementsByClassName("footnote-back-link")
289	?.[0]
290	?.getAttribute("data-footnote-id")
291	return footnoteId;	×
292	}
293	}
294
295	/**
296	* Given a footnote link (in the form of a link-anchor, and inner HTML for the
297	* footnote reference), return a footnote-number (or null if we can't find one).
298	* Because of different versions of the CkEditor footnote plugin, imported
299	* posts, etc, we have several different strategies for doing this:
300	* - Find the footnote reference, and use the data-footnote-index prop
301	* - Find the footnote in the post footer, and if it's inside an <ol> tag, use
302	* its position within that tag's list of children
303	*/
304	function getFootnoteIndex(href: string, html: string): string\|null {
305	// Parse the footnote for its data-footnote-id, use that to find the footnote
306	// reference (which is a span that wraps around the part of the footnote that
307	// got hover-preview-ified), and take the data-footnote-index from that to
308	// display.
309	const footnoteId = getFootnoteId(href, html);	×
310	if (!footnoteId) return null;	×
311
312	const fromFootnoteIndexAttribute = document.getElementById("fnref"+footnoteId)	×
313	?.getAttribute("data-footnote-index");
314	if (fromFootnoteIndexAttribute)	×
315	return fromFootnoteIndexAttribute;	×
316
317	const footnoteElement = document.getElementById("fn"+footnoteId);	×
318	if (footnoteElement) {	×
319	const parentElement = footnoteElement.parentElement;	×
320	if (parentElement && parentElement.tagName === 'OL') {	×
321	const olStartAttr = parentElement.getAttribute("start");	×
322	const olStart = olStartAttr ? parseInt(olStartAttr) : 1;	×
323
324	let numPrecedingLiElements = 0;	×
325	for (let i=0; i<parentElement.children.length; i++) {	×
326	const elem = parentElement.children.item(i);	×
327	if (elem === footnoteElement) {	×
328	break;	×
329	}
NEW 330	if (elem?.tagName === 'LI') {	×
NEW 331	numPrecedingLiElements++;	×
332	}
333	}
334	return ""+(numPrecedingLiElements+olStart);	×
335	}
336	}
337
338
339	return null;	×
340	}
341
342	const FootnotePreviewComponent = registerComponent('FootnotePreview', FootnotePreview, {	1✔
343	styles: footnotePreviewStyles,
344	});
345
346	declare global {
347	interface ComponentTypes {
348	FootnotePreview: typeof FootnotePreviewComponent
349	}
350	}

ForumMagnum / ForumMagnum / 10855098233

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