From 20ce6468520e76b0fb2931a5fac368157d950b1d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 7 Jun 2021 03:14:48 +0300
Subject: [WIP] MUCH better approach to replacing emojis with still versions

---
 src/components/rich_content/rich_content.scss | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 src/components/rich_content/rich_content.scss

(limited to 'src/components/rich_content/rich_content.scss')

diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
new file mode 100644
index 00000000..e69de29b
-- 
cgit v1.2.3-70-g09d2


From a2459c2187bc051c18715591119a48ccb0f308e7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 7 Jun 2021 12:49:54 +0300
Subject: move styles to richcontent

---
 src/components/rich_content/rich_content.jsx     |  9 +--
 src/components/rich_content/rich_content.scss    | 70 ++++++++++++++++++++++++
 src/components/status_content/status_content.vue | 55 +------------------
 3 files changed, 76 insertions(+), 58 deletions(-)

(limited to 'src/components/rich_content/rich_content.scss')

diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index a5c010de..7bff23cd 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -19,7 +19,8 @@ export default Vue.component('RichContent', {
   },
   render (h) {
     const renderImage = (tag) => {
-      return <StillImage {...{ attrs: getAttrs(tag) }} />
+      const attrs = getAttrs(tag)
+      return <StillImage {...{ attrs }} class="img"/>
     }
     const structure = convertHtml(this.html)
     const processItem = (item) => {
@@ -30,7 +31,7 @@ export default Vue.component('RichContent', {
             this.emoji,
             ({ shortcode, url }) => {
               return <StillImage
-                class="emoji"
+                class="emoji img"
                 src={url}
                 title={`:${shortcode}:`}
                 alt={`:${shortcode}:`}
@@ -56,8 +57,8 @@ export default Vue.component('RichContent', {
         }
       }
     }
-    return <div>
+    return <span class="RichContent">
       { structure.map(processItem) }
-    </div>
+    </span>
   }
 })
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
index e69de29b..2fcd3911 100644
--- a/src/components/rich_content/rich_content.scss
+++ b/src/components/rich_content/rich_content.scss
@@ -0,0 +1,70 @@
+.RichContent {
+  font-family: var(--postFont, sans-serif);
+  line-height: 1.4em;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+
+  blockquote {
+    margin: 0.2em 0 0.2em 2em;
+    font-style: italic;
+  }
+
+  pre {
+    overflow: auto;
+  }
+
+  code,
+  samp,
+  kbd,
+  var,
+  pre {
+    font-family: var(--postCodeFont, monospace);
+  }
+
+  p {
+    margin: 0 0 1em 0;
+  }
+
+  p:last-child {
+    margin: 0 0 0 0;
+  }
+
+  h1 {
+    font-size: 1.1em;
+    line-height: 1.2em;
+    margin: 1.4em 0;
+  }
+
+  h2 {
+    font-size: 1.1em;
+    margin: 1em 0;
+  }
+
+  h3 {
+    font-size: 1em;
+    margin: 1.2em 0;
+  }
+
+  h4 {
+    margin: 1.1em 0;
+  }
+
+  .img {
+    display: inline-block;
+  }
+
+  .emoji {
+    width: 32px;
+    height: 32px;
+  }
+
+  .img,
+  video {
+    max-width: 100%;
+    max-height: 400px;
+    vertical-align: middle;
+    object-fit: contain;
+  }
+}
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index fa095d43..31cd5a2e 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -185,16 +185,11 @@ $status-margin: 0.75em;
     }
   }
 
