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: [PATCH 1/2] fixed "invisible" spans inside links

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

diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index c8e1af9c3..ce562f137 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 82f1ae89f..be51bbd16 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))
+  })
 })

From 1427df3442a7fe898db7c7138fc4b19498279149 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 16 Jun 2021 01:44:29 +0300
Subject: [PATCH 2/2] added tests just in case

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

diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index be51bbd16..f14b979dd 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">'
+        '<mentionslink-stub url="lol" content="',
+        '<span>',
+        'https://</span>',
+        '<span>',
+        'lol.tld/</span>',
+        '<span>',
+        '</span>',
+        '">',
+        '</mentionlink-stub>',
+        '">',
+        '</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>',