11113161332

Committed 30 Sep 2024 07:52PM UTC coverage: 31.719% (-0.04%) from 31.754%

Build # 11113161332

Build Type

Pull #9771

github

Committed by

ben-pace

Commit Message

lint

Pull Request Pull Request #9771: JargonBot (admin only)

Run Details

5076 of 41714 branches covered (12.17%)

Branch coverage included in aggregate %.

24 of 99 new or added lines in 9 files covered. (24.24%)

4 existing lines in 3 files now uncovered.

29586 of 67565 relevant lines covered (43.79%)

183.14 hits per line

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

3.93

/packages/lesswrong/components/common/ContentItemBody.tsx

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Components, registerComponent, validateUrl } from '../../lib/vulcan-lib';
import { captureException }from '@sentry/core';
import { linkIsExcludedFromPreview } from '../linkPreview/HoverPreviewLink';
import { toRange } from '../../lib/vendor/dom-anchor-text-quote';
import { rawExtractElementChildrenToReactComponent, reduceRangeToText, splitRangeIntoReplaceableSubRanges, wrapRangeWithSpan } from '../../lib/utils/rawDom';
import { withTracking } from '../../lib/analyticsEvents';
import { hasCollapsedFootnotes } from '@/lib/betas';
import isEqual from 'lodash/isEqual';

interface ExternalProps {
  /**
   * The content to show. This MUST come from a GraphQL resolver which does 
   * sanitization, such as post.contents.html
   */
  dangerouslySetInnerHTML: { __html: string };
  
  /**
   * Type-annotation reflecting that you can make a ref of this and call its
   * methods. (Doing so is handled by React, not by anything inside of this
   * using the ref prop)
   */
  ref?: React.RefObject<ContentItemBody>

  // className: Name of an additional CSS class to apply to this element.
  className?: string;

  /**
   * description: (Optional) A human-readable string describing where this
   * content came from. Used in error logging only, not displayed to users.
   */
  description?: string;

  /**
   * Passed through to HoverPreviewLink with link substitution. Only implemented
   * for hover-previews of tags in particular. (This was a solution to some
   * index pages in the Library being very slow to load).
   */
  noHoverPreviewPrefetch?: boolean;

  /**
   * If passed, all links in the content will have the nofollow attribute added.
   * Use for content that has risk of being spam (eg brand-new users).
   */
  nofollow?: boolean;

  /**
   * Extra elements to insert into the document (used for side-comment
   * indicators). This is a mapping from element IDs of block elements (in the
   * `id` attribute) to React elements to insert into those blocks.
   */
  idInsertions?: Record<string, React.ReactNode>;

  /**
   * Substrings to replace with an element. Used for highlighting inline
   * reactions.
   */
  replacedSubstrings?: Record<string, ContentReplacedSubstringComponentInfo>
  
  /**
   * Glossary to display in a tooltip when hovering over a term.
   */
  glossary?: Record<string, ContentReplacedSubstringComponentInfo>
}

export type ContentReplacedSubstringComponentInfo = {
  componentName: keyof ComponentTypes,
  props: AnyBecauseHard
};

interface ContentItemBodyProps extends ExternalProps, WithStylesProps, WithUserProps, WithLocationProps, WithTrackingProps {}
interface ContentItemBodyState {
  updatedElements: boolean,
  renderIndex: number
}

// The body of a post/comment/etc, created by taking server-side-processed HTML
// out of the result of a GraphQL query and adding some decoration to it. In
// particular, if this is the client-side render, adds scroll indicators to
// horizontally-scrolling LaTeX blocks.
//
// This doesn't apply styling (other than for the decorators it adds) because
// it's shared between entity types, which have styling that differs.
//
// Props:
//    dangerouslySetInnerHTML: Follows the same convention as
//      dangerouslySetInnerHTML on a div, ie, you set the HTML content of this
//      by passing dangerouslySetInnerHTML={{__html: "<p>foo</p>"}}.
export class ContentItemBody extends Component<ContentItemBodyProps,ContentItemBodyState> {
  private bodyRef: React.RefObject<HTMLDivElement>

  private replacedElements: Array<{
    replacementElement: React.ReactNode
    container: HTMLElement
  }>
  
  constructor(props: ContentItemBodyProps) {
    super(props);
    this.bodyRef = React.createRef<HTMLDivElement>();
    this.replacedElements = [];
    this.state = {
      updatedElements:false,
      renderIndex: 0,
    }
  }

  componentDidMount () {
    this.applyLocalModifications();
  }
  
  componentDidUpdate(prevProps: ContentItemBodyProps) {
    if (this.state.updatedElements) {
      const htmlChanged = prevProps.dangerouslySetInnerHTML?.__html !== this.props.dangerouslySetInnerHTML?.__html;
      const replacedSubstringsChanged = !isEqual(prevProps.replacedSubstrings, this.props.replacedSubstrings);
      if (htmlChanged || replacedSubstringsChanged) {
        this.replacedElements = [];
        this.setState({
          updatedElements: false,
          renderIndex: this.state.renderIndex+1,
        });
      }
    } else {
      this.applyLocalModifications();
    }
  }
  
