[WIP] MUCH better approach to replacing emojis with still versions

src/components/rich_content/rich_content.jsx

@@ -0,0 +1,66 @@
+import Vue from 'vue'
+import { mapGetters } from 'vuex'
+import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
+import { convertHtml, getTagName, processTextForEmoji, getAttrs } from 'src/services/mini_html_converter/mini_html_converter.service.js'
+import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import StillImage from 'src/components/still-image/still-image.vue'
+
+import './rich_content.scss'
+
+export default Vue.component('RichContent', {
+  name: 'RichContent',
+  props: {
+    html: {
+      required: true,
+      type: String
+    },
+    emoji: {
+      required: true,
+      type: Array
+    }
+  },
+  render (h) {
+    const renderImage = (tag) => {
+      return <StillImage {...{ attrs: getAttrs(tag) }} />
+    }
+    const structure = convertHtml(this.html)
+    const processItem = (item) => {
+      if (typeof item === 'string') {
+        if (item.includes(':')) {
+          return processTextForEmoji(
+            item,
+            this.emoji,
+            ({ shortcode, url }) => {
+              return <StillImage
+                class="emoji"
+                src={url}
+                title={`:${shortcode}:`}
+                alt={`:${shortcode}:`}
+              />
+            }
+          )
+        } else {
+          return item
+        }
+      }
+      if (Array.isArray(item)) {
+        const [opener, children] = item
+        const Tag = getTagName(opener)
+        if (Tag === 'img') {
+          return renderImage(opener)
+        }
+        if (children !== undefined) {
+          return <Tag {...{ attrs: getAttrs(opener) }}>
+            { children.map(processItem) }
+          </Tag>
+        } else {
+          return <Tag/>
+        }
+      }
+    }
+    return <div>
+      { structure.map(processItem) }
+    </div>
+  }
+})

src/components/status_content/status_content.js

@@ -1,6 +1,7 @@
 import Attachment from '../attachment/attachment.vue'
 import Poll from '../poll/poll.vue'
 import Gallery from '../gallery/gallery.vue'
+import RichContent from 'src/components/rich_content/rich_content.jsx'
 import LinkPreview from '../link-preview/link-preview.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import fileType from 'src/services/file_type/file_type.service'
@@ -125,7 +126,7 @@ const StatusContent = {
       return this.mergedConfig.maxThumbnails
     },
     postBodyHtml () {
-      const html = this.status.statusnet_html
+      const html = this.status.raw_html
 
       if (this.mergedConfig.greentext) {
         try {
@@ -164,7 +165,8 @@ const StatusContent = {
     Attachment,
     Poll,
     Gallery,
-    LinkPreview
+    LinkPreview,
+    RichContent
   },
   methods: {
     linkClicked (event) {

src/components/status_content/status_content.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- eslint-disable vue/no-v-html -->
   <div class="StatusContent">
     <slot name="header" />
     <div
@@ -7,11 +6,11 @@
       class="summary-wrapper"
       :class="{ 'tall-subject': (longSubject && !showingLongSubject) }"
     >
-      <div
+      <RichContent
         class="media-body summary"
         @click.prevent="linkClicked"
-        v-html="status.summary_html"
-      />
+        :html="status.summary_raw_html"
+        :emoji="status.emojis"/>
       <button
         v-if="longSubject && showingLongSubject"
         class="button-unstyled -link tall-subject-hider"
@@ -40,13 +39,13 @@
       >
         {{ $t("general.show_more") }}
       </button>
-      <div
+      <RichContent
         v-if="!hideSubjectStatus"
         :class="{ 'single-line': singleLine }"
         class="status-content media-body"
         @click.prevent="linkClicked"
-        v-html="postBodyHtml"
-      />
+        :html="postBodyHtml"
+        :emoji="status.emojis"/>
       <button
         v-if="hideSubjectStatus"
         class="button-unstyled -link cw-status-hider"
@@ -127,7 +126,6 @@
     </div>
     <slot name="footer" />
   </div>
-  <!-- eslint-enable vue/no-v-html -->
 </template>
 
 <script src="./status_content.js" ></script>