Support for receiving formatted messages

Co-authored-by: Alvaro Carrasco <alvaro@signal.org>

ts/components/conversation/MessageTextRenderer.tsx

@@ -0,0 +1,398 @@
+// Copyright 2023 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+import type { ReactElement } from 'react';
+import classNames from 'classnames';
+import emojiRegex from 'emoji-regex';
+
+import { linkify, SUPPORTED_PROTOCOLS } from './Linkify';
+import type {
+  BodyRange,
+  BodyRangesForDisplayType,
+  DisplayNode,
+  HydratedBodyRangeMention,
+  RangeNode,
+} from '../../types/BodyRange';
+import {
+  insertRange,
+  collapseRangeTree,
+  groupContiguousSpoilers,
+} from '../../types/BodyRange';
+import { AtMention } from './AtMention';
+import { isLinkSneaky } from '../../types/LinkPreview';
+import { Emojify } from './Emojify';
+import { AddNewLines } from './AddNewLines';
+import type { SizeClassType } from '../emoji/lib';
+import type { LocalizerType } from '../../types/Util';
+
+const EMOJI_REGEXP = emojiRegex();
+export enum RenderLocation {
+  ConversationList = 'ConversationList',
+  Quote = 'Quote',
+  SearchResult = 'SearchResult',
+  StoryViewer = 'StoryViewer',
+  Timeline = 'Timeline',
+}
+
+type Props = {
+  bodyRanges: BodyRangesForDisplayType;
+  direction: 'incoming' | 'outgoing' | undefined;
+  disableLinks: boolean;
+  emojiSizeClass: SizeClassType | undefined;
+  i18n: LocalizerType;
+  isSpoilerExpanded: boolean;
+  messageText: string;
+  onExpandSpoiler?: () => void;
+  onMentionTrigger: (conversationId: string) => void;
+  renderLocation: RenderLocation;
+  // Sometimes we're passed a string with a suffix (like '...'); we won't process that
+  textLength: number;
+};
+
+export function MessageTextRenderer({
+  bodyRanges,
+  direction,
+  disableLinks,
+  emojiSizeClass,
+  i18n,
+  isSpoilerExpanded,
+  messageText,
+  onExpandSpoiler,
+  onMentionTrigger,
+  renderLocation,
+  textLength,
+}: Props): JSX.Element {
+  const links = disableLinks ? [] : extractLinks(messageText);
+  const tree = bodyRanges.reduce<ReadonlyArray<RangeNode>>(
+    (acc, range) => {
+      // Drop bodyRanges that don't apply. Read More means truncated strings.
+      if (range.start < textLength) {
+        return insertRange(range, acc);
+      }
+      return acc;
+    },
+    links.map(b => ({ ...b, ranges: [] }))
+  );
+  const nodes = collapseRangeTree({ tree, text: messageText });
+  const finalNodes = groupContiguousSpoilers(nodes);
+
+  return (
+    <>
+      {finalNodes.map(node =>
+        renderNode({
+          direction,
+          disableLinks,
+          emojiSizeClass,
+          i18n,
+          isInvisible: false,
+          isSpoilerExpanded,
+          node,
+          renderLocation,
+          onMentionTrigger,
+          onExpandSpoiler,
+        })
+      )}
+    </>
+  );
+}
+
+function renderNode({
+  direction,
+  disableLinks,
+  emojiSizeClass,
+  i18n,
+  isInvisible,
+  isSpoilerExpanded,
+  node,
+  onExpandSpoiler,
+  onMentionTrigger,
+  renderLocation,
+}: {
+  direction: 'incoming' | 'outgoing' | undefined;
+  disableLinks: boolean;
+  emojiSizeClass: SizeClassType | undefined;
+  i18n: LocalizerType;
+  isInvisible: boolean;
+  isSpoilerExpanded: boolean;
+  node: DisplayNode;
+  onExpandSpoiler?: () => void;
+  onMentionTrigger: ((conversationId: string) => void) | undefined;
+  renderLocation: RenderLocation;
+}): ReactElement {
+  const key = node.start;
+
+  if (node.isSpoiler && node.spoilerChildren?.length) {
+    const isSpoilerHidden = Boolean(node.isSpoiler && !isSpoilerExpanded);
+    const content = node.spoilerChildren?.map(spoilerNode =>
+      renderNode({
+        direction,
+        disableLinks,
+        emojiSizeClass,
+        i18n,
+        isInvisible: isSpoilerHidden,
+        isSpoilerExpanded,
+        node: spoilerNode,
+        renderLocation,
+        onMentionTrigger,
+        onExpandSpoiler,
+      })
+    );
+
+    if (!isSpoilerHidden) {
+      return (
+        <span
+          key={key}
+          className="MessageTextRenderer__formatting--spoiler--revealed"
+        >
+          {content}
+        </span>
+      );
+    }
+
+    return (
+      <span
+        key={key}
+        tabIndex={disableLinks ? undefined : 0}
+        role={disableLinks ? undefined : 'button'}
+        aria-label={i18n('icu:MessageTextRenderer--spoiler--label')}
+        aria-expanded={false}
+        className={classNames(
+          'MessageTextRenderer__formatting--spoiler',
+          `MessageTextRenderer__formatting--spoiler-${renderLocation}`,
+          direction
+            ? `MessageTextRenderer__formatting--spoiler-${renderLocation}--${direction}`
+            : null,
+          disableLinks
+            ? 'MessageTextRenderer__formatting--spoiler--noninteractive'
+            : null
+        )}
+        onClick={
+          disableLinks
+            ? undefined
+            : event => {
+                if (onExpandSpoiler) {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  onExpandSpoiler();
+                }
+              }
+        }
+        onKeyDown={
+          disableLinks
+            ? undefined
+            : event => {
+                if (event.key !== 'Enter' && event.key !== ' ') {
+                  return;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                onExpandSpoiler?.();
+              }
+        }
+      >
+        <span aria-hidden>{content}</span>
+      </span>
+    );
+  }
+
+  const content = renderMentions({
+    direction,
+    disableLinks,
+    emojiSizeClass,
+    isInvisible,
+    mentions: node.mentions,
+    onMentionTrigger,
+    text: node.text,
+  });
+
+  const formattingClasses = classNames(
+    node.isBold ? 'MessageTextRenderer__formatting--bold' : null,
+    node.isItalic ? 'MessageTextRenderer__formatting--italic' : null,
+    node.isMonospace ? 'MessageTextRenderer__formatting--monospace' : null,
+    node.isStrikethrough
+      ? 'MessageTextRenderer__formatting--strikethrough'
+      : null,
+    node.isKeywordHighlight
+      ? 'MessageTextRenderer__formatting--keywordHighlight'
+      : null,
+    isInvisible ? 'MessageTextRenderer__formatting--invisible' : null
+  );
+
+  if (
+    node.url &&
+    SUPPORTED_PROTOCOLS.test(node.url) &&
+    !isLinkSneaky(node.url)
+  ) {
+    return (
+      <a key={key} className={formattingClasses} href={node.url}>
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <span key={key} className={formattingClasses}>
+      {content}
+    </span>
+  );
+}
+
+function renderMentions({
+  direction,
+  disableLinks,
+  emojiSizeClass,
+  isInvisible,
+  mentions,
+  onMentionTrigger,
+  text,
+}: {
+  emojiSizeClass: SizeClassType | undefined;
+  isInvisible: boolean;
+  mentions: ReadonlyArray<HydratedBodyRangeMention>;
+  text: string;
+  disableLinks: boolean;
+  direction: 'incoming' | 'outgoing' | undefined;
+  onMentionTrigger: ((conversationId: string) => void) | undefined;
+}): ReactElement {
+  const result: Array<ReactElement> = [];
+
+  let offset = 0;
+
+  for (const mention of mentions) {
+    // collect any previous text
+    if (mention.start > offset) {
+      result.push(
+        renderText({
+          isInvisible,
+          key: result.length.toString(),
+          emojiSizeClass,
+          text: text.slice(offset, mention.start),
+        })
+      );
+    }
+
+    result.push(
+      renderMention({
+        isInvisible,
+        key: result.length.toString(),
+        conversationId: mention.conversationID,
+        disableLinks,
+        direction,
+        name: mention.replacementText,
+        onMentionTrigger,
+      })
+    );
+
+    offset = mention.start + mention.length;
+  }
+
+  // collect any text after
+  result.push(
+    renderText({
+      isInvisible,
+      key: result.length.toString(),
+      emojiSizeClass,
+      text: text.slice(offset, text.length),
+    })
+  );
+
+  return <>{result}</>;
+}
+
+function renderMention({
+  conversationId,
+  name,
+  isInvisible,
+  key,
+  disableLinks,
+  direction,
+  onMentionTrigger,
+}: {
+  conversationId: string;
+  name: string;
+  isInvisible: boolean;
+  key: string;
+  disableLinks: boolean;
+  direction: 'incoming' | 'outgoing' | undefined;
+  onMentionTrigger: ((conversationId: string) => void) | undefined;
+}): ReactElement {
+  if (disableLinks) {
+    return (
+      <bdi key={key}>
+        @
+        <Emojify isInvisible={isInvisible} text={name} />
+      </bdi>
+    );
+  }
+
+  return (
+    <AtMention
+      key={key}
+      id={conversationId}
+      isInvisible={isInvisible}
+      name={name}
+      direction={direction}
+      onClick={() => {
+        if (onMentionTrigger) {
+          onMentionTrigger(conversationId);
+        }
+      }}
+      onKeyUp={e => {
+        if (
+          e.target === e.currentTarget &&
+          e.key === 'Enter' &&
+          onMentionTrigger
+        ) {
+          onMentionTrigger(conversationId);
+        }
+      }}
+    />
+  );
+}
+/** Render text that does not contain body ranges or is in between body ranges */
+function renderText({
+  text,
+  emojiSizeClass,
+  isInvisible,
+  key,
+}: {
+  text: string;
+  emojiSizeClass: SizeClassType | undefined;
+  isInvisible: boolean;
+  key: string;
+}) {
+  return (
+    <Emojify
+      key={key}
+      isInvisible={isInvisible}
+      renderNonEmoji={({ text: innerText, key: innerKey }) => (
+        <AddNewLines key={innerKey} text={innerText} />
+      )}
+      sizeClass={emojiSizeClass}
+      text={text}
+    />
+  );
+}
+
+export function extractLinks(
+  messageText: string
+): ReadonlyArray<BodyRange<{ url: string }>> {
+  // to support emojis immediately before links
+  // we replace emojis with a space for each byte
+  const matches = linkify.match(
+    messageText.replace(EMOJI_REGEXP, s => ' '.repeat(s.length))
+  );
+
+  if (matches == null) {
+    return [];
+  }
+
+  return matches.map(match => {
+    return {
+      start: match.index,
+      length: match.lastIndex - match.index,
+      url: match.url,
+    };
+  });
+}