  applyLocalModifications() {
    const element = this.bodyRef.current;
    if (element) {
      this.applyLocalModificationsTo(element);
      this.setState({updatedElements: true})
    }
  }

  applyLocalModificationsTo(element: HTMLElement) {
    try {
      // Replace substrings (for inline reacts) goes first, because it can split
      // elements that other substitutions work on (in particular it can split
      // an <a> tag into two).
      this.props.replacedSubstrings && this.replaceSubstrings(element, this.props.replacedSubstrings);

      this.props.glossary && this.replaceSubstrings(element, this.props.glossary, true);

      this.addCTAButtonEventListeners(element);

      this.markScrollableBlocks(element);
      this.collapseFootnotes(element);
      this.markHoverableLinks(element);
      this.markElicitBlocks(element);
      this.wrapStrawPoll(element);
      this.applyIdInsertions(element);
      this.exposeInternalIds(element);
    } catch(e) {
      // Don't let exceptions escape from here. This ensures that, if client-side
      // modifications crash, the post/comment text still remains visible.
      captureException(e);
      // eslint-disable-next-line no-console
      console.error(e);
    }
  }
  
  
  /**
   * Return whether a given node from the DOM is inside this ContentItemBody.
   * Used for checking the selection-anchor in a mouse event, for inline reacts.
   */
  containsNode(node: Node): boolean {
    return !!this.bodyRef.current?.contains(node);
  }
  
  /**
   * Return a text stringified version of the contents (by stringifying from the
   * DOM). This is currently used only for warning that an inline-react
   * identifier is ambiguous; this isn't going to be nicely formatted and
   * shouldn't be presented to the user (for that, go to the source docuemnt and
   * get a markdown version).
   */
  getText(): string {
    return this.bodyRef.current?.textContent ?? ""
  }
  
  getAnchorEl(): HTMLDivElement|null {
    return this.bodyRef.current;
  }
  
  
  render() {
    const html = this.props.nofollow ? addNofollowToHTML(this.props.dangerouslySetInnerHTML.__html) : this.props.dangerouslySetInnerHTML.__html
    
    return (<React.Fragment>
      <div
        key={this.state.renderIndex}
        className={this.props.className}
        ref={this.bodyRef}
        dangerouslySetInnerHTML={{__html: html}}
      />
      {
        this.replacedElements.map(replaced => {
          return ReactDOM.createPortal(
            replaced.replacementElement,
            replaced.container
          );
        })
      }
    </React.Fragment>);
  }


  /**
   * Given an HTMLCollection, return an array of the elements inside it. Note
   * that this is covering for a browser-specific incompatibility: in Edge 17
   * and earlier, HTMLCollection has `length` and `item` but isn't iterable.
   */
  htmlCollectionToArray(collection: HTMLCollectionOf<HTMLElement>): HTMLElement[] {
    if (!collection) return [];
    let ret: Array<HTMLElement> = [];
    for (let i=0; i<collection.length; i++)
      ret.push(collection.item(i)!);
    return ret;
  }
  
  /**
   * Find elements inside the contents with the given classname, and return them
   * as an array.
   */
  getElementsByClassname(element: HTMLElement, classname: string): HTMLElement[] {
    const elementCollection = element.getElementsByClassName(classname);
    
    if (!elementCollection) return [];
    
    let ret: Array<HTMLElement> = [];
    for (let i=0; i<elementCollection.length; i++) {
      // Downcast Element->HTMLElement because the HTMLCollectionOf type doesn't
      // know that getElementsByClassName only returns elements, not text
      // nodes/etc
      ret.push(elementCollection.item(i) as HTMLElement);
    }
    return ret;
  }
  
  // Find elements that are too wide, and wrap them in HorizScrollBlock.
  // This is client-only because it requires measuring widths.
  markScrollableBlocks = (element: HTMLElement) => {
    // Iterate through top-level (block) elements, checking their width. If any
    // of them overflow the container, they'll get replaced by a
    // ScrollableBlock.
    const allTopLevelBlocks = element.childNodes;
    for (let i=0; i<allTopLevelBlocks.length; i++) {
      const block = allTopLevelBlocks[i];
      if (block.nodeType === Node.ELEMENT_NODE) {
        const blockAsElement = block as HTMLElement;
        
        // Check whether this block is wider than the content-block it's inside
        // of, and if so, wrap it in a horizontal scroller. This makes wide
        // LaTeX formulas and tables functional on mobile.
        // We also need to check that this element has nonzero width, because of
        // an odd bug in Firefox where, when you open a tab in the background,
        // it runs JS but doesn't do page layout (or does page layout as-if the
        // page was zero width?) Without this check, you would sometimes get a
        // spurious horizontal scroller on every paragraph-block.
        if (blockAsElement.scrollWidth > this.bodyRef.current!.clientWidth+1
          && this.bodyRef.current!.clientWidth > 0)
        {
          this.addHorizontalScrollIndicators(blockAsElement);
        }
      }
    }
  }
  
  // Given an HTML block element which has horizontal scroll, wrap it in a
  // <HorizScrollBlock>.
  addHorizontalScrollIndicators = (block: HTMLElement) => {
    const ScrollableContents = rawExtractElementChildrenToReactComponent(block)
    this.replaceElement(block, <Components.HorizScrollBlock>
      <ScrollableContents/>
    </Components.HorizScrollBlock>);
  };

