Emojify story captions

ts/components/StoryViewer.stories.tsx

@@ -130,6 +130,18 @@ Caption.args = {
   },
 };
 
+export const EmojiCaption = Template.bind({});
+EmojiCaption.args = {
+  story: {
+    ...getFakeStoryView(),
+    attachment: fakeAttachment({
+      caption: 'WOOOOOOOOW 🥰',
+      path: 'file.jpg',
+      url: '/fixtures/nathan-anderson-316188-unsplash.jpg',
+    }),
+  },
+};
+
 export const LongCaption = Template.bind({});
 LongCaption.args = {
   story: {

ts/components/StoryViewer.tsx

@@ -24,6 +24,7 @@ import { AnimatedEmojiGalore } from './AnimatedEmojiGalore';
 import { Avatar, AvatarSize } from './Avatar';
 import { ConfirmationDialog } from './ConfirmationDialog';
 import { ContextMenu } from './ContextMenu';
+import { Emojify } from './conversation/Emojify';
 import { Intl } from './Intl';
 import { MessageTimestamp } from './conversation/MessageTimestamp';
 import { SendStatus } from '../messages/MessageSendState';
@@ -579,7 +580,7 @@ export const StoryViewer = ({
           <div className="StoryViewer__meta">
             {caption && (
               <div className="StoryViewer__caption">
-                {caption.text}
+                <Emojify text={caption.text} />
                 {caption.hasReadMore && !hasExpandedCaption && (
                   <button
                     className="MessageBody__read-more"