9553193222

Committed 17 Jun 2024 06:57PM UTC coverage: 31.824% (-0.06%) from 31.886%

Build # 9553193222

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9416 from ForumMagnum/master

LW Deploy, 2024-06-17

Run Details

4823 of 39551 branches covered (12.19%)

Branch coverage included in aggregate %.

9 of 31 new or added lines in 9 files covered. (29.03%)

2 existing lines in 2 files now uncovered.

28073 of 63817 relevant lines covered (43.99%)

179.45 hits per line

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

30.0

/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 } from '@/lib/betas';

const footnotePreviewStyles = (theme: ThemeType): JssStyles => ({
  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",
    },
  },
})

const FootnotePreview = ({classes, href, onsite=false, id, rel, children}: {
  classes: ClassesType,
  href: string,
  onsite?: boolean,
  id?: string,
  rel?: string,
  children: React.ReactNode,
}) => {
  const { ContentStyles, LWPopper } = Components
  
  const { eventHandlers, hover, anchorEl } = useHover({
    eventProps: {
      pageElementContext: "linkPreview",
      hoverPreviewType: "DefaultPreview",
      href,
      onsite,
    },
  });
  
  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 {
    // Grab contents of linked footnote if it exists
    footnoteHTML = document.querySelector(href)?.innerHTML || "";
    // Check whether the footnotehas nonempty contents
    footnoteContentsNonempty = !!Array.from(document.querySelectorAll(`${href} 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]);

  return (
    <span {...eventHandlers}>
      {footnoteContentsNonempty && <LWPopper
        open={hover}
        anchorEl={anchorEl}
        placement="bottom-start"
        allowOverflow
      >
        <Card>
          <ContentStyles contentType="postHighlight" className={classes.hovercard}>
            <div dangerouslySetInnerHTML={{__html: footnoteHTML || ""}} />
          </ContentStyles>
        </Card>
      </LWPopper>}

      <a
        href={hasCollapsedFootnotes ? undefined : href}
        id={id}
        rel={rel}
        onClick={onClick}
      >
        {children}
      </a>
    </span>
  );
}

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 } from '@/lib/betas';	1✔
7
8	const footnotePreviewStyles = (theme: ThemeType): JssStyles => ({	1✔
9	hovercard: {
10	padding: 16,
11	...theme.typography.body2,
12	fontSize: "1.1rem",
13	...theme.typography.commentStyle,
14	color: theme.palette.grey[800],
15	maxWidth: 500,
16	'& a': {
17	color: theme.palette.primary.main,
18	},
19
20	"& .footnote-back-link": {
21	display: "none",
22	},
23	},
24	})
25
26	const FootnotePreview = ({classes, href, onsite=false, id, rel, children}: {	1!
27	classes: ClassesType,
28	href: string,
29	onsite?: boolean,
30	id?: string,
31	rel?: string,
32	children: React.ReactNode,
33	}) => {
34	const { ContentStyles, LWPopper } = Components	×
35
36	const { eventHandlers, hover, anchorEl } = useHover({	×
37	eventProps: {
38	pageElementContext: "linkPreview",
39	hoverPreviewType: "DefaultPreview",
40	href,
41	onsite,
42	},
43	});
44
45	let footnoteContentsNonempty = false;	×
46	let footnoteHTML = "";	×
47
48	// Get the contents of the linked footnote.
49	// This has a try-catch-ignore around it because the link doesn't necessarily
50	// make a valid CSS selector; eg there are some posts in the DB with internal
51	// links to anchors like "#fn:1" which will crash this because it has a ':' in
52	// it.
53	try {	×
54	// Grab contents of linked footnote if it exists
55	footnoteHTML = document.querySelector(href)?.innerHTML \|\| "";	×
56	// Check whether the footnotehas nonempty contents
57	footnoteContentsNonempty = !!Array.from(document.querySelectorAll(`${href} p`)).reduce((acc, p) => acc + p.textContent, "").trim();	×
58	// eslint-disable-next-line no-empty
59	} catch(e) { }
60
61	// TODO: Getting the footnote content from the DOM didn't necessarily work;
62	// for example if the page was only showing an excerpt (with the rest hidden
63	// behind a Read More), it won't be available, and might require a separate
64	// network request to get the rest of the post/comment. Unfortunately in this
65	// context, figuring out what that network request is is pretty complicated;
66	// it could be anything with a content-editable field in it, and that
67	// information isn't wired to pass through the hover-preview system.
68
NEW 69	const onClick = useCallback(() => {	×
NEW 70	window.dispatchEvent(new CustomEvent(EXPAND_FOOTNOTES_EVENT, {detail: href}));	×
71	}, [href]);
72
UNCOV 73	return (	×
74	<span {...eventHandlers}>
75	{footnoteContentsNonempty && <LWPopper	×
76	open={hover}
77	anchorEl={anchorEl}
78	placement="bottom-start"
79	allowOverflow
80	>
81	<Card>
82	<ContentStyles contentType="postHighlight" className={classes.hovercard}>
83	<div dangerouslySetInnerHTML={{__html: footnoteHTML \|\| ""}} />	×
84	</ContentStyles>
85	</Card>
86	</LWPopper>}
87
88	<a
89	href={hasCollapsedFootnotes ? undefined : href}	×
90	id={id}
91	rel={rel}
92	onClick={onClick}
93	>
94	{children}
95	</a>
96	</span>
97	);
98	}
99
100	const FootnotePreviewComponent = registerComponent('FootnotePreview', FootnotePreview, {	1✔
101	styles: footnotePreviewStyles,
102	});
103
104	declare global {
105	interface ComponentTypes {
106	FootnotePreview: typeof FootnotePreviewComponent
107	}
108	}

ForumMagnum / ForumMagnum / 9553193222

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