  forwardAttributes = (node: HTMLElement|Element) => {
    const result: Record<string, unknown> = {};
    const attrs = node.attributes ?? [];
    for (let i = 0; i < attrs.length; i++) {
      const attr = attrs[i];
      if (attr.name === "class") {
        result.className = attr.value;
      } else {
        result[attr.name] = attr.value;
      }
    }
    return result;
  }


  collapseFootnotes = (body: HTMLElement) => {
    if (!hasCollapsedFootnotes || !body) {
      return;
    }

    const footnotes = body.querySelector(".footnotes");
    if (footnotes) {
      let innerHTML = footnotes.innerHTML;
      if (footnotes.tagName !== "SECTION") {
        innerHTML = `<section>${innerHTML}</section>`;
      }
      const collapsedFootnotes = (
        <Components.CollapsedFootnotes
          footnotesHtml={innerHTML}
          attributes={this.forwardAttributes(footnotes)}
        />
      );
      this.replaceElement(footnotes, collapsedFootnotes);
    }
  }

  markHoverableLinks = (element: HTMLElement) => {
    const linkTags = this.htmlCollectionToArray(element.getElementsByTagName("a"));
    for (let linkTag of linkTags) {
      const href = linkTag.getAttribute("href");
      if (!href || linkIsExcludedFromPreview(href) || linkTag.classList.contains('ck-cta-button'))
        continue;

      const TagLinkContents = rawExtractElementChildrenToReactComponent(linkTag);
      const id = linkTag.getAttribute("id") ?? undefined;
      const rel = linkTag.getAttribute("rel") ?? undefined;
      const replacementElement = <Components.HoverPreviewLink
        href={href}
        contentSourceDescription={this.props.description}
        id={id}
        rel={rel}
        noPrefetch={this.props.noHoverPreviewPrefetch}
      >
        <TagLinkContents/>
      </Components.HoverPreviewLink>
      this.replaceElement(linkTag, replacementElement);
    }
  }
  
  markElicitBlocks = (element: HTMLElement) => {
    const elicitBlocks = this.getElementsByClassname(element, "elicit-binary-prediction");
    for (const elicitBlock of elicitBlocks) {
      if (elicitBlock.dataset?.elicitId) {
        const replacementElement = <Components.ElicitBlock questionId={elicitBlock.dataset.elicitId}/>
        this.replaceElement(elicitBlock, replacementElement)
      }
    }
  }

  /**
   * Find embedded Strawpoll blocks (an iframe integration to a polling site),
   * and replace them with WrappedStrawPoll, which causes them to be a request
   * to log in if you aren't logged in. See the StrawPoll block in `embedConfig`
   * in `editorConfigs.js` (compiled into the CkEditor bundle). The DOM
   * structure of the embed looks like:
   *
   *   <div class="strawpoll-embed" id="strawpoll_{pollId}>
   *     <iframe src="https://strawppoll.com/embed/polls/{pollId}"></iframe>
   *   </div>
   *
   * (FIXME: The embed-HTML in editorConfigs also has a bunch of stuff in it
   * that's unnecessary, which is destined to get stripped out by the HTML
   * validator)
   */
  wrapStrawPoll = (element: HTMLElement) => {
    const strawpollBlocks = this.getElementsByClassname(element, "strawpoll-embed");
    for (const strawpollBlock of strawpollBlocks) {
      const id = strawpollBlock.getAttribute("id");
      const iframe = strawpollBlock.getElementsByTagName("iframe");
      const iframeSrc = iframe[0]?.getAttribute("src") ?? "";
      const replacementElement = <Components.WrappedStrawPoll id={id} src={iframeSrc} />
      this.replaceElement(strawpollBlock, replacementElement)
    }
  }

  /**
   * CTA buttons added in ckeditor need the following things doing to make them fully functional:
   * - Convert data-href to href
   * - Add analytics to button clicks
   */
  addCTAButtonEventListeners = (element: HTMLElement) => {
    const ctaButtons = element.getElementsByClassName('ck-cta-button');
    for (let i = 0; i < ctaButtons.length; i++) {
      const button = ctaButtons[i] as HTMLAnchorElement;
      const dataHref = button.getAttribute('data-href');
      if (dataHref) {
        button.setAttribute('href', validateUrl(dataHref));
      }
      button.addEventListener('click', () => {
        this.props.captureEvent("ctaButtonClicked", {href: dataHref})
      })
    }
  }
  
