commit: ad3a2fd4e5a7811107790cfba0cd83e33d2f4115
parent 4aac0125e591c6f2ef51bad475e79802be51f068
Author: Henry Jameson <me@hjkos.com>
Date: Wed, 16 Jun 2021 01:20:20 +0300
fixed "invisible" spans inside links
Diffstat:
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
@@ -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
@@ -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))
+ })
})