social/src/components/MessageContent.js

import Vue from 'vue'
import Emoji from './Emoji.vue'

export default Vue.component('MessageContent', {
	props: {
		item: {
			type: Object,
			required: true,
		},
	},
	render(createElement) {
		return formatMessage(createElement, this.item)
	},
})

/**
 * Transform the Status into Vue elements
 *
 * filters out all tags except <br />, <p>, <span> and <a>.
 *
 * Links that are hashtags or mentions are rewritten to link to the local profile or hashtag page
 * All external links have `rel="nofollow noopener noreferrer"` and `target="_blank"` set.
 *
 * All attributes other than `href` for links are stripped from the content
 *
 * @param {Function} createElement
 * @param {import('../types/Mastodon').Status} item
 */
export function formatMessage(createElement, item) {
	if (!item.tags) {
		item.tags = []
	}
	const parser = new DOMParser()
	const dom = parser.parseFromString(`<div id="rootwrapper">${item.content}</div>`, 'text/html')
	const element = dom.getElementById('rootwrapper')
	const cleaned = cleanCopy(createElement, element, item)
	return cleaned
}

/**
 *
 * @param {Function} createElement
 * @param {HTMLElement} node
 * @param {import('../types/Mastodon').Status} context
 */
function domToVue(createElement, node, context) {
	switch (node.tagName) {
	case 'P':
		return cleanCopy(createElement, node, context)
	case 'BR':
		return cleanCopy(createElement, node, context)
	case 'SPAN':
		return cleanCopy(createElement, node, context)
	case 'A':
		// @ts-ignore - if tagName === 'A' then node is instance of HTMLLinkElement
		return cleanLink(createElement, node, context)
	default:
		return transformText(createElement, node.textContent ?? '')
	}
}

