add custom emoji rendering

routes/_components/Status.html

@@ -32,8 +32,8 @@
     </div>
   {{/if}}
   {{#if !status.spoiler_text || spoilerShown}}
-    <div class="status-content" ref:contentNode>
-      {{{status.content}}}
+    <div class="status-content">
+      {{{hydratedContent}}}
     </div>
   {{/if}}
   {{#if originalMediaAttachments && originalMediaAttachments.length}}
@@ -161,6 +161,12 @@
     font-size: 0.9em;
   }
 
+  :global(.status-content .status-emoji) {
+    width: 20px;
+    height: 20px;
+    margin: -3px 0;
+  }
+
   :global(.status-content p) {
     margin: 0 0 20px;
   }
@@ -283,12 +289,11 @@
   import Toolbar from './Toolbar.html'
   import { mark, stop } from '../_utils/marks'
   import IntlRelativeFormat from 'intl-relativeformat'
+  import { replaceAll } from '../_utils/replaceAll'
+
   const relativeFormat = new IntlRelativeFormat('en-US');
 
   export default {
-    oncreate() {
-      this.hydrateHtml()
-    },
     components: {
       Avatar,
       Media,
@@ -304,31 +309,38 @@
       },
       originalStatus: (status) => status.reblog ? status.reblog : status,
       originalAccount: (originalStatus) => originalStatus.account,
-      originalMediaAttachments: (originalStatus) => originalStatus.media_attachments
+      originalMediaAttachments: (originalStatus) => originalStatus.media_attachments,
+      hydratedContent: (originalStatus) => {
+        let status = originalStatus
+        let content = status.content
+        if (status.tags && status.tags.length) {
+          for (let tag of status.tags) {
+            let {name, url} = tag
+            content = replaceAll(content, url, `/tags/${name}`)
+          }
+        }
+        if (status.emojis && status.emojis.length) {
+          for (let emoji of status.emojis) {
+            let { shortcode, url } = emoji
+            let shortcodeWithColons = `:${shortcode}:`
+            content = replaceAll(
+              content,
+              shortcodeWithColons,
+              `<img class="status-emoji" draggable="false" src="${url}" alt="${shortcodeWithColons}" title="${shortcodeWithColons}" />`
+            )
+          }
+        }
+        return content
+      }
     },
     methods: {
       onClickSpoilerButton() {
         this.set({spoilerShown: !this.get('spoilerShown')})
-        this.hydrateHtml()
         this.fire('recalculateHeight')
       },
       onClickSensitiveMediaButton() {
         this.set({sensitiveShown: !this.get('sensitiveShown')})
         this.fire('recalculateHeight')
-      },
-      hydrateHtml() {
-        let status = this.get('originalStatus')
-        if (status.tags && status.tags.length && this.refs.contentNode) {
-          let anchorTags = this.refs.contentNode.querySelectorAll('a[rel=tag]')
-          for (let tag of status.tags) {
-            let {name, url} = tag
-            for (let anchorTag of anchorTags) {
-              if (anchorTag.getAttribute('href') === url) {
-                anchorTag.setAttribute('href', `/tags/${name}`)
-              }
-            }
-          }
-        }
       }
     }
   }

routes/_utils/replaceAll.js

@@ -0,0 +1,16 @@
+export function replaceAll(string, replacee, replacement) {
+  if (!string.length || !replacee.length || !replacement.length) {
+    return string
+  }
+  let idx
+  let pos = 0
+  while (true) {
+    idx = string.indexOf(replacee, pos)
+    if (idx === -1) {
+      break
+    }
+    string = string.substring(0, idx) + replacement + string.substring(idx + replacee.length)
+    pos = idx + replacement.length
+  }
+  return string
+}