10715134710

Committed 05 Sep 2024 06:32AM UTC coverage: 32.457% (+0.6%) from 31.859%

Build # 10715134710

Build Type

Pull #9713

github

Committed by

web-flow

Commit Message

Merge 8fedf5bab into 7d567d8ee

Pull Request Pull Request #9713: Merge master into LW Deploy

Run Details

3234 of 25639 branches covered (12.61%)

Branch coverage included in aggregate %.

57 of 99 new or added lines in 17 files covered. (57.58%)

61 existing lines in 3 files now uncovered.

18369 of 40919 relevant lines covered (44.89%)

302.52 hits per line

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

12.93

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

import React, { useCallback } 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';

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%",
    },
  },

  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,
    },
  },
  
  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,
  href: string,
  id?: string,
  rel?: string,
  children: React.ReactNode,
}) => {
  const { ContentStyles, SideItem, LWPopper } = Components
  
  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(() => {
    window.dispatchEvent(new CustomEvent(EXPAND_FOOTNOTES_EVENT, {detail: href}));
  }, [href]);
  
  const postPageContext = usePostsPageContext();
  const post = postPageContext?.fullPost ?? postPageContext?.postPreload;
  const sidenotesDisabledOnPost = post?.disableSidenotes;
  const screenIsWideEnoughForSidenotes = useIsAboveBreakpoint("lg");
  const sidenoteIsVisible = hasSidenotes && !sidenotesDisabledOnPost && screenIsWideEnoughForSidenotes;

  return (
    <span>
      {footnoteContentsNonempty && <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>
      </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;

      for (let i=0; i<parentElement.children.length; i++) {
        if (parentElement.children.item(i) === footnoteElement) {
          return ""+(i+olStart);
        }
      }
    }
  }
  

  return null;
}

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

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

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

ForumMagnum / ForumMagnum / 10715134710

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