-  img, video {
+  video {
     max-width: 100%;
     max-height: 400px;
     vertical-align: middle;
     object-fit: contain;
-
-    &.emoji {
-      width: 32px;
-      height: 32px;
-    }
   }
 
   .summary-wrapper {
@@ -230,54 +225,6 @@ $status-margin: 0.75em;
   }
 
   .status-content {
-    font-family: var(--postFont, sans-serif);
-    line-height: 1.4em;
-    white-space: pre-wrap;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    word-break: break-word;
-
-    blockquote {
-      margin: 0.2em 0 0.2em 2em;
-      font-style: italic;
-    }
-
-    pre {
-      overflow: auto;
-    }
-
-    code, samp, kbd, var, pre {
-      font-family: var(--postCodeFont, monospace);
-    }
-
-    p {
-      margin: 0 0 1em 0;
-    }
-
-    p:last-child {
-      margin: 0 0 0 0;
-    }
-
-    h1 {
-      font-size: 1.1em;
-      line-height: 1.2em;
-      margin: 1.4em 0;
-    }
-
-    h2 {
-      font-size: 1.1em;
-      margin: 1.0em 0;
-    }
-
-    h3 {
-      font-size: 1em;
-      margin: 1.2em 0;
-    }
-
-    h4 {
-      margin: 1.1em 0;
-    }
-
     &.single-line {
       white-space: nowrap;
       text-overflow: ellipsis;
-- 
cgit v1.2.3-70-g09d2


From 04fa1f0b2d1a92b1c653cd55f51ee7e1434b2bd7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 7 Jun 2021 18:39:51 +0300
Subject: some docs, added richcontent to usernames in status, updated
 stillImage to allow scale of "gif" label

---
 src/components/rich_content/rich_content.jsx       | 33 +++++++++++++++++-----
 src/components/rich_content/rich_content.scss      |  4 +--
 src/components/status/status.js                    |  7 +++--
 src/components/status/status.scss                  |  8 ++----
 src/components/status/status.vue                   | 12 ++++----
 src/components/still-image/still-image.vue         |  3 +-
 .../entity_normalizer/entity_normalizer.service.js |  1 +
 7 files changed, 44 insertions(+), 24 deletions(-)

(limited to 'src/components/rich_content/rich_content.scss')

diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index 00cf6623..c15877c8 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/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>
   }
 })
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
index 2fcd3911..a486babf 100644
--- a/src/components/rich_content/rich_content.scss
+++ b/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,
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 470c01f1..b6414ad8 100644
--- a/src/components/status/status.js
+++ b/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) {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 58b55bc8..82088943 100644
--- a/src/components/status/status.scss
+++ b/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 {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 00e962f3..cc5fb79f 100644
--- a/src/components/status/status.vue
+++ b/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>
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index d3eb5925..a3610b51 100644
--- a/src/components/still-image/still-image.vue
+++ b/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;
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 9f63feb6..8dc22823 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/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)
 
-- 
cgit v1.2.3-70-g09d2


From 60903272366e1f236041841af3dca86628901a35 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 7 Jun 2021 20:02:09 +0300
Subject: moved some post styles into status body since they inferfere with
 usernames

---
 src/components/rich_content/rich_content.scss |  7 -------
 src/components/status_body/status_body.scss   | 11 +++++++++++
 2 files changed, 11 insertions(+), 7 deletions(-)

(limited to 'src/components/rich_content/rich_content.scss')

diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
index a486babf..12cb9776 100644
--- a/src/components/rich_content/rich_content.scss
+++ b/src/components/rich_content/rich_content.scss
@@ -1,11 +1,4 @@
 .RichContent {
-  font-family: var(--postFont, sans-serif);
-  line-height: 1.4em;
-  white-space: pre-wrap;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-word;
-
   blockquote {
     margin: 0.2em 0 0.2em 2em;
     font-style: italic;
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 6282919c..b65e3b27 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -1,10 +1,21 @@
 @import '../../_variables.scss';
 
 .StatusBody {
+
   .emoji {
     --_still_image-label-scale: 0.5;
   }
 
+  & .text,
+  & .summary {
+    font-family: var(--postFont, sans-serif);
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+    line-height: 1.4em;
+  }
+
   .summary {
     display: block;
     font-style: italic;
-- 
cgit v1.2.3-70-g09d2


From 4c974f5ca21c6a514d0dfc09a0aeab7789da95c5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 13 Aug 2021 13:06:42 +0300
Subject: richcontent support in polls, user cards and user profiles

---
 src/components/basic_user_card/basic_user_card.js  |  4 +-
 src/components/basic_user_card/basic_user_card.vue | 12 ++---
 src/components/notification/notification.js        |  4 +-
 src/components/notification/notification.scss      |  2 +
 src/components/notification/notification.vue       | 14 ++---
 src/components/notifications/notifications.scss    |  7 ---
 src/components/poll/poll.vue                       | 12 ++++-
 src/components/rich_content/rich_content.scss      |  1 +
 src/components/status_content/status_content.vue   |  5 +-
 src/components/user_card/user_card.js              |  4 +-
 src/components/user_card/user_card.vue             | 61 +++++-----------------
 src/components/user_profile/user_profile.js        |  4 +-
 src/components/user_profile/user_profile.vue       | 20 ++++---
 .../entity_normalizer/entity_normalizer.service.js |  5 +-
 14 files changed, 69 insertions(+), 86 deletions(-)

(limited to 'src/components/rich_content/rich_content.scss')

diff --git a/src/components/basic_user_card/basic_user_card.js b/src/components/basic_user_card/basic_user_card.js
index 87085a28..8f41e2fb 100644
--- a/src/components/basic_user_card/basic_user_card.js
+++ b/src/components/basic_user_card/basic_user_card.js
@@ -1,5 +1,6 @@
 import UserCard from '../user_card/user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
+import RichContent from 'src/components/rich_content/rich_content.jsx'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 const BasicUserCard = {
@@ -13,7 +14,8 @@ const BasicUserCard = {
   },
   components: {
     UserCard,
-    UserAvatar
+    UserAvatar,
+    RichContent
   },
   methods: {
     toggleUserExpanded () {
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index c53f6a9c..53deb1df 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -25,17 +25,11 @@
         :title="user.name"
         class="basic-user-card-user-name"
       >
-        <!-- eslint-disable vue/no-v-html -->
-        <span
-          v-if="user.name_html"
+        <RichContent
           class="basic-user-card-user-name-value"
-          v-html="user.name_html"
+          :html="user.name"
+          :emoji="user.emoji"
         />
-        <!-- eslint-enable vue/no-v-html -->
-        <span
-          v-else
-          class="basic-user-card-user-name-value"
-        >{{ user.name }}</span>
       </div>
       <div>
         <router-link
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 4aa9affd..398bb7a9 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -4,6 +4,7 @@ import Status from '../status/status.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserCard from '../user_card/user_card.vue'
 import Timeago from '../timeago/timeago.vue'
+import RichContent from 'src/components/rich_content/rich_content.jsx'
 import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -44,7 +45,8 @@ const Notification = {
     UserAvatar,
     UserCard,
     Timeago,
-    Status
+    Status,
+    RichContent
   },
   methods: {
     toggleUserExpanded () {
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index f5905560..ec291547 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -2,6 +2,8 @@
 
 // TODO Copypaste from Status, should unify it somehow
 .Notification {
+  --emoji-size: 14px;
+
   &.-muted {
     padding: 0.25em 0.6em;
     height: 1.2em;
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 0081dee4..634ec8ee 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -51,12 +51,14 @@
         <span class="notification-details">
           <div class="name-and-action">
             <!-- eslint-disable vue/no-v-html -->
-            <bdi
-              v-if="!!notification.from_profile.name_html"
-              class="username"
-              :title="'@'+notification.from_profile.screen_name_ui"
-              v-html="notification.from_profile.name_html"
-            />
+            <bdi v-if="!!notification.from_profile.name_html">
+              <RichContent
+                class="username"
+                :title="'@'+notification.from_profile.screen_name_ui"
+                :html="notification.from_profile.name_html"
+                :emoji="notification.from_profile.emoji"
+              />
+            </bdi>
             <!-- eslint-enable vue/no-v-html -->
             <span
               v-else
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 2bb627a8..77b3c438 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -148,13 +148,6 @@
       max-width: 100%;
       text-overflow: ellipsis;
       white-space: nowrap;
-
-      img {
-        width: 14px;
-        height: 14px;
-        vertical-align: middle;
-        object-fit: contain
-      }
     }
 
     .timeago {
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index 6e0234b3..63b44e4f 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -17,7 +17,11 @@
           <span class="result-percentage">
             {{ percentageForOption(option.votes_count) }}%
           </span>
-          <RichContent :html="option.title_html" :handle-links="false" :emoji="emoji" />
+          <RichContent
+            :html="option.title_html"
+            :handle-links="false"
+            :emoji="emoji"
+          />
         </div>
         <div
           class="result-fill"
@@ -41,7 +45,11 @@
           :value="index"
         >
         <label class="option-vote">
-          <RichContent :html="option.title_html" :handle-links="false" :emoji="emoji" />
+          <RichContent
+            :html="option.title_html"
+            :handle-links="false"
+            :emoji="emoji"
+          />
         </label>
       </div>
     </div>
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
index 12cb9776..db08ef1e 100644
--- a/src/components/rich_content/rich_content.scss
+++ b/src/components/rich_content/rich_content.scss
@@ -49,6 +49,7 @@
   }
 
   .emoji {
+    display: inline-block;
     width: var(--emoji-size, 32px);
     height: var(--emoji-size, 32px);
   }
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 3f65e64a..5cebc697 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -7,7 +7,10 @@
       @parseReady="$emit('parseReady', $event)"
     >
       <div v-if="status.poll && status.poll.options">
-        <poll :base-poll="status.poll" :emoji="status.emojis" />
+        <Poll
+          :base-poll="status.poll"
+          :emoji="status.emojis"
+        />
       </div>
 
       <div
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index d9fb64d1..98e6c2f2 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -5,6 +5,7 @@ import FollowButton from '../follow_button/follow_button.vue'
 import ModerationTools from '../moderation_tools/moderation_tools.vue'
 import AccountActions from '../account_actions/account_actions.vue'
 import Select from '../select/select.vue'
+import RichContent from 'src/components/rich_content/rich_content.jsx'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -118,7 +119,8 @@ export default {
     AccountActions,
     ProgressButton,
     FollowButton,
-    Select
+    Select,
+    RichContent
   },
   methods: {
     muteUser () {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index a16f7873..794a2350 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -38,21 +38,12 @@
           </router-link>
           <div class="user-summary">
             <div class="top-line">
-              <!-- eslint-disable vue/no-v-html -->
-              <div
-                v-if="user.name_html"
+              <RichContent
                 :title="user.name"
                 class="user-name"
-                v-html="user.name_html"
+                :html="user.name"
+                :emoji="user.emoji"
               />
-              <!-- eslint-enable vue/no-v-html -->
-              <div
-                v-else
-                :title="user.name"
-                class="user-name"
-              >
-                {{ user.name }}
-              </div>
               <button
                 v-if="isOtherUser && !user.is_local"
                 :href="user.statusnet_profile_url"
@@ -255,20 +246,12 @@
           <span>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</span>
         </div>
       </div>
-      <!-- eslint-disable vue/no-v-html -->
-      <p
-        v-if="!hideBio && user.description_html"
+      <RichContent
+        v-if="!hideBio"
         class="user-card-bio"
-        @click.prevent="linkClicked"
-        v-html="user.description_html"
+        :html="user.description_html"
+        :emoji="user.emoji"
       />
-      <!-- eslint-enable vue/no-v-html -->
-      <p
-        v-else-if="!hideBio"
-        class="user-card-bio"
-      >
-        {{ user.description }}
-      </p>
     </div>
   </div>
 </template>
@@ -281,9 +264,10 @@
 .user-card {
   position: relative;
 
-  &:hover .Avatar {
+  &:hover {
     --_still-image-img-visibility: visible;
     --_still-image-canvas-visibility: hidden;
+    --_still-image-label-visibility: hidden;
   }
 
   .panel-heading {
@@ -327,12 +311,12 @@
     }
   }
 
-  p {
-    margin-bottom: 0;
-  }
-
   &-bio {
     text-align: center;
+    display: block;
+    line-height: 18px;
+    padding: 1em;
+    margin: 0;
 
     a {
       color: $fallback--link;
@@ -344,11 +328,6 @@
       vertical-align: middle;
       max-width: 100%;
       max-height: 400px;
-
-      &.emoji {
-        width: 32px;
-        height: 32px;
-      }
     }
   }
 
@@ -450,13 +429,6 @@
     // big one
     z-index: 1;
 
-    img {
-      width: 26px;
-      height: 26px;
-      vertical-align: middle;
-      object-fit: contain
-    }
-
     .top-line {
       display: flex;
     }
@@ -469,12 +441,7 @@
     margin-right: 1em;
     font-size: 15px;
 
-    img {
-      object-fit: contain;
-      height: 16px;
-      width: 16px;
-      vertical-align: middle;
-    }
+    --emoji-size: 14px;
   }
 
   .bottom-line {
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index c0b55a6c..7a475609 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -4,6 +4,7 @@ import FollowCard from '../follow_card/follow_card.vue'
 import Timeline from '../timeline/timeline.vue'
 import Conversation from '../conversation/conversation.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
+import RichContent from 'src/components/rich_content/rich_content.jsx'
 import List from '../list/list.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -164,7 +165,8 @@ const UserProfile = {
     FriendList,
     FollowCard,
     TabSwitcher,
-    Conversation
+    Conversation,
+    RichContent
   }
 }
 
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index aef897ae..726216ff 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -20,20 +20,24 @@
           :key="index"
           class="user-profile-field"
         >
-          <!-- eslint-disable vue/no-v-html -->
           <dt
             :title="user.fields_text[index].name"
             class="user-profile-field-name"
-            @click.prevent="linkClicked"
-            v-html="field.name"
-          />
+          >
+            <RichContent
+              :html="field.name"
+              :emoji="user.emoji"
+            />
+          </dt>
           <dd
             :title="user.fields_text[index].value"
             class="user-profile-field-value"
-            @click.prevent="linkClicked"
-            v-html="field.value"
-          />
-          <!-- eslint-enable vue/no-v-html -->
+          >
+            <RichContent
+              :html="field.value"
+              :emoji="user.emoji"
+            />
+          </dd>
         </dl>
       </div>
       <tab-switcher
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index c80ea487..d84e3422 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -56,10 +56,11 @@ export const parseUser = (data) => {
 
     output.emoji = data.emojis
     output.name = data.display_name
-    output.name_html = addEmojis(escape(data.display_name), data.emojis)
+    output.name_html = escape(data.display_name)
 
     output.description = data.note
-    output.description_html = addEmojis(data.note, data.emojis)
+    // TODO cleanup this shit, output.description is overriden with source data
+    output.description_html = data.note
 
     output.fields = data.fields
     output.fields_html = data.fields.map(field => {
-- 
cgit v1.2.3-70-g09d2