feat(markdown): added markdown preview in sidebar (#3127)

assets/styles/base.less

@@ -577,3 +577,40 @@ strong {
 .sidebar-container.swiper-slide.swiper-slide-active {
   transform: none;
 }
+
+.user {
+  .user-info {
+    .subtitle {
+      font-size: @micro-text-size;
+      color: @text-muted;
+
+      * {
+        font-size: @micro-text-size;
+        color: @text-muted;
+      }
+    }
+
+    .bigmoji {
+      .emoji {
+        font-size: 18pt;
+        animation-name: emoji-appear;
+        animation-duration: 500ms;
+      }
+    }
+
+    .spoiler-container {
+      cursor: pointer;
+      background-color: @gray;
+      border-radius: @corner-rounding-smaller;
+      .spoiler {
+        opacity: 0;
+      }
+
+      .spoiler-open {
+        cursor: text;
+        background-color: @darker-transparent;
+        opacity: 1;
+      }
+    }
+  }
+}

components/views/user/User.html

@@ -8,7 +8,11 @@
   <UiUserState :user="user" :isTyping="isTyping" :src="src" />
   <div class="user-info">
     <TypographyTitle :size="6" data-cy="sidebar-user-name" :text="user.name" />
-    <TypographySubtitle :size="6" :text="lastMessage" />
+    <div
+      v-html="wrapEmoji(markdownToHtml(lastMessage))"
+      :class="`subtitle ${containsOnlyEmoji(lastMessage) ? 'bigmoji' : ''}`"
+      ref="subtitle"
+    />
   </div>
   <div class="user-chat-details">
     <TypographyText :size="6" :text="timestamp" v-if="existConversation" />

components/views/user/User.less

@@ -44,6 +44,8 @@
       line-height: 1.4;
       text-overflow: ellipsis;
       overflow: hidden;
+      font-size: @micro-text-size;
+      color: @text-muted;
     }
 
     flex: 1;

components/views/user/User.vue

@@ -3,6 +3,7 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { mapState, mapGetters } from 'vuex'
+import VueMarkdown from 'vue-markdown'
 
 import { SmartphoneIcon, CircleIcon } from 'satellite-lucide-icons'
 
@@ -16,6 +17,7 @@ import {
   convertTimestampToDate,
 } from '~/utilities/Messaging'
 import { RootState } from '~/types/store/store'
+import { toHTML } from '~/libraries/ui/Markdown'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -29,6 +31,7 @@ declare module 'vue/types/vue' {
 
 export default Vue.extend({
   components: {
+    VueMarkdown,
     SmartphoneIcon,
     CircleIcon,
   },
@@ -67,6 +70,17 @@ export default Vue.extend({
       timestampRefreshInterval: null,
     }
   },
+  mounted() {
+    Array.from(
+      (this.$refs.subtitle as HTMLElement).getElementsByClassName('spoiler'),
+    ).forEach((spoiler) => {
+      spoiler.addEventListener('click', (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        spoiler.classList.add('spoiler-open')
+      })
+    })
+  },
   computed: {
     ...mapState({
       ui: (state) => (state as RootState).ui,
@@ -195,6 +209,33 @@ export default Vue.extend({
           return this.$t(`messaging.user_sent_something.${sender}`)
       }
     },
+    /**
+     * @method markdownToHtml
+     * @description convert text markdown to html
+     * @param str String to convert
+     */
+    markdownToHtml(text: string) {
+      return toHTML(text, { liveTyping: false })
+    },
+    /**
+     * @method wrapEmoji
+     * @description Wraps emojis in spans with the emoji class
+     * @param str String to wrap emojis within
+     */
+    wrapEmoji(str: string): string {
+      return str.replace(
+        this.$Config.regex.emojiWrapper,
+        (emoji) => `<span class="emoji">${emoji}</span>`,
+      )
+    },
+    /**
+     * @method containsOnlyEmoji
+     * @description Check wether or not a string only contains an emoji
+     * @param str String to check against
+     */
+    containsOnlyEmoji(str: string): boolean {
+      return str.match(this.$Config.regex.isEmoji) !== null
+    },
   },
 })
 </script>