hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'better-still-emoji' into shigusegubu

Browse source 
* better-still-emoji:
  added tests just in case
  fixed "invisible" spans inside links
This commit is contained in:
Henry Jameson 2021-06-16 01:44:50 +03:00
commit ddce5e15f2
2 changed files with 163 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/rich_content/rich_content.jsx
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/>

146
test/unit/specs/components/rich_content.spec.js
View file

@ -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()
@ -639,4 +639,148 @@ describe('RichContent', () => {
expect(wrapper.html()).to.eql(compwrap(expected))
})
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>',
'<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))
})
})