  replaceSubstrings = (
    element: HTMLElement,
    replacedSubstrings: Record<string, ContentReplacedSubstringComponentInfo>,
    replaceAll = false,
  ) => {
    if (replacedSubstrings) {
      // Sort substrings by length descending to handle overlapping substrings
      const sortedSubstrings = Object.keys(replacedSubstrings).sort((a, b) => b.length - a.length);
  
      for (let str of sortedSubstrings) {
        const replacement = replacedSubstrings[str]!;
        const ReplacementComponent = Components[replacement.componentName];
        const replacementComponentProps = replacement.props;
        const searchString = str.trim();
        
        try {
          // Collect all ranges to replace in document order
          const rangesToReplace: { range: Range; isFirst: boolean }[] = [];
          let isFirst = true;
  
          const collectRanges = (node: Node) => {
            if (node.nodeType === Node.TEXT_NODE) {
              let textContent = node.textContent || "";
              let index = textContent.indexOf(searchString);
              while (index !== -1) {
                const range = document.createRange();
                range.setStart(node, index);
                range.setEnd(node, index + searchString.length);
                rangesToReplace.push({ range, isFirst });
                if (isFirst) isFirst = false;
                index = textContent.indexOf(searchString, index + searchString.length);
                if (!replaceAll && isFirst === false) break;
              }
            } else if (node.nodeType === Node.ELEMENT_NODE) {
              node.childNodes.forEach(child => collectRanges(child));
            }
          };
  
          collectRanges(element);
  
          // Replace from the end to avoid index shifting
          rangesToReplace
            .reverse()
            .forEach(({ range, isFirst }) => {
              const span = wrapRangeWithSpan(range);
              if (span) {
                const WrappedSpan = rawExtractElementChildrenToReactComponent(span);
                const replacementNode = (
                  <ReplacementComponent
                    {...replacementComponentProps}
                    replacedSubstrings={replacedSubstrings}
                    isFirstOccurrence={isFirst}
                  >
                    <WrappedSpan />
                  </ReplacementComponent>
                );
                this.replaceElement(span, replacementNode);
              }
            });
  
        } catch (e) {
          // eslint-disable-next-line no-console
          console.error(`Error highlighting string ${str} in ${this.props.description ?? "content block"}`, e);
        }
      }
    }
  }

  applyIdInsertions = (element: HTMLElement) => {
    if (!this.props.idInsertions) return;
    for (let id of Object.keys(this.props.idInsertions)) {
      const addedElement = this.props.idInsertions[id];
      const container = document.getElementById(id);
      // TODO: Check that it's inside this ContentItemBody
      if (container) this.insertElement(container, <>{addedElement}</>);
    }
  }

  /**
   * Convert data-internal-id to id, handling duplicates
   */
  exposeInternalIds = (element: HTMLElement) => {
    const elementsWithDataInternalId = element.querySelectorAll('[data-internal-id]');
    elementsWithDataInternalId.forEach((el: Element) => {
      const internalId = el.getAttribute('data-internal-id');
      if (internalId && !document.getElementById(internalId)) {
        if (!el.id) {
          el.id = internalId;
        } else {
          const wrapperSpan = document.createElement('span');
          wrapperSpan.id = internalId;
          while (el.firstChild) {
            wrapperSpan.appendChild(el.firstChild);
          }
          el.appendChild(wrapperSpan);
        }
      }
    });
  }

  replaceElement = (replacedElement: HTMLElement|Element, replacementElement: React.ReactNode) => {
    const replacementContainer = document.createElement("span");
    if (replacementContainer) {
      this.replacedElements.push({
        replacementElement: replacementElement,
        container: replacementContainer,
      });
      replacedElement.parentElement?.replaceChild(replacementContainer, replacedElement);
    }
  }
  
  insertElement = (container: HTMLElement, insertedElement: React.ReactNode) => {
    const insertionContainer = document.createElement("span");
    this.replacedElements.push({
      replacementElement: insertedElement,
      container: insertionContainer,
    });
    container.prepend(insertionContainer);
  }
}

const addNofollowToHTML = (html: string): string => {
  return html.replace(/<a /g, '<a rel="nofollow" ')
}

const ContentItemBodyComponent = registerComponent<ExternalProps>("ContentItemBody", ContentItemBody, {
  hocs: [withTracking],
  
  // Memoization options. If this spuriously rerenders, then voting on a comment
  // that contains a YouTube embed causes that embed to visually flash and lose
  // its place.
  areEqual: {
    ref: "ignore",
    "dangerouslySetInnerHTML": "deep",
    replacedSubstrings: "deep"
  },
});

declare global {
  interface ComponentTypes {
    ContentItemBody: typeof ContentItemBodyComponent
  }
}

