9033664165

Committed 10 May 2024 02:23PM UTC coverage: 31.866% (-0.03%) from 31.899%

Build # 9033664165

Build Type

Pull #9209

github

Committed by

Will-Howard

Commit Message

check if index exists already

Pull Request Pull Request #9209: Make clientId field in ClientIds non-nullable and unique

Run Details

4770 of 39010 branches covered (12.23%)

Branch coverage included in aggregate %.

26 of 37 new or added lines in 7 files covered. (70.27%)

382 existing lines in 19 files now uncovered.

27736 of 62998 relevant lines covered (44.03%)

178.31 hits per line

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

4.44

/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 { isLWorAF } from '../../lib/instanceSettings';
import { rawExtractElementChildrenToReactComponent, reduceRangeToText, splitRangeIntoReplaceableSubRanges, wrapRangeWithSpan } from '../../lib/utils/rawDom';
import { withTracking } from '../../lib/analyticsEvents';

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, ContentReplacedSubstringComponent>
}

export type ContentReplacedSubstringComponent = (props: {
  children: React.ReactNode
}) => React.ReactNode;

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 = 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;
        if (blockAsElement.scrollWidth > this.bodyRef.current!.clientWidth+1) {
          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 (isLWorAF || !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: ContentReplacedSubstringComponent = this.props.replacedSubstrings[str]!;

        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);
            for (let subRange of subRanges) {
              const reducedRange = reduceRangeToText(subRange);
              if (reducedRange) {
                const span = wrapRangeWithSpan(reducedRange)
                if (span) {
                  const InlineReactedSpan = rawExtractElementChildrenToReactComponent(span);
                  const replacementNode = replacement({
                    children: <InlineReactedSpan/>
                  });
                  this.replaceElement(span, replacementNode);
                }
              }
            }
          }
        } 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]
});

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

ForumMagnum / ForumMagnum / 9033664165

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