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

to allow scale of "gif" label

2 files changed, 28 insertions, 9 deletions

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,