fixed "invisible" spans inside links
This commit is contained in:
parent
4aac0125e5
commit
ad3a2fd4e5
2 changed files with 62 additions and 8 deletions
|
@ -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/>
|
||||
|
|
|
@ -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))
|
||||
})
|
||||
})
|
||||
|
|
Loading…
Reference in a new issue