10989502591

Committed 23 Sep 2024 07:21AM UTC coverage: 31.87% (-0.03%) from 31.904%

Build # 10989502591

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9776 from ForumMagnum/fix-firefox-background-tab-horiz-scrollers

Fix a bug where on Firefox Mobile, posts opened in background tabs would have spurious horiz scrollers

Run Details

5077 of 41356 branches covered (12.28%)

Branch coverage included in aggregate %.

0 of 1 new or added line in 1 file covered. (0.0%)

1 existing line in 1 file now uncovered.

29454 of 66994 relevant lines covered (43.97%)

184.74 hits per line

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

4.71

/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>
}

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.replaceSubstrings(element);
      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) => {
    if(this.props.replacedSubstrings) {
      for (let str of Object.keys(this.props.replacedSubstrings)) {
        const replacement: ContentReplacedSubstringComponentInfo = this.props.replacedSubstrings[str]!;
        const ReplacementComponent = Components[replacement.componentName];
        const replacementComponentProps = replacement.props;

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

ForumMagnum / ForumMagnum / 10989502591

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