some docs, added richcontent to usernames in status, updated stillImage

to allow scale of "gif" label

src/components/rich_content/rich_content.jsx

@@ -9,25 +9,41 @@ import './rich_content.scss'
 export default Vue.component('RichContent', {
   name: 'RichContent',
   props: {
+    // Original html content
     html: {
       required: true,
       type: String
     },
+    // Emoji object, as in status.emojis, note the "s" at the end...
     emoji: {
       required: true,
       type: Array
+    },
+    // Whether to handle links or not (posts: yes, everything else: no)
+    handleLinks: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   render (h) {
     const renderImage = (tag) => {
-      const attrs = getAttrs(tag)
-      return <StillImage {...{ attrs }} class="img"/>
+      return <StillImage
+        {...{ attrs: getAttrs(tag) }}
+        class="img"
+      />
     }
     const renderMention = (attrs, children) => {
-      return <MentionLink url={attrs.href} content={flattenDeep(children).join('')} origattrs={attrs}/>
+      return <MentionLink
+        url={attrs.href}
+        content={flattenDeep(children).join('')}
+        origattrs={attrs}
+      />
     }
-    const structure = convertHtml(this.html)
+
+    // Processor to use with mini_html_converter
     const processItem = (item) => {
+      // Handle text noes - just add emoji
       if (typeof item === 'string') {
         if (item.includes(':')) {
           return processTextForEmoji(
@@ -46,18 +62,21 @@ export default Vue.component('RichContent', {
           return unescape(item)
         }
       }
+      // Handle tag nodes
       if (Array.isArray(item)) {
         const [opener, children] = item
         const Tag = getTagName(opener)
         switch (Tag) {
-          case 'img':
+          case 'img': // replace images with StillImage
             return renderImage(opener)
-          case 'a':
+          case 'a': // replace mentions with MentionLink
+            if (!this.handleLinks) break
             const attrs = getAttrs(opener)
             if (attrs['class'] && attrs['class'].includes('mention')) {
               return renderMention(attrs, children)
             }
         }
+        // Render tag as is
         if (children !== undefined) {
           return <Tag {...{ attrs: getAttrs(opener) }}>
             { children.map(processItem) }
@@ -68,7 +87,7 @@ export default Vue.component('RichContent', {
       }
     }
     return <span class="RichContent">
-      { structure.map(processItem) }
+      { convertHtml(this.html).map(processItem) }
     </span>
   }
 })

src/components/rich_content/rich_content.scss

@@ -56,8 +56,8 @@
   }
 
   .emoji {
-    width: 32px;
-    height: 32px;
+    width: var(--emoji-size, 32px);
+    height: var(--emoji-size, 32px);
   }
 
   .img,

src/components/status/status.js

@@ -9,6 +9,7 @@ import UserAvatar from '../user_avatar/user_avatar.vue'
 import AvatarList from '../avatar_list/avatar_list.vue'
 import Timeago from '../timeago/timeago.vue'
 import StatusContent from '../status_content/status_content.vue'
+import RichContent from 'src/components/rich_content/rich_content.jsx'
 import StatusPopover from '../status_popover/status_popover.vue'
 import UserListPopover from '../user_list_popover/user_list_popover.vue'
 import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
@@ -68,7 +69,8 @@ const Status = {
     StatusPopover,
     UserListPopover,
     EmojiReactions,
-    StatusContent
+    StatusContent,
+    RichContent
   },
   props: [
     'statusoid',
@@ -136,8 +138,9 @@ const Status = {
       }
     },
     retweet () { return !!this.statusoid.retweeted_status },
+    retweeterUser () { return this.statusoid.user },
     retweeter () { return this.statusoid.user.name || this.statusoid.user.screen_name_ui },
-    retweeterHtml () { return this.statusoid.user.name_html },
+    retweeterHtml () { return this.statusoid.user.name },
     retweeterProfileLink () { return this.generateUserProfileLink(this.statusoid.user.id, this.statusoid.user.screen_name) },
     status () {
       if (this.retweet) {

src/components/status/status.scss

@@ -93,12 +93,8 @@ $status-margin: 0.75em;
     margin-right: 0.4em;
     text-overflow: ellipsis;
 
-    .emoji {
-      width: 14px;
-      height: 14px;
-      vertical-align: middle;
-      object-fit: contain;
-    }
+    --_still_image-label-scale: 0.25;
+    --emoji-size: 14px;
   }
 
   .status-favicon {

src/components/status/status.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- eslint-disable vue/no-v-html -->
   <div
     v-if="!hideStatus"
     class="Status"
@@ -89,8 +88,9 @@
             <router-link
               v-if="retweeterHtml"
               :to="retweeterProfileLink"
-              v-html="retweeterHtml"
-            />
+            >
+              <RichContent :html="retweeterHtml" :emoji="retweeterUser.emoji"/>
+            </router-link>
             <router-link
               v-else
               :to="retweeterProfileLink"
@@ -145,8 +145,9 @@
                   v-if="status.user.name_html"
                   class="status-username"
                   :title="status.user.name"
-                  v-html="status.user.name_html"
-                />
+                >
+                  <RichContent :html="status.user.name" :emoji="status.user.emoji" />
+                </h4>
                 <h4
                   v-else
                   class="status-username"
@@ -402,7 +403,6 @@
       </div>
     </template>
   </div>
-<!-- eslint-enable vue/no-v-html -->
 </template>
 
 <script src="./status.js" ></script>

src/components/still-image/still-image.vue

@@ -30,7 +30,7 @@
   position: relative;
   line-height: 0;
   overflow: hidden;
-  display: flex;
+  display: inline-flex;
   align-items: center;
 
   canvas {
@@ -53,6 +53,7 @@
 
   &.animated {
     &::before {
+      zoom: var(--_still_image-label-scale, 1);
       content: 'gif';
       position: absolute;
       line-height: 10px;

src/services/entity_normalizer/entity_normalizer.service.js

@@ -54,6 +54,7 @@ export const parseUser = (data) => {
       return output
     }
 
+    output.emoji = data.emojis
     output.name = data.display_name
     output.name_html = addEmojis(escape(data.display_name), data.emojis)