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

---
 .../mini_post_html_processor.spec.js               | 130 +++++++++++++++++++++
 1 file changed, 130 insertions(+)
 create mode 100644 test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js

(limited to 'test')

diff --git a/test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js b/test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js
new file mode 100644
index 00000000..41818f57
--- /dev/null
+++ b/test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js
@@ -0,0 +1,130 @@
+import { convertHtml, processTextForEmoji } from 'src/services/mini_html_converter/mini_html_converter.service.js'
+
+describe('MiniHtmlConverter', () => {
+  describe('convertHtml', () => {
+    it('converts html into a tree structure', () => {
+      const inputOutput = '1 <p>2</p> <b>3<img src="a">4</b>5'
+      expect(convertHtml(inputOutput)).to.eql([
+        '1 ',
+        [
+          '<p>',
+          ['2'],
+          '</p>'
+        ],
+        ' ',
+        [
+          '<b>',
+          [
+            '3',
+            ['<img src="a">'],
+            '4'
+          ],
+          '</b>'
+        ],
+        '5'
+      ])
+    })
+    it('converts html to tree while preserving tag formatting', () => {
+      const inputOutput = '1 <p >2</p><b >3<img   src="a">4</b>5'
+      expect(convertHtml(inputOutput)).to.eql([
+        '1 ',
+        [
+          '<p >',
+          ['2'],
+          '</p>'
+        ],
+        [
+          '<b >',
+          [
+            '3',
+            ['<img   src="a">'],
+            '4'
+          ],
+          '</b>'
+        ],
+        '5'
+      ])
+    })
+    it('converts semi-broken html', () => {
+      const inputOutput = '1 <br> 2 <p> 42'
+      expect(convertHtml(inputOutput)).to.eql([
+        '1 ',
+        ['<br>'],
+        ' 2 ',
+        [
+          '<p>',
+          [' 42']
+        ]
+      ])
+    })
+    it('realistic case', () => {
+      const inputOutput = '<p><span class="h-card"><a class="u-url mention" data-user="9wRC6T2ZZiKWJ0vUi8" href="https://cawfee.club/users/benis" rel="ugc">@<span>benis</span></a></span> <span class="h-card"><a class="u-url mention" data-user="194" href="https://shigusegubu.club/users/hj" rel="ugc">@<span>hj</span></a></span> nice</p>'
+      expect(convertHtml(inputOutput)).to.eql([
+        [
+          '<p>',
+          [
+            [
+              '<span class="h-card">',
+              [
+                [
+                  '<a class="u-url mention" data-user="9wRC6T2ZZiKWJ0vUi8" href="https://cawfee.club/users/benis" rel="ugc">',
+                  [
+                    '@',
+                    [
+                      '<span>',
+                      [
+                        'benis'
+                      ],
+                      '</span>'
+                    ]
+                  ],
+                  '</a>'
+                ]
+              ],
+              '</span>'
+            ],
+            ' ',
+            [
+              '<span class="h-card">',
+              [
+                [
+                  '<a class="u-url mention" data-user="194" href="https://shigusegubu.club/users/hj" rel="ugc">',
+                  [
+                    '@',
+                    [
+                      '<span>',
+                      [
+                        'hj'
+                      ],
+                      '</span>'
+                    ]
+                  ],
+                  '</a>'
+                ]
+              ],
+              '</span>'
+            ],
+            ' nice'
+          ],
+          '</p>'
+        ]
+      ])
+    })
+  })
+  describe('processTextForEmoji', () => {
+    it('processes all emoji in text', () => {
+      const inputOutput = 'Hello from finland! :lol: We have best water! :lmao:'
+      const emojis = [
+        { shortcode: 'lol', src: 'LOL' },
+        { shortcode: 'lmao', src: 'LMAO' }
+      ]
+      const processor = ({ shortcode, src }) => ({ shortcode, src })
+      expect(processTextForEmoji(inputOutput, emojis, processor)).to.eql([
+        'Hello from finland! ',
+        { shortcode: 'lol', src: 'LOL' },
+        ' We have best water! ',
+        { shortcode: 'lmao', src: 'LMAO' }
+      ])
+    })
+  })
+})
-- 
cgit v1.2.3-70-g09d2


From be79643bcf6f05df500f0d6bcb773f07dd15da3d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 7 Jun 2021 12:38:27 +0300
Subject: fix emoji processor not leaving string as-is if no emoji are found

---
 .../mini_html_converter.service.js                 |  1 +
 .../mini_post_html_processor.spec.js               | 29 +++++++++++++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

(limited to 'test')

diff --git a/src/services/mini_html_converter/mini_html_converter.service.js b/src/services/mini_html_converter/mini_html_converter.service.js
index 00d20019..879ff544 100644
--- a/src/services/mini_html_converter/mini_html_converter.service.js
+++ b/src/services/mini_html_converter/mini_html_converter.service.js
@@ -118,6 +118,7 @@ export const processTextForEmoji = (text, emojis, processor) => {
       textBuffer += char
     }
   }
+  if (textBuffer) buffer.push(textBuffer)
   return buffer
 }
 
diff --git a/test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js b/test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js
index 41818f57..c4e3f688 100644
--- a/test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js
+++ b/test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js
@@ -57,7 +57,7 @@ describe('MiniHtmlConverter', () => {
         ]
       ])
     })
-    it('realistic case', () => {
+    it('realistic case 1', () => {
       const inputOutput = '<p><span class="h-card"><a class="u-url mention" data-user="9wRC6T2ZZiKWJ0vUi8" href="https://cawfee.club/users/benis" rel="ugc">@<span>benis</span></a></span> <span class="h-card"><a class="u-url mention" data-user="194" href="https://shigusegubu.club/users/hj" rel="ugc">@<span>hj</span></a></span> nice</p>'
       expect(convertHtml(inputOutput)).to.eql([
         [
@@ -110,6 +110,24 @@ describe('MiniHtmlConverter', () => {
         ]
       ])
     })
+    it('realistic case 2', () => {
+      const inputOutput = 'Country improv: give me a city<br/>Audience: Memphis<br/>Improv troupe: come on, a better one<br/>Audience: el paso'
+      expect(convertHtml(inputOutput)).to.eql([
+        'Country improv: give me a city',
+        [
+          '<br/>'
+        ],
+        'Audience: Memphis',
+        [
+          '<br/>'
+        ],
+        'Improv troupe: come on, a better one',
+        [
+          '<br/>'
+        ],
+        'Audience: el paso'
+      ])
+    })
   })
   describe('processTextForEmoji', () => {
     it('processes all emoji in text', () => {
@@ -126,5 +144,14 @@ describe('MiniHtmlConverter', () => {
         { shortcode: 'lmao', src: 'LMAO' }
       ])
     })
+    it('leaves text as is', () => {
+      const inputOutput = 'Number one: that\'s terror'
+      const emojis = []
+      const processor = ({ shortcode, src }) => ({ shortcode, src })
+      expect(processTextForEmoji(inputOutput, emojis, processor)).to.eql([
+        'Number one: that\'s terror'
+      ])
+    })
+  })
   })
 })
-- 
cgit v1.2.3-70-g09d2


From 1923ed84d451011df42e47a85060cc754a011e27 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 7 Jun 2021 16:15:32 +0300
Subject: more tests

---
 .../mini_post_html_processor.spec.js               | 35 ++++++++++++++--------
 1 file changed, 22 insertions(+), 13 deletions(-)

(limited to 'test')