1	import React, { Component } from 'react';	3✔
2	import ReactDOM from 'react-dom';	1✔
3	import { Components, registerComponent, validateUrl } from '../../lib/vulcan-lib';	1✔
4	import { captureException }from '@sentry/core';	1✔
5	import { linkIsExcludedFromPreview } from '../linkPreview/HoverPreviewLink';	1✔
6	import { toRange } from '../../lib/vendor/dom-anchor-text-quote';
7	import { rawExtractElementChildrenToReactComponent, reduceRangeToText, splitRangeIntoReplaceableSubRanges, wrapRangeWithSpan } from '../../lib/utils/rawDom';	1✔
8	import { withTracking } from '../../lib/analyticsEvents';	1✔
9	import { hasCollapsedFootnotes } from '@/lib/betas';	1✔
10	import isEqual from 'lodash/isEqual';	1✔
11
12	interface ExternalProps {
13	/**
14	* The content to show. This MUST come from a GraphQL resolver which does
15	* sanitization, such as post.contents.html
16	*/
17	dangerouslySetInnerHTML: { __html: string };
18
19	/**
20	* Type-annotation reflecting that you can make a ref of this and call its
21	* methods. (Doing so is handled by React, not by anything inside of this
22	* using the ref prop)
23	*/
24	ref?: React.RefObject<ContentItemBody>
25
26	// className: Name of an additional CSS class to apply to this element.
27	className?: string;
28
29	/**
30	* description: (Optional) A human-readable string describing where this
31	* content came from. Used in error logging only, not displayed to users.
32	*/
33	description?: string;
34
35	/**
36	* Passed through to HoverPreviewLink with link substitution. Only implemented
37	* for hover-previews of tags in particular. (This was a solution to some
38	* index pages in the Library being very slow to load).
39	*/
40	noHoverPreviewPrefetch?: boolean;
41
42	/**
43	* If passed, all links in the content will have the nofollow attribute added.
44	* Use for content that has risk of being spam (eg brand-new users).
45	*/
46	nofollow?: boolean;
47
48	/**
49	* Extra elements to insert into the document (used for side-comment
50	* indicators). This is a mapping from element IDs of block elements (in the
51	* `id` attribute) to React elements to insert into those blocks.
52	*/
53	idInsertions?: Record<string, React.ReactNode>;
54
55	/**
56	* Substrings to replace with an element. Used for highlighting inline
57	* reactions.
58	*/
59	replacedSubstrings?: Record<string, ContentReplacedSubstringComponentInfo>
60
61	/**
62	* Glossary to display in a tooltip when hovering over a term.
63	*/
64	glossary?: Record<string, ContentReplacedSubstringComponentInfo>
65	}
66
67	export type ContentReplacedSubstringComponentInfo = {
68	componentName: keyof ComponentTypes,
69	props: AnyBecauseHard
70	};
71
72	interface ContentItemBodyProps extends ExternalProps, WithStylesProps, WithUserProps, WithLocationProps, WithTrackingProps {}
73	interface ContentItemBodyState {
74	updatedElements: boolean,
75	renderIndex: number
76	}
77
78	// The body of a post/comment/etc, created by taking server-side-processed HTML
79	// out of the result of a GraphQL query and adding some decoration to it. In
80	// particular, if this is the client-side render, adds scroll indicators to
81	// horizontally-scrolling LaTeX blocks.
82	//
83	// This doesn't apply styling (other than for the decorators it adds) because
84	// it's shared between entity types, which have styling that differs.
85	//
86	// Props:
87	// dangerouslySetInnerHTML: Follows the same convention as
88	// dangerouslySetInnerHTML on a div, ie, you set the HTML content of this
89	// by passing dangerouslySetInnerHTML={{__html: "<p>foo</p>"}}.
90	export class ContentItemBody extends Component<ContentItemBodyProps,ContentItemBodyState> {
91	private bodyRef: React.RefObject<HTMLDivElement>
92
93	private replacedElements: Array<{
94	replacementElement: React.ReactNode
95	container: HTMLElement
96	}>
97
98	constructor(props: ContentItemBodyProps) {
99	super(props);	×
100	this.bodyRef = React.createRef<HTMLDivElement>();	×
101	this.replacedElements = [];	×
102	this.state = {	×
103	updatedElements:false,
104	renderIndex: 0,
105	}
106	}
107
108	componentDidMount () {
109	this.applyLocalModifications();	×
110	}
111
112	componentDidUpdate(prevProps: ContentItemBodyProps) {
113	if (this.state.updatedElements) {	×
114	const htmlChanged = prevProps.dangerouslySetInnerHTML?.__html !== this.props.dangerouslySetInnerHTML?.__html;	×
115	const replacedSubstringsChanged = !isEqual(prevProps.replacedSubstrings, this.props.replacedSubstrings);	×
116	if (htmlChanged \|\| replacedSubstringsChanged) {	×
117	this.replacedElements = [];	×
118	this.setState({	×
119	updatedElements: false,
120	renderIndex: this.state.renderIndex+1,
121	});
122	}
123	} else {
124	this.applyLocalModifications();	×
125	}
126	}
127
128	applyLocalModifications() {
129	const element = this.bodyRef.current;	×
130	if (element) {	×
131	this.applyLocalModificationsTo(element);	×
132	this.setState({updatedElements: true})	×
133	}
134	}
135
136	applyLocalModificationsTo(element: HTMLElement) {
137	try {	×
138	// Replace substrings (for inline reacts) goes first, because it can split
139	// elements that other substitutions work on (in particular it can split
140	// an <a> tag into two).
NEW 141	this.props.replacedSubstrings && this.replaceSubstrings(element, this.props.replacedSubstrings);	×
142
NEW 143	this.props.glossary && this.replaceSubstrings(element, this.props.glossary, true);	×
144
UNCOV 145	this.addCTAButtonEventListeners(element);	×
146
147	this.markScrollableBlocks(element);	×
148	this.collapseFootnotes(element);	×
149	this.markHoverableLinks(element);	×
150	this.markElicitBlocks(element);	×
151	this.wrapStrawPoll(element);	×
152	this.applyIdInsertions(element);	×
153	this.exposeInternalIds(element);	×
154	} catch(e) {
155	// Don't let exceptions escape from here. This ensures that, if client-side
156	// modifications crash, the post/comment text still remains visible.
157	captureException(e);	×
158	// eslint-disable-next-line no-console
159	console.error(e);	×
160	}
161	}
162
163
164	/**
165	* Return whether a given node from the DOM is inside this ContentItemBody.
166	* Used for checking the selection-anchor in a mouse event, for inline reacts.
167	*/
168	containsNode(node: Node): boolean {
169	return !!this.bodyRef.current?.contains(node);	×
170	}
171
172	/**
173	* Return a text stringified version of the contents (by stringifying from the
174	* DOM). This is currently used only for warning that an inline-react
175	* identifier is ambiguous; this isn't going to be nicely formatted and
176	* shouldn't be presented to the user (for that, go to the source docuemnt and
177	* get a markdown version).
178	*/
179	getText(): string {
180	return this.bodyRef.current?.textContent ?? ""	×
181	}
182
183	getAnchorEl(): HTMLDivElement\|null {
184	return this.bodyRef.current;	×
185	}
186
187
188	render() {
189	const html = this.props.nofollow ? addNofollowToHTML(this.props.dangerouslySetInnerHTML.__html) : this.props.dangerouslySetInnerHTML.__html	×
190
191	return (<React.Fragment>	×
192	<div
193	key={this.state.renderIndex}
194	className={this.props.className}
195	ref={this.bodyRef}
196	dangerouslySetInnerHTML={{__html: html}}
197	/>
198	{
199	this.replacedElements.map(replaced => {
200	return ReactDOM.createPortal(	×
201	replaced.replacementElement,
202	replaced.container
203	);
204	})
205	}
206	</React.Fragment>);
207	}
208
209
210	/**
211	* Given an HTMLCollection, return an array of the elements inside it. Note
212	* that this is covering for a browser-specific incompatibility: in Edge 17
213	* and earlier, HTMLCollection has `length` and `item` but isn't iterable.
214	*/
215	htmlCollectionToArray(collection: HTMLCollectionOf<HTMLElement>): HTMLElement[] {
216	if (!collection) return [];	×
217	let ret: Array<HTMLElement> = [];	×
218	for (let i=0; i<collection.length; i++)	×
219	ret.push(collection.item(i)!);	×
220	return ret;	×
221	}
222
223	/**
224	* Find elements inside the contents with the given classname, and return them
225	* as an array.
226	*/
227	getElementsByClassname(element: HTMLElement, classname: string): HTMLElement[] {
228	const elementCollection = element.getElementsByClassName(classname);	×
229
230	if (!elementCollection) return [];	×
231
232	let ret: Array<HTMLElement> = [];	×
233	for (let i=0; i<elementCollection.length; i++) {	×
234	// Downcast Element->HTMLElement because the HTMLCollectionOf type doesn't
235	// know that getElementsByClassName only returns elements, not text
236	// nodes/etc
237	ret.push(elementCollection.item(i) as HTMLElement);	×
238	}
239	return ret;	×
240	}
241
242	// Find elements that are too wide, and wrap them in HorizScrollBlock.
243	// This is client-only because it requires measuring widths.
244	markScrollableBlocks = (element: HTMLElement) => {	×
245	// Iterate through top-level (block) elements, checking their width. If any
246	// of them overflow the container, they'll get replaced by a
247	// ScrollableBlock.
248	const allTopLevelBlocks = element.childNodes;	×
249	for (let i=0; i<allTopLevelBlocks.length; i++) {	×
250	const block = allTopLevelBlocks[i];	×
251	if (block.nodeType === Node.ELEMENT_NODE) {	×
252	const blockAsElement = block as HTMLElement;	×
253
254	// Check whether this block is wider than the content-block it's inside
255	// of, and if so, wrap it in a horizontal scroller. This makes wide
256	// LaTeX formulas and tables functional on mobile.
257	// We also need to check that this element has nonzero width, because of
258	// an odd bug in Firefox where, when you open a tab in the background,
259	// it runs JS but doesn't do page layout (or does page layout as-if the
260	// page was zero width?) Without this check, you would sometimes get a
261	// spurious horizontal scroller on every paragraph-block.
262	if (blockAsElement.scrollWidth > this.bodyRef.current!.clientWidth+1	×
263	&& this.bodyRef.current!.clientWidth > 0)
264	{
265	this.addHorizontalScrollIndicators(blockAsElement);	×
266	}
267	}
268	}
269	}
270
271	// Given an HTML block element which has horizontal scroll, wrap it in a
272	// <HorizScrollBlock>.
273	addHorizontalScrollIndicators = (block: HTMLElement) => {	×
274	const ScrollableContents = rawExtractElementChildrenToReactComponent(block)	×
275	this.replaceElement(block, <Components.HorizScrollBlock>	×
276	<ScrollableContents/>
277	</Components.HorizScrollBlock>);
278	};
279
280	forwardAttributes = (node: HTMLElement\|Element) => {	×
281	const result: Record<string, unknown> = {};	×
282	const attrs = node.attributes ?? [];	×
283	for (let i = 0; i < attrs.length; i++) {	×
284	const attr = attrs[i];	×
285	if (attr.name === "class") {	×
286	result.className = attr.value;	×
287	} else {
288	result[attr.name] = attr.value;	×
289	}
290	}
291	return result;	×
292	}
293
294
295	collapseFootnotes = (body: HTMLElement) => {	×
296	if (!hasCollapsedFootnotes \|\| !body) {	×
297	return;	×
298	}
299
300	const footnotes = body.querySelector(".footnotes");	×
301	if (footnotes) {	×
302	let innerHTML = footnotes.innerHTML;	×
303	if (footnotes.tagName !== "SECTION") {	×
304	innerHTML = `<section>${innerHTML}</section>`;	×
305	}
306	const collapsedFootnotes = (
307	<Components.CollapsedFootnotes	×
308	footnotesHtml={innerHTML}
309	attributes={this.forwardAttributes(footnotes)}
310	/>
311	);
312	this.replaceElement(footnotes, collapsedFootnotes);	×
313	}
314	}
315
316	markHoverableLinks = (element: HTMLElement) => {	×
317	const linkTags = this.htmlCollectionToArray(element.getElementsByTagName("a"));	×
318	for (let linkTag of linkTags) {	×
319	const href = linkTag.getAttribute("href");	×
320	if (!href \|\| linkIsExcludedFromPreview(href) \|\| linkTag.classList.contains('ck-cta-button'))	×
321	continue;	×
322
323	const TagLinkContents = rawExtractElementChildrenToReactComponent(linkTag);	×
324	const id = linkTag.getAttribute("id") ?? undefined;	×
325	const rel = linkTag.getAttribute("rel") ?? undefined;	×
326	const replacementElement = <Components.HoverPreviewLink	×
327	href={href}
328	contentSourceDescription={this.props.description}
329	id={id}
330	rel={rel}
331	noPrefetch={this.props.noHoverPreviewPrefetch}
332	>
333	<TagLinkContents/>
334	</Components.HoverPreviewLink>
335	this.replaceElement(linkTag, replacementElement);	×
336	}
337	}
338
339	markElicitBlocks = (element: HTMLElement) => {	×
340	const elicitBlocks = this.getElementsByClassname(element, "elicit-binary-prediction");	×
341	for (const elicitBlock of elicitBlocks) {	×
342	if (elicitBlock.dataset?.elicitId) {	×
343	const replacementElement = <Components.ElicitBlock questionId={elicitBlock.dataset.elicitId}/>	×
344	this.replaceElement(elicitBlock, replacementElement)	×
345	}
346	}
347	}
348
349	/**
350	* Find embedded Strawpoll blocks (an iframe integration to a polling site),
351	* and replace them with WrappedStrawPoll, which causes them to be a request
352	* to log in if you aren't logged in. See the StrawPoll block in `embedConfig`
353	* in `editorConfigs.js` (compiled into the CkEditor bundle). The DOM
354	* structure of the embed looks like:
355	*
356	* <div class="strawpoll-embed" id="strawpoll_{pollId}>
357	* <iframe src="https://strawppoll.com/embed/polls/{pollId}"></iframe>
358	* </div>
359	*
360	* (FIXME: The embed-HTML in editorConfigs also has a bunch of stuff in it
361	* that's unnecessary, which is destined to get stripped out by the HTML
362	* validator)
363	*/
364	wrapStrawPoll = (element: HTMLElement) => {	×
365	const strawpollBlocks = this.getElementsByClassname(element, "strawpoll-embed");	×
366	for (const strawpollBlock of strawpollBlocks) {	×
367	const id = strawpollBlock.getAttribute("id");	×
368	const iframe = strawpollBlock.getElementsByTagName("iframe");	×
369	const iframeSrc = iframe[0]?.getAttribute("src") ?? "";	×
370	const replacementElement = <Components.WrappedStrawPoll id={id} src={iframeSrc} />	×
371	this.replaceElement(strawpollBlock, replacementElement)	×
372	}
373	}
374
375	/**
376	* CTA buttons added in ckeditor need the following things doing to make them fully functional:
377	* - Convert data-href to href
378	* - Add analytics to button clicks
379	*/
380	addCTAButtonEventListeners = (element: HTMLElement) => {	×
381	const ctaButtons = element.getElementsByClassName('ck-cta-button');	×
382	for (let i = 0; i < ctaButtons.length; i++) {	×
383	const button = ctaButtons[i] as HTMLAnchorElement;	×
384	const dataHref = button.getAttribute('data-href');	×
385	if (dataHref) {	×
386	button.setAttribute('href', validateUrl(dataHref));	×
387	}
388	button.addEventListener('click', () => {	×
389	this.props.captureEvent("ctaButtonClicked", {href: dataHref})	×
390	})
391	}
392	}
393
NEW 394	replaceSubstrings = (	×
395	element: HTMLElement,
396	replacedSubstrings: Record<string, ContentReplacedSubstringComponentInfo>,
397	replaceAll = false,	×
398	) => {
NEW 399	if (replacedSubstrings) {	×
400	// Sort substrings by length descending to handle overlapping substrings
NEW 401	const sortedSubstrings = Object.keys(replacedSubstrings).sort((a, b) => b.length - a.length);	×
402
NEW 403	for (let str of sortedSubstrings) {	×
NEW 404	const replacement = replacedSubstrings[str]!;	×
405	const ReplacementComponent = Components[replacement.componentName];	×
406	const replacementComponentProps = replacement.props;	×
NEW 407	const searchString = str.trim();	×
408
UNCOV 409	try {	×
410	// Collect all ranges to replace in document order
NEW 411	const rangesToReplace: { range: Range; isFirst: boolean }[] = [];	×
NEW 412	let isFirst = true;	×
413
NEW 414	const collectRanges = (node: Node) => {	×
NEW 415	if (node.nodeType === Node.TEXT_NODE) {	×
NEW 416	let textContent = node.textContent \|\| "";	×
NEW 417	let index = textContent.indexOf(searchString);	×
NEW 418	while (index !== -1) {	×
NEW 419	const range = document.createRange();	×
NEW 420	range.setStart(node, index);	×
NEW 421	range.setEnd(node, index + searchString.length);	×
NEW 422	rangesToReplace.push({ range, isFirst });	×
NEW 423	if (isFirst) isFirst = false;	×
NEW 424	index = textContent.indexOf(searchString, index + searchString.length);	×
NEW 425	if (!replaceAll && isFirst === false) break;	×
426	}
NEW 427	} else if (node.nodeType === Node.ELEMENT_NODE) {	×
NEW 428	node.childNodes.forEach(child => collectRanges(child));	×
429	}
430	};
431
NEW 432	collectRanges(element);	×
433
434	// Replace from the end to avoid index shifting
NEW 435	rangesToReplace	×
436	.reverse()
437	.forEach(({ range, isFirst }) => {
NEW 438	const span = wrapRangeWithSpan(range);	×
NEW 439	if (span) {	×
NEW 440	const WrappedSpan = rawExtractElementChildrenToReactComponent(span);	×
441	const replacementNode = (
NEW 442	<ReplacementComponent	×
443	{...replacementComponentProps}
444	replacedSubstrings={replacedSubstrings}
445	isFirstOccurrence={isFirst}
446	>
447	<WrappedSpan />
448	</ReplacementComponent>
449	);
NEW 450	this.replaceElement(span, replacementNode);	×
451	}
452	});
453
454	} catch (e) {
455	// eslint-disable-next-line no-console
NEW 456	console.error(`Error highlighting string ${str} in ${this.props.description ?? "content block"}`, e);	×
457	}
458	}
459	}
460	}
461
462	applyIdInsertions = (element: HTMLElement) => {	×
463	if (!this.props.idInsertions) return;	×
464	for (let id of Object.keys(this.props.idInsertions)) {	×
465	const addedElement = this.props.idInsertions[id];	×
466	const container = document.getElementById(id);	×
467	// TODO: Check that it's inside this ContentItemBody
468	if (container) this.insertElement(container, <>{addedElement}</>);	×
469	}
470	}
471
472	/**
473	* Convert data-internal-id to id, handling duplicates
474	*/
475	exposeInternalIds = (element: HTMLElement) => {	×
476	const elementsWithDataInternalId = element.querySelectorAll('[data-internal-id]');	×
477	elementsWithDataInternalId.forEach((el: Element) => {	×
478	const internalId = el.getAttribute('data-internal-id');	×
479	if (internalId && !document.getElementById(internalId)) {	×
480	if (!el.id) {	×
481	el.id = internalId;	×
482	} else {
483	const wrapperSpan = document.createElement('span');	×
484	wrapperSpan.id = internalId;	×
485	while (el.firstChild) {	×
486	wrapperSpan.appendChild(el.firstChild);	×
487	}
488	el.appendChild(wrapperSpan);	×
489	}
490	}
491	});
492	}
493
494	replaceElement = (replacedElement: HTMLElement\|Element, replacementElement: React.ReactNode) => {	×
495	const replacementContainer = document.createElement("span");	×
496	if (replacementContainer) {	×
497	this.replacedElements.push({	×
498	replacementElement: replacementElement,
499	container: replacementContainer,
500	});
501	replacedElement.parentElement?.replaceChild(replacementContainer, replacedElement);	×
502	}
503	}
504
505	insertElement = (container: HTMLElement, insertedElement: React.ReactNode) => {	×
506	const insertionContainer = document.createElement("span");	×
507	this.replacedElements.push({	×
508	replacementElement: insertedElement,
509	container: insertionContainer,
510	});
511	container.prepend(insertionContainer);	×
512	}
513	}
514
515	const addNofollowToHTML = (html: string): string => {	1✔
516	return html.replace(/<a /g, '<a rel="nofollow" ')	×
517	}
518
519	const ContentItemBodyComponent = registerComponent<ExternalProps>("ContentItemBody", ContentItemBody, {	1✔
520	hocs: [withTracking],
521
522	// Memoization options. If this spuriously rerenders, then voting on a comment
523	// that contains a YouTube embed causes that embed to visually flash and lose
524	// its place.
525	areEqual: {
526	ref: "ignore",
527	"dangerouslySetInnerHTML": "deep",
528	replacedSubstrings: "deep"
529	},
530	});
531
532	declare global {
533	interface ComponentTypes {
534	ContentItemBody: typeof ContentItemBodyComponent
535	}
536	}

ForumMagnum / ForumMagnum / 11113161332

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