Preserve links with embedded emoji

ts/components/conversation/Emojify.tsx

@@ -8,6 +8,7 @@ import {
   getRegex,
   getReplacementData,
   getTitle,
+  SizeClassType,
 } from '../../util/emoji';
 
 import { Localizer, RenderTextCallback } from '../../types/Util';
@@ -20,7 +21,7 @@ function getImageTag({
   i18n,
 }: {
   match: any;
-  sizeClass: string | undefined;
+  sizeClass?: SizeClassType;
   key: string | number;
   i18n: Localizer;
 }) {
@@ -51,7 +52,7 @@ function getImageTag({
 interface Props {
   text: string;
   /** A class name to be added to the generated emoji images */
-  sizeClass?: '' | 'small' | 'medium' | 'large' | 'jumbo';
+  sizeClass?: SizeClassType;
   /** Allows you to customize now non-newlines are rendered. Simplest is just a <span>. */
   renderNonEmoji?: RenderTextCallback;
   i18n: Localizer;

ts/components/conversation/MessageBody.md

@@ -44,3 +44,9 @@
 ```jsx
 <MessageBody text="http://somewhere.com" disableLinks i18n={util.i18n} />
 ```
+
+### Emoji in link
+
+```jsx
+<MessageBody text="http://somewhere.com?s=🔥\nCool, huh?" i18n={util.i18n} />
+```

ts/components/conversation/MessageBody.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { getSizeClass } from '../../util/emoji';
+import { getSizeClass, SizeClassType } from '../../util/emoji';
 import { Emojify } from './Emojify';
 import { AddNewLines } from './AddNewLines';
 import { Linkify } from './Linkify';
@@ -21,8 +21,26 @@ const renderNewLines: RenderTextCallback = ({
   key,
 }) => <AddNewLines key={key} text={textWithNewLines} />;
 
-const renderLinks: RenderTextCallback = ({ text: textWithLinks, key }) => (
-  <Linkify key={key} text={textWithLinks} renderNonLink={renderNewLines} />
+const renderEmoji = ({
+  i18n,
+  text,
+  key,
+  sizeClass,
+  renderNonEmoji,
+}: {
+  i18n: Localizer;
+  text: string;
+  key: number;
+  sizeClass?: SizeClassType;
+  renderNonEmoji: RenderTextCallback;
+}) => (
+  <Emojify
+    i18n={i18n}
+    key={key}
+    text={text}
+    sizeClass={sizeClass}
+    renderNonEmoji={renderNonEmoji}
+  />
 );
 
 /**
@@ -34,14 +52,30 @@ const renderLinks: RenderTextCallback = ({ text: textWithLinks, key }) => (
 export class MessageBody extends React.Component<Props> {
   public render() {
     const { text, disableJumbomoji, disableLinks, i18n } = this.props;
-    const sizeClass = disableJumbomoji ? '' : getSizeClass(text);
+    const sizeClass = disableJumbomoji ? undefined : getSizeClass(text);
+
+    if (disableLinks) {
+      return renderEmoji({
+        i18n,
+        text,
+        sizeClass,
+        key: 0,
+        renderNonEmoji: renderNewLines,
+      });
+    }
 
     return (
-      <Emojify
+      <Linkify
         text={text}
-        sizeClass={sizeClass}
-        renderNonEmoji={disableLinks ? renderNewLines : renderLinks}
-        i18n={i18n}
+        renderNonLink={({ key, text: nonLinkText }) => {
+          return renderEmoji({
+            i18n,
+            text: nonLinkText,
+            sizeClass,
+            key,
+            renderNonEmoji: renderNewLines,
+          });
+        }}
       />
     );
   }

ts/util/emoji.ts

@@ -10,6 +10,8 @@ instance.include_title = true;
 instance.replace_mode = 'img';
 instance.supports_css = false; // needed to avoid spans with background-image
 
+export type SizeClassType = '' | 'small' | 'medium' | 'large' | 'jumbo';
+
 export function getRegex(): RegExp {
   return instance.rx_unified;
 }
@@ -56,7 +58,7 @@ function hasNormalCharacters(str: string) {
   return noEmoji.length > 0;
 }
 
-export function getSizeClass(str: string) {
+export function getSizeClass(str: string): SizeClassType {
   if (hasNormalCharacters(str)) {
     return '';
   }