fixed "invisible" spans inside links

This commit is contained in:
Henry Jameson 2021-06-16 01:20:20 +03:00
parent 4aac0125e5
commit ad3a2fd4e5
2 changed files with 62 additions and 8 deletions

View File

@ -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/>

View File

@ -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))
})
})