New composition area with emoji typeahead

ts/components/conversation/Emojify.tsx

@@ -7,23 +7,20 @@ import {
   findImage,
   getRegex,
   getReplacementData,
-  getTitle,
   SizeClassType,
 } from '../../util/emoji';
 
-import { LocalizerType, RenderTextCallbackType } from '../../types/Util';
+import { RenderTextCallbackType } from '../../types/Util';
 
 // Some of this logic taken from emoji-js/replacement
 function getImageTag({
   match,
   sizeClass,
   key,
-  i18n,
 }: {
   match: any;
   sizeClass?: SizeClassType;
   key: string | number;
-  i18n: LocalizerType;
 }) {
   const result = getReplacementData(match[0], match[1], match[2]);
 
@@ -32,7 +29,6 @@ function getImageTag({
   }
 
   const img = findImage(result.value, result.variation);
-  const title = getTitle(result.value);
 
   if (
     !img.path ||
@@ -46,12 +42,10 @@ function getImageTag({
     <img
       key={key}
       src={img.path}
-      // We can't use alt or it will be what is captured when a user copies message
-      //   contents ("Emoji of ':1'"). Instead, we want the title to be copied (':+1:').
-      aria-label={i18n('emojiAlt', [title || ''])}
+      aria-label={match[0]}
       className={classNames('emoji', sizeClass)}
       data-codepoints={img.full_idx}
-      title={`:${title}:`}
+      title={match[0]}
     />
   );
 }
@@ -62,7 +56,6 @@ interface Props {
   sizeClass?: SizeClassType;
   /** Allows you to customize now non-newlines are rendered. Simplest is just a <span>. */
   renderNonEmoji?: RenderTextCallbackType;
-  i18n: LocalizerType;
 }
 
 export class Emojify extends React.Component<Props> {
@@ -71,7 +64,7 @@ export class Emojify extends React.Component<Props> {
   };
 
   public render() {
-    const { text, sizeClass, renderNonEmoji, i18n } = this.props;
+    const { text, sizeClass, renderNonEmoji } = this.props;
     const results: Array<any> = [];
     const regex = getRegex();
 
@@ -95,7 +88,7 @@ export class Emojify extends React.Component<Props> {
         results.push(renderNonEmoji({ text: textWithNoEmoji, key: count++ }));
       }
 
-      results.push(getImageTag({ match, sizeClass, key: count++, i18n }));
+      results.push(getImageTag({ match, sizeClass, key: count++ }));
 
       last = regex.lastIndex;
       match = regex.exec(text);