review + fixes

src/components/mention_link/mention_link.vue

@@ -41,12 +41,10 @@
         class="full popover-default"
         :class="[highlightType]"
       >
-        <!-- eslint-disable vue/no-v-html -->
         <span
           class="userNameFull"
           v-text="'@' + userNameFull"
         />
-        <!-- eslint-enable vue/no-v-html -->
       </span>
     </span>
   </span>

src/components/mentions_line/mentions_line.scss

@@ -1,6 +1,7 @@
 .MentionsLine {
   .showMoreLess {
     white-space: normal;
+
     &.-newStyle {
       line-height: 1.5;
       font-size: inherit;

src/components/rich_content/rich_content.jsx

@@ -8,6 +8,25 @@ import MentionLink from 'src/components/mention_link/mention_link.vue'
 
 import './rich_content.scss'
 
+/**
+ * RichContent, The Über-powered component for rendering Post HTML.
+ *
+ * This takes post HTML and does multiple things to it:
+ * - Converts mention links to <MentionLink>-s
+ * - Removes mentions from beginning and end (hellthread style only)
+ * - Replaces emoji shortcodes with <StillImage>'d images.
+ *
+ * Stuff like removing mentions from beginning and end is done so that they could
+ * be either replaced by collapsible <MentionsLine>  or moved to separate place.
+ * There are two problems with this component's architecture:
+ * 1. Parsing HTML and rendering are inseparable. Attempts to separate the two
+ *    proven to be a massive overcomplication due to amount of things done here.
+ * 2. We need to output both render and some extra data, which seems to be imp-
+ *    possible in vue. Current solution is to emit 'parseReady' event when parsing
+ *    is done within render() function.
+ *
+ * Apart from that one small hiccup with emit in render this _should_ be vue3-ready
+ */
 export default Vue.component('RichContent', {
   name: 'RichContent',
   props: {
@@ -241,8 +260,10 @@ export const preProcessPerLine = (html, greentext, handleLinks) => {
         .replace(/@\w+/gi, '') // remove mentions (even failed ones)
         .trim()
       if (cleanedString.startsWith('&gt;')) {
+        nonEmptyIndex += 1
         return `<span class='greentext'>${string}</span>`
       } else if (cleanedString.startsWith('&lt;')) {
+        nonEmptyIndex += 1
         return `<span class='cyantext'>${string}</span>`
       }
     }

src/components/settings_modal/tabs/theme_tab/theme_tab.js

@@ -474,7 +474,7 @@ export default {
           this.loadThemeFromLocalStorage(false, true)
           break
         case 'file':
-          console.error('Forcing snapshout from file is not supported yet')
+          console.error('Forcing snapshot from file is not supported yet')
           break
       }
       this.dismissWarning()

src/components/status/status.js

@@ -35,8 +35,7 @@ import {
   faStar,
   faEyeSlash,
   faEye,
-  faThumbtack,
-  faAt
+  faThumbtack
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -53,8 +52,7 @@ library.add(
   faEllipsisH,
   faEyeSlash,
   faEye,
-  faThumbtack,
-  faAt
+  faThumbtack
 )
 
 const Status = {

src/components/status_body/status_body.scss

@@ -115,12 +115,4 @@
   .cyantext {
     color: var(--postCyantext, $fallback--cBlue);
   }
-
-  /* Not sure if this is necessary */
-  video {
-    max-width: 100%;
-    max-height: 400px;
-    vertical-align: middle;
-    object-fit: contain;
-  }
 }

src/components/status_body/status_body.vue

@@ -2,7 +2,7 @@
   <div class="StatusBody">
     <div class="body">
       <div
-        v-if="status.summary_html"
+        v-if="status.summary_raw_html"
         class="summary-wrapper"
         :class="{ '-tall': (longSubject && !showingLongSubject) }"
       >
@@ -39,7 +39,7 @@
           {{ $t("general.show_more") }}
         </button>
         <span
-          v-if="!hideSubjectStatus && !(singleLine && status.summary_html)"
+          v-if="!hideSubjectStatus && !(singleLine && status.summary_raw_html)"
           class="rich-content-wrapper"
         >
           <MentionsLine