const mentionRegex = /(\W|^)((@\w+)@[\w.-_]+)/i
const hashTagRegex = /(\W|^)(#\w+)/i

/**
 *
 * @param {Function} createElement
 * @param {string} text
 */
function transformText(createElement, text) {
	return transformTextRegex(text, [
		{
			regex: mentionRegex,
			onMatch: match => [
				match[1],
				createElement(
					'router-link',
					{
						props: {
							to: {
								name: 'profile',
								params: { account: match[2].slice(1) },
							},
						},
					},
					[match[3]]
				),
			],
		},
		{
			regex: hashTagRegex,
			onMatch: match => [
				match[1],
				createElement(
					'router-link',
					{
						props: {
							to: {
								name: 'tags',
								params: { tag: match[2].slice(1) },
							},
						},
					},
					[match[2]]
				),
			],
		},
		{
			regex: emojiRe,
			onMatch: match => createElement(
				Emoji,
				{
					props: {
						emoji: match[0],
					},
				}
			),
		},
	])
}

/**
 * copy a node without any attributes and cleaning all children
 *
 * @param {Function} createElement
 * @param {HTMLElement} node
 * @param {import('../types/Mastodon').Status} context
 */
function cleanCopy(createElement, node, context) {
	const children = Array.from(node.childNodes).map(node => domToVue(createElement, node, context))
	return createElement(node.tagName, children)
}

/**
 *
 * @param {Function} createElement
 * @param {HTMLLinkElement} node
 * @param {import('../types/Mastodon').Status} context
 */
function cleanLink(createElement, node, context) {
	const type = getLinkType(node.className)
	const attributes = {}
	const tag = matchMention(context.mentions, node.getAttribute('href') ?? '', node.textContent ?? '')

	switch (type) {
	case 'mention':
		if (tag) {
			attributes.rel = 'nofollow noopener noreferrer'
			attributes.target = '_blank'
			attributes.href = node.getAttribute('href')
			attributes.title = tag.name

			return createElement('a', { attrs: attributes }, [transformText(createElement, node.textContent)])
		} else {
			return transformText(createElement, node.textContent)
		}
	case 'hashtag':
		return createElement(
			'router-link',
			{
				props: {
					to: {
						name: 'tags',
						params: { tag: node.textContent?.slice(1) },
					},
				},
			},
			[node.textContent]
		)
	default:
		attributes.rel = 'nofollow noopener noreferrer'
		attributes.target = '_blank'
		attributes.href = node.getAttribute('href')

		return createElement('a', { attrs: attributes }, [transformText(createElement, node.textContent)])
	}
}

/**
 *
 * @param {string} className
 */
function getLinkType(className) {
	const parts = className.split(' ')
	if (parts.includes('hashtag')) {
		return 'hashtag'
	}
	if (parts.includes('mention')) {
		return 'mention'
	}
	return ''
}

/**
 *
 * @param {Array} tags
 * @param {string} mentionHref
 * @param {string} mentionText
 */
function matchMention(tags, mentionHref, mentionText) {
	const mentionUrl = new URL(mentionHref)
	for (const tag of tags) {
		if (mentionText === tag.name) {
			return tag
		}

		// since the mention link href is not always equal to the href in the tag
		// we instead match the server and username separate
		const tagUrl = new URL(tag.href)
		if (tagUrl.host === mentionUrl.host) {
			const [, name] = tag.name.split('@')
			if (name === mentionText || '@' + name === mentionText) {
				return tag
			}
		}
	}
	return null
}

// RegExp based on emoji's official Unicode standards
// http://www.unicode.org/Public/UNIDATA/EmojiSources.txt
const emojiRe = /(?:\ud83d\udc68\ud83c\udffb\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffc-\udfff]|\ud83d\udc68\ud83c\udffc\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb\udffd-\udfff]|\ud83d\udc68\ud83c\udffd\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb\udffc\udffe\udfff]|\ud83d\udc68\ud83c\udffe\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb-\udffd\udfff]|\ud83d\udc68\ud83c\udfff\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb-\udffe]|\ud83d\udc69\ud83c\udffb\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffc-\udfff]|\ud83d\udc69\ud83c\udffb\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffc-\udfff]|\ud83d\udc69\ud83c\udffc\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb\udffd-\udfff]|\ud83d\udc69\ud83c\udffc\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffb\udffd-\udfff]|\ud83d\udc69\ud83c\udffd\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb\udffc\udffe\udfff]|\ud83d\udc69\ud83c\udffd\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffb\udffc\udffe\udfff]|\ud83d\udc69\ud83c\udffe\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb-\udffd\udfff]|\ud83d\udc69\ud83c\udffe\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffb-\udffd\udfff]|\ud83d\udc69\ud83c\udfff\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb-\udffe]|\ud83d\udc69\ud83c\udfff\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffb-\udffe]|\ud83e\uddd1\ud83c\udffb\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udffc\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udffd\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udffe\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udfff\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83e\uddd1\u200d\ud83e\udd1d\u200d\ud83e\uddd1|\ud83d\udc6b\ud83c[\udffb-\udfff]|\ud83d\udc6c\ud83c[\udffb-\udfff]|\ud83d\udc6d\ud83c[\udffb-\udfff]|\ud83d[\udc6b-\udc6d])|(?:\ud83d[\udc68\udc69]|\ud83e\uddd1)(?:\ud83c[\udffb-\udfff])?\u200d(?:\u2695\ufe0f|\u2696\ufe0f|\u2708\ufe0f|\ud83c[\udf3e\udf73\udf7c\udf84\udf93\udfa4\udfa8\udfeb\udfed]|\ud83d[\udcbb\udcbc\udd27\udd2c\ude80\ude92]|\ud83e[\uddaf-\uddb3\uddbc\uddbd])|(?:\ud83c[\udfcb\udfcc]|\ud83d[\udd74\udd75]|\u26f9)((?:\ud83c[\udffb-\udfff]|\ufe0f)\u200d[\u2640\u2642]\ufe0f)|(?:\ud83c[\udfc3\udfc4\udfca]|\ud83d[\udc6e\udc70\udc71\udc73\udc77\udc81\udc82\udc86\udc87\ude45-\ude47\ude4b\ude4d\ude4e\udea3\udeb4-\udeb6]|\ud83e[\udd26\udd35\udd37-\udd39\udd3d\udd3e\uddb8\uddb9\uddcd-\uddcf\uddd6-\udddd])(?:\ud83c[\udffb-\udfff])?\u200d[\u2640\u2642]\ufe0f|(?:\ud83d\udc68\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68|\ud83d\udc68\u200d\ud83d\udc68\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc68\u200d\ud83d\udc68\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc69\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d[\udc68\udc69]|\ud83d\udc69\u200d\ud83d\udc69\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc69\u200d\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\u2764\ufe0f\u200d\ud83d\udc68|\ud83d\udc68\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc68\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\ud83d\udc68\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d[\udc66\udc67]|\ud83d\udc69\u200d\u2764\ufe0f\u200d\ud83d[\udc68\udc69]|\ud83d\udc69\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc69\u200d\ud83d\udc69\u200d\ud83d[\udc66\udc67]|\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f|\ud83c\udff3\ufe0f\u200d\ud83c\udf08|\ud83c\udff4\u200d\u2620\ufe0f|\ud83d\udc15\u200d\ud83e\uddba|\ud83d\udc3b\u200d\u2744\ufe0f|\ud83d\udc41\u200d\ud83d\udde8|\ud83d\udc68\u200d\ud83d[\udc66\udc67]|\ud83d\udc69\u200d\ud83d[\udc66\udc67]|\ud83d\udc6f\u200d\u2640\ufe0f|\ud83d\udc6f\u200d\u2642\ufe0f|\ud83e\udd3c\u200d\u2640\ufe0f|\ud83e\udd3c\u200d\u2642\ufe0f|\ud83e\uddde\u200d\u2640\ufe0f|\ud83e\uddde\u200d\u2642\ufe0f|\ud83e\udddf\u200d\u264

/**
 *
 * @param {string} text
 * @param {Array} handlers
 */
function transformTextRegex(text, handlers) {
	const parts = []

	while (text.length > 0) {
		const result = handlers.reduce((bestMatch, handler) => {
			let match
			if ((match = handler.regex.exec(text))) {
				if (bestMatch.index === -1 || match.index < bestMatch.index) {
					return {
						index: match.index,
						match,
						onMatch: handler.onMatch,
					}
				}
			}
			return bestMatch
		}, { index: -1 })

		if (result.index !== -1) {
			if (result.index > 0) {
				parts.push(text.slice(0, result.index))
			}

			parts.push(result.onMatch(result.match))
			text = text.slice(result.index + result.match[0].length)
		} else {
			parts.push(text)
			return parts
		}
	}

	return parts
}