signal-desktop/ts/components/conversation/MessageTextRenderer.tsx

// 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,
    };
  });
}