No OneTemporary
Actions

Size

29 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
	index 8a5758afa5..7881e365cc 100644
	--- a/src/components/rich_content/rich_content.jsx
	+++ b/src/components/rich_content/rich_content.jsx
	@@ -1,333 +1,335 @@
	import { unescape, flattenDeep } from 'lodash'
	import { getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/utility.service.js'
	import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js'
	import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js'
	import StillImage from 'src/components/still-image/still-image.vue'
	import MentionsLine, { MENTIONS_LIMIT } from 'src/components/mentions_line/mentions_line.vue'
	import HashtagLink from 'src/components/hashtag_link/hashtag_link.vue'

	import './rich_content.scss'

	/**
	* RichContent, The Über-powered component for rendering Post HTML.
	*
	* This takes post HTML and does multiple things to it:
	* - Groups all mentions into <MentionsLine>, this affects all mentions regardles
	* of where they are (beginning/middle/end), even single mentions are converted
	* to a <MentionsLine> containing single <MentionLink>.
	* - Replaces emoji shortcodes with <StillImage>'d images.
	*
	* There are two problems with this component's architecture:
	* 1. Parsing HTML and rendering are inseparable. Attempts to separate the two
	* proven to be a massive overcomplication due to amount of things done here.
	* 2. We need to output both render and some extra data, which seems to be imp-
	* possible in vue. Current solution is to emit 'parseReady' event when parsing
	* is done within render() function.
	*
	* Apart from that one small hiccup with emit in render this _should_ be vue3-ready
	*/
	export default {
	name: 'RichContent',
	components: {
	MentionsLine,
	HashtagLink
	},
	props: {
	// Original html content
	html: {
	required: true,
	type: String
	},
	attentions: {
	required: false,
	default: () => []
	},
	// Emoji object, as in status.emojis, note the "s" at the end...
	emoji: {
	required: true,
	type: Array
	},
	// Whether to handle links or not (posts: yes, everything else: no)
	handleLinks: {
	required: false,
	type: Boolean,
	default: false
	},
	// Meme arrows
	greentext: {
	required: false,
	type: Boolean,
	default: false
	}
	},
	// NEVER EVER TOUCH DATA INSIDE RENDER
	render () {
	// Pre-process HTML
	const { newHtml: html } = preProcessPerLine(this.html, this.greentext)
	let currentMentions = null // Current chain of mentions, we group all mentions together
	// This is used to recover spacing removed when parsing mentions
	let lastSpacing = ''

	const lastTags = [] // Tags that appear at the end of post body
	const writtenMentions = [] // All mentions that appear in post body
	const invisibleMentions = [] // All mentions that go beyond the limiter (see MentionsLine)
	// to collapse too many mentions in a row
	const writtenTags = [] // All tags that appear in post body
	// unique index for vue "tag" property
	let mentionIndex = 0
	let tagsIndex = 0

	const renderImage = (tag) => {
	return <StillImage
	{...getAttrs(tag)}
	class="img"
	/>
	}

	const renderHashtag = (attrs, children, encounteredTextReverse) => {
	const { index, ...linkData } = getLinkData(attrs, children, tagsIndex++)
	writtenTags.push(linkData)
	if (!encounteredTextReverse) {
	lastTags.push(linkData)
	}
	const { url, tag, content } = linkData
	return <HashtagLink url={url} tag={tag} content={content}/>
	}

	const renderMention = (attrs, children) => {
	const linkData = getLinkData(attrs, children, mentionIndex++)
	linkData.notifying = this.attentions.some(a => a.statusnet_profile_url === linkData.url)
	writtenMentions.push(linkData)
	if (currentMentions === null) {
	currentMentions = []
	}
	currentMentions.push(linkData)
	if (currentMentions.length > MENTIONS_LIMIT) {
	invisibleMentions.push(linkData)
	}
	if (currentMentions.length === 1) {
	return <MentionsLine mentions={ currentMentions } />
	} else {
	return ''
	}
	}

	// Processor to use with html_tree_converter
	const processItem = (item, index, array, what) => {
	// Handle text nodes - just add emoji
	if (typeof item === 'string') {
	const emptyText = item.trim() === ''
	if (item.includes('\n')) {
	currentMentions = null
	}
	if (emptyText) {
	// don't include spaces when processing mentions - we'll include them
	// in MentionsLine
	lastSpacing = item
	// Don't remove last space in a container (fixes poast mentions)
	return (index !== array.length - 1) && (currentMentions !== null) ? item.trim() : item
	}

	currentMentions = null
	if (item.includes(':')) {
	item = ['', processTextForEmoji(
	item,
	this.emoji,
	({ shortcode, url }) => {
	return <StillImage
	class="emoji img"
	src={url}
	title={`:${shortcode}:`}
	alt={`:${shortcode}:`}
	/>
	}
	)]
	}
	return item
	}

	// Handle tag nodes
	if (Array.isArray(item)) {
	const [opener, children, closer] = item
	const Tag = getTagName(opener)
	+ const fullAttrs = getAttrs(opener, () => true)
	const attrs = getAttrs(opener)
	const previouslyMentions = currentMentions !== null
	/* During grouping of mentions we trim all the empty text elements
	* This padding is added to recover last space removed in case
	* we have a tag right next to mentions
	*/
	const mentionsLinePadding =
	// Padding is only needed if we just finished parsing mentions
	previouslyMentions &&
	// Don't add padding if content is string and has padding already
	!(children && typeof children[0] === 'string' && children[0].match(/^\s/))
	? lastSpacing
	: ''
	switch (Tag) {
	case 'br':
	currentMentions = null
	break
	case 'img': // replace images with StillImage
	return ['', [mentionsLinePadding, renderImage(opener)], '']
	case 'a': // replace mentions with MentionLink
	if (!this.handleLinks) break
	- if (attrs['class'] && attrs['class'].includes('mention')) {
	+ if (fullAttrs.class && fullAttrs.class.includes('mention')) {
	// Handling mentions here
	return renderMention(attrs, children)
	} else {
	currentMentions = null
	break
	}
	case 'span':
	- if (this.handleLinks && attrs.class && attrs.class.includes('h-card')) {
	+ if (this.handleLinks && fullAttrs.class && fullAttrs.class.includes('h-card')) {
	return ['', children.map(processItem), '']
	}
	}

	if (children !== undefined) {
	return [
	'',
	[
	mentionsLinePadding,
	[opener, children.map(processItem), closer]
	],
	''
	]
	} else {
	return ['', [mentionsLinePadding, item], '']
	}
	}
	}

	// Processor for back direction (for finding "last" stuff, just easier this way)
	let encounteredTextReverse = false
	const processItemReverse = (item, index, array, what) => {
	// Handle text nodes - just add emoji
	if (typeof item === 'string') {
	const emptyText = item.trim() === ''
	if (emptyText) return item
	if (!encounteredTextReverse) encounteredTextReverse = true
	return unescape(item)
	} else if (Array.isArray(item)) {
	// Handle tag nodes
	const [opener, children] = item
	const Tag = opener === '' ? '' : getTagName(opener)
	switch (Tag) {
	case 'a': { // replace mentions with MentionLink
	if (!this.handleLinks) break
	- const attrs = getAttrs(opener)
	+ const fullAttrs = getAttrs(opener, () => true)
	+ const attrs = getAttrs(opener, () => true)
	// should only be this
	if (
	- (attrs.class && attrs.class.includes('hashtag')) \|\| // Pleroma style
	- (attrs.rel === 'tag') // Mastodon style
	+ (fullAttrs.class && fullAttrs.class.includes('hashtag')) \|\| // Pleroma style
	+ (fullAttrs.rel === 'tag') // Mastodon style
	) {
	return renderHashtag(attrs, children, encounteredTextReverse)
	} else {
	attrs.target = '_blank'
	const newChildren = [...children].reverse().map(processItemReverse).reverse()

	return <a {...attrs}>
	{ newChildren }
	</a>
	}
	}
	case '':
	return [...children].reverse().map(processItemReverse).reverse()
	}

	// Render tag as is
	if (children !== undefined) {
	const newChildren = Array.isArray(children)
	? [...children].reverse().map(processItemReverse).reverse()
	: children
	return <Tag {...getAttrs(opener)}>
	{ newChildren }
	</Tag>
	} else {
	return <Tag/>
	}
	}
	return item
	}

	const pass1 = convertHtmlToTree(html).map(processItem)
	const pass2 = [...pass1].reverse().map(processItemReverse).reverse()
	// DO NOT USE SLOTS they cause a re-render feedback loop here.
	// slots updated -> rerender -> emit -> update up the tree -> rerender -> ...
	// at least until vue3?
	const result = <span class="RichContent">
	{ pass2 }
	</span>

	const event = {
	lastTags,
	writtenMentions,
	writtenTags,
	invisibleMentions
	}

	// DO NOT MOVE TO UPDATE. BAD IDEA.
	this.$emit('parseReady', event)

	return result
	}
	}

	const getLinkData = (attrs, children, index) => {
	const stripTags = (item) => {
	if (typeof item === 'string') {
	return item
	} else {
	return item[1].map(stripTags).join('')
	}
	}
	const textContent = children.map(stripTags).join('')
	return {
	index,
	url: attrs.href,
	tag: attrs['data-tag'],
	content: flattenDeep(children).join(''),
	textContent
	}
	}

	/** Pre-processing HTML
	*
	* Currently this does one thing:
	* - add green/cyantexting
	*
	* @param {String} html - raw HTML to process
	* @param {Boolean} greentext - whether to enable greentexting or not
	*/
	export const preProcessPerLine = (html, greentext) => {
	const greentextHandle = new Set(['p', 'div'])

	const lines = convertHtmlToLines(html)
	const newHtml = lines.reverse().map((item, index, array) => {
	if (!item.text) return item
	const string = item.text

	// Greentext stuff
	if (
	// Only if greentext is engaged
	greentext &&
	// Only handle p's and divs. Don't want to affect blockquotes, code etc
	item.level.every(l => greentextHandle.has(l)) &&
	// Only if line begins with '>' or '<'
	(string.includes('>') \|\| string.includes('<'))
	) {
	const cleanedString = string.replace(/<[^>]+?>/gi, '') // remove all tags
	.replace(/@\w+/gi, '') // remove mentions (even failed ones)
	.trim()
	if (cleanedString.startsWith('>')) {
	return `<span class='greentext'>${string}</span>`
	} else if (cleanedString.startsWith('<')) {
	return `<span class='cyantext'>${string}</span>`
	}
	}

	return string
	}).reverse().join('')

	return { newHtml }
	}
	diff --git a/src/services/html_converter/utility.service.js b/src/services/html_converter/utility.service.js
	index c8670cb450..f104297183 100644
	--- a/src/services/html_converter/utility.service.js
	+++ b/src/services/html_converter/utility.service.js
	@@ -1,74 +1,81 @@
	/**
	* Extract tag name from tag opener/closer.
	*
	* @param {String} tag - tag string, i.e. '<a href="...">'
	* @return {String} - tagname, i.e. "div"
	*/
	export const getTagName = (tag) => {
	const result = /(?:<\/(\w+)>\|<(\w+)\s?.*?\/?>)/gi.exec(tag)
	return result && (result[1] \|\| result[2])
	}

	/**
	* Extract attributes from tag opener.
	*
	* @param {String} tag - tag string, i.e. '<a href="...">'
	* @return {Object} - map of attributes key = attribute name, value = attribute value
	* attributes without values represented as boolean true
	*/
	export const getAttrs = (tag, filter) => {
	const innertag = tag
	.substring(1, tag.length - 1)
	.replace(new RegExp('^' + getTagName(tag)), '')
	.replace(/\/?$/, '')
	.trim()
	const attrs = Array.from(innertag.matchAll(/([a-z0-9-]+)(?:=("[^"]+?"\|'[^']+?'))?/gi))
	.map(([trash, key, value]) => [key, value])
	.map(([k, v]) => {
	if (!v) return [k, true]
	return [k, v.substring(1, v.length - 1)]
	})
	- const defaultFilter = ([k, v]) => (k.toLowerCase() !== 'class' && k.toLowerCase() !== 'style')
	+ const defaultFilter = ([k, v]) => {
	+ const attrKey = k.toLowerCase()
	+ if (attrKey === 'style') return false
	+ if (attrKey === 'class') {
	+ return v === 'greentext' \|\| v === 'cyantext'
	+ }
	+ return true
	+ }
	return Object.fromEntries(attrs.filter(filter \|\| defaultFilter))
	}

	/**
	* Finds shortcodes in text
	*
	* @param {String} text - original text to find emojis in
	* @param {{ url: String, shortcode: Sring }[]} emoji - list of shortcodes to find
	* @param {Function} processor - function to call on each encountered emoji,
	* function is passed single object containing matching emoji ({ url, shortcode })
	* return value will be inserted into resulting array instead of :shortcode:
	* @return {Array} resulting array with non-emoji parts of text and whatever {processor}
	* returned for emoji
	*/
	export const processTextForEmoji = (text, emojis, processor) => {
	const buffer = []
	let textBuffer = ''
	for (let i = 0; i < text.length; i++) {
	const char = text[i]
	if (char === ':') {
	const next = text.slice(i + 1)
	let found = false
	for (const emoji of emojis) {
	if (next.slice(0, emoji.shortcode.length + 1) === (emoji.shortcode + ':')) {
	found = emoji
	break
	}
	}
	if (found) {
	buffer.push(textBuffer)
	textBuffer = ''
	buffer.push(processor(found))
	i += found.shortcode.length + 1
	} else {
	textBuffer += char
	}
	} else {
	textBuffer += char
	}
	}
	if (textBuffer) buffer.push(textBuffer)
	return buffer
	}
	diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
	index 616df6a088..427eb5ed0e 100644
	--- a/test/unit/specs/components/rich_content.spec.js
	+++ b/test/unit/specs/components/rich_content.spec.js
	@@ -1,559 +1,572 @@
	import { mount, shallowMount } from '@vue/test-utils'
	import RichContent from 'src/components/rich_content/rich_content.jsx'

	const attentions = []
	const global = {
	mocks: {
	$store: {
	state: {},
	getters: {
	mergedConfig: () => ({
	mentionLinkShowTooltip: true
	}),
	findUserByUrl: () => null
	}
	}
	},
	stubs: {
	FAIcon: true
	}
	}

	-const makeMention = (who) => {
	+const makeMention = (who, noClass) => {
	attentions.push({ statusnet_profile_url: `https://fake.tld/@${who}` })
	- return `<span class="h-card"><a class="u-url mention" href="https://fake.tld/@${who}">@<span>${who}</span></a></span>`
	+ return noClass
	+ ? `<span><a href="https://fake.tld/@${who}">@<span>${who}</span></a></span>`
	+ : `<span class="h-card"><a class="u-url mention" href="https://fake.tld/@${who}">@<span>${who}</span></a></span>`
	}
	const p = (...data) => `<p>${data.join('')}</p>`
	const compwrap = (...data) => `<span class="RichContent">${data.join('')}</span>`
	const mentionsLine = (times) => [
	'<mentions-line-stub mentions="',
	new Array(times).fill('[object Object]').join(','),
	'"></mentions-line-stub>'
	].join('')

	describe('RichContent', () => {
	it('renders simple post without exploding', () => {
	const html = p('Hello world!')
	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html
	}
	})

	expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(html))
	})

	it('unescapes everything as needed', () => {
	const html = [
	p('Testing 'em all'),
	'Testing 'em all'
	].join('')
	const expected = [
	p('Testing \'em all'),
	'Testing \'em all'
	].join('')
	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html
	}
	})

	expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
	})

	it('replaces mention with mentionsline', () => {
	const html = p(
	makeMention('John'),
	' how are you doing today?'
	)
	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html
	}
	})

	expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(p(
	mentionsLine(1),
	' how are you doing today?'
	)))
	})

	it('replaces mentions at the end of the hellpost', () => {
	const html = [
	p('How are you doing today, fine gentlemen?'),
	p(
	makeMention('John'),
	makeMention('Josh'),
	makeMention('Jeremy')
	)
	].join('')
	const expected = [
	p(
	'How are you doing today, fine gentlemen?'
	),
	// TODO fix this extra line somehow?
	p(
	'<mentions-line-stub mentions="',
	'[object Object],',
	'[object Object],',
	'[object Object]',
	'"></mentions-line-stub>'
	)
	].join('')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html
	}
	})

	expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
	})

	it('Does not touch links if link handling is disabled', () => {
	const html = [
	[
	makeMention('Jack'),
	'let\'s meet up with ',
	makeMention('Janet')
	].join(''),
	[
	makeMention('John'),
	makeMention('Josh'), makeMention('Jeremy')
	].join('')
	].join('\n')
	+ const strippedHtml = [
	+ [
	+ makeMention('Jack', true),
	+ 'let\'s meet up with ',
	+ makeMention('Janet', true)
	+ ].join(''),
	+ [
	+ makeMention('John', true),
	+ makeMention('Josh', true), makeMention('Jeremy', true)
	+ ].join('')
	+ ].join('\n')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: false,
	greentext: true,
	emoji: [],
	html
	}
	})

	- expect(wrapper.html()).to.eql(compwrap(html))
	+ expect(wrapper.html()).to.eql(compwrap(strippedHtml))
	})

	it('Adds greentext and cyantext to the post', () => {
	const html = [
	'>preordering videogames',
	'>any year'
	].join('\n')
	const expected = [
	'<span class="greentext">>preordering videogames</span>',
	'<span class="greentext">>any year</span>'
	].join('\n')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: false,
	greentext: true,
	emoji: [],
	html
	}
	})

	expect(wrapper.html()).to.eql(compwrap(expected))
	})

	it('Does not add greentext and cyantext if setting is set to false', () => {
	const html = [
	'>preordering videogames',
	'>any year'
	].join('\n')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: false,
	greentext: false,
	emoji: [],
	html
	}
	})

	expect(wrapper.html()).to.eql(compwrap(html))
	})

	it('Adds emoji to post', () => {
	const html = p('Ebin :DDDD :spurdo:')
	const expected = p(
	'Ebin :DDDD ',
	'<anonymous-stub src="about:blank" alt=":spurdo:" class="emoji img" title=":spurdo:"></anonymous-stub>'
	)

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: false,
	greentext: false,
	emoji: [{ url: 'about:blank', shortcode: 'spurdo' }],
	html
	}
	})

	expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
	})

	it('Doesn\'t add nonexistent emoji to post', () => {
	const html = p('Lol :lol:')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: false,
	greentext: false,
	emoji: [],
	html
	}
	})

	expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(html))
	})

	it('Greentext + last mentions', () => {
	const html = [
	'>quote',
	makeMention('lol'),
	'>quote',
	'>quote'
	].join('\n')
	const expected = [
	'<span class="greentext">>quote</span>',
	mentionsLine(1),
	'<span class="greentext">>quote</span>',
	'<span class="greentext">>quote</span>'
	].join('\n')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html
	}
	})

	expect(wrapper.html()).to.eql(compwrap(expected))
	})

	it('One buggy example', () => {
	const html = [
	'Bruh',
	'Bruh',
	[
	makeMention('foo'),
	makeMention('bar'),
	makeMention('baz')
	].join(''),
	'Bruh'
	].join('<br>')
	const expected = [
	'Bruh',
	'Bruh',
	mentionsLine(3),
	'Bruh'
	].join('<br>')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html
	}
	})

	expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
	})

	it('buggy example/hashtags', () => {
	const html = [
	'<p>',
	'<a href="http://macrochan.org/images/N/H/NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg">',
	'NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg</a>',
	' <a class="hashtag" data-tag="nou" href="https://shitposter.club/tag/nou">',
	'#nou</a>',
	' <a class="hashtag" data-tag="screencap" href="https://shitposter.club/tag/screencap">',
	'#screencap</a>',
	' </p>'
	].join('')
	const expected = [
	'<p>',
	'<a href="http://macrochan.org/images/N/H/NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg" target="_blank">',
	'NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg</a>',
	' <hashtag-link-stub url="https://shitposter.club/tag/nou" content="#nou" tag="nou">',
	'</hashtag-link-stub>',
	' <hashtag-link-stub url="https://shitposter.club/tag/screencap" content="#screencap" tag="screencap">',
	'</hashtag-link-stub>',
	' </p>'
	].join('')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html
	}
	})

	expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
	})

	it('rich contents of a mention are handled properly', () => {
	attentions.push({ statusnet_profile_url: 'lol' })
	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">',
	'<span class="MentionLink mention-link">',
	'<a href="lol" class="original" target="_blank">',
	'<span>',
	'https://</span>',
	'<span>',
	'lol.tld/</span>',
	'<span>',
	'</span>',
	'</a>',
	'</span>',
	'</span>'
	),
	p(
	'Testing'
	)
	].join('')

	const wrapper = mount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html
	}
	})

	expect(wrapper.html().replace(/\n/g, '').replace(/<!--.*?-->/g, '')).to.eql(compwrap(expected))
	})

	it('rich contents of nested mentions are handled properly', () => {
	attentions.push({ statusnet_profile_url: 'lol' })
	const html = [
	'<span class="poast-style">',
	'<a href="lol" class="mention">',
	'<span>',
	'https://</span>',
	'<span>',
	'lol.tld/</span>',
	'<span>',
	'</span>',
	'</a>',
	' ',
	'<a href="lol" class="mention">',
	'<span>',
	'https://</span>',
	'<span>',
	'lol.tld/</span>',
	'<span>',
	'</span>',
	'</a>',
	' ',
	'</span>',
	'Testing'
	].join('')
	const expected = [
	- '<span class="poast-style">',
	+ '<span>',
	'<span class="MentionsLine">',
	'<span class="MentionLink mention-link">',
	'<a href="lol" class="original" target="_blank">',
	'<span>',
	'https://</span>',
	'<span>',
	'lol.tld/</span>',
	'<span>',
	'</span>',
	'</a>',
	'</span>',
	'<span class="MentionLink mention-link">',
	'<a href="lol" class="original" target="_blank">',
	'<span>',
	'https://</span>',
	'<span>',
	'lol.tld/</span>',
	'<span>',
	'</span>',
	'</a>',
	'</span>',
	'</span>',
	' ',
	'</span>',
	'Testing'
	].join('')

	const wrapper = mount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html
	}
	})

	expect(wrapper.html().replace(/\n/g, '').replace(/<!--.*?-->/g, '')).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, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html
	}
	})

	expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
	})

	it.skip('[INFORMATIVE] Performance testing, 10 000 simple posts', () => {
	const amount = 20

	const onePost = p(
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	' i just landed in l a where are you'
	)

	const TestComponent = {
	template: `
	<div v-if="!vhtml">
	${new Array(amount).fill(`<RichContent html="${onePost}" :greentext="true" :handleLinks="handeLinks" :emoji="[]" :attentions="attentions"/>`)}
	</div>
	<div v-else="vhtml">
	${new Array(amount).fill(`<div v-html="${onePost}"/>`)}
	</div>
	`,
	props: ['handleLinks', 'attentions', 'vhtml']
	}
	console.log(1)

	const ptest = (handleLinks, vhtml) => {
	const t0 = performance.now()

	const wrapper = mount(TestComponent, {
	global,
	props: {
	attentions,
	handleLinks,
	vhtml
	}
	})

	const t1 = performance.now()

	wrapper.destroy()

	const t2 = performance.now()

	return `Mount: ${t1 - t0}ms, destroy: ${t2 - t1}ms, avg ${(t1 - t0) / amount}ms - ${(t2 - t1) / amount}ms per item`
	}

	console.log(`${amount} items with links handling:`)
	console.log(ptest(true))
	console.log(`${amount} items without links handling:`)
	console.log(ptest(false))
	console.log(`${amount} items plain v-html:`)
	console.log(ptest(false, true))
	})
	})

File Metadata

Mime Type: text/x-diff
Expires: Fri, Aug 28, 4:20 PM (15 h, 10 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1736512
Default Alt Text: (29 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions