Process text story messages

ts/components/StoryImage.tsx

@@ -8,6 +8,7 @@ import { Blurhash } from 'react-blurhash';
 import type { AttachmentType } from '../types/Attachment';
 import type { LocalizerType } from '../types/Util';
 import { Spinner } from './Spinner';
+import { TextAttachment } from './TextAttachment';
 import { ThemeType } from '../types/Util';
 import {
   defaultBlurHash,
@@ -57,7 +58,11 @@ export const StoryImage = ({
   const getClassName = getClassNamesFor('StoryImage', moduleClassName);
 
   let storyElement: JSX.Element;
-  if (isNotReadyToShow) {
+  if (attachment.textAttachment) {
+    storyElement = (
+      <TextAttachment i18n={i18n} textAttachment={attachment.textAttachment} />
+    );
+  } else if (isNotReadyToShow) {
     storyElement = (
       <Blurhash
         hash={attachment.blurHash || defaultBlurHash(ThemeType.dark)}

ts/components/TextAttachment.stories.tsx

@@ -0,0 +1,245 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+
+import enMessages from '../../_locales/en/messages.json';
+import { setupI18n } from '../util/setupI18n';
+import { TextAttachment } from './TextAttachment';
+import type { PropsType } from './TextAttachment';
+
+const i18n = setupI18n('en', enMessages);
+
+const getDefaultProps = (): PropsType => ({
+  i18n,
+  textAttachment: {},
+});
+
+const story = storiesOf('Components/TextAttachment', module);
+
+story.add('Solid bg + text bg', () => (
+  <TextAttachment
+    {...getDefaultProps()}
+    textAttachment={{
+      color: 4286869806,
+      text: 'hello',
+      textBackgroundColor: 4293263387,
+      textForegroundColor: 4294967295,
+      textStyle: 1,
+    }}
+  />
+));
+
+story.add('Gradient', () => (
+  <TextAttachment
+    {...getDefaultProps()}
+    textAttachment={{
+      gradient: {
+        angle: 191,
+        endColor: 4282529679,
+        startColor: 4294260804,
+      },
+      text: 'hey',
+      textBackgroundColor: 0,
+      textForegroundColor: 4294704123,
+      textStyle: 1,
+    }}
+  />
+));
+
+story.add('Text with line breaks (condensed font)', () => (
+  <TextAttachment
+    {...getDefaultProps()}
+    textAttachment={{
+      gradient: {
+        angle: 180,
+        endColor: 4278884698,
+        startColor: 4284861868,
+      },
+      text: 'Wow!\nThis is 2 lines!',
+      textBackgroundColor: 4294967295,
+      textForegroundColor: 4278249127,
+      textStyle: 5,
+    }}
+  />
+));
+
+story.add('Text with line breaks + Autowrap (serif font)', () => (
+  <TextAttachment
+    {...getDefaultProps()}
+    textAttachment={{
+      color: 4278249127,
+      text: 'Wrap?\nYes please, wrap this text automatically for me so that it fits nicely inside the story.',
+      textBackgroundColor: 0,
+      textForegroundColor: 4294967295,
+      textStyle: 3,
+    }}
+  />
+));
+
+story.add('Autowrap text', () => (
+  <TextAttachment
+    {...getDefaultProps()}
+    textAttachment={{
+      gradient: {
+        angle: 175,
+        endColor: 4294859832,
+        startColor: 4294950980,
+      },
+      text: 'This text should automatically wrap into multiple lines since it exceeds the bounds of the story',
+      textBackgroundColor: 4294967295,
+      textForegroundColor: 4278249037,
+      textStyle: 1,
+    }}
+  />
+));
+
+story.add('Romeo & Juliet', () => (
+  <TextAttachment
+    {...getDefaultProps()}
+    textAttachment={{
+      gradient: {
+        angle: 180,
+        endColor: 4286632135,
+        startColor: 4278227945,
+      },
+      text: "Two households, both alike in dignity, In fair Verona, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean. From forth the fatal loins of these two foes A pair of star-cross'd lovers take their life; Whose misadventured piteous overthrows Do with their death bury their parents' strife. The fearful passage of their death-mark'd love, And the continuance of their parents' rage, Which, but their children's end, nought could remove, Is now the two hours' traffic of our stage; The which if you with patient ears attend, What here shall miss, our toil shall strive to mend.",
+      textBackgroundColor: 0,
+      textForegroundColor: 4294704123,
+      textStyle: 4,
+    }}
+  />
+));
+
+story.add('Overflow newline numbers', () => (
+  <TextAttachment
+    {...getDefaultProps()}
+    textAttachment={{
+      gradient: {
+        angle: 175,
+        endColor: 4294859832,
+        startColor: 4294950980,
+      },
+      text: '1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16',
+      textBackgroundColor: 4294967295,
+      textForegroundColor: 4278249037,
+      textStyle: 1,
+    }}
+  />
+));
+
+story.add('Character wrap (bold)', () => (
+  <TextAttachment
+    {...getDefaultProps()}
+    textAttachment={{
+      color: 4278825851,
+      text: 'mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm',
+      textBackgroundColor: 0,
+      textForegroundColor: 4294704123,
+      textStyle: 2,
+    }}
+  />
+));
+
+story.add('Mix of newlines, overflow, autowrap', () => (
+  <TextAttachment
+    {...getDefaultProps()}
+    textAttachment={{
+      color: 4294951251,
+      text: 'A new line\nIs this a new line? Yes, indeed and I should be wrapped woooooooooooooooooooooooow this is working!\nCool.',
+      textBackgroundColor: 0,
+      textForegroundColor: 4278231014,
+      textStyle: 1,
+    }}
+  />
+));
+
+story.add('Link preview', () => (
+  <TextAttachment
+    {...getDefaultProps()}
+    textAttachment={{
+      color: 4294951251,
+      preview: {
+        url: 'https://www.signal.org/workworkwork',
+        title: 'Signal >> Careers',
+        // TODO add image
+      },
+    }}
+  />
+));
+
+story.add('Link preview (long title)', () => (
+  <TextAttachment
+    {...getDefaultProps()}
+    textAttachment={{
+      color: 4294951251,
+      preview: {
+        title:
+          '2021 Etihad Airways Abu Dhabi Grand Prix Race Summary - F1 RaceCast Dec 10 to Dec 12 - ESPN',
+        url: 'https://www.espn.com/f1/race/_/id/600001776',
+      },
+      text: 'Spoiler alert!',
+      textForegroundColor: 4294704123,
+    }}
+  />
+));
+
+story.add('Link preview (just url)', () => (
+  <TextAttachment
+    {...getDefaultProps()}
+    textAttachment={{
+      color: 4294951251,
+      preview: {
+        url: 'https://www.rolex.com/en-us/watches/day-date/m228236-0012.html',
+      },
+    }}
+  />
+));
+
+story.add('Link preview (just url + text)', () => (
+  <TextAttachment
+    {...getDefaultProps()}
+    textAttachment={{
+      color: 4294951251,
+      preview: {
+        url: 'https://www.rolex.com/en-us/watches/day-date/m228236-0012.html',
+      },
+      text: 'Check this out!',
+    }}
+  />
+));
+
+story.add('Link preview (really long domain)', () => (
+  <TextAttachment
+    {...getDefaultProps()}
+    textAttachment={{
+      color: 4294951251,
+      preview: {
+        url: 'https://llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.international/',
+      },
+    }}
+  />
+));
+
+story.add('Link Preview w/ R&J', () => (
+  <TextAttachment
+    {...getDefaultProps()}
+    textAttachment={{
+      gradient: {
+        angle: 180,
+        endColor: 4286632135,
+        startColor: 4278227945,
+      },
+      text: "Two households, both alike in dignity, In fair Verona, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean. From forth the fatal loins of these two foes A pair of star-cross'd lovers take their life; Whose misadventured piteous overthrows Do with their death bury their parents' strife. The fearful passage of their death-mark'd love, And the continuance of their parents' rage, Which, but their children's end, nought could remove, Is now the two hours' traffic of our stage; The which if you with patient ears attend, What here shall miss, our toil shall strive to mend.",
+      textBackgroundColor: 0,
+      textForegroundColor: 4294704123,
+      textStyle: 4,
+      preview: {
+        title: 'Romeo and Juliet: Entire Play',
+        url: 'http://shakespeare.mit.edu/romeo_juliet/full.html',
+      },
+    }}
+  />
+));

ts/components/TextAttachment.tsx

@@ -0,0 +1,214 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import Measure from 'react-measure';
+import React, { useRef, useState } from 'react';
+import classNames from 'classnames';
+
+import type { LocalizerType, RenderTextCallbackType } from '../types/Util';
+import type { TextAttachmentType } from '../types/Attachment';
+import { AddNewLines } from './conversation/AddNewLines';
+import { Emojify } from './conversation/Emojify';
+import { TextAttachmentStyleType } from '../types/Attachment';
+import { count } from '../util/grapheme';
+import { getDomain } from '../types/LinkPreview';
+import { getFontNameByTextScript } from '../util/getFontNameByTextScript';
+
+const renderNewLines: RenderTextCallbackType = ({
+  text: textWithNewLines,
+  key,
+}) => {
+  return <AddNewLines key={key} text={textWithNewLines} />;
+};
+
+const CHAR_LIMIT_TEXT_LARGE = 50;
+const CHAR_LIMIT_TEXT_MEDIUM = 200;
+const COLOR_WHITE_INT = 4294704123;
+const FONT_SIZE_LARGE = 64;
+const FONT_SIZE_MEDIUM = 42;
+const FONT_SIZE_SMALL = 32;
+
+enum TextSize {
+  Small,
+  Medium,
+  Large,
+}
+
+export type PropsType = {
+  i18n: LocalizerType;
+  textAttachment: TextAttachmentType;
+};
+
+function getTextSize(text: string): TextSize {
+  const length = count(text);
+
+  if (length < CHAR_LIMIT_TEXT_LARGE) {
+    return TextSize.Large;
+  }
+
+  if (length < CHAR_LIMIT_TEXT_MEDIUM) {
+    return TextSize.Medium;
+  }
+
+  return TextSize.Small;
+}
+
+function getHexFromNumber(color: number): string {
+  return `#${color.toString(16).slice(2)}`;
+}
+
+function getBackground({ color, gradient }: TextAttachmentType): string {
+  if (gradient) {
+    return `linear-gradient(${gradient.angle}deg, ${getHexFromNumber(
+      gradient.startColor || COLOR_WHITE_INT
+    )}, ${getHexFromNumber(gradient.endColor || COLOR_WHITE_INT)})`;
+  }
+
+  return getHexFromNumber(color || COLOR_WHITE_INT);
+}
+
+function getFont(
+  text: string,
+  textSize: TextSize,
+  textStyle?: TextAttachmentStyleType | null,
+  i18n?: LocalizerType
+): string {
+  const textStyleIndex = Number(textStyle) || 0;
+  const fontName = getFontNameByTextScript(text, textStyleIndex, i18n);
+
+  let fontSize = FONT_SIZE_SMALL;
+  switch (textSize) {
+    case TextSize.Large:
+      fontSize = FONT_SIZE_LARGE;
+      break;
+    case TextSize.Medium:
+      fontSize = FONT_SIZE_MEDIUM;
+      break;
+    default:
+      fontSize = FONT_SIZE_SMALL;
+  }
+
+  const fontWeight = textStyle === TextAttachmentStyleType.BOLD ? 'bold ' : '';
+
+  return `${fontWeight}${fontSize}pt ${fontName}`;
+}
+
+export const TextAttachment = ({
+  i18n,
+  textAttachment,
+}: PropsType): JSX.Element | null => {
+  const linkPreview = useRef<HTMLDivElement | null>(null);
+  const [linkPreviewOffsetTop, setLinkPreviewOffsetTop] = useState<
+    number | undefined
+  >();
+
+  return (
+    <Measure bounds>
+      {({ contentRect, measureRef }) => (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        <div
+          className="TextAttachment"
+          onClick={() => {
+            if (linkPreviewOffsetTop) {
+              setLinkPreviewOffsetTop(undefined);
+            }
+          }}
+          onKeyUp={ev => {
+            if (ev.key === 'Escape' && linkPreviewOffsetTop) {
+              setLinkPreviewOffsetTop(undefined);
+            }
+          }}
+          ref={measureRef}
+        >
+          <div
+            className="TextAttachment__story"
+            style={{
+              background: getBackground(textAttachment),
+              transform: `scale(${(contentRect.bounds?.height || 1) / 1280})`,
+            }}
+          >
+            {textAttachment.text && (
+              <div
+                className="TextAttachment__text"
+                style={{
+                  backgroundColor: textAttachment.textBackgroundColor
+                    ? getHexFromNumber(textAttachment.textBackgroundColor)
+                    : 'none',
+                  color: getHexFromNumber(
+                    textAttachment.textForegroundColor || COLOR_WHITE_INT
+                  ),
+                  font: getFont(
+                    textAttachment.text,
+                    getTextSize(textAttachment.text),
+                    textAttachment.textStyle,
+                    i18n
+                  ),
+                  textAlign:
+                    getTextSize(textAttachment.text) === TextSize.Small
+                      ? 'left'
+                      : 'center',
+                }}
+              >
+                <div className="TextAttachment__text__container">
+                  <Emojify
+                    text={textAttachment.text}
+                    renderNonEmoji={renderNewLines}
+                  />
+                </div>
+              </div>
+            )}
+            {textAttachment.preview && (
+              <>
+                {linkPreviewOffsetTop && textAttachment.preview.url && (
+                  <a
+                    className="TextAttachment__preview__tooltip"
+                    href={textAttachment.preview.url}
+                    rel="noreferrer"
+                    style={{
+                      top: linkPreviewOffsetTop - 150,
+                    }}
+                    target="_blank"
+                  >
+                    <div>
+                      <div>{i18n('TextAttachment__preview__link')}</div>
+                      <div className="TextAttachment__preview__tooltip__url">
+                        {textAttachment.preview.url}
+                      </div>
+                    </div>
+                    <div className="TextAttachment__preview__tooltip__arrow" />
+                  </a>
+                )}
+                <div
+                  className={classNames('TextAttachment__preview', {
+                    'TextAttachment__preview--large': Boolean(
+                      textAttachment.preview.title
+                    ),
+                  })}
+                  ref={linkPreview}
+                  onFocus={() =>
+                    setLinkPreviewOffsetTop(linkPreview?.current?.offsetTop)
+                  }
+                  onMouseOver={() =>
+                    setLinkPreviewOffsetTop(linkPreview?.current?.offsetTop)
+                  }
+                >
+                  <div className="TextAttachment__preview__image" />
+                  <div className="TextAttachment__preview__title">
+                    {textAttachment.preview.title && (
+                      <div className="TextAttachment__preview__title__container">
+                        {textAttachment.preview.title}
+                      </div>
+                    )}
+                    <div className="TextAttachment__preview__url">
+                      {getDomain(String(textAttachment.preview.url))}
+                    </div>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </Measure>
+  );
+};