Display custom emojis

CHANGELOG.md

@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Added "Experiments" section to Settings page (includes "Move Followers" feature).
 - Show error message if moving of followers fails.
 - Added "Import Follows" page.
+- Display custom emojis.
 
 ### Changed
 

src/api/posts.ts

@@ -52,6 +52,11 @@ export interface Tag {
   url: string;
 }
 
+export interface CustomEmoji {
+  shortcode: string,
+  url: string,
+}
+
 export interface Post {
   id: string;
   uri: string;
@@ -68,6 +73,7 @@ export interface Post {
   media_attachments: Attachment[];
   mentions: Mention[];
   tags: Tag[];
+  emojis: CustomEmoji[];
   favourited: boolean;
   reblogged: boolean;
   ipfs_cid: string | null;
@@ -186,6 +192,7 @@ export async function previewPost(
     media_attachments: [],
     mentions: [],
     tags: [],
+    emojis: [],
     favourited: false,
     reblogged: false,
     ipfs_cid: null,

src/components/PostContent.vue

@@ -70,7 +70,18 @@ function configureInlineLinks() {
 }
 
 function getContent(): string {
-  const content = addGreentext(props.post.content)
+  let content = addGreentext(props.post.content)
+  // Replace emoji shortcodes
+  content = content.replace(/:([\w.]+):/g, (match, shortcode) => {
+    const emoji = props.post.emojis.find((emoji) => {
+      return emoji.shortcode === shortcode
+    })
+    if (emoji) {
+      return `<img class="emoji" title=":${emoji.shortcode}:" alt=":${emoji.shortcode}:" src="${emoji.url}">`
+    } else {
+      return match
+    }
+  })
   return content
 }
 </script>
@@ -155,5 +166,11 @@ function getContent(): string {
       float: left;
     }
   }
+
+  :deep(.emoji) {
+    height: 32px;
+    vertical-align: middle;
+    width: 32px;
+  }
 }
 </style>