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
|
case 'a': // replace mentions with MentionLink
|
||||||
if (!this.handleLinks) break
|
if (!this.handleLinks) break
|
||||||
if (attrs['class'] && attrs['class'].includes('mention')) {
|
if (attrs['class'] && attrs['class'].includes('mention')) {
|
||||||
|
// Handling mentions here
|
||||||
return renderMention(attrs, children, encounteredText)
|
return renderMention(attrs, children, encounteredText)
|
||||||
} else if (attrs['class'] && attrs['class'].includes('hashtag')) {
|
} else {
|
||||||
|
// Everything else will be handled in reverse pass
|
||||||
encounteredText = true
|
encounteredText = true
|
||||||
return item // We'll handle it later
|
return item // We'll handle it later
|
||||||
} else {
|
|
||||||
attrs.target = '_blank'
|
|
||||||
return <a {...{ attrs }}>
|
|
||||||
{ children.map(processItem) }
|
|
||||||
</a>
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (children !== undefined) {
|
if (children !== undefined) {
|
||||||
return [opener, children.map(processItem), closer]
|
return [opener, children.map(processItem), closer]
|
||||||
} else {
|
} else {
|
||||||
|
@ -203,16 +201,28 @@ export default Vue.component('RichContent', {
|
||||||
// should only be this
|
// should only be this
|
||||||
if (attrs['class'] && attrs['class'].includes('hashtag')) {
|
if (attrs['class'] && attrs['class'].includes('hashtag')) {
|
||||||
return renderHashtag(attrs, children, encounteredTextReverse)
|
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 '':
|
case '':
|
||||||
return [...children].reverse().map(processItemReverse).reverse()
|
return [...children].reverse().map(processItemReverse).reverse()
|
||||||
}
|
}
|
||||||
|
|
||||||
// Render tag as is
|
// Render tag as is
|
||||||
if (children !== undefined) {
|
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) }}>
|
return <Tag {...{ attrs: getAttrs(opener) }}>
|
||||||
{ Array.isArray(children) ? [...children].reverse().map(processItemReverse).reverse() : children }
|
{ newChildren }
|
||||||
</Tag>
|
</Tag>
|
||||||
} else {
|
} else {
|
||||||
return <Tag/>
|
return <Tag/>
|
||||||
|
|
|
@ -639,4 +639,48 @@ describe('RichContent', () => {
|
||||||
|
|
||||||
expect(wrapper.html()).to.eql(compwrap(expected))
|
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