diff --git a/test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js b/test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js
index c4e3f688..b42f5f35 100644
--- a/test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js
+++ b/test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js
@@ -1,10 +1,10 @@
-import { convertHtml, processTextForEmoji } from 'src/services/mini_html_converter/mini_html_converter.service.js'
+import { convertHtml, processTextForEmoji, getAttrs } from 'src/services/mini_html_converter/mini_html_converter.service.js'
 
 describe('MiniHtmlConverter', () => {
   describe('convertHtml', () => {
     it('converts html into a tree structure', () => {
-      const inputOutput = '1 <p>2</p> <b>3<img src="a">4</b>5'
-      expect(convertHtml(inputOutput)).to.eql([
+      const input = '1 <p>2</p> <b>3<img src="a">4</b>5'
+      expect(convertHtml(input)).to.eql([
         '1 ',
         [
           '<p>',
@@ -25,8 +25,8 @@ describe('MiniHtmlConverter', () => {
       ])
     })
     it('converts html to tree while preserving tag formatting', () => {
-      const inputOutput = '1 <p >2</p><b >3<img   src="a">4</b>5'
-      expect(convertHtml(inputOutput)).to.eql([
+      const input = '1 <p >2</p><b >3<img   src="a">4</b>5'
+      expect(convertHtml(input)).to.eql([
         '1 ',
         [
           '<p >',
@@ -46,8 +46,8 @@ describe('MiniHtmlConverter', () => {
       ])
     })
     it('converts semi-broken html', () => {
-      const inputOutput = '1 <br> 2 <p> 42'
-      expect(convertHtml(inputOutput)).to.eql([
+      const input = '1 <br> 2 <p> 42'
+      expect(convertHtml(input)).to.eql([
         '1 ',
         ['<br>'],
         ' 2 ',
@@ -58,8 +58,8 @@ describe('MiniHtmlConverter', () => {
       ])
     })
     it('realistic case 1', () => {
-      const inputOutput = '<p><span class="h-card"><a class="u-url mention" data-user="9wRC6T2ZZiKWJ0vUi8" href="https://cawfee.club/users/benis" rel="ugc">@<span>benis</span></a></span> <span class="h-card"><a class="u-url mention" data-user="194" href="https://shigusegubu.club/users/hj" rel="ugc">@<span>hj</span></a></span> nice</p>'
-      expect(convertHtml(inputOutput)).to.eql([
+      const input = '<p><span class="h-card"><a class="u-url mention" data-user="9wRC6T2ZZiKWJ0vUi8" href="https://cawfee.club/users/benis" rel="ugc">@<span>benis</span></a></span> <span class="h-card"><a class="u-url mention" data-user="194" href="https://shigusegubu.club/users/hj" rel="ugc">@<span>hj</span></a></span> nice</p>'
+      expect(convertHtml(input)).to.eql([
         [
           '<p>',
           [
@@ -129,15 +129,16 @@ describe('MiniHtmlConverter', () => {
       ])
     })
   })
+
   describe('processTextForEmoji', () => {
     it('processes all emoji in text', () => {
-      const inputOutput = 'Hello from finland! :lol: We have best water! :lmao:'
+      const input = 'Hello from finland! :lol: We have best water! :lmao:'
       const emojis = [
         { shortcode: 'lol', src: 'LOL' },
         { shortcode: 'lmao', src: 'LMAO' }
       ]
       const processor = ({ shortcode, src }) => ({ shortcode, src })
-      expect(processTextForEmoji(inputOutput, emojis, processor)).to.eql([
+      expect(processTextForEmoji(input, emojis, processor)).to.eql([
         'Hello from finland! ',
         { shortcode: 'lol', src: 'LOL' },
         ' We have best water! ',
@@ -145,13 +146,21 @@ describe('MiniHtmlConverter', () => {
       ])
     })
     it('leaves text as is', () => {
-      const inputOutput = 'Number one: that\'s terror'
+      const input = 'Number one: that\'s terror'
       const emojis = []
       const processor = ({ shortcode, src }) => ({ shortcode, src })
-      expect(processTextForEmoji(inputOutput, emojis, processor)).to.eql([
+      expect(processTextForEmoji(input, emojis, processor)).to.eql([
         'Number one: that\'s terror'
       ])
     })
   })
+
+  describe('getAttrs', () => {
+    it('extracts arguments from tag', () => {
+      const input = '<img src="boop" cool ebin="true">'
+      const output = { src: 'boop', cool: true, ebin: 'true' }
+
+      expect(getAttrs(input)).to.eql(output)
+    })
   })
 })
-- 
cgit v1.2.3-70-g09d2


From b0ae32e309134f0e91026c6712f2e9081f493c22 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 7 Jun 2021 16:31:39 +0300
Subject: made getAttrs correctly handle both ' and "

---
 src/services/mini_html_converter/mini_html_converter.service.js       | 4 ++--
 .../tiny_post_html_processor/mini_post_html_processor.spec.js         | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'test')

diff --git a/src/services/mini_html_converter/mini_html_converter.service.js b/src/services/mini_html_converter/mini_html_converter.service.js
index 879ff544..01f8adf8 100644
--- a/src/services/mini_html_converter/mini_html_converter.service.js
+++ b/src/services/mini_html_converter/mini_html_converter.service.js
@@ -128,11 +128,11 @@ export const getAttrs = tag => {
     .replace(new RegExp('^' + getTagName(tag)), '')
     .replace(/\/?$/, '')
     .trim()
-  const attrs = Array.from(innertag.matchAll(/([a-z0-9-]+)(?:=(?:"([^"]+?)"|'([^']+?)'))?/gi))
+  const attrs = Array.from(innertag.matchAll(/([a-z0-9-]+)(?:=("[^"]+?"|'[^']+?'))?/gi))
     .map(([trash, key, value]) => [key, value])
     .map(([k, v]) => {
       if (!v) return [k, true]
-      return [k, v]
+      return [k, v.substring(1, v.length - 1)]
     })
   return Object.fromEntries(attrs)
 }
diff --git a/test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js b/test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js
index b42f5f35..8df2fbc3 100644
--- a/test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js
+++ b/test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js
@@ -157,7 +157,7 @@ describe('MiniHtmlConverter', () => {
 
   describe('getAttrs', () => {
     it('extracts arguments from tag', () => {
-      const input = '<img src="boop" cool ebin="true">'
+      const input = '<img src="boop" cool ebin=\'true\'>'
       const output = { src: 'boop', cool: true, ebin: 'true' }
 
       expect(getAttrs(input)).to.eql(output)
-- 
cgit v1.2.3-70-g09d2


From cc00af7a3102034b05ebcd4aa1fd01c6f467184a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 10 Jun 2021 18:52:01 +0300
Subject: Hellthread(tm) Certified

---
 src/components/mention_link/mention_link.js        |   3 -
 src/components/mention_link/mention_link.vue       |   1 -
 src/components/rich_content/rich_content.jsx       | 176 ++++++++++++++++-----
 src/components/status/status.js                    |   3 +
 src/components/status/status.vue                   |   1 +
 src/components/status_body/status_body.js          |   8 +-
 src/components/status_body/status_body.vue         |  12 +-
 src/components/status_content/status_content.js    |   1 +
 src/components/status_content/status_content.vue   |   3 +-
 .../html_converter/html_line_converter.service.js  | 102 ++++++++++++
 .../html_converter/html_tree_converter.service.js  | 146 +++++++++++++++++
 .../mini_html_converter.service.js                 | 138 ----------------
 .../tiny_post_html_processor.service.js            |  94 -----------
 .../html_converter/html_line_converter.spec.js     | 130 +++++++++++++++
 .../html_converter/html_tree_converter.spec.js     | 166 +++++++++++++++++++
 .../mini_post_html_processor.spec.js               | 166 -------------------
 .../tiny_post_html_processor.spec.js               |  96 -----------
 17 files changed, 707 insertions(+), 539 deletions(-)
 create mode 100644 src/services/html_converter/html_line_converter.service.js
 create mode 100644 src/services/html_converter/html_tree_converter.service.js
 delete mode 100644 src/services/mini_html_converter/mini_html_converter.service.js
 delete mode 100644 src/services/tiny_post_html_processor/tiny_post_html_processor.service.js
 create mode 100644 test/unit/specs/services/html_converter/html_line_converter.spec.js
 create mode 100644 test/unit/specs/services/html_converter/html_tree_converter.spec.js
 delete mode 100644 test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js
 delete mode 100644 test/unit/specs/services/tiny_post_html_processor/tiny_post_html_processor.spec.js

(limited to 'test')

diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 711c87d6..00b9e388 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -70,9 +70,6 @@ const MentionLink = {
     highlightClass () {
       if (this.highlight) return highlightClass(this.user)
     },
-    oldPlace () {
-      return !this.mergedConfig.mentionsOwnLine
-    },
     oldStyle () {
       return !this.mergedConfig.mentionsNewStyle
     },
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 281fab25..a65dbad3 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -1,7 +1,6 @@
 <template>
   <span
     class="MentionLink"
-    :class="{ '-oldPlace': oldPlace }"
   >
     <!-- eslint-disable vue/no-v-html -->
     <a
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index db24ca0e..590fea0f 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import { unescape, flattenDeep } from 'lodash'
-import { convertHtml, getTagName, processTextForEmoji, getAttrs } from 'src/services/mini_html_converter/mini_html_converter.service.js'
-import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
+import { convertHtmlToTree, getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/html_tree_converter.service.js'
+import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js'
 import StillImage from 'src/components/still-image/still-image.vue'
 import MentionLink from 'src/components/mention_link/mention_link.vue'
 
@@ -31,11 +31,24 @@ export default Vue.component('RichContent', {
       required: false,
       type: Boolean,
       default: false
+    },
+    // Whether to hide last mentions (hellthreads)
+    hideLastMentions: {
+      required: false,
+      type: Boolean,
+      default: false
+    },
+    // Whether to hide first mentions
+    hideFirstMentions: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   render (h) {
     // Pre-process HTML
-    const html = this.greentext ? addGreentext(this.html) : this.html
+    const html = preProcessPerLine(this.html, this.greentext, this.hideLastMentions)
+    console.log(this.hideFirstMentions, this.hideLastMentions)
 
     const renderImage = (tag) => {
       return <StillImage
@@ -45,18 +58,20 @@ export default Vue.component('RichContent', {
     }
 
     const renderMention = (attrs, children, encounteredText) => {
-      return <MentionLink
-        url={attrs.href}
-        content={flattenDeep(children).join('')}
-        firstMention={!encounteredText}
-      />
+      return (this.hideFirstMentions && !encounteredText)
+        ? ''
+        : <MentionLink
+          url={attrs.href}
+          content={flattenDeep(children).join('')}
+          firstMention={!encounteredText}
+        />
     }
 
     // We stop treating mentions as "first" ones when we encounter
     // non-whitespace text
     let encounteredText = false
     // Processor to use with mini_html_converter
-    const processItem = (item) => {
+    const processItem = (item, index, array, what) => {
       // Handle text nodes - just add emoji
       if (typeof item === 'string') {
         const emptyText = item.trim() === ''
@@ -69,7 +84,7 @@ export default Vue.component('RichContent', {
           encounteredText = true
         }
         if (item.includes(':')) {
-          return processTextForEmoji(
+          unescapedItem = processTextForEmoji(
             unescapedItem,
             this.emoji,
             ({ shortcode, url }) => {
@@ -81,9 +96,8 @@ export default Vue.component('RichContent', {
               />
             }
           )
-        } else {
-          return unescapedItem
         }
+        return unescapedItem
       }
 
       // Handle tag nodes
@@ -98,6 +112,8 @@ export default Vue.component('RichContent', {
             const attrs = getAttrs(opener)
             if (attrs['class'] && attrs['class'].includes('mention')) {
               return renderMention(attrs, children, encounteredText)
+            } else if (attrs['class'] && attrs['class'].includes('hashtag')) {
+              return item // We'll handle it later
             } else {
               attrs.target = '_blank'
               return <a {...{ attrs }}>
@@ -116,43 +132,129 @@ export default Vue.component('RichContent', {
         }
       }
     }
+    // Processor for back direction (for finding "last" stuff, just easier this way)
+    let encounteredTextReverse = false
+    const renderHashtag = (attrs, children, encounteredTextReverse) => {
+      attrs.target = '_blank'
+      if (!encounteredTextReverse) {
+        attrs['data-parser-last'] = true
+      }
+      return <a {...{ attrs }}>
+        { children.map(processItem) }
+      </a>
+    }
+    const processItemReverse = (item, index, array, what) => {
+      // Handle text nodes - just add emoji
+      if (typeof item === 'string') {
+        const emptyText = item.trim() === ''
+        if (emptyText) return encounteredTextReverse ? item : item.trim()
+        if (!encounteredTextReverse) encounteredTextReverse = true
+        return item
+      } else if (Array.isArray(item)) {
+        // Handle tag nodes
+        const [opener, children] = item
+        const Tag = getTagName(opener)
+        switch (Tag) {
+          case 'a': // replace mentions with MentionLink
+            if (!this.handleLinks) break
+            const attrs = getAttrs(opener)
+            // should only be this
+            if (attrs['class'] && attrs['class'].includes('hashtag')) {
+              return renderHashtag(attrs, children, encounteredTextReverse)
+            }
+        }
+      }
+      return item
+    }
     return <span class="RichContent">
       { this.$slots.prefix }
-      { convertHtml(html).map(processItem) }
+      { convertHtmlToTree(html).map(processItem).reverse().map(processItemReverse).reverse() }
       { this.$slots.suffix }
     </span>
   }
 })
 
-export const addGreentext = (html) => {
-  try {
-    if (html.includes('&gt;')) {
-      // This checks if post has '>' at the beginning, excluding mentions so that @mention >impying works
-      return processHtml(html, (string) => {
-        if (
-          string.includes('&gt;') && string
-            .replace(/<[^>]+?>/gi, '') // remove all tags
-            .replace(/@\w+/gi, '') // remove mentions (even failed ones)
-            .trim()
-            .startsWith('&gt;')
-        ) {
-          return `<span class='greentext'>${string}</span>`
+/** Pre-processing HTML
+ *
+ * Currently this does two things:
+ * - add green/cyantexting
+ * - wrap and mark last line containing only mentions as ".lastMentionsLine" for
+ *   more compact hellthreads.
+ *
+ * @param {String} html - raw HTML to process
+ * @param {Boolean} greentext - whether to enable greentexting or not
+ * @param {Boolean} removeLastMentions - whether to remove last mentions
+ */
+export const preProcessPerLine = (html, greentext, removeLastMentions) => {
+  // Only mark first (last) encounter
+  let lastMentionsMarked = false
+
+  return convertHtmlToLines(html).reverse().map((item, index, array) => {
+    if (!item.text) return item
+    const string = item.text
+
+    // Greentext stuff
+    if (greentext && (string.includes('&gt;') || string.includes('&lt;'))) {
+      const cleanedString = string.replace(/<[^>]+?>/gi, '') // remove all tags
+        .replace(/@\w+/gi, '') // remove mentions (even failed ones)
+        .trim()
+      if (cleanedString.startsWith('&gt;')) {
+        return `<span class='greentext'>${string}</span>`
+      } else if (cleanedString.startsWith('&lt;')) {
+        return `<span class='cyantext'>${string}</span>`
+      }
+    }
+
+    const tree = convertHtmlToTree(string)
+
+    // If line has loose text, i.e. text outside a mention or a tag
+    // we won't touch mentions.
+    let hasLooseText = false
+    let hasMentions = false
+    const process = (item) => {
+      if (Array.isArray(item)) {
+        const [opener, children, closer] = item
+        const tag = getTagName(opener)
+        if (tag === 'a') {
+          const attrs = getAttrs(opener)
+          if (attrs['class'] && attrs['class'].includes('mention')) {
+            hasMentions = true
+            return [opener, children, closer]
+          } else {
+            hasLooseText = true
+            return [opener, children, closer]
+          }
+        } else if (tag === 'span' || tag === 'p') {
+          return [opener, [...children].reverse().map(process).reverse(), closer]
         } else {
-          return string
+          hasLooseText = true
+          return [opener, children, closer]
+        }
+      }
+
+      if (typeof item === 'string') {
+        if (item.trim() !== '') {
+          hasLooseText = true
         }
-      })
+        return item
+      }
+    }
+
+    const result = [...tree].reverse().map(process).reverse()
+
+    if (removeLastMentions && hasMentions && !hasLooseText && !lastMentionsMarked) {
+      lastMentionsMarked = true
+      return ''
     } else {
-      return html
+      return flattenDeep(result).join('')
     }
-  } catch (e) {
-    console.error('Failed to process status html', e)
-    return html
-  }
+  }).reverse().join('')
 }
 
 export const getHeadTailLinks = (html) => {
   // Exported object properties
   const firstMentions = [] // Mentions that appear in the beginning of post body
+  const lastMentions = [] // Mentions that appear at the end of post body
   const lastTags = [] // Tags that appear at the end of post body
   const writtenMentions = [] // All mentions that appear in post body
   const writtenTags = [] // All tags that appear in post body
@@ -170,7 +272,7 @@ export const getHeadTailLinks = (html) => {
     }
   }
 
-  // Processor to use with mini_html_converter
+  // Processor to use with html_tree_converter
   const processItem = (item) => {
     // Handle text nodes - stop treating mentions as "first" when text encountered
     if (typeof item === 'string') {
@@ -182,6 +284,7 @@ export const getHeadTailLinks = (html) => {
       }
       // Encountered text? That means tags we've been collectings aren't "last"!
       lastTags.splice(0)
+      lastMentions.splice(0)
       return
     }
     // Handle tag nodes
@@ -197,6 +300,7 @@ export const getHeadTailLinks = (html) => {
             firstMentions.push(linkData)
           }
           writtenMentions.push(linkData)
+          lastMentions.push(linkData)
         } else if (attrs['class'].includes('hashtag')) {
           lastTags.push(linkData)
           writtenTags.push(linkData)
@@ -206,6 +310,6 @@ export const getHeadTailLinks = (html) => {
       children && children.forEach(processItem)
     }
   }
-  convertHtml(html).forEach(processItem)
-  return { firstMentions, writtenMentions, writtenTags, lastTags }
+  convertHtmlToTree(html).forEach(processItem)
+  return { firstMentions, writtenMentions, writtenTags, lastTags, lastMentions }
 }
diff --git a/src/components/status/status.js b/src/components/status/status.js
index e9a5ec0d..bab818fc 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -196,6 +196,9 @@ const Status = {
     hasMentionsLine () {
       return this.mentionsLine.length > 0
     },
+    hideLastMentions () {
+      return this.headTailLinks.firstMentions.length === 0
+    },
     muted () {
       if (this.statusoid.user.id === this.currentUser.id) return false
       const { status } = this
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 7cc25be9..0190d864 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -306,6 +306,7 @@
             :highlight="highlight"
             :focused="isFocused"
             :hide-first-mentions="mentionsOwnLine && isReply"
+            :hide-last-mentions="hideLastMentions"
             :head-tail-links="headTailLinks"
             @mediaplay="addMediaPlaying($event)"
             @mediapause="removeMediaPlaying($event)"
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index c2edb601..2fc9abbf 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -30,7 +30,8 @@ const StatusContent = {
     // if this was computed at upper level it can be passed here, otherwise
     // it will be in this component
     'headTailLinks',
-    'hideFirstMentions'
+    'hideFirstMentions',
+    'hideLastMentions'
   ],
   data () {
     return {
@@ -80,9 +81,12 @@ const StatusContent = {
     attachmentTypes () {
       return this.status.attachments.map(file => fileType.fileType(file.mimetype))
     },
-    mentions () {
+    mentionsFirst () {
       return this.headTailLinksComputed.firstMentions
     },
+    mentionsLast () {
+      return this.headTailLinksComputed.lastMentions
+    },
     ...mapGetters(['mergedConfig'])
   },
   components: {
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index 4df29934..bd599a8c 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -49,11 +49,19 @@
             :emoji="status.emojis"
             :handle-links="true"
             :greentext="mergedConfig.greentext"
+            :hide-first-mentions="hideFirstMentions"
+            :hide-last-mentions="hideLastMentions"
           >
             <template v-slot:prefix>
               <MentionsLine
-                v-if="!hideFirstMentions"
-                :mentions="mentions"
+                v-if="!hideFirstMentions && mentionsFirst"
+                :mentions="mentionsFirst"
+              />
+            </template>
+            <template v-slot:suffix>
+              <MentionsLine
+                v-if="!hideFirstMentions && mentionsLast"
+                :mentions="mentionsLast"
               />
             </template>
           </RichContent>
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 363a9cb0..64cc6d44 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -33,6 +33,7 @@ const StatusContent = {
     'fullContent',
     'singleLine',
     'hideFirstMentions',
+    'hideLastMentions',
     'headTailLinks'
   ],
   computed: {
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 18f6e7be..c32bbbfb 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -5,7 +5,8 @@
       :status="status"
       :single-line="singleLine"
       :hide-first-mentions="hideFirstMentions"
-      :headTailLinks="headTailLinks"
+      :hide-last-mentions="hideLastMentions"
+      :head-tail-links="headTailLinks"
     >
       <div v-if="status.poll && status.poll.options">
         <poll :base-poll="status.poll" />
diff --git a/src/services/html_converter/html_line_converter.service.js b/src/services/html_converter/html_line_converter.service.js
new file mode 100644
index 00000000..80482c9a
--- /dev/null
+++ b/src/services/html_converter/html_line_converter.service.js
@@ -0,0 +1,102 @@
+/**
+ * This is a tiny purpose-built HTML parser/processor. This basically detects
+ * any type of visual newline and converts entire HTML into a array structure.
+ *
+ * Text nodes are represented as object with single property - text - containing
+ * the visual line. Intended usage is to process the array with .map() in which
+ * map function returns a string and resulting array can be converted back to html
+ * with a .join('').
+ *
+ * Generally this isn't very useful except for when you really need to either
+ * modify visual lines (greentext i.e. simple quoting) or do something with
+ * first/last line.
+ *
+ * known issue: doesn't handle CDATA so nested CDATA might not work well
+ *
+ * @param {Object} input - input data
+ * @return {(string|{ text: string })[]} processed html in form of a list.
+ */
+export const convertHtmlToLines = (html) => {
+  const handledTags = new Set(['p', 'br', 'div'])
+  const openCloseTags = new Set(['p', 'div'])
+
+  let buffer = [] // Current output buffer
+  const level = [] // How deep we are in tags and which tags were there
+  let textBuffer = '' // Current line content
+  let tagBuffer = null // Current tag buffer, if null = we are not currently reading a tag
+
+  // Extracts tag name from tag, i.e. <span a="b"> => span
+  const getTagName = (tag) => {
+    const result = /(?:<\/(\w+)>|<(\w+)\s?[^/]*?\/?>)/gi.exec(tag)
+    return result && (result[1] || result[2])
+  }
+
+  const flush = () => { // Processes current line buffer, adds it to output buffer and clears line buffer
+    if (textBuffer.trim().length > 0) {
+      buffer.push({ text: textBuffer })
+    } else {
+      buffer.push(textBuffer)
+    }
+    textBuffer = ''
+  }
+
+  const handleBr = (tag) => { // handles single newlines/linebreaks/selfclosing
+    flush()
+    buffer.push(tag)
+  }
+
+  const handleOpen = (tag) => { // handles opening tags
+    flush()
+    buffer.push(tag)
+    level.push(tag)
+  }
+
+  const handleClose = (tag) => { // handles closing tags
+    flush()
+    buffer.push(tag)
+    if (level[level.length - 1] === tag) {
+      level.pop()
+    }
+  }
+
+  for (let i = 0; i < html.length; i++) {
+    const char = html[i]
+    if (char === '<' && tagBuffer === null) {
+      tagBuffer = char
+    } else if (char !== '>' && tagBuffer !== null) {
+      tagBuffer += char
+    } else if (char === '>' && tagBuffer !== null) {
+      tagBuffer += char
+      const tagFull = tagBuffer
+      tagBuffer = null
+      const tagName = getTagName(tagFull)
+      if (handledTags.has(tagName)) {
+        if (tagName === 'br') {
+          handleBr(tagFull)
+        } else if (openCloseTags.has(tagName)) {
+          if (tagFull[1] === '/') {
+            handleClose(tagFull)
+          } else if (tagFull[tagFull.length - 2] === '/') {
+            // self-closing
+            handleBr(tagFull)
+          } else {
+            handleOpen(tagFull)
+          }
+        }
+      } else {
+        textBuffer += tagFull
+      }
+    } else if (char === '\n') {
+      handleBr(char)
+    } else {
+      textBuffer += char
+    }
+  }
+  if (tagBuffer) {
+    textBuffer += tagBuffer
+  }
+
+  flush()
+
+  return buffer
+}
diff --git a/src/services/html_converter/html_tree_converter.service.js b/src/services/html_converter/html_tree_converter.service.js
new file mode 100644
index 00000000..badd473a
--- /dev/null
+++ b/src/services/html_converter/html_tree_converter.service.js
@@ -0,0 +1,146 @@
+/**
+ * This is a not-so-tiny purpose-built HTML parser/processor. This parses html
+ * and converts it into a tree structure representing tag openers/closers and
+ * children.
+ *
+ * Structure follows this pattern: [opener, [...children], closer] except root
+ * node which is just [...children]. Text nodes can only be within children and
+ * are represented as strings.
+ *
+ * Intended use is to convert HTML structure and then recursively iterate over it
+ * most likely using a map. Very useful for dynamically rendering html replacing
+ * tags with JSX elements in a render function.
+ *
+ * known issue: doesn't handle CDATA so CDATA might not work well
+ * known issue: doesn't handle HTML comments
+ *
+ * @param {Object} input - input data
+ * @return {string} processed html
+ */
+export const convertHtmlToTree = (html) => {
+  // Elements that are implicitly self-closing
+  // https://developer.mozilla.org/en-US/docs/Glossary/empty_element
+  const emptyElements = new Set([
+    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+    'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'
+  ])
+  // TODO For future - also parse HTML5 multi-source components?
+
+  const buffer = [] // Current output buffer
+  const levels = [['', buffer]] // How deep we are in tags and which tags were there
+  let textBuffer = '' // Current line content
+  let tagBuffer = null // Current tag buffer, if null = we are not currently reading a tag
+
+  const getCurrentBuffer = () => {
+    return levels[levels.length - 1][1]
+  }
+
+  const flushText = () => { // Processes current line buffer, adds it to output buffer and clears line buffer
+    if (textBuffer === '') return
+    getCurrentBuffer().push(textBuffer)
+    textBuffer = ''
+  }
+
+  const handleSelfClosing = (tag) => {
+    getCurrentBuffer().push([tag])
+  }
+
+  const handleOpen = (tag) => {
+    const curBuf = getCurrentBuffer()
+    const newLevel = [tag, []]
+    levels.push(newLevel)
+    curBuf.push(newLevel)
+  }
+
+  const handleClose = (tag) => {
+    const currentTag = levels[levels.length - 1]
+    if (getTagName(levels[levels.length - 1][0]) === getTagName(tag)) {
+      currentTag.push(tag)
+      levels.pop()
+    } else {
+      getCurrentBuffer().push(tag)
+    }
+  }
+
+  for (let i = 0; i < html.length; i++) {
+    const char = html[i]
+    if (char === '<' && tagBuffer === null) {
+      flushText()
+      tagBuffer = char
+    } else if (char !== '>' && tagBuffer !== null) {
+      tagBuffer += char
+    } else if (char === '>' && tagBuffer !== null) {
+      tagBuffer += char
+      const tagFull = tagBuffer
+      tagBuffer = null
+      const tagName = getTagName(tagFull)
+      if (tagFull[1] === '/') {
+        handleClose(tagFull)
+      } else if (emptyElements.has(tagName) || tagFull[tagFull.length - 2] === '/') {
+        // self-closing
+        handleSelfClosing(tagFull)
+      } else {
+        handleOpen(tagFull)
+      }
+    } else {
+      textBuffer += char
+    }
+  }
+  if (tagBuffer) {
+    textBuffer += tagBuffer
+  }
+
+  flushText()
+  return buffer
+}
+
+// Extracts tag name from tag, i.e. <span a="b"> => span
+export const getTagName = (tag) => {
+  const result = /(?:<\/(\w+)>|<(\w+)\s?.*?\/?>)/gi.exec(tag)
+  return result && (result[1] || result[2])
+}
+
+export const processTextForEmoji = (text, emojis, processor) => {
+  const buffer = []
+  let textBuffer = ''
+  for (let i = 0; i < text.length; i++) {
+    const char = text[i]
+    if (char === ':') {
+      const next = text.slice(i + 1)
+      let found = false
+      for (let emoji of emojis) {
+        if (next.slice(0, emoji.shortcode.length + 1) === (emoji.shortcode + ':')) {
+          found = emoji
+          break
+        }
+      }
+      if (found) {
+        buffer.push(textBuffer)
+        textBuffer = ''
+        buffer.push(processor(found))
+        i += found.shortcode.length + 1
+      } else {
+        textBuffer += char
+      }
+    } else {
+      textBuffer += char
+    }
+  }
+  if (textBuffer) buffer.push(textBuffer)
+  return buffer
+}
+
+export const getAttrs = tag => {
+  const innertag = tag
+    .substring(1, tag.length - 1)
+    .replace(new RegExp('^' + getTagName(tag)), '')
+    .replace(/\/?$/, '')
+    .trim()
+  const attrs = Array.from(innertag.matchAll(/([a-z0-9-]+)(?:=("[^"]+?"|'[^']+?'))?/gi))
+    .map(([trash, key, value]) => [key, value])
+    .map(([k, v]) => {
+      if (!v) return [k, true]
+      return [k, v.substring(1, v.length - 1)]
+    })
+  return Object.fromEntries(attrs)
+}
diff --git a/src/services/mini_html_converter/mini_html_converter.service.js b/src/services/mini_html_converter/mini_html_converter.service.js
deleted file mode 100644
index 900752cd..00000000
--- a/src/services/mini_html_converter/mini_html_converter.service.js
+++ /dev/null
@@ -1,138 +0,0 @@
-/**
- * This is a not-so-tiny purpose-built HTML parser/processor. It was made for use
- * with StatusBody component for purpose of replacing tags with vue components
- *
- * known issue: doesn't handle CDATA so nested CDATA might not work well
- *
- * @param {Object} input - input data
- * @param {(string) => string} lineProcessor - function that will be called on every line
- * @param {{ key[string]: (string) => string}} tagProcessor - map of processors for tags
- * @return {string} processed html
- */
-export const convertHtml = (html) => {
-  // Elements that are implicitly self-closing
-  // https://developer.mozilla.org/en-US/docs/Glossary/empty_element
-  const emptyElements = new Set([
-    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
-    'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'
-  ])
-  // TODO For future - also parse HTML5 multi-source components?
-
-  const buffer = [] // Current output buffer
-  const levels = [['', buffer]] // How deep we are in tags and which tags were there
-  let textBuffer = '' // Current line content
-  let tagBuffer = null // Current tag buffer, if null = we are not currently reading a tag
-
-  const getCurrentBuffer = () => {
-    return levels[levels.length - 1][1]
-  }
-
-  const flushText = () => { // Processes current line buffer, adds it to output buffer and clears line buffer
-    if (textBuffer === '') return
-    getCurrentBuffer().push(textBuffer)
-    textBuffer = ''
-  }
-
-  const handleSelfClosing = (tag) => {
-    getCurrentBuffer().push([tag])
-  }
-
-  const handleOpen = (tag) => {
-    const curBuf = getCurrentBuffer()
-    const newLevel = [tag, []]
-    levels.push(newLevel)
-    curBuf.push(newLevel)
-  }
-
-  const handleClose = (tag) => {
-    const currentTag = levels[levels.length - 1]
-    if (getTagName(levels[levels.length - 1][0]) === getTagName(tag)) {
-      currentTag.push(tag)
-      levels.pop()
-    } else {
-      getCurrentBuffer().push(tag)
-    }
-  }
-
-  for (let i = 0; i < html.length; i++) {
-    const char = html[i]
-    if (char === '<' && tagBuffer === null) {
-      flushText()
-      tagBuffer = char
-    } else if (char !== '>' && tagBuffer !== null) {
-      tagBuffer += char
-    } else if (char === '>' && tagBuffer !== null) {
-      tagBuffer += char
-      const tagFull = tagBuffer
-      tagBuffer = null
-      const tagName = getTagName(tagFull)
-      if (tagFull[1] === '/') {
-        handleClose(tagFull)
-      } else if (emptyElements.has(tagName) || tagFull[tagFull.length - 2] === '/') {
-        // self-closing
-        handleSelfClosing(tagFull)
-      } else {
-        handleOpen(tagFull)
-      }
-    } else {
-      textBuffer += char
-    }
-  }
-  if (tagBuffer) {
-    textBuffer += tagBuffer
-  }
-
-  flushText()
-  return buffer
-}
-
-// Extracts tag name from tag, i.e. <span a="b"> => span
-export const getTagName = (tag) => {
-  const result = /(?:<\/(\w+)>|<(\w+)\s?.*?\/?>)/gi.exec(tag)
-  return result && (result[1] || result[2])
-}
-
-export const processTextForEmoji = (text, emojis, processor) => {
-  const buffer = []
-  let textBuffer = ''
-  for (let i = 0; i < text.length; i++) {
-    const char = text[i]
-    if (char === ':') {
-      const next = text.slice(i + 1)
-      let found = false
-      for (let emoji of emojis) {
-        if (next.slice(0, emoji.shortcode.length + 1) === (emoji.shortcode + ':')) {
-          found = emoji
-          break
-        }
-      }
-      if (found) {
-        buffer.push(textBuffer)
-        textBuffer = ''
-        buffer.push(processor(found))
-        i += found.shortcode.length + 1
-      } else {
-        textBuffer += char
-      }
-    } else {
-      textBuffer += char
-    }
-  }
-  if (textBuffer) buffer.push(textBuffer)
-  return buffer
-}
-
-export const getAttrs = tag => {
-  const innertag = tag
-    .substring(1, tag.length - 1)
-    .replace(new RegExp('^' + getTagName(tag)), '')
-    .replace(/\/?$/, '')
-    .trim()
-  const attrs = Array.from(innertag.matchAll(/([a-z0-9-]+)(?:=("[^"]+?"|'[^']+?'))?/gi))
-    .map(([trash, key, value]) => [key, value])
-    .map(([k, v]) => {
-      if (!v) return [k, true]
-      return [k, v.substring(1, v.length - 1)]
-    })
-  return Object.fromEntries(attrs)
-}
diff --git a/src/services/tiny_post_html_processor/tiny_post_html_processor.service.js b/src/services/tiny_post_html_processor/tiny_post_html_processor.service.js
deleted file mode 100644
index de6f20ef..00000000
--- a/src/services/tiny_post_html_processor/tiny_post_html_processor.service.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * This is a tiny purpose-built HTML parser/processor. This basically detects any type of visual newline and
- * allows it to be processed, useful for greentexting, mostly
- *
- * known issue: doesn't handle CDATA so nested CDATA might not work well
- *
- * @param {Object} input - input data
- * @param {(string) => string} processor - function that will be called on every line
- * @return {string} processed html
- */
-export const processHtml = (html, processor) => {
-  const handledTags = new Set(['p', 'br', 'div'])
-  const openCloseTags = new Set(['p', 'div'])
-
-  let buffer = '' // Current output buffer
-  const level = [] // How deep we are in tags and which tags were there
-  let textBuffer = '' // Current line content
-  let tagBuffer = null // Current tag buffer, if null = we are not currently reading a tag
-
-  // Extracts tag name from tag, i.e. <span a="b"> => span
-  const getTagName = (tag) => {
-    const result = /(?:<\/(\w+)>|<(\w+)\s?[^/]*?\/?>)/gi.exec(tag)
-    return result && (result[1] || result[2])
-  }
-
-  const flush = () => { // Processes current line buffer, adds it to output buffer and clears line buffer
-    if (textBuffer.trim().length > 0) {
-      buffer += processor(textBuffer)
-    } else {
-      buffer += textBuffer
-    }
-    textBuffer = ''
-  }
-
-  const handleBr = (tag) => { // handles single newlines/linebreaks/selfclosing
-    flush()
-    buffer += tag
-  }
-
-  const handleOpen = (tag) => { // handles opening tags
-    flush()
-    buffer += tag
-    level.push(tag)
-  }
-
-  const handleClose = (tag) => { // handles closing tags
-    flush()
-    buffer += tag
-    if (level[level.length - 1] === tag) {
-      level.pop()
-    }
-  }
-
-  for (let i = 0; i < html.length; i++) {
-    const char = html[i]
-    if (char === '<' && tagBuffer === null) {
-      tagBuffer = char
-    } else if (char !== '>' && tagBuffer !== null) {
-      tagBuffer += char
-    } else if (char === '>' && tagBuffer !== null) {
-      tagBuffer += char
-      const tagFull = tagBuffer
-      tagBuffer = null
-      const tagName = getTagName(tagFull)
-      if (handledTags.has(tagName)) {
-        if (tagName === 'br') {
-          handleBr(tagFull)
-        } else if (openCloseTags.has(tagName)) {
-          if (tagFull[1] === '/') {
-            handleClose(tagFull)
-          } else if (tagFull[tagFull.length - 2] === '/') {
-            // self-closing
-            handleBr(tagFull)
-          } else {
-            handleOpen(tagFull)
-          }
-        }
-      } else {
-        textBuffer += tagFull
-      }
-    } else if (char === '\n') {
-      handleBr(char)
-    } else {
-      textBuffer += char
-    }
-  }
-  if (tagBuffer) {
-    textBuffer += tagBuffer
-  }
-
-  flush()
-
-  return buffer
-}
diff --git a/test/unit/specs/services/html_converter/html_line_converter.spec.js b/test/unit/specs/services/html_converter/html_line_converter.spec.js
new file mode 100644
index 00000000..82cb4170
--- /dev/null
+++ b/test/unit/specs/services/html_converter/html_line_converter.spec.js
@@ -0,0 +1,130 @@
+import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js'
+
+const mapOnlyText = (processor) => (input) => input.text ? processor(input.text) : input
+
+describe('TinyPostHTMLProcessor', () => {
+  describe('with processor that keeps original line should not make any changes to HTML when', () => {
+    const processorKeep = (line) => line
+    it('fed with regular HTML with newlines', () => {
+      const inputOutput = '1<br/>2<p class="lol">3 4</p> 5 \n 6 <p > 7 <br> 8 </p> <br>\n<br/>'
+      const result = convertHtmlToLines(inputOutput)
+      const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
+      expect(comparableResult).to.eql(inputOutput)
+    })
+
+    it('fed with possibly broken HTML with invalid tags/composition', () => {
+      const inputOutput = '<feeee dwdwddddddw> <i>ayy<b>lm</i>ao</b> </section>'
+      const result = convertHtmlToLines(inputOutput)
+      const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
+      expect(comparableResult).to.eql(inputOutput)
+    })
+
+    it('fed with very broken HTML with broken composition', () => {
+      const inputOutput = '</p> lmao what </div> whats going on <div> wha <p>'
+      const result = convertHtmlToLines(inputOutput)
+      const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
+      expect(comparableResult).to.eql(inputOutput)
+    })
+
+    it('fed with sorta valid HTML but tags aren\'t closed', () => {
+      const inputOutput = 'just leaving a <div> hanging'
+      const result = convertHtmlToLines(inputOutput)
+      const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
+      expect(comparableResult).to.eql(inputOutput)
+    })
+
+    it('fed with not really HTML at this point... tags that aren\'t finished', () => {
+      const inputOutput = 'do you expect me to finish this <div class='
+      const result = convertHtmlToLines(inputOutput)
+      const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
+      expect(comparableResult).to.eql(inputOutput)
+    })
+
+    it('fed with dubiously valid HTML (p within p and also div inside p)', () => {
+      const inputOutput = 'look ma <p> p \nwithin <p> p! </p> and a <br/><div>div!</div></p>'
+      const result = convertHtmlToLines(inputOutput)
+      const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
+      expect(comparableResult).to.eql(inputOutput)
+    })
+
+    it('fed with maybe valid HTML? self-closing divs and ps', () => {
+      const inputOutput = 'a <div class="what"/> what now <p aria-label="wtf"/> ?'
+      const result = convertHtmlToLines(inputOutput)
+      const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
+      expect(comparableResult).to.eql(inputOutput)
+    })
+
+    it('fed with valid XHTML containing a CDATA', () => {
+      const inputOutput = 'Yes, it is me, <![CDATA[DIO]]>'
+      const result = convertHtmlToLines(inputOutput)
+      const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
+      expect(comparableResult).to.eql(inputOutput)
+    })
+  })
+  describe('with processor that replaces lines with word "_" should match expected line when', () => {
+    const processorReplace = (line) => '_'
+    it('fed with regular HTML with newlines', () => {
+      const input = '1<br/>2<p class="lol">3 4</p> 5 \n 6 <p > 7 <br> 8 </p> <br>\n<br/>'
+      const output = '_<br/>_<p class="lol">_</p>_\n_<p >_<br>_</p> <br>\n<br/>'
+      const result = convertHtmlToLines(input)
+      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      expect(comparableResult).to.eql(output)
+    })
+
+    it('fed with possibly broken HTML with invalid tags/composition', () => {
+      const input = '<feeee dwdwddddddw> <i>ayy<b>lm</i>ao</b> </section>'
+      const output = '_'
+      const result = convertHtmlToLines(input)
+      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      expect(comparableResult).to.eql(output)
+    })
+
+    it('fed with very broken HTML with broken composition', () => {
+      const input = '</p> lmao what </div> whats going on <div> wha <p>'
+      const output = '</p>_</div>_<div>_<p>'
+      const result = convertHtmlToLines(input)
+      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      expect(comparableResult).to.eql(output)
+    })
+
+    it('fed with sorta valid HTML but tags aren\'t closed', () => {
+      const input = 'just leaving a <div> hanging'
+      const output = '_<div>_'
+      const result = convertHtmlToLines(input)
+      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      expect(comparableResult).to.eql(output)
+    })
+
+    it('fed with not really HTML at this point... tags that aren\'t finished', () => {
+      const input = 'do you expect me to finish this <div class='
+      const output = '_'
+      const result = convertHtmlToLines(input)
+      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      expect(comparableResult).to.eql(output)
+    })
+
+    it('fed with dubiously valid HTML (p within p and also div inside p)', () => {
+      const input = 'look ma <p> p \nwithin <p> p! </p> and a <br/><div>div!</div></p>'
+      const output = '_<p>_\n_<p>_</p>_<br/><div>_</div></p>'
+      const result = convertHtmlToLines(input)
+      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      expect(comparableResult).to.eql(output)
+    })
+
+    it('fed with maybe valid HTML? self-closing divs and ps', () => {
+      const input = 'a <div class="what"/> what now <p aria-label="wtf"/> ?'
+      const output = '_<div class="what"/>_<p aria-label="wtf"/>_'
+      const result = convertHtmlToLines(input)
+      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      expect(comparableResult).to.eql(output)
+    })
+
+    it('fed with valid XHTML containing a CDATA', () => {
+      const input = 'Yes, it is me, <![CDATA[DIO]]>'
+      const output = '_'
+      const result = convertHtmlToLines(input)
+      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      expect(comparableResult).to.eql(output)
+    })
+  })
+})
diff --git a/test/unit/specs/services/html_converter/html_tree_converter.spec.js b/test/unit/specs/services/html_converter/html_tree_converter.spec.js
new file mode 100644
index 00000000..a54745c3
--- /dev/null
+++ b/test/unit/specs/services/html_converter/html_tree_converter.spec.js
@@ -0,0 +1,166 @@
+import { convertHtmlToTree, processTextForEmoji, getAttrs } from 'src/services/html_converter/html_tree_converter.service.js'
+
+describe('MiniHtmlConverter', () => {
+  describe('convertHtmlToTree', () => {
+    it('converts html into a tree structure', () => {
+      const input = '1 <p>2</p> <b>3<img src="a">4</b>5'
+      expect(convertHtmlToTree(input)).to.eql([
+        '1 ',
+        [
+          '<p>',
+          ['2'],
+          '</p>'
+        ],
+        ' ',
+        [
+          '<b>',
+          [
+            '3',
+            ['<img src="a">'],
+            '4'
+          ],
+          '</b>'
+        ],
+        '5'
+      ])
+    })
+    it('converts html to tree while preserving tag formatting', () => {
+      const input = '1 <p >2</p><b >3<img   src="a">4</b>5'
+      expect(convertHtmlToTree(input)).to.eql([
+        '1 ',
+        [
+          '<p >',
+          ['2'],
+          '</p>'
+        ],
+        [
+          '<b >',
+          [
+            '3',
+            ['<img   src="a">'],
+            '4'
+          ],
+          '</b>'
+        ],
+        '5'
+      ])
+    })
+    it('converts semi-broken html', () => {
+      const input = '1 <br> 2 <p> 42'
+      expect(convertHtmlToTree(input)).to.eql([
+        '1 ',
+        ['<br>'],
+        ' 2 ',
+        [
+          '<p>',
+          [' 42']
+        ]
+      ])
+    })
+    it('realistic case 1', () => {
+      const input = '<p><span class="h-card"><a class="u-url mention" data-user="9wRC6T2ZZiKWJ0vUi8" href="https://cawfee.club/users/benis" rel="ugc">@<span>benis</span></a></span> <span class="h-card"><a class="u-url mention" data-user="194" href="https://shigusegubu.club/users/hj" rel="ugc">@<span>hj</span></a></span> nice</p>'
+      expect(convertHtmlToTree(input)).to.eql([
+        [
+          '<p>',
+          [
+            [
+              '<span class="h-card">',
+              [
+                [
+                  '<a class="u-url mention" data-user="9wRC6T2ZZiKWJ0vUi8" href="https://cawfee.club/users/benis" rel="ugc">',
+                  [
+                    '@',
+                    [
+                      '<span>',
+                      [
+                        'benis'
+                      ],
+                      '</span>'
+                    ]
+                  ],
+                  '</a>'
+                ]
+              ],
+              '</span>'
+            ],
+            ' ',
+            [
+              '<span class="h-card">',
+              [
+                [
+                  '<a class="u-url mention" data-user="194" href="https://shigusegubu.club/users/hj" rel="ugc">',
+                  [
+                    '@',
+                    [
+                      '<span>',
+                      [
+                        'hj'
+                      ],
+                      '</span>'
+                    ]
+                  ],
+                  '</a>'
+                ]
+              ],
+              '</span>'
+            ],
+            ' nice'
+          ],
+          '</p>'
+        ]
+      ])
+    })
+    it('realistic case 2', () => {
+      const inputOutput = 'Country improv: give me a city<br/>Audience: Memphis<br/>Improv troupe: come on, a better one<br/>Audience: el paso'
+      expect(convertHtmlToTree(inputOutput)).to.eql([
+        'Country improv: give me a city',
+        [
+          '<br/>'
+        ],
+        'Audience: Memphis',
+        [
+          '<br/>'
+        ],
+        'Improv troupe: come on, a better one',
+        [
+          '<br/>'
+        ],
+        'Audience: el paso'
+      ])
+    })
+  })
+
+  describe('processTextForEmoji', () => {
+    it('processes all emoji in text', () => {
+      const input = 'Hello from finland! :lol: We have best water! :lmao:'
+      const emojis = [
+        { shortcode: 'lol', src: 'LOL' },
+        { shortcode: 'lmao', src: 'LMAO' }
+      ]
+      const processor = ({ shortcode, src }) => ({ shortcode, src })
+      expect(processTextForEmoji(input, emojis, processor)).to.eql([
+        'Hello from finland! ',
+        { shortcode: 'lol', src: 'LOL' },
+        ' We have best water! ',
+        { shortcode: 'lmao', src: 'LMAO' }
+      ])
+    })
+    it('leaves text as is', () => {
+      const input = 'Number one: that\'s terror'
+      const emojis = []
+      const processor = ({ shortcode, src }) => ({ shortcode, src })
+      expect(processTextForEmoji(input, emojis, processor)).to.eql([
+        'Number one: that\'s terror'
+      ])
+    })
+  })
+
+  describe('getAttrs', () => {
+    it('extracts arguments from tag', () => {
+      const input = '<img src="boop" cool ebin=\'true\'>'
+      const output = { src: 'boop', cool: true, ebin: 'true' }
+
+      expect(getAttrs(input)).to.eql(output)
+    })
+  })
+})
diff --git a/test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js b/test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js
deleted file mode 100644
index 8df2fbc3..00000000
--- a/test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js
+++ /dev/null
@@ -1,166 +0,0 @@
-import { convertHtml, processTextForEmoji, getAttrs } from 'src/services/mini_html_converter/mini_html_converter.service.js'
-
-describe('MiniHtmlConverter', () => {
-  describe('convertHtml', () => {
-    it('converts html into a tree structure', () => {
-      const input = '1 <p>2</p> <b>3<img src="a">4</b>5'
-      expect(convertHtml(input)).to.eql([
-        '1 ',
-        [
-          '<p>',
-          ['2'],
-          '</p>'
-        ],
-        ' ',
-        [
-          '<b>',
-          [
-            '3',
-            ['<img src="a">'],
-            '4'
-          ],
-          '</b>'
-        ],
-        '5'
-      ])
-    })
-    it('converts html to tree while preserving tag formatting', () => {
-      const input = '1 <p >2</p><b >3<img   src="a">4</b>5'
-      expect(convertHtml(input)).to.eql([
-        '1 ',
-        [
-          '<p >',
-          ['2'],
-          '</p>'
-        ],
-        [
-          '<b >',
-          [
-            '3',
-            ['<img   src="a">'],
-            '4'
-          ],
-          '</b>'
-        ],
-        '5'
-      ])
-    })
-    it('converts semi-broken html', () => {
-      const input = '1 <br> 2 <p> 42'
-      expect(convertHtml(input)).to.eql([
-        '1 ',
-        ['<br>'],
-        ' 2 ',
-        [
-          '<p>',
-          [' 42']
-        ]
-      ])
-    })
-    it('realistic case 1', () => {
-      const input = '<p><span class="h-card"><a class="u-url mention" data-user="9wRC6T2ZZiKWJ0vUi8" href="https://cawfee.club/users/benis" rel="ugc">@<span>benis</span></a></span> <span class="h-card"><a class="u-url mention" data-user="194" href="https://shigusegubu.club/users/hj" rel="ugc">@<span>hj</span></a></span> nice</p>'
-      expect(convertHtml(input)).to.eql([
-        [
-          '<p>',
-          [
-            [
-              '<span class="h-card">',
-              [
-                [
-                  '<a class="u-url mention" data-user="9wRC6T2ZZiKWJ0vUi8" href="https://cawfee.club/users/benis" rel="ugc">',
-                  [
-                    '@',
-                    [
-                      '<span>',
-                      [
-                        'benis'
-                      ],
-                      '</span>'
-                    ]
-                  ],
-                  '</a>'
-                ]
-              ],
-              '</span>'
-            ],
-            ' ',
-            [
-              '<span class="h-card">',
-              [
-                [
-                  '<a class="u-url mention" data-user="194" href="https://shigusegubu.club/users/hj" rel="ugc">',
-                  [
-                    '@',
-                    [
-                      '<span>',
-                      [
-                        'hj'
-                      ],
-                      '</span>'
-                    ]
-                  ],
-                  '</a>'
-                ]
-              ],
-              '</span>'
-            ],
-            ' nice'
-          ],
-          '</p>'
-        ]
-      ])
-    })
-    it('realistic case 2', () => {
-      const inputOutput = 'Country improv: give me a city<br/>Audience: Memphis<br/>Improv troupe: come on, a better one<br/>Audience: el paso'
-      expect(convertHtml(inputOutput)).to.eql([
-        'Country improv: give me a city',
-        [
-          '<br/>'
-        ],
-        'Audience: Memphis',
-        [
-          '<br/>'
-        ],
-        'Improv troupe: come on, a better one',
-        [
-          '<br/>'
-        ],
-        'Audience: el paso'
-      ])
-    })
-  })
-
-  describe('processTextForEmoji', () => {
-    it('processes all emoji in text', () => {
-      const input = 'Hello from finland! :lol: We have best water! :lmao:'
-      const emojis = [
-        { shortcode: 'lol', src: 'LOL' },
-        { shortcode: 'lmao', src: 'LMAO' }
-      ]
-      const processor = ({ shortcode, src }) => ({ shortcode, src })
-      expect(processTextForEmoji(input, emojis, processor)).to.eql([
-        'Hello from finland! ',
-        { shortcode: 'lol', src: 'LOL' },
-        ' We have best water! ',
-        { shortcode: 'lmao', src: 'LMAO' }
-      ])
-    })
-    it('leaves text as is', () => {
-      const input = 'Number one: that\'s terror'
-      const emojis = []
-      const processor = ({ shortcode, src }) => ({ shortcode, src })
-      expect(processTextForEmoji(input, emojis, processor)).to.eql([
-        'Number one: that\'s terror'
-      ])
-    })
-  })
-
-  describe('getAttrs', () => {
-    it('extracts arguments from tag', () => {
-      const input = '<img src="boop" cool ebin=\'true\'>'
-      const output = { src: 'boop', cool: true, ebin: 'true' }
-
-      expect(getAttrs(input)).to.eql(output)
-    })
-  })
-})
diff --git a/test/unit/specs/services/tiny_post_html_processor/tiny_post_html_processor.spec.js b/test/unit/specs/services/tiny_post_html_processor/tiny_post_html_processor.spec.js
deleted file mode 100644
index f301429d..00000000
--- a/test/unit/specs/services/tiny_post_html_processor/tiny_post_html_processor.spec.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
-
-describe('TinyPostHTMLProcessor', () => {
-  describe('with processor that keeps original line should not make any changes to HTML when', () => {
-    const processorKeep = (line) => line
-    it('fed with regular HTML with newlines', () => {
-      const inputOutput = '1<br/>2<p class="lol">3 4</p> 5 \n 6 <p > 7 <br> 8 </p> <br>\n<br/>'
-      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
-    })
-
-    it('fed with possibly broken HTML with invalid tags/composition', () => {
-      const inputOutput = '<feeee dwdwddddddw> <i>ayy<b>lm</i>ao</b> </section>'
-      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
-    })
-
-    it('fed with very broken HTML with broken composition', () => {
-      const inputOutput = '</p> lmao what </div> whats going on <div> wha <p>'
-      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
-    })
-
-    it('fed with sorta valid HTML but tags aren\'t closed', () => {
-      const inputOutput = 'just leaving a <div> hanging'
-      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
-    })
-
-    it('fed with not really HTML at this point... tags that aren\'t finished', () => {
-      const inputOutput = 'do you expect me to finish this <div class='
-      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
-    })
-
-    it('fed with dubiously valid HTML (p within p and also div inside p)', () => {
-      const inputOutput = 'look ma <p> p \nwithin <p> p! </p> and a <br/><div>div!</div></p>'
-      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
-    })
-
-    it('fed with maybe valid HTML? self-closing divs and ps', () => {
-      const inputOutput = 'a <div class="what"/> what now <p aria-label="wtf"/> ?'
-      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
-    })
-
-    it('fed with valid XHTML containing a CDATA', () => {
-      const inputOutput = 'Yes, it is me, <![CDATA[DIO]]>'
-      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
-    })
-  })
-  describe('with processor that replaces lines with word "_" should match expected line when', () => {
-    const processorReplace = (line) => '_'
-    it('fed with regular HTML with newlines', () => {
-      const input = '1<br/>2<p class="lol">3 4</p> 5 \n 6 <p > 7 <br> 8 </p> <br>\n<br/>'
-      const output = '_<br/>_<p class="lol">_</p>_\n_<p >_<br>_</p> <br>\n<br/>'
-      expect(processHtml(input, processorReplace)).to.eql(output)
-    })
-
-    it('fed with possibly broken HTML with invalid tags/composition', () => {
-      const input = '<feeee dwdwddddddw> <i>ayy<b>lm</i>ao</b> </section>'
-      const output = '_'
-      expect(processHtml(input, processorReplace)).to.eql(output)
-    })
-
-    it('fed with very broken HTML with broken composition', () => {
-      const input = '</p> lmao what </div> whats going on <div> wha <p>'
-      const output = '</p>_</div>_<div>_<p>'
-      expect(processHtml(input, processorReplace)).to.eql(output)
-    })
-
-    it('fed with sorta valid HTML but tags aren\'t closed', () => {
-      const input = 'just leaving a <div> hanging'
-      const output = '_<div>_'
-      expect(processHtml(input, processorReplace)).to.eql(output)
-    })
-
-    it('fed with not really HTML at this point... tags that aren\'t finished', () => {
-      const input = 'do you expect me to finish this <div class='
-      const output = '_'
-      expect(processHtml(input, processorReplace)).to.eql(output)
-    })
-
-    it('fed with dubiously valid HTML (p within p and also div inside p)', () => {
-      const input = 'look ma <p> p \nwithin <p> p! </p> and a <br/><div>div!</div></p>'
-      const output = '_<p>_\n_<p>_</p>_<br/><div>_</div></p>'
-      expect(processHtml(input, processorReplace)).to.eql(output)
-    })
-
-    it('fed with maybe valid HTML? self-closing divs and ps', () => {
-      const input = 'a <div class="what"/> what now <p aria-label="wtf"/> ?'
-      const output = '_<div class="what"/>_<p aria-label="wtf"/>_'
-      expect(processHtml(input, processorReplace)).to.eql(output)
-    })
-
-    it('fed with valid XHTML containing a CDATA', () => {
-      const input = 'Yes, it is me, <![CDATA[DIO]]>'
-      const output = '_'
-      expect(processHtml(input, processorReplace)).to.eql(output)
-    })
-  })
-})
-- 
cgit v1.2.3-70-g09d2


From 5834790d0b38d487e314e8419509d162abbd6a80 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 11 Jun 2021 11:50:05 +0300
Subject: fix #935

---
 .../html_converter/html_line_converter.service.js  | 13 +++++------
 .../html_converter/html_line_converter.spec.js     | 25 ++++++++++++++++++++++
 2 files changed, 32 insertions(+), 6 deletions(-)

(limited to 'test')

diff --git a/src/services/html_converter/html_line_converter.service.js b/src/services/html_converter/html_line_converter.service.js
index 80482c9a..d8f5ecb8 100644
--- a/src/services/html_converter/html_line_converter.service.js
+++ b/src/services/html_converter/html_line_converter.service.js
@@ -17,8 +17,9 @@
  * @return {(string|{ text: string })[]} processed html in form of a list.
  */
 export const convertHtmlToLines = (html) => {
-  const handledTags = new Set(['p', 'br', 'div'])
-  const openCloseTags = new Set(['p', 'div'])
+  const ignoredTags = new Set(['code', 'blockquote'])
+  const handledTags = new Set(['p', 'br', 'div', 'pre', 'code', 'blockquote'])
+  const openCloseTags = new Set(['p', 'div', 'pre', 'code', 'blockquote'])
 
   let buffer = [] // Current output buffer
   const level = [] // How deep we are in tags and which tags were there
@@ -32,7 +33,7 @@ export const convertHtmlToLines = (html) => {
   }
 
   const flush = () => { // Processes current line buffer, adds it to output buffer and clears line buffer
-    if (textBuffer.trim().length > 0) {
+    if (textBuffer.trim().length > 0 && !level.some(l => ignoredTags.has(l))) {
       buffer.push({ text: textBuffer })
     } else {
       buffer.push(textBuffer)
@@ -48,14 +49,14 @@ export const convertHtmlToLines = (html) => {
   const handleOpen = (tag) => { // handles opening tags
     flush()
     buffer.push(tag)
-    level.push(tag)
+    level.unshift(getTagName(tag))
   }
 
   const handleClose = (tag) => { // handles closing tags
     flush()
     buffer.push(tag)
-    if (level[level.length - 1] === tag) {
-      level.pop()
+    if (level[0] === getTagName(tag)) {
+      level.shift()
     }
   }
 
diff --git a/test/unit/specs/services/html_converter/html_line_converter.spec.js b/test/unit/specs/services/html_converter/html_line_converter.spec.js
index 82cb4170..532ea187 100644
--- a/test/unit/specs/services/html_converter/html_line_converter.spec.js
+++ b/test/unit/specs/services/html_converter/html_line_converter.spec.js
@@ -126,5 +126,30 @@ describe('TinyPostHTMLProcessor', () => {
       const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
       expect(comparableResult).to.eql(output)
     })
+
+    it('Testing handling ignored blocks', () => {
+      const input = `
+      <pre><code>&gt; rei = &quot;0&quot;
+      &#39;0&#39;
+      &gt; rei == 0
+      true
+      &gt; rei == null
+      false</code></pre><blockquote>That, christian-like JS diagram but it’s evangelion instead.</blockquote>
+      `
+      const result = convertHtmlToLines(input)
+      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      expect(comparableResult).to.eql(input)
+    })
+    it('Testing handling ignored blocks 2', () => {
+      const input = `
+      <blockquote>An SSL error has happened.</blockquote><p>Shakespeare</p>
+      `
+      const output = `
+      <blockquote>An SSL error has happened.</blockquote><p>_</p>
+      `
+      const result = convertHtmlToLines(input)
+      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      expect(comparableResult).to.eql(output)
+    })
   })
 })
-- 
cgit v1.2.3-70-g09d2


From cd4455675024a3dfc8930184114d5f92438d0466 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 12 Jun 2021 19:47:23 +0300
Subject: restructure and tests

squash! restructure and tests
---
 src/components/rich_content/rich_content.jsx       |  17 +-
 src/components/status_body/status_body.vue         |   1 -
 .../html_converter/html_line_converter.service.js  |   8 +-
 .../html_converter/html_tree_converter.service.js  |  53 +--
 src/services/html_converter/utility.service.js     |  73 +++++
 test/unit/specs/components/rich_content.spec.js    | 357 +++++++++++++++++++++
 .../html_converter/html_line_converter.spec.js     |   2 +-
 .../html_converter/html_tree_converter.spec.js     |  38 +--
 .../specs/services/html_converter/utility.spec.js  |  37 +++
 9 files changed, 481 insertions(+), 105 deletions(-)
 create mode 100644 src/services/html_converter/utility.service.js
 create mode 100644 test/unit/specs/components/rich_content.spec.js
 create mode 100644 test/unit/specs/services/html_converter/utility.spec.js

(limited to 'test')

diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index ad77d615..ef15aaeb 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import { unescape, flattenDeep } from 'lodash'
-import { convertHtmlToTree, getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/html_tree_converter.service.js'
+import { getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/utility.service.js'
+import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js'
 import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js'
 import StillImage from 'src/components/still-image/still-image.vue'
 import MentionLink from 'src/components/mention_link/mention_link.vue'
@@ -31,18 +32,12 @@ export default Vue.component('RichContent', {
       required: false,
       type: Boolean,
       default: false
-    },
-    // Whether to hide last mentions (hellthreads)
-    hideMentions: {
-      required: false,
-      type: Boolean,
-      default: false
     }
   },
   // NEVER EVER TOUCH DATA INSIDE RENDER
   render (h) {
     // Pre-process HTML
-    const { newHtml: html, lastMentions } = preProcessPerLine(this.html, this.greentext, this.hideMentions)
+    const { newHtml: html, lastMentions } = preProcessPerLine(this.html, this.greentext, this.handleLinks)
     const firstMentions = [] // Mentions that appear in the beginning of post body
     const lastTags = [] // Tags that appear at the end of post body
     const writtenMentions = [] // All mentions that appear in post body
@@ -228,8 +223,9 @@ const getLinkData = (attrs, children, index) => {
  *
  * @param {String} html - raw HTML to process
  * @param {Boolean} greentext - whether to enable greentexting or not
+ * @param {Boolean} handleLinks - whether to handle links or not
  */
-export const preProcessPerLine = (html, greentext) => {
+export const preProcessPerLine = (html, greentext, handleLinks) => {
   const lastMentions = []
 
   let nonEmptyIndex = 0
@@ -264,6 +260,7 @@ export const preProcessPerLine = (html, greentext) => {
         const tag = getTagName(opener)
         // If we have a link we probably have mentions
         if (tag === 'a') {
+          if (!handleLinks) return [opener, children, closer]
           const attrs = getAttrs(opener)
           if (attrs['class'] && attrs['class'].includes('mention')) {
             // Got mentions
@@ -297,7 +294,7 @@ export const preProcessPerLine = (html, greentext) => {
     const result = [...tree].map(process)
 
     // Only check last (first since list is reversed) line
-    if (hasMentions && !hasLooseText && nonEmptyIndex++ === 0) {
+    if (handleLinks && hasMentions && !hasLooseText && nonEmptyIndex++ === 0) {
       let mentionIndex = 0
       const process = (item) => {
         if (Array.isArray(item)) {
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index b84541d7..aac44e42 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -52,7 +52,6 @@
             :html="status.raw_html"
             :emoji="status.emojis"
             :handle-links="true"
-            :hide-mentions="hideMentions"
             :greentext="mergedConfig.greentext"
             @parseReady="setHeadTailLinks"
           />
diff --git a/src/services/html_converter/html_line_converter.service.js b/src/services/html_converter/html_line_converter.service.js
index d8f5ecb8..e448d5cd 100644
--- a/src/services/html_converter/html_line_converter.service.js
+++ b/src/services/html_converter/html_line_converter.service.js
@@ -1,3 +1,5 @@
+import { getTagName } from './utility.service.js'
+
 /**
  * This is a tiny purpose-built HTML parser/processor. This basically detects
  * any type of visual newline and converts entire HTML into a array structure.
@@ -26,12 +28,6 @@ export const convertHtmlToLines = (html) => {
   let textBuffer = '' // Current line content
   let tagBuffer = null // Current tag buffer, if null = we are not currently reading a tag
 
-  // Extracts tag name from tag, i.e. <span a="b"> => span
-  const getTagName = (tag) => {
-    const result = /(?:<\/(\w+)>|<(\w+)\s?[^/]*?\/?>)/gi.exec(tag)
-    return result && (result[1] || result[2])
-  }
-
   const flush = () => { // Processes current line buffer, adds it to output buffer and clears line buffer
     if (textBuffer.trim().length > 0 && !level.some(l => ignoredTags.has(l))) {
       buffer.push({ text: textBuffer })
diff --git a/src/services/html_converter/html_tree_converter.service.js b/src/services/html_converter/html_tree_converter.service.js
index badd473a..804d35d7 100644
--- a/src/services/html_converter/html_tree_converter.service.js
+++ b/src/services/html_converter/html_tree_converter.service.js
@@ -1,3 +1,5 @@
+import { getTagName } from './utility.service.js'
+
 /**
  * This is a not-so-tiny purpose-built HTML parser/processor. This parses html
  * and converts it into a tree structure representing tag openers/closers and
@@ -93,54 +95,3 @@ export const convertHtmlToTree = (html) => {
   flushText()
   return buffer
 }
-
-// Extracts tag name from tag, i.e. <span a="b"> => span
-export const getTagName = (tag) => {
-  const result = /(?:<\/(\w+)>|<(\w+)\s?.*?\/?>)/gi.exec(tag)
-  return result && (result[1] || result[2])
-}
-
-export const processTextForEmoji = (text, emojis, processor) => {
-  const buffer = []
-  let textBuffer = ''
-  for (let i = 0; i < text.length; i++) {
-    const char = text[i]
-    if (char === ':') {
-      const next = text.slice(i + 1)
-      let found = false
-      for (let emoji of emojis) {
-        if (next.slice(0, emoji.shortcode.length + 1) === (emoji.shortcode + ':')) {
-          found = emoji
-          break
-        }
-      }
-      if (found) {
-        buffer.push(textBuffer)
-        textBuffer = ''
-        buffer.push(processor(found))
-        i += found.shortcode.length + 1
-      } else {
-        textBuffer += char
-      }
-    } else {
-      textBuffer += char
-    }
-  }
-  if (textBuffer) buffer.push(textBuffer)
-  return buffer
-}
-
-export const getAttrs = tag => {
-  const innertag = tag
-    .substring(1, tag.length - 1)
-    .replace(new RegExp('^' + getTagName(tag)), '')
-    .replace(/\/?$/, '')
-    .trim()
-  const attrs = Array.from(innertag.matchAll(/([a-z0-9-]+)(?:=("[^"]+?"|'[^']+?'))?/gi))
-    .map(([trash, key, value]) => [key, value])
-    .map(([k, v]) => {
-      if (!v) return [k, true]
-      return [k, v.substring(1, v.length - 1)]
-    })
-  return Object.fromEntries(attrs)
-}
diff --git a/src/services/html_converter/utility.service.js b/src/services/html_converter/utility.service.js
new file mode 100644
index 00000000..4d0c36c2
--- /dev/null
+++ b/src/services/html_converter/utility.service.js
@@ -0,0 +1,73 @@
+/**
+ * Extract tag name from tag opener/closer.
+ *
+ * @param {String} tag - tag string, i.e. '<a href="...">'
+ * @return {String} - tagname, i.e. "div"
+ */
+export const getTagName = (tag) => {
+  const result = /(?:<\/(\w+)>|<(\w+)\s?.*?\/?>)/gi.exec(tag)
+  return result && (result[1] || result[2])
+}
+
+/**
+ * Extract attributes from tag opener.
+ *
+ * @param {String} tag - tag string, i.e. '<a href="...">'
+ * @return {Object} - map of attributes key = attribute name, value = attribute value
+ *   attributes without values represented as boolean true
+ */
+export const getAttrs = tag => {
+  const innertag = tag
+    .substring(1, tag.length - 1)
+    .replace(new RegExp('^' + getTagName(tag)), '')
+    .replace(/\/?$/, '')
+    .trim()
+  const attrs = Array.from(innertag.matchAll(/([a-z0-9-]+)(?:=("[^"]+?"|'[^']+?'))?/gi))
+    .map(([trash, key, value]) => [key, value])
+    .map(([k, v]) => {
+      if (!v) return [k, true]
+      return [k, v.substring(1, v.length - 1)]
+    })
+  return Object.fromEntries(attrs)
+}
+
+/**
+ * Finds shortcodes in text
+ *
+ * @param {String} text - original text to find emojis in
+ * @param {{ url: String, shortcode: Sring }[]} emoji - list of shortcodes to find
+ * @param {Function} processor - function to call on each encountered emoji,
+ *   function is passed single object containing matching emoji ({ url, shortcode })
+ *   return value will be inserted into resulting array instead of :shortcode:
+ * @return {Array} resulting array with non-emoji parts of text and whatever {processor}
+ *   returned for emoji
+ */
+export const processTextForEmoji = (text, emojis, processor) => {
+  const buffer = []
+  let textBuffer = ''
+  for (let i = 0; i < text.length; i++) {
+    const char = text[i]
+    if (char === ':') {
+      const next = text.slice(i + 1)
+      let found = false
+      for (let emoji of emojis) {
+        if (next.slice(0, emoji.shortcode.length + 1) === (emoji.shortcode + ':')) {
+          found = emoji
+          break
+        }
+      }
+      if (found) {
+        buffer.push(textBuffer)
+        textBuffer = ''
+        buffer.push(processor(found))
+        i += found.shortcode.length + 1
+      } else {
+        textBuffer += char
+      }
+    } else {
+      textBuffer += char
+    }
+  }
+  if (textBuffer) buffer.push(textBuffer)
+  return buffer
+}
diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
new file mode 100644
index 00000000..05c0b259
--- /dev/null
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -0,0 +1,357 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils'
+import RichContent from 'src/components/rich_content/rich_content.jsx'
+
+const localVue = createLocalVue()
+
+const makeMention = (who) => `<span class="h-card"><a class="u-url mention" href="https://fake.tld/@${who}">@<span>${who}</span></a></span>`
+const stubMention = (who) => `<span class="h-card"><mentionlink-stub url="https://fake.tld/@${who}" content="@<span>${who}</span>"></mentionlink-stub></span>`
+const lastMentions = (...data) => `<span class="lastMentions">${data.join('')}</span>`
+const p = (...data) => `<p>${data.join('')}</p>`
+const compwrap = (...data) => `<span class="RichContent">${data.join('')}</span>`
+const removedMentionSpan = '<span class="h-card"></span>'
+
+describe('RichContent', () => {
+  it('renders simple post without exploding', () => {
+    const html = p('Hello world!')
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(html))
+  })
+
+  it('removes mentions from the beginning of post', () => {
+    const html = p(
+      makeMention('John'),
+      ' how are you doing thoday?'
+    )
+    const expected = p(
+      removedMentionSpan,
+      'how are you doing thoday?'
+    )
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
+
+  it('removes mentions from the end of the hellpost (<p>)', () => {
+    const html = [
+      p('How are you doing today, fine gentlemen?'),
+      p(
+        makeMention('John'),
+        makeMention('Josh'),
+        makeMention('Jeremy')
+      )
+    ].join('')
+    const expected = [
+      p(
+        'How are you doing today, fine gentlemen?'
+      ),
+      // TODO fix this extra line somehow?
+      p()
+    ].join('')
+
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
+
+  it('removes mentions from the end of the hellpost (<br>)', () => {
+    const html = [
+      'How are you doing today, fine gentlemen?',
+      [
+        makeMention('John'),
+        makeMention('Josh'),
+        makeMention('Jeremy')
+      ].join('')
+    ].join('<br>')
+    const expected = [
+      'How are you doing today, fine gentlemen?',
+      // TODO fix this extra line somehow?
+      '<br>'
+    ].join('')
+
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
+
+  it('removes mentions from the end of the hellpost (\\n)', () => {
+    const html = [
+      'How are you doing today, fine gentlemen?',
+      [
+        makeMention('John'),
+        makeMention('Josh'),
+        makeMention('Jeremy')
+      ].join('')
+    ].join('\n')
+    const expected = [
+      'How are you doing today, fine gentlemen?',
+      // TODO fix this extra line somehow?
+      ''
+    ].join('\n')
+
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
+
+  it('Does not remove mentions in the middle or at the end of text string', () => {
+    const html = [
+      [
+        makeMention('Jack'),
+        'let\'s meet up with ',
+        makeMention('Janet')
+      ].join(''),
+      [
+        'cc: ',
+        makeMention('John'),
+        makeMention('Josh'),
+        makeMention('Jeremy')
+      ].join('')
+    ].join('\n')
+    const expected = [
+      [
+        removedMentionSpan,
+        'let\'s meet up with ',
+        stubMention('Janet')
+      ].join(''),
+      [
+        'cc: ',
+        stubMention('John'),
+        stubMention('Josh'),
+        stubMention('Jeremy')
+      ].join('')
+    ].join('\n')
+
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
+
+  it('removes mentions from the end if there\'s only one first mention', () => {
+    const html = [
+      p(
+        makeMention('Todd'),
+        'so anyway you are wrong'
+      ),
+      p(
+        makeMention('Tom'),
+        makeMention('Trace'),
+        makeMention('Theodor')
+      )
+    ].join('')
+    const expected = [
+      p(
+        removedMentionSpan,
+        'so anyway you are wrong'
+      ),
+      // TODO fix this extra line somehow?
+      p()
+    ].join('')
+
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
+
+  it('does not remove mentions from the end if there\'s more than one first mention', () => {
+    const html = [
+      p(
+        makeMention('Zacharie'),
+        makeMention('Zinaide'),
+        'you guys have cool names, and so do these guys: '
+      ),
+      p(
+        makeMention('Watson'),
+        makeMention('Wallace'),
+        makeMention('Wakamoto')
+      )
+    ].join('')
+    const expected = [
+      p(
+        removedMentionSpan,
+        removedMentionSpan,
+        'you guys have cool names, and so do these guys: '
+      ),
+      p(
+        lastMentions(
+          stubMention('Watson'),
+          stubMention('Wallace'),
+          stubMention('Wakamoto')
+        )
+      )
+    ].join('')
+
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
+
+  it('Does not touch links if link handling is disabled', () => {
+    const html = [
+      [
+        makeMention('Jack'),
+        'let\'s meet up with ',
+        makeMention('Janet')
+      ].join(''),
+      [
+        makeMention('John'),
+        makeMention('Josh'),
+        makeMention('Jeremy')
+      ].join('')
+    ].join('\n')
+
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        handleLinks: false,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(html))
+  })
+
+  it('Adds greentext and cyantext to the post', () => {
+    const html = [
+      '&gt;preordering videogames',
+      '&gt;any year'
+    ].join('\n')
+    const expected = [
+      '<span class="greentext">&gt;preordering videogames</span>',
+      '<span class="greentext">&gt;any year</span>'
+    ].join('\n')
+
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        handleLinks: false,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
+
+  it('Does not add greentext and cyantext if setting is set to false', () => {
+    const html = [
+      '&gt;preordering videogames',
+      '&gt;any year'
+    ].join('\n')
+
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        handleLinks: false,
+        greentext: false,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(html))
+  })
+
+  it('Adds emoji to post', () => {
+    const html = p('Ebin :DDDD :spurdo:')
+    const expected = p(
+      'Ebin :DDDD ',
+      '<anonymous-stub alt=":spurdo:" src="about:blank" title=":spurdo:" class="emoji img"></anonymous-stub>'
+    )
+
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        handleLinks: false,
+        greentext: false,
+        emoji: [{ url: 'about:blank', shortcode: 'spurdo' }],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
+
+  it('Doesn\'t add nonexistent emoji to post', () => {
+    const html = p('Lol :lol:')
+
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        handleLinks: false,
+        greentext: false,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(html))
+  })
+})
diff --git a/test/unit/specs/services/html_converter/html_line_converter.spec.js b/test/unit/specs/services/html_converter/html_line_converter.spec.js
index 532ea187..9485233f 100644
--- a/test/unit/specs/services/html_converter/html_line_converter.spec.js
+++ b/test/unit/specs/services/html_converter/html_line_converter.spec.js
@@ -2,7 +2,7 @@ import { convertHtmlToLines } from 'src/services/html_converter/html_line_conver
 
 const mapOnlyText = (processor) => (input) => input.text ? processor(input.text) : input
 
-describe('TinyPostHTMLProcessor', () => {
+describe('html_line_converter', () => {
   describe('with processor that keeps original line should not make any changes to HTML when', () => {
     const processorKeep = (line) => line
     it('fed with regular HTML with newlines', () => {
diff --git a/test/unit/specs/services/html_converter/html_tree_converter.spec.js b/test/unit/specs/services/html_converter/html_tree_converter.spec.js
index a54745c3..7283021b 100644
--- a/test/unit/specs/services/html_converter/html_tree_converter.spec.js
+++ b/test/unit/specs/services/html_converter/html_tree_converter.spec.js
@@ -1,6 +1,6 @@
-import { convertHtmlToTree, processTextForEmoji, getAttrs } from 'src/services/html_converter/html_tree_converter.service.js'
+import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js'
 
-describe('MiniHtmlConverter', () => {
+describe('html_tree_converter', () => {
   describe('convertHtmlToTree', () => {
     it('converts html into a tree structure', () => {
       const input = '1 <p>2</p> <b>3<img src="a">4</b>5'
@@ -129,38 +129,4 @@ describe('MiniHtmlConverter', () => {
       ])
     })
   })
-
-  describe('processTextForEmoji', () => {
-    it('processes all emoji in text', () => {
-      const input = 'Hello from finland! :lol: We have best water! :lmao:'
-      const emojis = [
-        { shortcode: 'lol', src: 'LOL' },
-        { shortcode: 'lmao', src: 'LMAO' }
-      ]
-      const processor = ({ shortcode, src }) => ({ shortcode, src })
-      expect(processTextForEmoji(input, emojis, processor)).to.eql([
-        'Hello from finland! ',
-        { shortcode: 'lol', src: 'LOL' },
-        ' We have best water! ',
-        { shortcode: 'lmao', src: 'LMAO' }
-      ])
-    })
-    it('leaves text as is', () => {
-      const input = 'Number one: that\'s terror'
-      const emojis = []
-      const processor = ({ shortcode, src }) => ({ shortcode, src })
-      expect(processTextForEmoji(input, emojis, processor)).to.eql([
-        'Number one: that\'s terror'
-      ])
-    })
-  })
-
-  describe('getAttrs', () => {
-    it('extracts arguments from tag', () => {
-      const input = '<img src="boop" cool ebin=\'true\'>'
-      const output = { src: 'boop', cool: true, ebin: 'true' }
-
-      expect(getAttrs(input)).to.eql(output)
-    })
-  })
 })
diff --git a/test/unit/specs/services/html_converter/utility.spec.js b/test/unit/specs/services/html_converter/utility.spec.js
new file mode 100644
index 00000000..cf6fd99b
--- /dev/null
+++ b/test/unit/specs/services/html_converter/utility.spec.js
@@ -0,0 +1,37 @@
+import { processTextForEmoji, getAttrs } from 'src/services/html_converter/utility.service.js'
+
+describe('html_converter utility', () => {
+  describe('processTextForEmoji', () => {
+    it('processes all emoji in text', () => {
+      const input = 'Hello from finland! :lol: We have best water! :lmao:'
+      const emojis = [
+        { shortcode: 'lol', src: 'LOL' },
+        { shortcode: 'lmao', src: 'LMAO' }
+      ]
+      const processor = ({ shortcode, src }) => ({ shortcode, src })
+      expect(processTextForEmoji(input, emojis, processor)).to.eql([
+        'Hello from finland! ',
+        { shortcode: 'lol', src: 'LOL' },
+        ' We have best water! ',
+        { shortcode: 'lmao', src: 'LMAO' }
+      ])
+    })
+    it('leaves text as is', () => {
+      const input = 'Number one: that\'s terror'
+      const emojis = []
+      const processor = ({ shortcode, src }) => ({ shortcode, src })
+      expect(processTextForEmoji(input, emojis, processor)).to.eql([
+        'Number one: that\'s terror'
+      ])
+    })
+  })
+
+  describe('getAttrs', () => {
+    it('extracts arguments from tag', () => {
+      const input = '<img src="boop" cool ebin=\'true\'>'
+      const output = { src: 'boop', cool: true, ebin: 'true' }
+
+      expect(getAttrs(input)).to.eql(output)
+    })
+  })
+})
-- 
cgit v1.2.3-70-g09d2


From 90a188f2c3c16b926c75bf4aa749633e6967e5a0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 12 Jun 2021 19:54:03 +0300
Subject: cleanup

---
 src/components/chat_list_item/chat_list_item.js                  | 3 +--
 src/components/chat_message/chat_message.js                      | 3 +--
 src/components/status_body/status_body.js                        | 2 +-
 src/services/entity_normalizer/entity_normalizer.service.js      | 5 ++---
 .../specs/services/entity_normalizer/entity_normalizer.spec.js   | 9 ---------
 5 files changed, 5 insertions(+), 17 deletions(-)

(limited to 'test')

diff --git a/src/components/chat_list_item/chat_list_item.js b/src/components/chat_list_item/chat_list_item.js
index e01b9bd4..e5032176 100644
--- a/src/components/chat_list_item/chat_list_item.js
+++ b/src/components/chat_list_item/chat_list_item.js
@@ -40,12 +40,11 @@ const ChatListItem = {
       const message = this.chat.lastMessage
       const messageEmojis = message ? message.emojis : []
       const isYou = message && message.account_id === this.currentUser.id
-      const content = message ? (this.attachmentInfo || message.content_raw) : ''
+      const content = message ? (this.attachmentInfo || message.content) : ''
       const messagePreview = isYou ? `<i>${this.$t('chats.you')}</i> ${content}` : content
       return {
         summary: '',
         emojis: messageEmojis,
-        statusnet_html: messagePreview,
         raw_html: messagePreview,
         text: messagePreview,
         attachments: []
diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js
index d126d453..9a2d1e7d 100644
--- a/src/components/chat_message/chat_message.js
+++ b/src/components/chat_message/chat_message.js
@@ -58,8 +58,7 @@ const ChatMessage = {
       return {
         summary: '',
         emojis: this.message.emojis,
-        raw_html: this.message.content_raw,
-        statusnet_html: this.message.content,
+        raw_html: this.message.content,
         text: this.message.content,
         attachments: this.message.attachments
       }
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index 14558aca..26491e1b 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -53,7 +53,7 @@ const StatusContent = {
     // Using max-height + overflow: auto for status components resulted in false positives
     // very often with japanese characters, and it was very annoying.
     tallStatus () {
-      const lengthScore = this.status.statusnet_html.split(/<p|<br/).length + this.status.text.length / 80
+      const lengthScore = this.status.raw_html.split(/<p|<br/).length + this.status.text.length / 80
       return lengthScore > 20
     },
     longSubject () {
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 13162dcf..613ed566 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -267,7 +267,6 @@ export const parseStatus = (data) => {
     output.type = data.reblog ? 'retweet' : 'status'
     output.nsfw = data.sensitive
 
-    output.statusnet_html = addEmojis(data.content, data.emojis)
     output.raw_html = data.content
     output.emojis = data.emojis
 
@@ -329,7 +328,7 @@ export const parseStatus = (data) => {
       output.nsfw = data.nsfw
     }
 
-    output.statusnet_html = data.statusnet_html
+    output.raw_html = data.statusnet_html
     output.text = data.text
 
     output.in_reply_to_status_id = data.in_reply_to_status_id
@@ -449,7 +448,7 @@ export const parseChatMessage = (message) => {
   output.created_at = new Date(message.created_at)
   output.chat_id = message.chat_id
   output.emojis = message.emojis
-  output.content_raw = message.content
+  output.content = message.content
   if (message.content) {
     output.content = addEmojis(message.content, message.emojis)
   } else {
diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
index 759539e0..c8965785 100644
--- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
+++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
@@ -23,7 +23,6 @@ const makeMockStatusQvitter = (overrides = {}) => {
     repeat_num: 0,
     repeated: false,
     statusnet_conversation_id: '16300488',
-    statusnet_html: '<p>haha benis</p>',
     summary: null,
     tags: [],
     text: 'haha benis',
@@ -233,14 +232,6 @@ describe('API Entities normalizer', () => {
         expect(parsedRepeat).to.have.deep.property('retweeted_status.id', 'deadbeef')
       })
 
-      it('adds emojis to post content', () => {
-        const post = makeMockStatusMasto({ emojis: makeMockEmojiMasto(), content: 'Makes you think :thinking:' })
-
-        const parsedPost = parseStatus(post)
-
-        expect(parsedPost).to.have.property('statusnet_html').that.contains('<img')
-      })
-
       it('adds emojis to subject line', () => {
         const post = makeMockStatusMasto({ emojis: makeMockEmojiMasto(), spoiler_text: 'CW: 300 IQ :thinking:' })
 
-- 
cgit v1.2.3-70-g09d2


From 418f029789f5e1cc22fd7db4f269088633d90050 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 12 Jun 2021 20:42:17 +0300
Subject: review + fixes

---
 src/components/mention_link/mention_link.vue       |  2 --
 src/components/mentions_line/mentions_line.scss    |  1 +
 src/components/rich_content/rich_content.jsx       | 21 ++++++++++++++++
 .../settings_modal/tabs/theme_tab/theme_tab.js     |  2 +-
 src/components/status/status.js                    |  6 ++---
 src/components/status_body/status_body.scss        |  8 -------
 src/components/status_body/status_body.vue         |  4 ++--
 .../entity_normalizer/entity_normalizer.service.js |  6 -----
 test/unit/specs/components/rich_content.spec.js    | 28 ++++++++++++++++++++++
 .../entity_normalizer/entity_normalizer.spec.js    |  8 -------
 10 files changed, 55 insertions(+), 31 deletions(-)

(limited to 'test')

diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 3449f4bd..e4d395fa 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/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>
diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss
index 59f75fbb..90d1e0a4 100644
--- a/src/components/mentions_line/mentions_line.scss
+++ b/src/components/mentions_line/mentions_line.scss
@@ -1,6 +1,7 @@
 .MentionsLine {
   .showMoreLess {
     white-space: normal;
+
     &.-newStyle {
       line-height: 1.5;
       font-size: inherit;
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index ef15aaeb..0aae7a55 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/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>`
       }
     }
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 63416e93..85749045 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/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()
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 5b178c2e..ae734493 100644
--- a/src/components/status/status.js
+++ b/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 = {
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index da5d4dd3..81a687f1 100644
--- a/src/components/status_body/status_body.scss
+++ b/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;
-  }
 }
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index aac44e42..0eb11ad0 100644
--- a/src/components/status_body/status_body.vue
+++ b/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
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 613ed566..477b861f 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -296,7 +296,6 @@ export const parseStatus = (data) => {
     }
 
     output.summary_raw_html = escape(data.spoiler_text)
-    output.summary_html = addEmojis(escape(data.spoiler_text), data.emojis)
     output.external_url = data.url
     output.poll = data.poll
     if (output.poll) {
@@ -449,11 +448,6 @@ export const parseChatMessage = (message) => {
   output.chat_id = message.chat_id
   output.emojis = message.emojis
   output.content = message.content
-  if (message.content) {
-    output.content = addEmojis(message.content, message.emojis)
-  } else {
-    output.content = ''
-  }
   if (message.attachment) {
     output.attachments = [parseAttachment(message.attachment)]
   } else {
diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index 05c0b259..f2c3f04e 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -354,4 +354,32 @@ describe('RichContent', () => {
 
     expect(wrapper.html()).to.eql(compwrap(html))
   })
+
+  it('Greentext + last mentions', () => {
+    const html = [
+      '&gt;quote',
+      makeMention('lol'),
+      '&gt;quote',
+      '&gt;quote'
+    ].join('\n')
+    const expected = [
+      '<span class="greentext">&gt;quote</span>',
+      stubMention('lol'),
+      '<span class="greentext">&gt;quote</span>',
+      '<span class="greentext">&gt;quote</span>'
+    ].join('\n')
+
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
+
 })
diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
index c8965785..8a5a6ef9 100644
--- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
+++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
@@ -231,14 +231,6 @@ describe('API Entities normalizer', () => {
         expect(parsedRepeat).to.have.property('retweeted_status')
         expect(parsedRepeat).to.have.deep.property('retweeted_status.id', 'deadbeef')
       })
-
-      it('adds emojis to subject line', () => {
-        const post = makeMockStatusMasto({ emojis: makeMockEmojiMasto(), spoiler_text: 'CW: 300 IQ :thinking:' })
-
-        const parsedPost = parseStatus(post)
-
-        expect(parsedPost).to.have.property('summary_html').that.contains('<img')
-      })
     })
   })
 
-- 
cgit v1.2.3-70-g09d2


From 18fb7516cc17b36f271dad325d37e546d47dde08 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 12 Jun 2021 20:42:59 +0300
Subject: lint

---
 test/unit/specs/components/rich_content.spec.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'test')

diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index f2c3f04e..20322019 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -381,5 +381,4 @@ describe('RichContent', () => {
 
     expect(wrapper.html()).to.eql(compwrap(expected))
   })
-
 })
-- 
cgit v1.2.3-70-g09d2


From 9c70f3e4df2e28863b51156fdbd25e253a3a1b98 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 12 Jun 2021 21:49:40 +0300
Subject: fixed a bug + made a testcase out of it

---
 src/components/rich_content/rich_content.jsx    |  5 ++--
 test/unit/specs/components/rich_content.spec.js | 35 +++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 3 deletions(-)

(limited to 'test')

diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index 0aae7a55..e188763f 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -247,12 +247,13 @@ const getLinkData = (attrs, children, index) => {
 export const preProcessPerLine = (html, greentext, handleLinks) => {
   const lastMentions = []
 
-  let nonEmptyIndex = 0
+  let nonEmptyIndex = -1
   const newHtml = convertHtmlToLines(html).reverse().map((item, index, array) => {
     // Going over each line in reverse to detect last mentions,
     // keeping non-text stuff as-is
     if (!item.text) return item
     const string = item.text
+    nonEmptyIndex += 1
 
     // Greentext stuff
     if (greentext && (string.includes('&gt;') || string.includes('&lt;'))) {
@@ -260,10 +261,8 @@ 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>`
       }
     }
diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index 20322019..ff491a3a 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -381,4 +381,39 @@ describe('RichContent', () => {
 
     expect(wrapper.html()).to.eql(compwrap(expected))
   })
+
+  it('One buggy example', () => {
+    const html = [
+      'Bruh',
+      'Bruh',
+      [
+        makeMention('foo'),
+        makeMention('bar'),
+        makeMention('baz')
+      ].join(''),
+      'Bruh'
+    ].join('<br>')
+    const expected = [
+      'Bruh',
+      'Bruh',
+      [
+        stubMention('foo'),
+        stubMention('bar'),
+        stubMention('baz')
+      ].join(''),
+      'Bruh'
+    ].join('<br>')
+
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
 })
-- 
cgit v1.2.3-70-g09d2


From bebafa1a2c38972245d37de70f4aec4bfb2083fd Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 13 Jun 2021 13:29:26 +0300
Subject: refactored line converter, untied its logic from greentexting, better
 handling of broken cases

---
 src/components/rich_content/rich_content.jsx       | 10 +++-
 .../html_converter/html_line_converter.service.js  | 55 ++++++++++++++++++----
 .../html_converter/html_line_converter.spec.js     | 19 ++++++--
 3 files changed, 68 insertions(+), 16 deletions(-)

(limited to 'test')

diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index e188763f..328e9201 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -246,6 +246,7 @@ const getLinkData = (attrs, children, index) => {
  */
 export const preProcessPerLine = (html, greentext, handleLinks) => {
   const lastMentions = []
+  const greentextHandle = new Set(['p', 'div'])
 
   let nonEmptyIndex = -1
   const newHtml = convertHtmlToLines(html).reverse().map((item, index, array) => {
@@ -256,7 +257,14 @@ export const preProcessPerLine = (html, greentext, handleLinks) => {
     nonEmptyIndex += 1
 
     // Greentext stuff
-    if (greentext && (string.includes('&gt;') || string.includes('&lt;'))) {
+    if (
+      // Only if greentext is engaged
+      greentext &&
+        // Only handle p's and divs. Don't want to affect blocquotes, code etc
+        item.level.every(l => greentextHandle.has(l)) &&
+        // Only if line begins with '>' or '<'
+        (string.includes('&gt;') || string.includes('&lt;'))
+    ) {
       const cleanedString = string.replace(/<[^>]+?>/gi, '') // remove all tags
         .replace(/@\w+/gi, '') // remove mentions (even failed ones)
         .trim()
diff --git a/src/services/html_converter/html_line_converter.service.js b/src/services/html_converter/html_line_converter.service.js
index e448d5cd..f43d162a 100644
--- a/src/services/html_converter/html_line_converter.service.js
+++ b/src/services/html_converter/html_line_converter.service.js
@@ -19,9 +19,42 @@ import { getTagName } from './utility.service.js'
  * @return {(string|{ text: string })[]} processed html in form of a list.
  */
 export const convertHtmlToLines = (html) => {
-  const ignoredTags = new Set(['code', 'blockquote'])
-  const handledTags = new Set(['p', 'br', 'div', 'pre', 'code', 'blockquote'])
-  const openCloseTags = new Set(['p', 'div', 'pre', 'code', 'blockquote'])
+  // Elements that are implicitly self-closing
+  // https://developer.mozilla.org/en-US/docs/Glossary/empty_element
+  const emptyElements = new Set([
+    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+    'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'
+  ])
+  // Block-level element (they make a visual line)
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
+  const blockElements = new Set([
+    'address', 'article', 'aside', 'blockquote', 'details', 'dialog', 'dd',
+    'div', 'dl', 'dt', 'fieldset', 'figcaption', 'figure', 'footer', 'form',
+    'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr', 'li', 'main',
+    'nav', 'ol', 'p', 'pre', 'section', 'table', 'ul'
+  ])
+  // br is very weird in a way that it's technically not block-level, it's
+  // essentially converted to a \n (or \r\n). There's also wbr but it doesn't
+  // guarantee linebreak, only suggest it.
+  const linebreakElements = new Set(['br'])
+
+  const visualLineElements = new Set([
+    ...blockElements.values(),
+    ...linebreakElements.values()
+  ])
+
+  // All block-level elements that aren't empty elements, i.e. not <hr>
+  const nonEmptyElements = new Set(visualLineElements)
+  // Difference
+  for (let elem of emptyElements) {
+    nonEmptyElements.delete(elem)
+  }
+
+  // All elements that we are recognizing
+  const allElements = new Set([
+    ...nonEmptyElements.values(),
+    ...emptyElements.values()
+  ])
 
   let buffer = [] // Current output buffer
   const level = [] // How deep we are in tags and which tags were there
@@ -29,8 +62,8 @@ export const convertHtmlToLines = (html) => {
   let tagBuffer = null // Current tag buffer, if null = we are not currently reading a tag
 
   const flush = () => { // Processes current line buffer, adds it to output buffer and clears line buffer
-    if (textBuffer.trim().length > 0 && !level.some(l => ignoredTags.has(l))) {
-      buffer.push({ text: textBuffer })
+    if (textBuffer.trim().length > 0) {
+      buffer.push({ level: [...level], text: textBuffer })
     } else {
       buffer.push(textBuffer)
     }
@@ -49,10 +82,12 @@ export const convertHtmlToLines = (html) => {
   }
 
   const handleClose = (tag) => { // handles closing tags
-    flush()
-    buffer.push(tag)
     if (level[0] === getTagName(tag)) {
+      flush()
+      buffer.push(tag)
       level.shift()
+    } else { // Broken case
+      textBuffer += tag
     }
   }
 
@@ -67,10 +102,10 @@ export const convertHtmlToLines = (html) => {
       const tagFull = tagBuffer
       tagBuffer = null
       const tagName = getTagName(tagFull)
-      if (handledTags.has(tagName)) {
-        if (tagName === 'br') {
+      if (allElements.has(tagName)) {
+        if (linebreakElements.has(tagName)) {
           handleBr(tagFull)
-        } else if (openCloseTags.has(tagName)) {
+        } else if (nonEmptyElements.has(tagName)) {
           if (tagFull[1] === '/') {
             handleClose(tagFull)
           } else if (tagFull[tagFull.length - 2] === '/') {
diff --git a/test/unit/specs/services/html_converter/html_line_converter.spec.js b/test/unit/specs/services/html_converter/html_line_converter.spec.js
index 9485233f..c8c89700 100644
--- a/test/unit/specs/services/html_converter/html_line_converter.spec.js
+++ b/test/unit/specs/services/html_converter/html_line_converter.spec.js
@@ -1,8 +1,17 @@
 import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js'
 
-const mapOnlyText = (processor) => (input) => input.text ? processor(input.text) : input
-
-describe('html_line_converter', () => {
+const greentextHandle = new Set(['p', 'div'])
+const mapOnlyText = (processor) => (input) => {
+  if (input.text && input.level.every(l => greentextHandle.has(l))) {
+    return processor(input.text)
+  } else if (input.text) {
+    return input.text
+  } else {
+    return input
+  }
+}
+
+describe.only('html_line_converter', () => {
   describe('with processor that keeps original line should not make any changes to HTML when', () => {
     const processorKeep = (line) => line
     it('fed with regular HTML with newlines', () => {
@@ -81,7 +90,7 @@ describe('html_line_converter', () => {
 
     it('fed with very broken HTML with broken composition', () => {
       const input = '</p> lmao what </div> whats going on <div> wha <p>'
-      const output = '</p>_</div>_<div>_<p>'
+      const output = '_<div>_<p>'
       const result = convertHtmlToLines(input)
       const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
       expect(comparableResult).to.eql(output)
@@ -111,7 +120,7 @@ describe('html_line_converter', () => {
       expect(comparableResult).to.eql(output)
     })
 
-    it('fed with maybe valid HTML? self-closing divs and ps', () => {
+    it('fed with maybe valid HTML? (XHTML) self-closing divs and ps', () => {
       const input = 'a <div class="what"/> what now <p aria-label="wtf"/> ?'
       const output = '_<div class="what"/>_<p aria-label="wtf"/>_'
       const result = convertHtmlToLines(input)
-- 
cgit v1.2.3-70-g09d2


From 636dbdaba8375cb991368620419e2997df0f57a9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 13 Jun 2021 22:22:59 +0300
Subject: more fixes

---
 src/components/rich_content/rich_content.jsx    | 19 +++--
 src/components/status_body/status_body.vue      |  2 +-
 test/unit/specs/components/rich_content.spec.js | 99 +++++++++++++++++++++++++
 3 files changed, 113 insertions(+), 7 deletions(-)

(limited to 'test')

diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index 328e9201..ffb36f50 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -140,7 +140,7 @@ export default Vue.component('RichContent', {
         switch (Tag) {
           case 'span': // replace images with StillImage
             if (attrs['class'] && attrs['class'].includes('lastMentions')) {
-              if (firstMentions.length > 1) {
+              if (firstMentions.length > 1 && lastMentions.length > 1) {
                 break
               } else {
                 return ''
@@ -249,7 +249,9 @@ export const preProcessPerLine = (html, greentext, handleLinks) => {
   const greentextHandle = new Set(['p', 'div'])
 
   let nonEmptyIndex = -1
-  const newHtml = convertHtmlToLines(html).reverse().map((item, index, array) => {
+  const lines = convertHtmlToLines(html)
+  const linesNum = lines.filter(c => c.text).length
+  const newHtml = lines.reverse().map((item, index, array) => {
     // Going over each line in reverse to detect last mentions,
     // keeping non-text stuff as-is
     if (!item.text) return item
@@ -281,7 +283,7 @@ export const preProcessPerLine = (html, greentext, handleLinks) => {
     // If line has loose text, i.e. text outside a mention or a tag
     // we won't touch mentions.
     let hasLooseText = false
-    let hasMentions = false
+    let mentionsNum = 0
     const process = (item) => {
       if (Array.isArray(item)) {
         const [opener, children, closer] = item
@@ -292,7 +294,7 @@ export const preProcessPerLine = (html, greentext, handleLinks) => {
           const attrs = getAttrs(opener)
           if (attrs['class'] && attrs['class'].includes('mention')) {
             // Got mentions
-            hasMentions = true
+            mentionsNum++
             return [opener, children, closer]
           } else {
             // Not a mention? Means we have loose text or whatever
@@ -321,8 +323,13 @@ export const preProcessPerLine = (html, greentext, handleLinks) => {
     // We now processed our tree, now we need to mark line as lastMentions
     const result = [...tree].map(process)
 
-    // Only check last (first since list is reversed) line
-    if (handleLinks && hasMentions && !hasLooseText && nonEmptyIndex++ === 0) {
+    if (
+      handleLinks && // Do we handle links at all?
+        mentionsNum > 1 && // Does it have more than one mention?
+        !hasLooseText && // Don't do anything if it has something besides mentions
+        nonEmptyIndex === 0 && // Only check last (first since list is reversed) line
+        nonEmptyIndex !== linesNum - 1 // Don't do anything if there's only one line
+    ) {
       let mentionIndex = 0
       const process = (item) => {
         if (Array.isArray(item)) {
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index 0eb11ad0..3dc4916c 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -56,7 +56,7 @@
             @parseReady="setHeadTailLinks"
           />
           <MentionsLine
-            v-if="!hideMentions && lastMentions.length > 0 && firstMentions.length <= 1"
+            v-if="!hideMentions && lastMentions.length > 1 && firstMentions.length <= 1"
             :mentions="lastMentions"
           />
         </span>
diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index ff491a3a..835fbea2 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -416,4 +416,103 @@ describe('RichContent', () => {
 
     expect(wrapper.html()).to.eql(compwrap(expected))
   })
+
+  it('Don\'t remove last mention if it\'s the only one', () => {
+    const html = [
+      'Bruh',
+      'Bruh',
+      makeMention('foo'),
+      makeMention('bar'),
+      makeMention('baz')
+    ].join('<br>')
+
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(html))
+  })
+
+  it('Don\'t remove last mentions if there are more than one first mention - remove first instead', () => {
+    const html = [
+      [
+        makeMention('foo'),
+        makeMention('bar')
+      ].join(' '),
+      'Bruh',
+      'Bruh',
+      [
+        makeMention('foo'),
+        makeMention('bar'),
+        makeMention('baz')
+      ].join(' ')
+    ].join('\n')
+
+    const expected = [
+      [
+        removedMentionSpan,
+        removedMentionSpan,
+        'Bruh' // Due to trim we remove extra newline
+      ].join(''),
+      'Bruh',
+      lastMentions([
+        stubMention('foo'),
+        stubMention('bar'),
+        stubMention('baz')
+      ].join(' '))
+    ].join('\n')
+
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
+
+  it('Remove last mentions if there\'s just one first mention - remove all', () => {
+    const html = [
+      [
+        makeMention('foo')
+      ].join(' '),
+      'Bruh',
+      'Bruh',
+      [
+        makeMention('foo'),
+        makeMention('bar'),
+        makeMention('baz')
+      ].join(' ')
+    ].join('\n')
+
+    const expected = [
+      [
+        removedMentionSpan,
+        'Bruh' // Due to trim we remove extra newline
+      ].join(''),
+      'Bruh\n' // Can't remove this one yet
+    ].join('\n')
+
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
 })
-- 
cgit v1.2.3-70-g09d2


From c21b1cf89840297a781e6adc66cc195b8741cac6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 14 Jun 2021 10:30:08 +0300
Subject: do the impossible, fix the unfixable

---
 src/components/rich_content/rich_content.jsx       | 16 +++-
 src/components/status_body/status_body.js          | 12 +--
 src/components/status_body/status_body.scss        |  2 +-
 src/components/status_body/status_body.vue         | 31 +++-----
 src/components/status_content/status_content.js    |  3 -
 src/components/status_content/status_content.vue   |  2 +-
 test/unit/specs/components/rich_content.spec.js    | 91 +++++++++++++++++++++-
 .../html_converter/html_line_converter.spec.js     |  2 +-
 8 files changed, 118 insertions(+), 41 deletions(-)

(limited to 'test')

diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index ffb36f50..4144d895 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -5,6 +5,7 @@ import { convertHtmlToTree } from 'src/services/html_converter/html_tree_convert
 import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js'
 import StillImage from 'src/components/still-image/still-image.vue'
 import MentionLink from 'src/components/mention_link/mention_link.vue'
+import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
 
 import './rich_content.scss'
 
@@ -51,6 +52,11 @@ export default Vue.component('RichContent', {
       required: false,
       type: Boolean,
       default: false
+    },
+    hideMentions: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   // NEVER EVER TOUCH DATA INSIDE RENDER
@@ -64,6 +70,7 @@ export default Vue.component('RichContent', {
     // unique index for vue "tag" property
     let mentionIndex = 0
     let tagsIndex = 0
+    let firstMentionReplaced = false
 
     const renderImage = (tag) => {
       return <StillImage
@@ -90,7 +97,12 @@ export default Vue.component('RichContent', {
       writtenMentions.push(linkData)
       if (!encounteredText) {
         firstMentions.push(linkData)
-        return ''
+        if (!firstMentionReplaced && !this.hideMentions) {
+          firstMentionReplaced = true
+          return <MentionsLine mentions={ firstMentions } />
+        } else {
+          return ''
+        }
       } else {
         return <MentionLink
           url={attrs.href}
@@ -143,7 +155,7 @@ export default Vue.component('RichContent', {
               if (firstMentions.length > 1 && lastMentions.length > 1) {
                 break
               } else {
-                return ''
+                return !this.hideMentions ? <MentionsLine mentions={lastMentions} /> : ''
               }
             } else {
               break
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index 26491e1b..9ee7a109 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -1,6 +1,5 @@
 import fileType from 'src/services/file_type/file_type.service'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
-import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { set } from 'vue'
@@ -36,9 +35,6 @@ const StatusContent = {
       showingLongSubject: false,
       // not as computed because it sets the initial state which will be changed later
       expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject,
-      headTailLinks: null,
-      firstMentions: [],
-      lastMentions: []
     }
   },
   computed: {
@@ -81,8 +77,7 @@ const StatusContent = {
     ...mapGetters(['mergedConfig'])
   },
   components: {
-    RichContent,
-    MentionsLine
+    RichContent
   },
   mounted () {
     this.status.attentions && this.status.attentions.forEach(attn => {
@@ -98,11 +93,6 @@ const StatusContent = {
         this.expandingSubject = !this.expandingSubject
       }
     },
-    setHeadTailLinks (headTailLinks) {
-      set(this, 'headTailLinks', headTailLinks)
-      set(this, 'firstMentions', headTailLinks.firstMentions)
-      set(this, 'lastMentions', headTailLinks.lastMentions)
-    },
     generateTagLink (tag) {
       return `/tag/${tag}`
     }
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 81a687f1..c7732bfe 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -62,7 +62,7 @@
       overflow-y: hidden;
       z-index: 1;
 
-      .rich-content-wrapper {
+      .media-body {
         min-height: 0;
         mask:
           linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index 3dc4916c..2be46303 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -38,28 +38,17 @@
         >
           {{ $t("general.show_more") }}
         </button>
-        <span
+        <RichContent
           v-if="!hideSubjectStatus && !(singleLine && status.summary_raw_html)"
-          class="rich-content-wrapper"
-        >
-          <MentionsLine
-            v-if="!hideMentions && firstMentions && firstMentions.length > 0"
-            :mentions="firstMentions"
-          />
-          <RichContent
-            :class="{ '-single-line': singleLine }"
-            class="text media-body"
-            :html="status.raw_html"
-            :emoji="status.emojis"
-            :handle-links="true"
-            :greentext="mergedConfig.greentext"
-            @parseReady="setHeadTailLinks"
-          />
-          <MentionsLine
-            v-if="!hideMentions && lastMentions.length > 1 && firstMentions.length <= 1"
-            :mentions="lastMentions"
-          />
-        </span>
+          :class="{ '-single-line': singleLine }"
+          class="text media-body"
+          :html="status.raw_html"
+          :emoji="status.emojis"
+          :handle-links="true"
+          :hide-mentions="hideMentions"
+          :greentext="mergedConfig.greentext"
+          @parseReady="$emit('parseReady', $event)"
+        />
 
         <button
           v-if="hideSubjectStatus"
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 11a4974b..51895ef6 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -92,9 +92,6 @@ const StatusContent = {
     StatusBody
   },
   methods: {
-    setHeadTailLinks (headTailLinks) {
-      this.$emit('parseReady', headTailLinks)
-    },
     setMedia () {
       const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
       return () => this.$store.dispatch('setMedia', attachments)
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index feb34d2c..2e71757d 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -5,7 +5,7 @@
       :status="status"
       :single-line="singleLine"
       :hide-mentions="hideMentions"
-      @parseReady="setHeadTailLinks"
+      @parseReady="$emit('parseReady', $event)"
     >
       <div v-if="status.poll && status.poll.options">
         <poll :base-poll="status.poll" />
diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index 835fbea2..c6ec4315 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -16,6 +16,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -38,6 +39,34 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        hideMentions: true,
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
+
+  it('replaces first mention with mentionsline if hideMentions=false', () => {
+    const html = p(
+      makeMention('John'),
+      ' how are you doing thoday?'
+    )
+    const expected = p(
+      '<span class="h-card">',
+      '<mentionsline-stub mentions="',
+      '[object Object]',
+      '"></mentionsline-stub>',
+      '</span>',
+      'how are you doing thoday?'
+    )
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        hideMentions: false,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -68,6 +97,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -78,6 +108,44 @@ describe('RichContent', () => {
     expect(wrapper.html()).to.eql(compwrap(expected))
   })
 
+  it('replaces mentions at the end of the hellpost if hideMentions=false (<p>)', () => {
+    const html = [
+      p('How are you doing today, fine gentlemen?'),
+      p(
+        makeMention('John'),
+        makeMention('Josh'),
+        makeMention('Jeremy')
+      )
+    ].join('')
+    const expected = [
+      p(
+        'How are you doing today, fine gentlemen?'
+      ),
+      // TODO fix this extra line somehow?
+      p(
+        '<mentionsline-stub mentions="',
+        '[object Object],',
+        '[object Object],',
+        '[object Object]',
+        '"></mentionsline-stub>'
+      )
+    ].join('')
+
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        hideMentions: false,
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
+
+
   it('removes mentions from the end of the hellpost (<br>)', () => {
     const html = [
       'How are you doing today, fine gentlemen?',
@@ -96,6 +164,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -124,6 +193,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -165,6 +235,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -199,6 +270,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -240,6 +312,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -267,6 +340,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        hideMentions: true,
         handleLinks: false,
         greentext: true,
         emoji: [],
@@ -290,6 +364,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        hideMentions: true,
         handleLinks: false,
         greentext: true,
         emoji: [],
@@ -309,6 +384,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        hideMentions: true,
         handleLinks: false,
         greentext: false,
         emoji: [],
@@ -329,6 +405,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        hideMentions: true,
         handleLinks: false,
         greentext: false,
         emoji: [{ url: 'about:blank', shortcode: 'spurdo' }],
@@ -345,6 +422,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        hideMentions: true,
         handleLinks: false,
         greentext: false,
         emoji: [],
@@ -407,6 +485,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -425,10 +504,18 @@ describe('RichContent', () => {
       makeMention('bar'),
       makeMention('baz')
     ].join('<br>')
+    const expected = [
+      'Bruh',
+      'Bruh',
+      stubMention('foo'),
+      stubMention('bar'),
+      stubMention('baz')
+    ].join('<br>')
 
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -436,7 +523,7 @@ describe('RichContent', () => {
       }
     })
 
-    expect(wrapper.html()).to.eql(compwrap(html))
+    expect(wrapper.html()).to.eql(compwrap(expected))
   })
 
   it('Don\'t remove last mentions if there are more than one first mention - remove first instead', () => {
@@ -471,6 +558,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -506,6 +594,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
diff --git a/test/unit/specs/services/html_converter/html_line_converter.spec.js b/test/unit/specs/services/html_converter/html_line_converter.spec.js
index c8c89700..de7c7fc2 100644
--- a/test/unit/specs/services/html_converter/html_line_converter.spec.js
+++ b/test/unit/specs/services/html_converter/html_line_converter.spec.js
@@ -11,7 +11,7 @@ const mapOnlyText = (processor) => (input) => {
   }
 }
 
-describe.only('html_line_converter', () => {
+describe('html_line_converter', () => {
   describe('with processor that keeps original line should not make any changes to HTML when', () => {
     const processorKeep = (line) => line
     it('fed with regular HTML with newlines', () => {
-- 
cgit v1.2.3-70-g09d2


From 7309f8ce1a5df1d34e33a242201b6a7b9eced2b7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 14 Jun 2021 10:31:07 +0300
Subject: lint

---
 src/components/status_body/status_body.js       | 3 +--
 test/unit/specs/components/rich_content.spec.js | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

(limited to 'test')

diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index 9ee7a109..601c963b 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -2,7 +2,6 @@ import fileType from 'src/services/file_type/file_type.service'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { set } from 'vue'
 import {
   faFile,
   faMusic,
@@ -34,7 +33,7 @@ const StatusContent = {
       showingTall: this.fullContent || (this.inConversation && this.focused),
       showingLongSubject: false,
       // not as computed because it sets the initial state which will be changed later
-      expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject,
+      expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject
     }
   },
   computed: {
diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index c6ec4315..e364a5b3 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -145,7 +145,6 @@ describe('RichContent', () => {
     expect(wrapper.html()).to.eql(compwrap(expected))
   })
 
-
   it('removes mentions from the end of the hellpost (<br>)', () => {
     const html = [
       'How are you doing today, fine gentlemen?',
-- 
cgit v1.2.3-70-g09d2


From 4aac0125e591c6f2ef51bad475e79802be51f068 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 15 Jun 2021 14:43:44 +0300
Subject: fixed bug with hashtags

---
 src/components/rich_content/rich_content.jsx    | 33 ++++++++++++++---------
 test/unit/specs/components/rich_content.spec.js | 36 +++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 12 deletions(-)

(limited to 'test')

diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index 4144d895..c8e1af9c 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -85,7 +85,6 @@ export default Vue.component('RichContent', {
       attrs.target = '_blank'
       if (!encounteredTextReverse) {
         lastTags.push(linkData)
-        attrs['data-parser-last'] = true
       }
       return <a {...{ attrs }}>
         { children.map(processItem) }
@@ -128,7 +127,7 @@ export default Vue.component('RichContent', {
           encounteredText = true
         }
         if (item.includes(':')) {
-          unescapedItem = processTextForEmoji(
+          unescapedItem = ['', processTextForEmoji(
             unescapedItem,
             this.emoji,
             ({ shortcode, url }) => {
@@ -139,14 +138,14 @@ export default Vue.component('RichContent', {
                 alt={`:${shortcode}:`}
               />
             }
-          )
+          )]
         }
         return unescapedItem
       }
 
       // Handle tag nodes
       if (Array.isArray(item)) {
-        const [opener, children] = item
+        const [opener, children, closer] = item
         const Tag = getTagName(opener)
         const attrs = getAttrs(opener)
         switch (Tag) {
@@ -176,14 +175,10 @@ export default Vue.component('RichContent', {
               </a>
             }
         }
-
-        // Render tag as is
         if (children !== undefined) {
-          return <Tag {...{ attrs: getAttrs(opener) }}>
-            { children.map(processItem) }
-          </Tag>
+          return [opener, children.map(processItem), closer]
         } else {
-          return <Tag/>
+          return item
         }
       }
     }
@@ -200,7 +195,7 @@ export default Vue.component('RichContent', {
       } else if (Array.isArray(item)) {
         // Handle tag nodes
         const [opener, children] = item
-        const Tag = getTagName(opener)
+        const Tag = opener === '' ? '' : getTagName(opener)
         switch (Tag) {
           case 'a': // replace mentions with MentionLink
             if (!this.handleLinks) break
@@ -209,16 +204,30 @@ export default Vue.component('RichContent', {
             if (attrs['class'] && attrs['class'].includes('hashtag')) {
               return renderHashtag(attrs, children, encounteredTextReverse)
             }
+            break
+          case '':
+            return [...children].reverse().map(processItemReverse).reverse()
+        }
+
+        // Render tag as is
+        if (children !== undefined) {
+          return <Tag {...{ attrs: getAttrs(opener) }}>
+            { Array.isArray(children) ? [...children].reverse().map(processItemReverse).reverse() : children }
+          </Tag>
+        } else {
+          return <Tag/>
         }
       }
       return item
     }
 
+    const pass1 = convertHtmlToTree(html).map(processItem)
+    const pass2 = [...pass1].reverse().map(processItemReverse).reverse()
     // DO NOT USE SLOTS they cause a re-render feedback loop here.
     // slots updated -> rerender -> emit -> update up the tree -> rerender -> ...
     // at least until vue3?
     const result = <span class="RichContent">
-      { convertHtmlToTree(html).map(processItem).reverse().map(processItemReverse).reverse() }
+      { pass2 }
     </span>
 
     const event = {
diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index e364a5b3..82f1ae89 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -603,4 +603,40 @@ describe('RichContent', () => {
 
     expect(wrapper.html()).to.eql(compwrap(expected))
   })
+
+  it('buggy example/hashtags', () => {
+    const html = [
+      '<p>',
+      '<a href="http://macrochan.org/images/N/H/NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg">',
+      'NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg</a>',
+      ' <a class="hashtag" data-tag="nou" href="https://shitposter.club/tag/nou">',
+      '#nou</a>',
+      ' <a class="hashtag" data-tag="screencap" href="https://shitposter.club/tag/screencap">',
+      '#screencap</a>',
+      ' </p>'
+    ].join('')
+    const expected = [
+      '<p>',
+      '<a href="http://macrochan.org/images/N/H/NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg" target="_blank">',
+      'NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg</a>',
+      ' <a class="hashtag" data-tag="nou" href="https://shitposter.club/tag/nou" target="_blank">',
+      '#nou</a>',
+      ' <a class="hashtag" data-tag="screencap" href="https://shitposter.club/tag/screencap" target="_blank">',
+      '#screencap</a>',
+      ' </p>'
+    ].join('')
+
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        hideMentions: true,
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
 })
-- 
cgit v1.2.3-70-g09d2


From ad3a2fd4e5a7811107790cfba0cd83e33d2f4115 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 16 Jun 2021 01:20:20 +0300
Subject: fixed "invisible" spans inside links

---
 src/components/rich_content/rich_content.jsx    | 26 ++++++++++-----
 test/unit/specs/components/rich_content.spec.js | 44 +++++++++++++++++++++++++
 2 files changed, 62 insertions(+), 8 deletions(-)

(limited to 'test')

diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index c8e1af9c..ce562f13 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -164,17 +164,15 @@ export default Vue.component('RichContent', {
           case 'a': // replace mentions with MentionLink
             if (!this.handleLinks) break
             if (attrs['class'] && attrs['class'].includes('mention')) {
+              // Handling mentions here
               return renderMention(attrs, children, encounteredText)
-            } else if (attrs['class'] && attrs['class'].includes('hashtag')) {
+            } else {
+              // Everything else will be handled in reverse pass
               encounteredText = true
               return item // We'll handle it later
-            } else {
-              attrs.target = '_blank'
-              return <a {...{ attrs }}>
-                { children.map(processItem) }
-              </a>
             }
         }
+
         if (children !== undefined) {
           return [opener, children.map(processItem), closer]
         } else {
@@ -203,16 +201,28 @@ export default Vue.component('RichContent', {
             // should only be this
             if (attrs['class'] && attrs['class'].includes('hashtag')) {
               return renderHashtag(attrs, children, encounteredTextReverse)
+            } else {
+              attrs.target = '_blank'
+              html.includes('freenode') && console.log('PASS1', children)
+              const newChildren = [...children].reverse().map(processItemReverse).reverse()
+              html.includes('freenode') && console.log('PASS1b', newChildren)
+
+              return <a {...{ attrs }}>
+                { newChildren }
+              </a>
             }
-            break
           case '':
             return [...children].reverse().map(processItemReverse).reverse()
         }
 
         // Render tag as is
         if (children !== undefined) {
+          html.includes('freenode') && console.log('PASS2', children)
+          const newChildren = Array.isArray(children)
+            ? [...children].reverse().map(processItemReverse).reverse()
+            : children
           return <Tag {...{ attrs: getAttrs(opener) }}>
-            { Array.isArray(children) ? [...children].reverse().map(processItemReverse).reverse() : children }
+            { newChildren }
           </Tag>
         } else {
           return <Tag/>
diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index 82f1ae89..be51bbd1 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -639,4 +639,48 @@ describe('RichContent', () => {
 
     expect(wrapper.html()).to.eql(compwrap(expected))
   })
+
+  it('contents of a link', () => {
+    const html = [
+      '<p>',
+      'Freenode is dead.</p>',
+      '<p>',
+      '<a href="https://isfreenodedeadyet.com/">',
+      '<span>',
+      'https://</span>',
+      '<span>',
+      'isfreenodedeadyet.com/</span>',
+      '<span>',
+      '</span>',
+      '</a>',
+      '</p>'
+    ].join('')
+    const expected = [
+      '<p>',
+      'Freenode is dead.</p>',
+      '<p>',
+      '<a href="https://isfreenodedeadyet.com/" target="_blank">',
+      '<span>',
+      'https://</span>',
+      '<span>',
+      'isfreenodedeadyet.com/</span>',
+      '<span>',
+      '</span>',
+      '</a>',
+      '</p>'
+    ].join('')
+
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        hideMentions: false,
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
 })
-- 
cgit v1.2.3-70-g09d2


From 25bf28f051f2adc22bdac82b7f1ab5c3fc003a39 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 16 Jun 2021 01:44:29 +0300
Subject: added tests just in case

---
 test/unit/specs/components/rich_content.spec.js | 104 +++++++++++++++++++++++-
 1 file changed, 102 insertions(+), 2 deletions(-)

(limited to 'test')

diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index be51bbd1..96c480ea 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -1,4 +1,4 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
+import { mount, shallowMount, createLocalVue } from '@vue/test-utils'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 
 const localVue = createLocalVue()
@@ -640,7 +640,107 @@ describe('RichContent', () => {
     expect(wrapper.html()).to.eql(compwrap(expected))
   })
 
-  it('contents of a link', () => {
+  it('rich contents of a mention are handled properly', () => {
+    const html = [
+      p(
+        'Testing'
+      ),
+      p(
+        '<a href="lol" class="mention">',
+        '<span>',
+        'https://</span>',
+        '<span>',
+        'lol.tld/</span>',
+        '<span>',
+        '</span>',
+        '</a>'
+      )
+    ].join('')
+    const expected = [
+      p(
+        'Testing'
+      ),
+      p(
+        '<mentionlink-stub url="lol" content="',
+        '<span>',
+        'https://</span>',
+        '<span>',
+        'lol.tld/</span>',
+        '<span>',
+        '</span>',
+        '">',
+        '</mentionlink-stub>'
+      )
+    ].join('')
+
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        hideMentions: false,
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
+
+  it('rich contents of a mention in beginning are handled properly', () => {
+    const html = [
+      p(
+        '<a href="lol" class="mention">',
+        '<span>',
+        'https://</span>',
+        '<span>',
+        'lol.tld/</span>',
+        '<span>',
+        '</span>',
+        '</a>'
+      ),
+      p(
+        'Testing'
+      )
+    ].join('')
+    const expected = [
+      p(
+        '<span class="MentionsLine">',
+        '<mentionlink-stub content="',
+        '<span>',
+        'https://</span>',
+        '<span>',
+        'lol.tld/</span>',
+        '<span>',
+        '</span>',
+        '" url="lol" class="mention-link">',
+        '</mentionlink-stub>',
+        '<!---->', // v-if placeholder
+        '</span>'
+      ),
+      p(
+        'Testing'
+      )
+    ].join('')
+
+    const wrapper = mount(RichContent, {
+      localVue,
+      stubs: {
+        MentionLink: true
+      },
+      propsData: {
+        hideMentions: false,
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
+
+  it('rich contents of a link are handled properly', () => {
     const html = [
       '<p>',
       'Freenode is dead.</p>',
-- 
cgit v1.2.3-70-g09d2


From 8fe4355a6b84ae81b54228e6749a4ab82966ff2e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 18 Jun 2021 21:29:47 +0300
Subject: fix rich images

---
 src/services/html_converter/html_line_converter.service.js         | 2 ++
 .../unit/specs/services/html_converter/html_line_converter.spec.js | 7 +++++++
 2 files changed, 9 insertions(+)

(limited to 'test')

diff --git a/src/services/html_converter/html_line_converter.service.js b/src/services/html_converter/html_line_converter.service.js
index f43d162a..74103b02 100644
--- a/src/services/html_converter/html_line_converter.service.js
+++ b/src/services/html_converter/html_line_converter.service.js
@@ -114,6 +114,8 @@ export const convertHtmlToLines = (html) => {
           } else {
             handleOpen(tagFull)
           }
+        } else {
+          textBuffer += tagFull
         }
       } else {
         textBuffer += tagFull
diff --git a/test/unit/specs/services/html_converter/html_line_converter.spec.js b/test/unit/specs/services/html_converter/html_line_converter.spec.js
index de7c7fc2..86bd7e8b 100644
--- a/test/unit/specs/services/html_converter/html_line_converter.spec.js
+++ b/test/unit/specs/services/html_converter/html_line_converter.spec.js
@@ -69,6 +69,13 @@ describe('html_line_converter', () => {
       const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
       expect(comparableResult).to.eql(inputOutput)
     })
+
+    it('fed with some recognized but not handled elements', () => {
+      const inputOutput = 'testing images\n\n<img src="benis.png">'
+      const result = convertHtmlToLines(inputOutput)
+      const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
+      expect(comparableResult).to.eql(inputOutput)
+    })
   })
   describe('with processor that replaces lines with word "_" should match expected line when', () => {
     const processorReplace = (line) => '_'
-- 
cgit v1.2.3-70-g09d2


From c6831a381033fa160fba95fa88b1179d3c670d9d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 18 Jun 2021 21:42:46 +0300
Subject: fix not escaping some stuff

---
 src/components/rich_content/rich_content.jsx    | 13 +++++--------
 test/unit/specs/components/rich_content.spec.js | 23 +++++++++++++++++++++++
 2 files changed, 28 insertions(+), 8 deletions(-)

(limited to 'test')

diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index ce562f13..79acd1de 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -121,14 +121,13 @@ export default Vue.component('RichContent', {
         if (emptyText) {
           return encounteredText ? item : item.trim()
         }
-        let unescapedItem = unescape(item)
         if (!encounteredText) {
-          unescapedItem = unescapedItem.trimStart()
+          item = item.trimStart()
           encounteredText = true
         }
         if (item.includes(':')) {
-          unescapedItem = ['', processTextForEmoji(
-            unescapedItem,
+          item = ['', processTextForEmoji(
+            item,
             this.emoji,
             ({ shortcode, url }) => {
               return <StillImage
@@ -140,7 +139,7 @@ export default Vue.component('RichContent', {
             }
           )]
         }
-        return unescapedItem
+        return item
       }
 
       // Handle tag nodes
@@ -189,7 +188,7 @@ export default Vue.component('RichContent', {
         const emptyText = item.trim() === ''
         if (emptyText) return item
         if (!encounteredTextReverse) encounteredTextReverse = true
-        return item
+        return unescape(item)
       } else if (Array.isArray(item)) {
         // Handle tag nodes
         const [opener, children] = item
@@ -203,9 +202,7 @@ export default Vue.component('RichContent', {
               return renderHashtag(attrs, children, encounteredTextReverse)
             } else {
               attrs.target = '_blank'
-              html.includes('freenode') && console.log('PASS1', children)
               const newChildren = [...children].reverse().map(processItemReverse).reverse()
-              html.includes('freenode') && console.log('PASS1b', newChildren)
 
               return <a {...{ attrs }}>
                 { newChildren }
diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index 96c480ea..fbf8973d 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -27,6 +27,29 @@ describe('RichContent', () => {
     expect(wrapper.html()).to.eql(compwrap(html))
   })
 
+  it('unescapes everything as needed', () => {
+    const html = [
+      p('Testing &#39;em all'),
+      'Testing &#39;em all'
+    ].join('')
+    const expected = [
+      p('Testing \'em all'),
+      'Testing \'em all'
+    ].join('')
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        hideMentions: true,
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
+
   it('removes mentions from the beginning of post', () => {
     const html = p(
       makeMention('John'),
-- 
cgit v1.2.3-70-g09d2


From a0eaac2216e7f279e10c6b688b9fa81f7a4fad2d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 22 Jun 2021 21:09:29 +0300
Subject: fix tests

---
 test/unit/specs/components/rich_content.spec.js | 32 ++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

(limited to 'test')

diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index fbf8973d..9ac9bedb 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -2,8 +2,12 @@ import { mount, shallowMount, createLocalVue } from '@vue/test-utils'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 
 const localVue = createLocalVue()
+const attentions = []
 
-const makeMention = (who) => `<span class="h-card"><a class="u-url mention" href="https://fake.tld/@${who}">@<span>${who}</span></a></span>`
+const makeMention = (who) => {
+  attentions.push({ statusnet_profile_url: `https://fake.tld/@${who}` })
+  return `<span class="h-card"><a class="u-url mention" href="https://fake.tld/@${who}">@<span>${who}</span></a></span>`
+}
 const stubMention = (who) => `<span class="h-card"><mentionlink-stub url="https://fake.tld/@${who}" content="@<span>${who}</span>"></mentionlink-stub></span>`
 const lastMentions = (...data) => `<span class="lastMentions">${data.join('')}</span>`
 const p = (...data) => `<p>${data.join('')}</p>`
@@ -16,6 +20,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: true,
         handleLinks: true,
         greentext: true,
@@ -39,6 +44,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: true,
         handleLinks: true,
         greentext: true,
@@ -62,6 +68,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: true,
         handleLinks: true,
         greentext: true,
@@ -89,6 +96,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: false,
         handleLinks: true,
         greentext: true,
@@ -120,6 +128,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: true,
         handleLinks: true,
         greentext: true,
@@ -157,6 +166,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: false,
         handleLinks: true,
         greentext: true,
@@ -186,6 +196,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: true,
         handleLinks: true,
         greentext: true,
@@ -215,6 +226,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: true,
         handleLinks: true,
         greentext: true,
@@ -257,6 +269,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: true,
         handleLinks: true,
         greentext: true,
@@ -292,6 +305,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: true,
         handleLinks: true,
         greentext: true,
@@ -334,6 +348,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: true,
         handleLinks: true,
         greentext: true,
@@ -362,6 +377,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: true,
         handleLinks: false,
         greentext: true,
@@ -386,6 +402,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: true,
         handleLinks: false,
         greentext: true,
@@ -406,6 +423,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: true,
         handleLinks: false,
         greentext: false,
@@ -427,6 +445,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: true,
         handleLinks: false,
         greentext: false,
@@ -444,6 +463,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: true,
         handleLinks: false,
         greentext: false,
@@ -472,6 +492,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -507,6 +528,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: true,
         handleLinks: true,
         greentext: true,
@@ -537,6 +559,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: true,
         handleLinks: true,
         greentext: true,
@@ -580,6 +603,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: true,
         handleLinks: true,
         greentext: true,
@@ -616,6 +640,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: true,
         handleLinks: true,
         greentext: true,
@@ -652,6 +677,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: true,
         handleLinks: true,
         greentext: true,
@@ -699,6 +725,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: false,
         handleLinks: true,
         greentext: true,
@@ -711,6 +738,7 @@ describe('RichContent', () => {
   })
 
   it('rich contents of a mention in beginning are handled properly', () => {
+    attentions.push({ statusnet_profile_url: 'lol' })
     const html = [
       p(
         '<a href="lol" class="mention">',
@@ -752,6 +780,7 @@ describe('RichContent', () => {
         MentionLink: true
       },
       propsData: {
+        attentions,
         hideMentions: false,
         handleLinks: true,
         greentext: true,
@@ -796,6 +825,7 @@ describe('RichContent', () => {
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
+        attentions,
         hideMentions: false,
         handleLinks: true,
         greentext: true,
-- 
cgit v1.2.3-70-g09d2


From 2cfff1b8b9c642e9284483d6658312d9a3763417 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 12 Aug 2021 02:49:37 +0300
Subject: remove new options for style and separate line, now groups all
 chained mentions on a mentionsline regardless of placement. fixes spacing

---
 src/components/mention_link/mention_link.js        |   6 +-
 src/components/mention_link/mention_link.scss      |  41 ---
 src/components/mention_link/mention_link.vue       |   3 +-
 src/components/mentions_line/mentions_line.js      |  15 +-
 src/components/mentions_line/mentions_line.scss    |  15 +-
 src/components/mentions_line/mentions_line.vue     |   6 +-
 src/components/rich_content/rich_content.jsx       | 128 ++-----
 src/components/settings_modal/tabs/general_tab.vue |  10 -
 src/components/status/status.js                    |   5 +-
 src/components/status/status.vue                   |   1 -
 src/components/status_body/status_body.js          |   3 +-
 src/components/status_body/status_body.vue         |   1 -
 src/components/status_content/status_content.js    |   3 +-
 src/components/status_content/status_content.vue   |   1 -
 src/modules/config.js                              |   2 -
 test/unit/specs/components/rich_content.spec.js    | 399 +--------------------
 16 files changed, 55 insertions(+), 584 deletions(-)

(limited to 'test')

diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index eec116db..a60a8040 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -65,9 +65,6 @@ const MentionLink = {
     highlightClass () {
       if (this.highlight) return highlightClass(this.user)
     },
-    oldStyle () {
-      return !this.mergedConfig.mentionsNewStyle
-    },
     style () {
       if (this.highlight) {
         const {
@@ -83,8 +80,7 @@ const MentionLink = {
       return [
         {
           '-you': this.isYou,
-          '-highlighted': this.highlight,
-          '-oldStyle': this.oldStyle
+          '-highlighted': this.highlight
         },
         this.highlightType
       ]
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index 5f5da98f..ec2689f8 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -10,10 +10,6 @@
     border-radius: 2px;
   }
 
-  .original {
-    margin-right: 0.25em;
-  }
-
   .full {
     position: absolute;
     display: inline-block;
@@ -41,8 +37,6 @@
   }
 
   .new {
-    margin-right: 0.25em;
-
     &.-you {
       & .shortName,
       & .full {
@@ -61,41 +55,6 @@
       margin: 0;
     }
 
-    &:not(.-oldStyle) {
-      .short {
-        padding-left: 0.25em;
-        padding-right: 0;
-        padding-top: 0;
-        padding-bottom: 0;
-        line-height: 1.5;
-        font-size: inherit;
-
-        .at {
-          color: var(--faint);
-          opacity: 0.8;
-          padding-right: 0.25em;
-          vertical-align: -20%;
-        }
-      }
-
-      .you {
-        padding-right: 0.25em;
-      }
-
-      .userName {
-        display: inline-block;
-        color: var(--link);
-        line-height: inherit;
-        margin-left: 0;
-        padding-left: 0.125em;
-        padding-right: 0.25em;
-        padding-top: 0;
-        padding-bottom: 0;
-        border-top-right-radius: var(--btnRadius);
-        border-bottom-right-radius: var(--btnRadius);
-      }
-    }
-
     &.-striped {
       & .userName,
       & .full {
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 514b7475..625eb727 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -18,8 +18,7 @@
       :class="classnames"
     >
       <button
-        class="short"
-        :class="[{ '-sublime': !highlight }, oldStyle ? 'button-unstyled' : 'button-default']"
+        class="short button-unstyled"
         @click.prevent="onClick"
       >
         <!-- eslint-disable vue/no-v-html -->
diff --git a/src/components/mentions_line/mentions_line.js b/src/components/mentions_line/mentions_line.js
index e52045ec..33e25391 100644
--- a/src/components/mentions_line/mentions_line.js
+++ b/src/components/mentions_line/mentions_line.js
@@ -14,11 +14,8 @@ const MentionsLine = {
     MentionLink
   },
   computed: {
-    oldStyle () {
-      return !this.mergedConfig.mentionsNewStyle
-    },
     limit () {
-      return 6
+      return 2
     },
     mentionsComputed () {
       return this.mentions.slice(0, this.limit)
@@ -29,16 +26,6 @@ const MentionsLine = {
     manyMentions () {
       return this.extraMentions.length > 0
     },
-    buttonClasses () {
-      return [
-        this.oldStyle
-          ? 'button-unstyled'
-          : 'button-default -sublime',
-        this.oldStyle
-          ? '-oldStyle'
-          : '-newStyle'
-      ]
-    },
     ...mapGetters(['mergedConfig'])
   },
   methods: {
diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss
index 90d1e0a4..222940c8 100644
--- a/src/components/mentions_line/mentions_line.scss
+++ b/src/components/mentions_line/mentions_line.scss
@@ -1,17 +1,10 @@
 .MentionsLine {
   .showMoreLess {
     white-space: normal;
+    color: var(--link);
+  }
 
-    &.-newStyle {
-      line-height: 1.5;
-      font-size: inherit;
-      display: inline-block;
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    &.-oldStyle {
-      color: var(--link);
-    }
+  .mention-link:not(:last-child) {
+    margin-right: 0.25em;
   }
 }
diff --git a/src/components/mentions_line/mentions_line.vue b/src/components/mentions_line/mentions_line.vue
index f4b3abb9..f375e3b0 100644
--- a/src/components/mentions_line/mentions_line.vue
+++ b/src/components/mentions_line/mentions_line.vue
@@ -25,15 +25,13 @@
         />
       </span><button
         v-if="!expanded"
-        class="showMoreLess"
-        :class="buttonClasses"
+        class="button-unstyled showMoreLess"
         @click="toggleShowMore"
       >
         {{ $t('status.plus_more', { number: extraMentions.length }) }}
       </button><button
         v-if="expanded"
-        class="showMoreLess"
-        :class="buttonClasses"
+        class="button-unstyled showMoreLess"
         @click="toggleShowMore"
       >
         {{ $t('general.show_less') }}
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index cd73f2e5..4b7d4d37 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -56,25 +56,21 @@ export default Vue.component('RichContent', {
       required: false,
       type: Boolean,
       default: false
-    },
-    hideMentions: {
-      required: false,
-      type: Boolean,
-      default: false
     }
   },
   // NEVER EVER TOUCH DATA INSIDE RENDER
   render (h) {
     // Pre-process HTML
-    const { newHtml: html, lastMentions } = preProcessPerLine(this.html, this.greentext, this.handleLinks)
-    const firstMentions = [] // Mentions that appear in the beginning of post body
+    const { newHtml: html } = preProcessPerLine(this.html, this.greentext, this.handleLinks)
+    let currentMentions = null // Current chain of mentions, we group all mentions together
+    // to collapse too many mentions in a row
+
     const lastTags = [] // Tags that appear at the end of post body
     const writtenMentions = [] // All mentions that appear in post body
     const writtenTags = [] // All tags that appear in post body
     // unique index for vue "tag" property
     let mentionIndex = 0
     let tagsIndex = 0
-    let firstMentionReplaced = false
 
     const renderImage = (tag) => {
       return <StillImage
@@ -98,41 +94,32 @@ export default Vue.component('RichContent', {
     const renderMention = (attrs, children) => {
       const linkData = getLinkData(attrs, children, mentionIndex++)
       linkData.notifying = this.attentions.some(a => a.statusnet_profile_url === linkData.url)
-      if (!linkData.notifying) {
-        encounteredText = true
-      }
       writtenMentions.push(linkData)
-      if (!encounteredText) {
-        firstMentions.push(linkData)
-        if (!firstMentionReplaced && !this.hideMentions) {
-          firstMentionReplaced = true
-          return <MentionsLine mentions={ firstMentions } />
-        } else {
-          return ''
-        }
+      if (currentMentions === null) {
+        currentMentions = []
+      }
+      currentMentions.push(linkData)
+      if (currentMentions.length === 1) {
+        return <MentionsLine mentions={ currentMentions } />
       } else {
-        return <MentionLink
-          url={attrs.href}
-          content={flattenDeep(children).join('')}
-        />
+        return ''
       }
     }
 
-    // We stop treating mentions as "first" ones when we encounter
-    // non-whitespace text
-    let encounteredText = false
     // Processor to use with html_tree_converter
     const processItem = (item, index, array, what) => {
       // Handle text nodes - just add emoji
       if (typeof item === 'string') {
         const emptyText = item.trim() === ''
-        if (emptyText) {
-          return encounteredText ? item : item.trim()
+        if (item.includes('\n')) {
+          currentMentions = null
         }
-        if (!encounteredText) {
-          item = item.trimStart()
-          encounteredText = true
+        if (emptyText) {
+          // don't include spaces when processing mentions - we'll include them
+          // in MentionsLine
+          return currentMentions !== null ? item.trim() : item
         }
+        currentMentions = null
         if (item.includes(':')) {
           item = ['', processTextForEmoji(
             item,
@@ -156,28 +143,25 @@ export default Vue.component('RichContent', {
         const Tag = getTagName(opener)
         const attrs = getAttrs(opener)
         switch (Tag) {
-          case 'span': // Replace last mentions class with mentionsline
-            if (attrs['class'] && attrs['class'].includes('lastMentions')) {
-              if (firstMentions.length > 1 && lastMentions.length > 1) {
-                break
-              } else {
-                return !this.hideMentions ? <MentionsLine mentions={lastMentions} /> : ''
-              }
-            } else {
-              break
-            }
+          case 'br':
+            currentMentions = null
+            break
           case 'img': // replace images with StillImage
             return renderImage(opener)
           case 'a': // replace mentions with MentionLink
             if (!this.handleLinks) break
             if (attrs['class'] && attrs['class'].includes('mention')) {
               // Handling mentions here
-              return renderMention(attrs, children, encounteredText)
+              return renderMention(attrs, children)
             } else {
               // Everything else will be handled in reverse pass
-              encounteredText = true
+              currentMentions = null
               return item // We'll handle it later
             }
+          case 'span':
+            if (attrs['class'].includes('h-card')) {
+              return ['', children.map(processItem), '']
+            }
         }
 
         if (children !== undefined) {
@@ -246,8 +230,6 @@ export default Vue.component('RichContent', {
     </span>
 
     const event = {
-      firstMentions,
-      lastMentions,
       lastTags,
       writtenMentions,
       writtenTags
@@ -284,15 +266,12 @@ export const preProcessPerLine = (html, greentext, handleLinks) => {
   const lastMentions = []
   const greentextHandle = new Set(['p', 'div'])
 
-  let nonEmptyIndex = -1
   const lines = convertHtmlToLines(html)
-  const linesNum = lines.filter(c => c.text).length
   const newHtml = lines.reverse().map((item, index, array) => {
     // Going over each line in reverse to detect last mentions,
     // keeping non-text stuff as-is
     if (!item.text) return item
     const string = item.text
-    nonEmptyIndex += 1
 
     // Greentext stuff
     if (
@@ -316,42 +295,19 @@ export const preProcessPerLine = (html, greentext, handleLinks) => {
     // Converting that line part into tree
     const tree = convertHtmlToTree(string)
 
-    // If line has loose text, i.e. text outside a mention or a tag
-    // we won't touch mentions.
-    let hasLooseText = false
-    let mentionsNum = 0
     const process = (item) => {
       if (Array.isArray(item)) {
         const [opener, children, closer] = item
         const tag = getTagName(opener)
-        // If we have a link we probably have mentions
-        if (tag === 'a') {
-          if (!handleLinks) return [opener, children, closer]
-          const attrs = getAttrs(opener)
-          if (attrs['class'] && attrs['class'].includes('mention')) {
-            // Got mentions
-            mentionsNum++
-            return [opener, children, closer]
-          } else {
-            // Not a mention? Means we have loose text or whatever
-            hasLooseText = true
-            return [opener, children, closer]
-          }
-        } else if (tag === 'span' || tag === 'p') {
+        if (tag === 'span' || tag === 'p') {
           // For span and p we need to go deeper
           return [opener, [...children].map(process), closer]
         } else {
-          // Everything else equals to a loose text
-          hasLooseText = true
           return [opener, children, closer]
         }
       }
 
       if (typeof item === 'string') {
-        if (item.trim() !== '') {
-          // only meaningful strings are loose text
-          hasLooseText = true
-        }
         return item
       }
     }
@@ -359,33 +315,7 @@ export const preProcessPerLine = (html, greentext, handleLinks) => {
     // We now processed our tree, now we need to mark line as lastMentions
     const result = [...tree].map(process)
 
-    if (
-      handleLinks && // Do we handle links at all?
-        mentionsNum > 1 && // Does it have more than one mention?
-        !hasLooseText && // Don't do anything if it has something besides mentions
-        nonEmptyIndex === 0 && // Only check last (first since list is reversed) line
-        nonEmptyIndex !== linesNum - 1 // Don't do anything if there's only one line
-    ) {
-      let mentionIndex = 0
-      const process = (item) => {
-        if (Array.isArray(item)) {
-          const [opener, children] = item
-          const tag = getTagName(opener)
-          if (tag === 'a') {
-            const attrs = getAttrs(opener)
-            lastMentions.push(getLinkData(attrs, children, mentionIndex++))
-          } else if (children) {
-            children.forEach(process)
-          }
-        }
-      }
-      result.forEach(process)
-      // we DO need mentions here so that we conditionally remove them if don't
-      // have first mentions
-      return ['<span class="lastMentions">', flattenDeep(result).join(''), '</span>'].join('')
-    } else {
-      return flattenDeep(result).join('')
-    }
+    return flattenDeep(result).join('')
   }).reverse().join('')
 
   return { newHtml, lastMentions }
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 71780e00..d3e71b31 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -41,16 +41,6 @@
             {{ $t('settings.collapse_subject') }}
           </BooleanSetting>
         </li>
-        <li>
-          <BooleanSetting path="mentionsOwnLine">
-            {{ $t('settings.mentions_new_place') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="mentionsNewStyle">
-            {{ $t('settings.mentions_new_style') }}
-          </BooleanSetting>
-        </li>
         <li>
           <BooleanSetting path="streaming">
             {{ $t('settings.streaming') }}
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 3c21cb76..8aa73a22 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -184,10 +184,7 @@ const Status = {
       })
     },
     mentionsLine () {
-      return this.mentionsOwnLine ? this.mentions : this.alsoMentions
-    },
-    mentionsOwnLine () {
-      return this.mergedConfig.mentionsOwnLine
+      return this.alsoMentions
     },
     hasMentionsLine () {
       return this.mentionsLine.length > 0
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index a5f347a6..2684e415 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -306,7 +306,6 @@
             :no-heading="noHeading"
             :highlight="highlight"
             :focused="isFocused"
-            :hide-mentions="mentionsOwnLine && (isReply || true)"
             @mediaplay="addMediaPlaying($event)"
             @mediapause="removeMediaPlaying($event)"
             @parseReady="setHeadTailLinks"
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index d1736ba3..8757154d 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -25,8 +25,7 @@ const StatusContent = {
     'focused',
     'noHeading',
     'fullContent',
-    'singleLine',
-    'hideMentions'
+    'singleLine'
   ],
   data () {
     return {
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index d77ccd54..9f01c470 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -45,7 +45,6 @@
           :html="status.raw_html"
           :emoji="status.emojis"
           :handle-links="true"
-          :hide-mentions="hideMentions"
           :greentext="mergedConfig.greentext"
           :attentions="status.attentions"
           @parseReady="onParseReady"
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 51895ef6..1b80ee09 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -31,8 +31,7 @@ const StatusContent = {
     'focused',
     'noHeading',
     'fullContent',
-    'singleLine',
-    'hideMentions'
+    'singleLine'
   ],
   computed: {
     hideAttachments () {
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 2e71757d..23c90913 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -4,7 +4,6 @@
     <StatusBody
       :status="status"
       :single-line="singleLine"
-      :hide-mentions="hideMentions"
       @parseReady="$emit('parseReady', $event)"
     >
       <div v-if="status.poll && status.poll.options">
diff --git a/src/modules/config.js b/src/modules/config.js
index db9d5ffb..bdab3f4d 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -55,8 +55,6 @@ export const defaultState = {
   interfaceLanguage: browserLocale,
   hideScopeNotice: false,
   useStreamingApi: false,
-  mentionsOwnLine: false,
-  mentionsNewStyle: false,
   sidebarRight: undefined, // instance default
   scopeCopy: undefined, // instance default
   subjectLineBehavior: undefined, // instance default
diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index 9ac9bedb..dfc229c0 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -8,11 +8,13 @@ const makeMention = (who) => {
   attentions.push({ statusnet_profile_url: `https://fake.tld/@${who}` })
   return `<span class="h-card"><a class="u-url mention" href="https://fake.tld/@${who}">@<span>${who}</span></a></span>`
 }
-const stubMention = (who) => `<span class="h-card"><mentionlink-stub url="https://fake.tld/@${who}" content="@<span>${who}</span>"></mentionlink-stub></span>`
-const lastMentions = (...data) => `<span class="lastMentions">${data.join('')}</span>`
 const p = (...data) => `<p>${data.join('')}</p>`
 const compwrap = (...data) => `<span class="RichContent">${data.join('')}</span>`
-const removedMentionSpan = '<span class="h-card"></span>'
+const mentionsLine = (times) => [
+  '<mentionsline-stub mentions="',
+  new Array(times).fill('[object Object]').join(','),
+  '"></mentionsline-stub>'
+].join('')
 
 describe('RichContent', () => {
   it('renders simple post without exploding', () => {
@@ -21,7 +23,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -45,7 +46,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -56,20 +56,15 @@ describe('RichContent', () => {
     expect(wrapper.html()).to.eql(compwrap(expected))
   })
 
-  it('removes mentions from the beginning of post', () => {
+  it('replaces first mention with mentionsline', () => {
     const html = p(
       makeMention('John'),
-      ' how are you doing thoday?'
-    )
-    const expected = p(
-      removedMentionSpan,
-      'how are you doing thoday?'
+      ' how are you doing today?'
     )
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
         attentions,
-        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -77,70 +72,13 @@ describe('RichContent', () => {
       }
     })
 
-    expect(wrapper.html()).to.eql(compwrap(expected))
+    expect(wrapper.html()).to.eql(compwrap(p(
+      mentionsLine(1),
+      ' how are you doing today?'
+    )))
   })
 
-  it('replaces first mention with mentionsline if hideMentions=false', () => {
-    const html = p(
-      makeMention('John'),
-      ' how are you doing thoday?'
-    )
-    const expected = p(
-      '<span class="h-card">',
-      '<mentionsline-stub mentions="',
-      '[object Object]',
-      '"></mentionsline-stub>',
-      '</span>',
-      'how are you doing thoday?'
-    )
-    const wrapper = shallowMount(RichContent, {
-      localVue,
-      propsData: {
-        attentions,
-        hideMentions: false,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html
-      }
-    })
-
-    expect(wrapper.html()).to.eql(compwrap(expected))
-  })
-
-  it('removes mentions from the end of the hellpost (<p>)', () => {
-    const html = [
-      p('How are you doing today, fine gentlemen?'),
-      p(
-        makeMention('John'),
-        makeMention('Josh'),
-        makeMention('Jeremy')
-      )
-    ].join('')
-    const expected = [
-      p(
-        'How are you doing today, fine gentlemen?'
-      ),
-      // TODO fix this extra line somehow?
-      p()
-    ].join('')
-
-    const wrapper = shallowMount(RichContent, {
-      localVue,
-      propsData: {
-        attentions,
-        hideMentions: true,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html
-      }
-    })
-
-    expect(wrapper.html()).to.eql(compwrap(expected))
-  })
-
-  it('replaces mentions at the end of the hellpost if hideMentions=false (<p>)', () => {
+  it('replaces mentions at the end of the hellpost', () => {
     const html = [
       p('How are you doing today, fine gentlemen?'),
       p(
@@ -167,189 +105,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: false,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html
-      }
-    })
-
-    expect(wrapper.html()).to.eql(compwrap(expected))
-  })
-
-  it('removes mentions from the end of the hellpost (<br>)', () => {
-    const html = [
-      'How are you doing today, fine gentlemen?',
-      [
-        makeMention('John'),
-        makeMention('Josh'),
-        makeMention('Jeremy')
-      ].join('')
-    ].join('<br>')
-    const expected = [
-      'How are you doing today, fine gentlemen?',
-      // TODO fix this extra line somehow?
-      '<br>'
-    ].join('')
-
-    const wrapper = shallowMount(RichContent, {
-      localVue,
-      propsData: {
-        attentions,
-        hideMentions: true,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html
-      }
-    })
-
-    expect(wrapper.html()).to.eql(compwrap(expected))
-  })
-
-  it('removes mentions from the end of the hellpost (\\n)', () => {
-    const html = [
-      'How are you doing today, fine gentlemen?',
-      [
-        makeMention('John'),
-        makeMention('Josh'),
-        makeMention('Jeremy')
-      ].join('')
-    ].join('\n')
-    const expected = [
-      'How are you doing today, fine gentlemen?',
-      // TODO fix this extra line somehow?
-      ''
-    ].join('\n')
-
-    const wrapper = shallowMount(RichContent, {
-      localVue,
-      propsData: {
-        attentions,
-        hideMentions: true,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html
-      }
-    })
-
-    expect(wrapper.html()).to.eql(compwrap(expected))
-  })
-
-  it('Does not remove mentions in the middle or at the end of text string', () => {
-    const html = [
-      [
-        makeMention('Jack'),
-        'let\'s meet up with ',
-        makeMention('Janet')
-      ].join(''),
-      [
-        'cc: ',
-        makeMention('John'),
-        makeMention('Josh'),
-        makeMention('Jeremy')
-      ].join('')
-    ].join('\n')
-    const expected = [
-      [
-        removedMentionSpan,
-        'let\'s meet up with ',
-        stubMention('Janet')
-      ].join(''),
-      [
-        'cc: ',
-        stubMention('John'),
-        stubMention('Josh'),
-        stubMention('Jeremy')
-      ].join('')
-    ].join('\n')
-
-    const wrapper = shallowMount(RichContent, {
-      localVue,
-      propsData: {
-        attentions,
-        hideMentions: true,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html
-      }
-    })
-
-    expect(wrapper.html()).to.eql(compwrap(expected))
-  })
-
-  it('removes mentions from the end if there\'s only one first mention', () => {
-    const html = [
-      p(
-        makeMention('Todd'),
-        'so anyway you are wrong'
-      ),
-      p(
-        makeMention('Tom'),
-        makeMention('Trace'),
-        makeMention('Theodor')
-      )
-    ].join('')
-    const expected = [
-      p(
-        removedMentionSpan,
-        'so anyway you are wrong'
-      ),
-      // TODO fix this extra line somehow?
-      p()
-    ].join('')
-
-    const wrapper = shallowMount(RichContent, {
-      localVue,
-      propsData: {
-        attentions,
-        hideMentions: true,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html
-      }
-    })
-
-    expect(wrapper.html()).to.eql(compwrap(expected))
-  })
-
-  it('does not remove mentions from the end if there\'s more than one first mention', () => {
-    const html = [
-      p(
-        makeMention('Zacharie'),
-        makeMention('Zinaide'),
-        'you guys have cool names, and so do these guys: '
-      ),
-      p(
-        makeMention('Watson'),
-        makeMention('Wallace'),
-        makeMention('Wakamoto')
-      )
-    ].join('')
-    const expected = [
-      p(
-        removedMentionSpan,
-        removedMentionSpan,
-        'you guys have cool names, and so do these guys: '
-      ),
-      p(
-        lastMentions(
-          stubMention('Watson'),
-          stubMention('Wallace'),
-          stubMention('Wakamoto')
-        )
-      )
-    ].join('')
-
-    const wrapper = shallowMount(RichContent, {
-      localVue,
-      propsData: {
-        attentions,
-        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -378,7 +133,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: true,
         handleLinks: false,
         greentext: true,
         emoji: [],
@@ -403,7 +157,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: true,
         handleLinks: false,
         greentext: true,
         emoji: [],
@@ -424,7 +177,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: true,
         handleLinks: false,
         greentext: false,
         emoji: [],
@@ -446,7 +198,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: true,
         handleLinks: false,
         greentext: false,
         emoji: [{ url: 'about:blank', shortcode: 'spurdo' }],
@@ -464,7 +215,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: true,
         handleLinks: false,
         greentext: false,
         emoji: [],
@@ -484,7 +234,7 @@ describe('RichContent', () => {
     ].join('\n')
     const expected = [
       '<span class="greentext">&gt;quote</span>',
-      stubMention('lol'),
+      mentionsLine(1)
       '<span class="greentext">&gt;quote</span>',
       '<span class="greentext">&gt;quote</span>'
     ].join('\n')
@@ -517,11 +267,7 @@ describe('RichContent', () => {
     const expected = [
       'Bruh',
       'Bruh',
-      [
-        stubMention('foo'),
-        stubMention('bar'),
-        stubMention('baz')
-      ].join(''),
+      mentionsLine(3)
       'Bruh'
     ].join('<br>')
 
@@ -529,119 +275,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: true,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html
-      }
-    })
-
-    expect(wrapper.html()).to.eql(compwrap(expected))
-  })
-
-  it('Don\'t remove last mention if it\'s the only one', () => {
-    const html = [
-      'Bruh',
-      'Bruh',
-      makeMention('foo'),
-      makeMention('bar'),
-      makeMention('baz')
-    ].join('<br>')
-    const expected = [
-      'Bruh',
-      'Bruh',
-      stubMention('foo'),
-      stubMention('bar'),
-      stubMention('baz')
-    ].join('<br>')
-
-    const wrapper = shallowMount(RichContent, {
-      localVue,
-      propsData: {
-        attentions,
-        hideMentions: true,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html
-      }
-    })
-
-    expect(wrapper.html()).to.eql(compwrap(expected))
-  })
-
-  it('Don\'t remove last mentions if there are more than one first mention - remove first instead', () => {
-    const html = [
-      [
-        makeMention('foo'),
-        makeMention('bar')
-      ].join(' '),
-      'Bruh',
-      'Bruh',
-      [
-        makeMention('foo'),
-        makeMention('bar'),
-        makeMention('baz')
-      ].join(' ')
-    ].join('\n')
-
-    const expected = [
-      [
-        removedMentionSpan,
-        removedMentionSpan,
-        'Bruh' // Due to trim we remove extra newline
-      ].join(''),
-      'Bruh',
-      lastMentions([
-        stubMention('foo'),
-        stubMention('bar'),
-        stubMention('baz')
-      ].join(' '))
-    ].join('\n')
-
-    const wrapper = shallowMount(RichContent, {
-      localVue,
-      propsData: {
-        attentions,
-        hideMentions: true,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html
-      }
-    })
-
-    expect(wrapper.html()).to.eql(compwrap(expected))
-  })
-
-  it('Remove last mentions if there\'s just one first mention - remove all', () => {
-    const html = [
-      [
-        makeMention('foo')
-      ].join(' '),
-      'Bruh',
-      'Bruh',
-      [
-        makeMention('foo'),
-        makeMention('bar'),
-        makeMention('baz')
-      ].join(' ')
-    ].join('\n')
-
-    const expected = [
-      [
-        removedMentionSpan,
-        'Bruh' // Due to trim we remove extra newline
-      ].join(''),
-      'Bruh\n' // Can't remove this one yet
-    ].join('\n')
-
-    const wrapper = shallowMount(RichContent, {
-      localVue,
-      propsData: {
-        attentions,
-        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -678,7 +311,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -726,7 +358,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: false,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -781,7 +412,6 @@ describe('RichContent', () => {
       },
       propsData: {
         attentions,
-        hideMentions: false,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -826,7 +456,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: false,
         handleLinks: true,
         greentext: true,
         emoji: [],
-- 
cgit v1.2.3-70-g09d2


From add5921b8b3579b153bef6ee2b1916227016d200 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 12 Aug 2021 19:37:04 +0300
Subject: fix tests, add performance test (skipped, doesn't assert anything),
 tweak max mentions count

---
 src/components/mention_link/mention_link.js     |   2 +-
 src/components/mentions_line/mentions_line.js   |   2 +-
 src/components/rich_content/rich_content.jsx    |   2 +-
 test/unit/specs/components/rich_content.spec.js | 126 +++++++++++++-----------
 4 files changed, 72 insertions(+), 60 deletions(-)

(limited to 'test')

diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index a60a8040..4d27fe6d 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -41,7 +41,7 @@ const MentionLink = {
   },
   computed: {
     user () {
-      return this.url && this.$store.getters.findUserByUrl(this.url)
+      return this.url && this.$store && this.$store.getters.findUserByUrl(this.url)
     },
     isYou () {
       // FIXME why user !== currentUser???
diff --git a/src/components/mentions_line/mentions_line.js b/src/components/mentions_line/mentions_line.js
index 33e25391..83eeea4c 100644
--- a/src/components/mentions_line/mentions_line.js
+++ b/src/components/mentions_line/mentions_line.js
@@ -15,7 +15,7 @@ const MentionsLine = {
   },
   computed: {
     limit () {
-      return 2
+      return 5
     },
     mentionsComputed () {
       return this.mentions.slice(0, this.limit)
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index 4b7d4d37..32b737ec 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -159,7 +159,7 @@ export default Vue.component('RichContent', {
               return item // We'll handle it later
             }
           case 'span':
-            if (attrs['class'].includes('h-card')) {
+            if (this.handleLinks && attrs['class'] && attrs['class'].includes('h-card')) {
               return ['', children.map(processItem), '']
             }
         }
diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index dfc229c0..b29edeab 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -56,7 +56,7 @@ describe('RichContent', () => {
     expect(wrapper.html()).to.eql(compwrap(expected))
   })
 
-  it('replaces first mention with mentionsline', () => {
+  it('replaces mention with mentionsline', () => {
     const html = p(
       makeMention('John'),
       ' how are you doing today?'
@@ -234,7 +234,7 @@ describe('RichContent', () => {
     ].join('\n')
     const expected = [
       '<span class="greentext">&gt;quote</span>',
-      mentionsLine(1)
+      mentionsLine(1),
       '<span class="greentext">&gt;quote</span>',
       '<span class="greentext">&gt;quote</span>'
     ].join('\n')
@@ -267,7 +267,7 @@ describe('RichContent', () => {
     const expected = [
       'Bruh',
       'Bruh',
-      mentionsLine(3)
+      mentionsLine(3),
       'Bruh'
     ].join('<br>')
 
@@ -322,53 +322,6 @@ describe('RichContent', () => {
   })
 
   it('rich contents of a mention are handled properly', () => {
-    const html = [
-      p(
-        'Testing'
-      ),
-      p(
-        '<a href="lol" class="mention">',
-        '<span>',
-        'https://</span>',
-        '<span>',
-        'lol.tld/</span>',
-        '<span>',
-        '</span>',
-        '</a>'
-      )
-    ].join('')
-    const expected = [
-      p(
-        'Testing'
-      ),
-      p(
-        '<mentionlink-stub url="lol" content="',
-        '<span>',
-        'https://</span>',
-        '<span>',
-        'lol.tld/</span>',
-        '<span>',
-        '</span>',
-        '">',
-        '</mentionlink-stub>'
-      )
-    ].join('')
-
-    const wrapper = shallowMount(RichContent, {
-      localVue,
-      propsData: {
-        attentions,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html
-      }
-    })
-
-    expect(wrapper.html()).to.eql(compwrap(expected))
-  })
-
-  it('rich contents of a mention in beginning are handled properly', () => {
     attentions.push({ statusnet_profile_url: 'lol' })
     const html = [
       p(
@@ -388,16 +341,19 @@ describe('RichContent', () => {
     const expected = [
       p(
         '<span class="MentionsLine">',
-        '<mentionlink-stub content="',
+        '<span class="MentionLink mention-link">',
+        '<a href="lol" target="_blank" class="original">',
         '<span>',
         'https://</span>',
         '<span>',
         'lol.tld/</span>',
         '<span>',
         '</span>',
-        '" url="lol" class="mention-link">',
-        '</mentionlink-stub>',
-        '<!---->', // v-if placeholder
+        '</a>',
+        ' ',
+        '<!---->', // v-if placeholder, mentionlink's "new" (i.e. rich) display
+        '</span>',
+        '<!---->', // v-if placeholder, mentionsline's extra mentions and stuff
         '</span>'
       ),
       p(
@@ -407,9 +363,6 @@ describe('RichContent', () => {
 
     const wrapper = mount(RichContent, {
       localVue,
-      stubs: {
-        MentionLink: true
-      },
       propsData: {
         attentions,
         handleLinks: true,
@@ -465,4 +418,63 @@ describe('RichContent', () => {
 
     expect(wrapper.html()).to.eql(compwrap(expected))
   })
+
+  it.skip('[INFORMATIVE] Performance testing, 10 000 simple posts', () => {
+    const amount = 20
+
+    const onePost = p(
+      makeMention('Lain'),
+      makeMention('Lain'),
+      makeMention('Lain'),
+      makeMention('Lain'),
+      makeMention('Lain'),
+      makeMention('Lain'),
+      makeMention('Lain'),
+      makeMention('Lain'),
+      makeMention('Lain'),
+      makeMention('Lain'),
+      ' i just landed in l a where are you'
+    )
+
+    const TestComponent = {
+      template: `
+      <div v-if="!vhtml">
+        ${new Array(amount).fill(`<RichContent html="${onePost}" :greentext="true" :handleLinks="handeLinks" :emoji="[]" :attentions="attentions"/>`)}
+      </div>
+      <div v-else="vhtml">
+        ${new Array(amount).fill(`<div v-html="${onePost}"/>`)}
+      </div>
+      `,
+      props: ['handleLinks', 'attentions', 'vhtml']
+    }
+    console.log(1)
+
+    const ptest = (handleLinks, vhtml) => {
+      const t0 = performance.now()
+
+      const wrapper = mount(TestComponent, {
+        localVue,
+        propsData: {
+          attentions,
+          handleLinks,
+          vhtml
+        }
+      })
+
+      const t1 = performance.now()
+
+      wrapper.destroy()
+
+      const t2 = performance.now()
+
+      return `Mount: ${t1 - t0}ms, destroy: ${t2 - t1}ms, avg ${(t1 - t0) / amount}ms - ${(t2 - t1) / amount}ms per item`
+    }
+
+    console.log(`${amount} items with links handling:`)
+    console.log(ptest(true))
+    console.log(`${amount} items without links handling:`)
+    console.log(ptest(false))
+    console.log(`${amount} items plain v-html:`)
+    console.log(ptest(false, true))
+  })
 })
-- 
cgit v1.2.3-70-g09d2


From 97e86381c868fbd49a33e190722934dee698600d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 13 Aug 2021 13:12:33 +0300
Subject: remove old emoji added, everything emoji-bearing uses RichContent now

---
 .../entity_normalizer/entity_normalizer.service.js | 14 ++------
 .../entity_normalizer/entity_normalizer.spec.js    | 37 +---------------------
 2 files changed, 3 insertions(+), 48 deletions(-)

(limited to 'test')

diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index d84e3422..04bb45a4 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -65,8 +65,8 @@ export const parseUser = (data) => {
     output.fields = data.fields
     output.fields_html = data.fields.map(field => {
       return {
-        name: addEmojis(escape(field.name), data.emojis),
-        value: addEmojis(field.value, data.emojis)
+        name: escape(field.name),
+        value: field.value
       }
     })
     output.fields_text = data.fields.map(field => {
@@ -241,16 +241,6 @@ export const parseAttachment = (data) => {
 
   return output
 }
-export const addEmojis = (string, emojis) => {
-  const matchOperatorsRegex = /[|\\{}()[\]^$+*?.-]/g
-  return emojis.reduce((acc, emoji) => {
-    const regexSafeShortCode = emoji.shortcode.replace(matchOperatorsRegex, '\\$&')
-    return acc.replace(
-      new RegExp(`:${regexSafeShortCode}:`, 'g'),
-      `<img src='${emoji.url}' alt=':${emoji.shortcode}:' title=':${emoji.shortcode}:' class='emoji' />`
-    )
-  }, string)
-}
 
 export const parseStatus = (data) => {
   const output = {}
diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
index 8a5a6ef9..8932bc7c 100644
--- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
+++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
@@ -1,4 +1,4 @@
-import { parseStatus, parseUser, parseNotification, addEmojis, parseLinkHeaderPagination } from '../../../../../src/services/entity_normalizer/entity_normalizer.service.js'
+import { parseStatus, parseUser, parseNotification, parseLinkHeaderPagination } from '../../../../../src/services/entity_normalizer/entity_normalizer.service.js'
 import mastoapidata from '../../../../fixtures/mastoapi.json'
 import qvitterapidata from '../../../../fixtures/statuses.json'
 
@@ -338,41 +338,6 @@ describe('API Entities normalizer', () => {
     })
   })
 
-  describe('MastoAPI emoji adder', () => {
-    const emojis = makeMockEmojiMasto()
-    const imageHtml = '<img src="https://example.com/image.png" alt=":image:" title=":image:" class="emoji" />'
-      .replace(/"/g, '\'')
-    const thinkHtml = '<img src="https://example.com/think.png" alt=":thinking:" title=":thinking:" class="emoji" />'
-      .replace(/"/g, '\'')
-
-    it('correctly replaces shortcodes in supplied string', () => {
-      const result = addEmojis('This post has :image: emoji and :thinking: emoji', emojis)
-      expect(result).to.include(thinkHtml)
-      expect(result).to.include(imageHtml)
-    })
-
-    it('handles consecutive emojis correctly', () => {
-      const result = addEmojis('Lelel emoji spam :thinking::thinking::thinking::thinking:', emojis)
-      expect(result).to.include(thinkHtml + thinkHtml + thinkHtml + thinkHtml)
-    })
-
-    it('Doesn\'t replace nonexistent emojis', () => {
-      const result = addEmojis('Admin add the :tenshi: emoji', emojis)
-      expect(result).to.equal('Admin add the :tenshi: emoji')
-    })
-
-    it('Doesn\'t blow up on regex special characters', () => {
-      const emojis = makeMockEmojiMasto([{
-        shortcode: 'c++'
-      }, {
-        shortcode: '[a-z] {|}*'
-      }])
-      const result = addEmojis('This post has :c++: emoji and :[a-z] {|}*: emoji', emojis)
-      expect(result).to.include('title=\':c++:\'')
-      expect(result).to.include('title=\':[a-z] {|}*:\'')
-    })
-  })
-
   describe('Link header pagination', () => {
     it('Parses min and max ids as integers', () => {
       const linkHeader = '<https://example.com/api/v1/notifications?max_id=861676>; rel="next", <https://example.com/api/v1/notifications?min_id=861741>; rel="prev"'
-- 
cgit v1.2.3-70-g09d2


From 7d67e8f1cccd1ef924a97b8285756590ac29224e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 02:44:36 +0300
Subject: remove obsolete tests

---
 .../entity_normalizer/entity_normalizer.spec.js    | 29 ----------------------
 1 file changed, 29 deletions(-)

(limited to 'test')

diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
index 8932bc7c..03fb32c9 100644
--- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
+++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
@@ -244,35 +244,6 @@ describe('API Entities normalizer', () => {
       expect(parseUser(remote)).to.have.property('is_local', false)
     })
 
-    it('adds emojis to user name', () => {
-      const user = makeMockUserMasto({ emojis: makeMockEmojiMasto(), display_name: 'The :thinking: thinker' })
-
-      const parsedUser = parseUser(user)
-
-      expect(parsedUser).to.have.property('name_html').that.contains('<img')
-    })
-
-    it('adds emojis to user bio', () => {
-      const user = makeMockUserMasto({ emojis: makeMockEmojiMasto(), note: 'Hello i like to :thinking: a lot' })
-
-      const parsedUser = parseUser(user)
-
-      expect(parsedUser).to.have.property('description_html').that.contains('<img')
-    })
-
-    it('adds emojis to user profile fields', () => {
-      const user = makeMockUserMasto({ emojis: makeMockEmojiMasto(), fields: [{ name: ':thinking:', value: ':image:' }] })
-
-      const parsedUser = parseUser(user)
-
-      expect(parsedUser).to.have.property('fields_html').to.be.an('array')
-
-      const field = parsedUser.fields_html[0]
-
-      expect(field).to.have.property('name').that.contains('<img')
-      expect(field).to.have.property('value').that.contains('<img')
-    })
-
     it('removes html tags from user profile fields', () => {
       const user = makeMockUserMasto({ emojis: makeMockEmojiMasto(), fields: [{ name: 'user', value: '<a rel="me" href="https://example.com/@user">@user</a>' }] })
 
-- 
cgit v1.2.3-70-g09d2


From 8cc1ad67dff93b5faa1ed1bab663d16748eec68d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 18:11:38 +0300
Subject: fix links sticking to mentionsline

---
 src/components/mentions_line/mentions_line.scss | 2 +-
 src/components/rich_content/rich_content.jsx    | 7 +++++++
 test/unit/specs/components/rich_content.spec.js | 4 ++--
 3 files changed, 10 insertions(+), 3 deletions(-)

(limited to 'test')

diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss
index 222940c8..50eb0c27 100644
--- a/src/components/mentions_line/mentions_line.scss
+++ b/src/components/mentions_line/mentions_line.scss
@@ -4,7 +4,7 @@
     color: var(--link);
   }
 
-  .mention-link:not(:last-child) {
+  .mention-link {
     margin-right: 0.25em;
   }
 }
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index 1353541f..8ab007e3 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -121,6 +121,13 @@ export default Vue.component('RichContent', {
           // in MentionsLine
           return currentMentions !== null ? item.trim() : item
         }
+        // We add space with mentionsLine, otherwise non-text elements will
+        // stick to them.
+        if (currentMentions !== null) {
+          // single whitespace trim
+          item = item[0].match(/\s/) ? item.slice(1) : item
+        }
+
         currentMentions = null
         if (item.includes(':')) {
           item = ['', processTextForEmoji(
diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index b29edeab..c84df34b 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -59,7 +59,7 @@ describe('RichContent', () => {
   it('replaces mention with mentionsline', () => {
     const html = p(
       makeMention('John'),
-      ' how are you doing today?'
+      '  how are you doing today?' // also testing single-trimming function
     )
     const wrapper = shallowMount(RichContent, {
       localVue,
@@ -74,7 +74,7 @@ describe('RichContent', () => {
 
     expect(wrapper.html()).to.eql(compwrap(p(
       mentionsLine(1),
-      ' how are you doing today?'
+      ' how are you doing today?' // space removed to compensate for <ML> padding
     )))
   })
 
-- 
cgit v1.2.3-70-g09d2


From c3576211cbbf9ada109c0869dcf4e4fc7b3ef925 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 18 Aug 2021 21:17:51 +0300
Subject: fix tests

---
 test/unit/specs/components/rich_content.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'test')

diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index c84df34b..b29edeab 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -59,7 +59,7 @@ describe('RichContent', () => {
   it('replaces mention with mentionsline', () => {
     const html = p(
       makeMention('John'),
-      '  how are you doing today?' // also testing single-trimming function
+      ' how are you doing today?'
     )
     const wrapper = shallowMount(RichContent, {
       localVue,
@@ -74,7 +74,7 @@ describe('RichContent', () => {
 
     expect(wrapper.html()).to.eql(compwrap(p(
       mentionsLine(1),
-      ' how are you doing today?' // space removed to compensate for <ML> padding
+      ' how are you doing today?'
     )))
   })
 
-- 
cgit v1.2.3-70-g09d2


From 39494439d359fa058079c9325efdff244a7e7890 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 23 Aug 2021 20:57:21 +0300
Subject: very minimalist hashtaglink implementation, also you can middle-click
 mentions now.

---
 src/components/hashtag_link/hashtag_link.js     | 36 +++++++++++++++++++++++++
 src/components/hashtag_link/hashtag_link.scss   |  6 +++++
 src/components/hashtag_link/hashtag_link.vue    | 19 +++++++++++++
 src/components/mention_link/mention_link.vue    |  5 ++--
 src/components/rich_content/rich_content.jsx    | 13 ++++-----
 test/unit/specs/components/rich_content.spec.js |  8 +++---
 6 files changed, 75 insertions(+), 12 deletions(-)
 create mode 100644 src/components/hashtag_link/hashtag_link.js
 create mode 100644 src/components/hashtag_link/hashtag_link.scss
 create mode 100644 src/components/hashtag_link/hashtag_link.vue

(limited to 'test')

diff --git a/src/components/hashtag_link/hashtag_link.js b/src/components/hashtag_link/hashtag_link.js
new file mode 100644
index 00000000..a2433c2a
--- /dev/null
+++ b/src/components/hashtag_link/hashtag_link.js
@@ -0,0 +1,36 @@
+import { extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
+
+const HashtagLink = {
+  name: 'HashtagLink',
+  props: {
+    url: {
+      required: true,
+      type: String
+    },
+    content: {
+      required: true,
+      type: String
+    },
+    tag: {
+      required: false,
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    onClick () {
+      const tag = this.tag || extractTagFromUrl(this.url)
+      if (tag) {
+        const link = this.generateTagLink(tag)
+        this.$router.push(link)
+      } else {
+        window.open(this.url, '_blank')
+      }
+    },
+    generateTagLink (tag) {
+      return `/tag/${tag}`
+    }
+  }
+}
+
+export default HashtagLink
diff --git a/src/components/hashtag_link/hashtag_link.scss b/src/components/hashtag_link/hashtag_link.scss
new file mode 100644
index 00000000..78e8fb99
--- /dev/null
+++ b/src/components/hashtag_link/hashtag_link.scss
@@ -0,0 +1,6 @@
+.HashtagLink {
+  position: relative;
+  white-space: normal;
+  display: inline-block;
+  color: var(--link);
+}
diff --git a/src/components/hashtag_link/hashtag_link.vue b/src/components/hashtag_link/hashtag_link.vue
new file mode 100644
index 00000000..918ed26b
--- /dev/null
+++ b/src/components/hashtag_link/hashtag_link.vue
@@ -0,0 +1,19 @@
+<template>
+  <span
+    class="HashtagLink"
+  >
+    <!-- eslint-disable vue/no-v-html -->
+    <a
+      :href="url"
+      class="original"
+      target="_blank"
+      @click.prevent="onClick"
+      v-html="content"
+    />
+    <!-- eslint-enable vue/no-v-html -->
+  </span>
+</template>
+
+<script src="./hashtag_link.js"/>
+
+<style lang="scss" src="./hashtag_link.scss"/>
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 625eb727..a22b486c 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -17,8 +17,9 @@
       :style="style"
       :class="classnames"
     >
-      <button
+      <a
         class="short button-unstyled"
+        :href="url"
         @click.prevent="onClick"
       >
         <!-- eslint-disable vue/no-v-html -->
@@ -35,7 +36,7 @@
           class="you"
         >{{ $t('status.you') }}</span>
         <!-- eslint-enable vue/no-v-html -->
-      </button>
+      </a>
       <span
         v-if="userName !== userNameFull"
         class="full popover-default"
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index d98947df..f52b0370 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -5,6 +5,7 @@ import { convertHtmlToTree } from 'src/services/html_converter/html_tree_convert
 import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js'
 import StillImage from 'src/components/still-image/still-image.vue'
 import MentionsLine, { MENTIONS_LIMIT } from 'src/components/mentions_line/mentions_line.vue'
+import HashtagLink from 'src/components/hashtag_link/hashtag_link.vue'
 
 import './rich_content.scss'
 
@@ -83,13 +84,10 @@ export default Vue.component('RichContent', {
     const renderHashtag = (attrs, children, encounteredTextReverse) => {
       const linkData = getLinkData(attrs, children, tagsIndex++)
       writtenTags.push(linkData)
-      attrs.target = '_blank'
       if (!encounteredTextReverse) {
         lastTags.push(linkData)
       }
-      return <a {...{ attrs }}>
-        { children.map(processItem) }
-      </a>
+      return <HashtagLink {...{ props: linkData }}/>
     }
 
     const renderMention = (attrs, children) => {
@@ -211,7 +209,10 @@ export default Vue.component('RichContent', {
             if (!this.handleLinks) break
             const attrs = getAttrs(opener)
             // should only be this
-            if (attrs['class'] && attrs['class'].includes('hashtag')) {
+            if (
+              (attrs['class'] && attrs['class'].includes('hashtag')) || // Pleroma style
+                (attrs['rel'] === 'tag') // Mastodon style
+            ) {
               return renderHashtag(attrs, children, encounteredTextReverse)
             } else {
               attrs.target = '_blank'
@@ -275,7 +276,7 @@ const getLinkData = (attrs, children, index) => {
   return {
     index,
     url: attrs.href,
-    hashtag: attrs['data-tag'],
+    tag: attrs['data-tag'],
     content: flattenDeep(children).join(''),
     textContent
   }
diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index b29edeab..f6c478a9 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -300,10 +300,10 @@ describe('RichContent', () => {
       '<p>',
       '<a href="http://macrochan.org/images/N/H/NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg" target="_blank">',
       'NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg</a>',
-      ' <a class="hashtag" data-tag="nou" href="https://shitposter.club/tag/nou" target="_blank">',
-      '#nou</a>',
-      ' <a class="hashtag" data-tag="screencap" href="https://shitposter.club/tag/screencap" target="_blank">',
-      '#screencap</a>',
+      ' <hashtaglink-stub url="https://shitposter.club/tag/nou" content="#nou" tag="nou">',
+      '</hashtaglink-stub>',
+      ' <hashtaglink-stub url="https://shitposter.club/tag/screencap" content="#screencap" tag="screencap">',
+      '</hashtaglink-stub>',
       ' </p>'
     ].join('')
 
-- 
cgit v1.2.3-70-g09d2