No OneTemporary
Actions

Size

97 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
	index 3449f4bd63..e4d395fa9a 100644
	--- a/src/components/mention_link/mention_link.vue
	+++ b/src/components/mention_link/mention_link.vue
	@@ -1,57 +1,55 @@
	<template>
	<span
	class="MentionLink"
	>
	<!-- eslint-disable vue/no-v-html -->
	<a
	v-if="!user"
	href="url"
	class="original"
	v-html="content"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<span
	v-if="user"
	class="new"
	:style="style"
	:class="classnames"
	>
	<button
	class="short"
	:class="[{ '-sublime': !highlight }, oldStyle ? 'button-unstyled' : 'button-default']"
	@click.prevent="onClick"
	>
	<!-- eslint-disable vue/no-v-html -->
	<FAIcon
	size="sm"
	icon="at"
	class="at"
	/><span class="shortName"><span
	class="userName"
	v-html="userName"
	/></span>
	<span
	v-if="isYou"
	class="you"
	>{{ $t('status.you') }}</span>
	<!-- eslint-enable vue/no-v-html -->
	</button>
	<span
	v-if="userName !== userNameFull"
	class="full popover-default"
	:class="[highlightType]"
	>
	- <!-- eslint-disable vue/no-v-html -->
	<span
	class="userNameFull"
	v-text="'@' + userNameFull"
	/>
	- <!-- eslint-enable vue/no-v-html -->
	</span>
	</span>
	</span>
	</template>

	<script src="./mention_link.js"/>

	<style lang="scss" src="./mention_link.scss"/>
	diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss
	index 59f75fbb98..90d1e0a4c8 100644
	--- a/src/components/mentions_line/mentions_line.scss
	+++ b/src/components/mentions_line/mentions_line.scss
	@@ -1,16 +1,17 @@
	.MentionsLine {
	.showMoreLess {
	white-space: normal;
	+
	&.-newStyle {
	line-height: 1.5;
	font-size: inherit;
	display: inline-block;
	padding-top: 0;
	padding-bottom: 0;
	}

	&.-oldStyle {
	color: var(--link);
	}
	}
	}
	diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
	index ef15aaeba5..0aae7a558e 100644
	--- a/src/components/rich_content/rich_content.jsx
	+++ b/src/components/rich_content/rich_content.jsx
	@@ -1,321 +1,342 @@
	import Vue from 'vue'
	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 MentionLink from 'src/components/mention_link/mention_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:
	+ * - Converts mention links to <MentionLink>-s
	+ * - Removes mentions from beginning and end (hellthread style only)
	+ * - Replaces emoji shortcodes with <StillImage>'d images.
	+ *
	+ * Stuff like removing mentions from beginning and end is done so that they could
	+ * be either replaced by collapsible <MentionsLine> or moved to separate place.
	+ * 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 Vue.component('RichContent', {
	name: 'RichContent',
	props: {
	// Original html content
	html: {
	required: true,
	type: String
	},
	// 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 (h) {
	// Pre-process HTML
	const { newHtml: html, lastMentions } = preProcessPerLine(this.html, this.greentext, this.handleLinks)
	const firstMentions = [] // Mentions that appear in the beginning of post body
	const lastTags = [] // Tags that appear at the end of post body
	const writtenMentions = [] // All mentions that appear in post body
	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
	{...{ attrs: getAttrs(tag) }}
	class="img"
	/>
	}

	const renderHashtag = (attrs, children, encounteredTextReverse) => {
	const linkData = getLinkData(attrs, children, tagsIndex++)
	writtenTags.push(linkData)
	attrs.target = '_blank'
	if (!encounteredTextReverse) {
	lastTags.push(linkData)
	attrs['data-parser-last'] = true
	}
	return <a {...{ attrs }}>
	{ children.map(processItem) }
	</a>
	}

	const renderMention = (attrs, children, encounteredText) => {
	const linkData = getLinkData(attrs, children, mentionIndex++)
	writtenMentions.push(linkData)
	if (!encounteredText) {
	firstMentions.push(linkData)
	return ''
	} else {
	return <MentionLink
	url={attrs.href}
	content={flattenDeep(children).join('')}
	/>
	}
	}

	// We stop treating mentions as "first" ones when we encounter
	// non-whitespace text
	let encounteredText = false
	// 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 (emptyText) {
	return encounteredText ? item : item.trim()
	}
	let unescapedItem = unescape(item)
	if (!encounteredText) {
	unescapedItem = unescapedItem.trimStart()
	encounteredText = true
	}
	if (item.includes(':')) {
	unescapedItem = processTextForEmoji(
	unescapedItem,
	this.emoji,
	({ shortcode, url }) => {
	return <StillImage
	class="emoji img"
	src={url}
	title={`:${shortcode}:`}
	alt={`:${shortcode}:`}
	/>
	}
	)
	}
	return unescapedItem
	}

	// Handle tag nodes
	if (Array.isArray(item)) {
	const [opener, children] = item
	const Tag = getTagName(opener)
	const attrs = getAttrs(opener)
	switch (Tag) {
	case 'span': // replace images with StillImage
	if (attrs['class'] && attrs['class'].includes('lastMentions')) {
	if (firstMentions.length > 1) {
	break
	} else {
	return ''
	}
	} else {
	break
	}
	case 'img': // replace images with StillImage
	return renderImage(opener)
	case 'a': // replace mentions with MentionLink
	if (!this.handleLinks) break
	if (attrs['class'] && attrs['class'].includes('mention')) {
	return renderMention(attrs, children, encounteredText)
	} else if (attrs['class'] && attrs['class'].includes('hashtag')) {
	encounteredText = true
	return item // We'll handle it later
	} else {
	attrs.target = '_blank'
	return <a {...{ attrs }}>
	{ children.map(processItem) }
	</a>
	}
	}

	// Render tag as is
	if (children !== undefined) {
	return <Tag {...{ attrs: getAttrs(opener) }}>
	{ children.map(processItem) }
	</Tag>
	} else {
	return <Tag/>
	}
	}
	}

	// 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 item
	} else if (Array.isArray(item)) {
	// Handle tag nodes
	const [opener, children] = item
	const Tag = getTagName(opener)
	switch (Tag) {
	case 'a': // replace mentions with MentionLink
	if (!this.handleLinks) break
	const attrs = getAttrs(opener)
	// should only be this
	if (attrs['class'] && attrs['class'].includes('hashtag')) {
	return renderHashtag(attrs, children, encounteredTextReverse)
	}
	}
	}
	return item
	}

	// 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">
	{ convertHtmlToTree(html).map(processItem).reverse().map(processItemReverse).reverse() }
	</span>

	const event = {
	firstMentions,
	lastMentions,
	lastTags,
	writtenMentions,
	writtenTags
	}

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

	return result
	}
	})

	const getLinkData = (attrs, children, index) => {
	return {
	index,
	url: attrs.href,
	hashtag: attrs['data-tag'],
	content: flattenDeep(children).join('')
	}
	}

	/** Pre-processing HTML
	*
	* Currently this does two things:
	* - add green/cyantexting
	* - wrap and mark last line containing only mentions as ".lastMentionsLine" for
	* more compact hellthreads.
	*
	* @param {String} html - raw HTML to process
	* @param {Boolean} greentext - whether to enable greentexting or not
	* @param {Boolean} handleLinks - whether to handle links or not
	*/
	export const preProcessPerLine = (html, greentext, handleLinks) => {
	const lastMentions = []

	let nonEmptyIndex = 0
	const newHtml = convertHtmlToLines(html).reverse().map((item, index, array) => {
	// Going over each line in reverse to detect last mentions,
	// keeping non-text stuff as-is
	if (!item.text) return item
	const string = item.text

	// Greentext stuff
	if (greentext && (string.includes('>') \|\| string.includes('<'))) {
	const cleanedString = string.replace(/<[^>]+?>/gi, '') // remove all tags
	.replace(/@\w+/gi, '') // remove mentions (even failed ones)
	.trim()
	if (cleanedString.startsWith('>')) {
	+ nonEmptyIndex += 1
	return `<span class='greentext'>${string}</span>`
	} else if (cleanedString.startsWith('<')) {
	+ nonEmptyIndex += 1
	return `<span class='cyantext'>${string}</span>`
	}
	}

	// Converting that line part into tree
	const tree = convertHtmlToTree(string)

	// If line has loose text, i.e. text outside a mention or a tag
	// we won't touch mentions.
	let hasLooseText = false
	let hasMentions = false
	const process = (item) => {
	if (Array.isArray(item)) {
	const [opener, children, closer] = item
	const tag = getTagName(opener)
	// If we have a link we probably have mentions
	if (tag === 'a') {
	if (!handleLinks) return [opener, children, closer]
	const attrs = getAttrs(opener)
	if (attrs['class'] && attrs['class'].includes('mention')) {
	// Got mentions
	hasMentions = true
	return [opener, children, closer]
	} else {
	// Not a mention? Means we have loose text or whatever
	hasLooseText = true
	return [opener, children, closer]
	}
	} else if (tag === 'span' \|\| tag === 'p') {
	// For span and p we need to go deeper
	return [opener, [...children].map(process), closer]
	} else {
	// Everything else equals to a loose text
	hasLooseText = true
	return [opener, children, closer]
	}
	}

	if (typeof item === 'string') {
	if (item.trim() !== '') {
	// only meaningful strings are loose text
	hasLooseText = true
	}
	return item
	}
	}

	// We now processed our tree, now we need to mark line as lastMentions
	const result = [...tree].map(process)

	// Only check last (first since list is reversed) line
	if (handleLinks && hasMentions && !hasLooseText && nonEmptyIndex++ === 0) {
	let mentionIndex = 0
	const process = (item) => {
	if (Array.isArray(item)) {
	const [opener, children] = item
	const tag = getTagName(opener)
	if (tag === 'a') {
	const attrs = getAttrs(opener)
	lastMentions.push(getLinkData(attrs, children, mentionIndex++))
	} else if (children) {
	children.forEach(process)
	}
	}
	}
	result.forEach(process)
	// we DO need mentions here so that we conditionally remove them if don't
	// have first mentions
	return ['<span class="lastMentions">', flattenDeep(result).join(''), '</span>'].join('')
	} else {
	return flattenDeep(result).join('')
	}
	}).reverse().join('')

	return { newHtml, lastMentions }
	}
	diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
	index 63416e93fb..85749045ca 100644
	--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
	+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
	@@ -1,779 +1,779 @@
	import { set, delete as del } from 'vue'
	import {
	rgb2hex,
	hex2rgb,
	getContrastRatioLayers
	} from 'src/services/color_convert/color_convert.js'
	import {
	DEFAULT_SHADOWS,
	generateColors,
	generateShadows,
	generateRadii,
	generateFonts,
	composePreset,
	getThemes,
	shadows2to3,
	colors2to3
	} from 'src/services/style_setter/style_setter.js'
	import {
	newImporter,
	newExporter
	} from 'src/services/export_import/export_import.js'
	import {
	SLOT_INHERITANCE
	} from 'src/services/theme_data/pleromafe.js'
	import {
	CURRENT_VERSION,
	OPACITIES,
	getLayers,
	getOpacitySlot
	} from 'src/services/theme_data/theme_data.service.js'
	import ColorInput from 'src/components/color_input/color_input.vue'
	import RangeInput from 'src/components/range_input/range_input.vue'
	import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
	import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
	import FontControl from 'src/components/font_control/font_control.vue'
	import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import Select from 'src/components/select/select.vue'

	import Preview from './preview.vue'

	// List of color values used in v1
	const v1OnlyNames = [
	'bg',
	'fg',
	'text',
	'link',
	'cRed',
	'cGreen',
	'cBlue',
	'cOrange'
	].map(_ => _ + 'ColorLocal')

	const colorConvert = (color) => {
	if (color.startsWith('--') \|\| color === 'transparent') {
	return color
	} else {
	return hex2rgb(color)
	}
	}

	export default {
	data () {
	return {
	themeImporter: newImporter({
	validator: this.importValidator,
	onImport: this.onImport,
	onImportFailure: this.onImportFailure
	}),
	themeExporter: newExporter({
	filename: 'pleroma_theme',
	getExportedObject: () => this.exportedTheme
	}),
	availableStyles: [],
	selected: this.$store.getters.mergedConfig.theme,
	themeWarning: undefined,
	tempImportFile: undefined,
	engineVersion: 0,

	previewShadows: {},
	previewColors: {},
	previewRadii: {},
	previewFonts: {},

	shadowsInvalid: true,
	colorsInvalid: true,
	radiiInvalid: true,

	keepColor: false,
	keepShadows: false,
	keepOpacity: false,
	keepRoundness: false,
	keepFonts: false,

	...Object.keys(SLOT_INHERITANCE)
	.map(key => [key, ''])
	.reduce((acc, [key, val]) => ({ ...acc, [ key + 'ColorLocal' ]: val }), {}),

	...Object.keys(OPACITIES)
	.map(key => [key, ''])
	.reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {}),

	shadowSelected: undefined,
	shadowsLocal: {},
	fontsLocal: {},

	btnRadiusLocal: '',
	inputRadiusLocal: '',
	checkboxRadiusLocal: '',
	panelRadiusLocal: '',
	avatarRadiusLocal: '',
	avatarAltRadiusLocal: '',
	attachmentRadiusLocal: '',
	tooltipRadiusLocal: '',
	chatMessageRadiusLocal: ''
	}
	},
	created () {
	const self = this

	getThemes()
	.then((promises) => {
	return Promise.all(
	Object.entries(promises)
	.map(([k, v]) => v.then(res => [k, res]))
	)
	})
	.then(themes => themes.reduce((acc, [k, v]) => {
	if (v) {
	return {
	...acc,
	[k]: v
	}
	} else {
	return acc
	}
	}, {}))
	.then((themesComplete) => {
	self.availableStyles = themesComplete
	})
	},
	mounted () {
	this.loadThemeFromLocalStorage()
	if (typeof this.shadowSelected === 'undefined') {
	this.shadowSelected = this.shadowsAvailable[0]
	}
	},
	computed: {
	themeWarningHelp () {
	if (!this.themeWarning) return
	const t = this.$t
	const pre = 'settings.style.switcher.help.'
	const {
	origin,
	themeEngineVersion,
	type,
	noActionsPossible
	} = this.themeWarning
	if (origin === 'file') {
	// Loaded v2 theme from file
	if (themeEngineVersion === 2 && type === 'wrong_version') {
	return t(pre + 'v2_imported')
	}
	if (themeEngineVersion > CURRENT_VERSION) {
	return t(pre + 'future_version_imported') + ' ' +
	(
	noActionsPossible
	? t(pre + 'snapshot_missing')
	: t(pre + 'snapshot_present')
	)
	}
	if (themeEngineVersion < CURRENT_VERSION) {
	return t(pre + 'future_version_imported') + ' ' +
	(
	noActionsPossible
	? t(pre + 'snapshot_missing')
	: t(pre + 'snapshot_present')
	)
	}
	} else if (origin === 'localStorage') {
	if (type === 'snapshot_source_mismatch') {
	return t(pre + 'snapshot_source_mismatch')
	}
	// FE upgraded from v2
	if (themeEngineVersion === 2) {
	return t(pre + 'upgraded_from_v2')
	}
	// Admin downgraded FE
	if (themeEngineVersion > CURRENT_VERSION) {
	return t(pre + 'fe_downgraded') + ' ' +
	(
	noActionsPossible
	? t(pre + 'migration_snapshot_ok')
	: t(pre + 'migration_snapshot_gone')
	)
	}
	// Admin upgraded FE
	if (themeEngineVersion < CURRENT_VERSION) {
	return t(pre + 'fe_upgraded') + ' ' +
	(
	noActionsPossible
	? t(pre + 'migration_snapshot_ok')
	: t(pre + 'migration_snapshot_gone')
	)
	}
	}
	},
	selectedVersion () {
	return Array.isArray(this.selected) ? 1 : 2
	},
	currentColors () {
	return Object.keys(SLOT_INHERITANCE)
	.map(key => [key, this[key + 'ColorLocal']])
	.reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
	},
	currentOpacity () {
	return Object.keys(OPACITIES)
	.map(key => [key, this[key + 'OpacityLocal']])
	.reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
	},
	currentRadii () {
	return {
	btn: this.btnRadiusLocal,
	input: this.inputRadiusLocal,
	checkbox: this.checkboxRadiusLocal,
	panel: this.panelRadiusLocal,
	avatar: this.avatarRadiusLocal,
	avatarAlt: this.avatarAltRadiusLocal,
	tooltip: this.tooltipRadiusLocal,
	attachment: this.attachmentRadiusLocal,
	chatMessage: this.chatMessageRadiusLocal
	}
	},
	preview () {
	return composePreset(this.previewColors, this.previewRadii, this.previewShadows, this.previewFonts)
	},
	previewTheme () {
	if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {}, fonts: {} }
	return this.preview.theme
	},
	// This needs optimization maybe
	previewContrast () {
	try {
	if (!this.previewTheme.colors.bg) return {}
	const colors = this.previewTheme.colors
	const opacity = this.previewTheme.opacity
	if (!colors.bg) return {}
	const hints = (ratio) => ({
	text: ratio.toPrecision(3) + ':1',
	// AA level, AAA level
	aa: ratio >= 4.5,
	aaa: ratio >= 7,
	// same but for 18pt+ texts
	laa: ratio >= 3,
	laaa: ratio >= 4.5
	})
	const colorsConverted = Object.entries(colors).reduce((acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }), {})

	const ratios = Object.entries(SLOT_INHERITANCE).reduce((acc, [key, value]) => {
	const slotIsBaseText = key === 'text' \|\| key === 'link'
	const slotIsText = slotIsBaseText \|\| (
	typeof value === 'object' && value !== null && value.textColor
	)
	if (!slotIsText) return acc
	const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
	const background = variant \|\| layer
	const opacitySlot = getOpacitySlot(background)
	const textColors = [
	key,
	...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : [])
	]

	const layers = getLayers(
	layer,
	variant \|\| layer,
	opacitySlot,
	colorsConverted,
	opacity
	)

	return {
	...acc,
	...textColors.reduce((acc, textColorKey) => {
	const newKey = slotIsBaseText
	? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1)
	: textColorKey
	return {
	...acc,
	[newKey]: getContrastRatioLayers(
	colorsConverted[textColorKey],
	layers,
	colorsConverted[textColorKey]
	)
	}
	}, {})
	}
	}, {})

	return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
	} catch (e) {
	console.warn('Failure computing contrasts', e)
	}
	},
	previewRules () {
	if (!this.preview.rules) return ''
	return [
	...Object.values(this.preview.rules),
	'color: var(--text)',
	'font-family: var(--interfaceFont, sans-serif)'
	].join(';')
	},
	shadowsAvailable () {
	return Object.keys(DEFAULT_SHADOWS).sort()
	},
	currentShadowOverriden: {
	get () {
	return !!this.currentShadow
	},
	set (val) {
	if (val) {
	set(this.shadowsLocal, this.shadowSelected, this.currentShadowFallback.map(_ => Object.assign({}, _)))
	} else {
	del(this.shadowsLocal, this.shadowSelected)
	}
	}
	},
	currentShadowFallback () {
	return (this.previewTheme.shadows \|\| {})[this.shadowSelected]
	},
	currentShadow: {
	get () {
	return this.shadowsLocal[this.shadowSelected]
	},
	set (v) {
	set(this.shadowsLocal, this.shadowSelected, v)
	}
	},
	themeValid () {
	return !this.shadowsInvalid && !this.colorsInvalid && !this.radiiInvalid
	},
	exportedTheme () {
	const saveEverything = (
	!this.keepFonts &&
	!this.keepShadows &&
	!this.keepOpacity &&
	!this.keepRoundness &&
	!this.keepColor
	)

	const source = {
	themeEngineVersion: CURRENT_VERSION
	}

	if (this.keepFonts \|\| saveEverything) {
	source.fonts = this.fontsLocal
	}
	if (this.keepShadows \|\| saveEverything) {
	source.shadows = this.shadowsLocal
	}
	if (this.keepOpacity \|\| saveEverything) {
	source.opacity = this.currentOpacity
	}
	if (this.keepColor \|\| saveEverything) {
	source.colors = this.currentColors
	}
	if (this.keepRoundness \|\| saveEverything) {
	source.radii = this.currentRadii
	}

	const theme = {
	themeEngineVersion: CURRENT_VERSION,
	...this.previewTheme
	}

	return {
	// To separate from other random JSON files and possible future source formats
	_pleroma_theme_version: 2, theme, source
	}
	}
	},
	components: {
	ColorInput,
	OpacityInput,
	RangeInput,
	ContrastRatio,
	ShadowControl,
	FontControl,
	TabSwitcher,
	Preview,
	Checkbox,
	Select
	},
	methods: {
	loadTheme (
	{
	theme,
	source,
	_pleroma_theme_version: fileVersion
	},
	origin,
	forceUseSource = false
	) {
	this.dismissWarning()
	if (!source && !theme) {
	throw new Error('Can\'t load theme: empty')
	}
	const version = (origin === 'localStorage' && !theme.colors)
	? 'l1'
	: fileVersion
	const snapshotEngineVersion = (theme \|\| {}).themeEngineVersion
	const themeEngineVersion = (source \|\| {}).themeEngineVersion \|\| 2
	const versionsMatch = themeEngineVersion === CURRENT_VERSION
	const sourceSnapshotMismatch = (
	theme !== undefined &&
	source !== undefined &&
	themeEngineVersion !== snapshotEngineVersion
	)
	// Force loading of source if user requested it or if snapshot
	// is unavailable
	const forcedSourceLoad = (source && forceUseSource) \|\| !theme
	if (!(versionsMatch && !sourceSnapshotMismatch) &&
	!forcedSourceLoad &&
	version !== 'l1' &&
	origin !== 'defaults'
	) {
	if (sourceSnapshotMismatch && origin === 'localStorage') {
	this.themeWarning = {
	origin,
	themeEngineVersion,
	type: 'snapshot_source_mismatch'
	}
	} else if (!theme) {
	this.themeWarning = {
	origin,
	noActionsPossible: true,
	themeEngineVersion,
	type: 'no_snapshot_old_version'
	}
	} else if (!versionsMatch) {
	this.themeWarning = {
	origin,
	noActionsPossible: !source,
	themeEngineVersion,
	type: 'wrong_version'
	}
	}
	}
	this.normalizeLocalState(theme, version, source, forcedSourceLoad)
	},
	forceLoadLocalStorage () {
	this.loadThemeFromLocalStorage(true)
	},
	dismissWarning () {
	this.themeWarning = undefined
	this.tempImportFile = undefined
	},
	forceLoad () {
	const { origin } = this.themeWarning
	switch (origin) {
	case 'localStorage':
	this.loadThemeFromLocalStorage(true)
	break
	case 'file':
	this.onImport(this.tempImportFile, true)
	break
	}
	this.dismissWarning()
	},
	forceSnapshot () {
	const { origin } = this.themeWarning
	switch (origin) {
	case 'localStorage':
	this.loadThemeFromLocalStorage(false, true)
	break
	case 'file':
	- console.error('Forcing snapshout from file is not supported yet')
	+ console.error('Forcing snapshot from file is not supported yet')
	break
	}
	this.dismissWarning()
	},
	loadThemeFromLocalStorage (confirmLoadSource = false, forceSnapshot = false) {
	const {
	customTheme: theme,
	customThemeSource: source
	} = this.$store.getters.mergedConfig
	if (!theme && !source) {
	// Anon user or never touched themes
	this.loadTheme(
	this.$store.state.instance.themeData,
	'defaults',
	confirmLoadSource
	)
	} else {
	this.loadTheme(
	{
	theme,
	source: forceSnapshot ? theme : source
	},
	'localStorage',
	confirmLoadSource
	)
	}
	},
	setCustomTheme () {
	this.$store.dispatch('setOption', {
	name: 'customTheme',
	value: {
	themeEngineVersion: CURRENT_VERSION,
	...this.previewTheme
	}
	})
	this.$store.dispatch('setOption', {
	name: 'customThemeSource',
	value: {
	themeEngineVersion: CURRENT_VERSION,
	shadows: this.shadowsLocal,
	fonts: this.fontsLocal,
	opacity: this.currentOpacity,
	colors: this.currentColors,
	radii: this.currentRadii
	}
	})
	},
	updatePreviewColorsAndShadows () {
	this.previewColors = generateColors({
	opacity: this.currentOpacity,
	colors: this.currentColors
	})
	this.previewShadows = generateShadows(
	{ shadows: this.shadowsLocal, opacity: this.previewTheme.opacity, themeEngineVersion: this.engineVersion },
	this.previewColors.theme.colors,
	this.previewColors.mod
	)
	},
	importTheme () { this.themeImporter.importData() },
	exportTheme () { this.themeExporter.exportData() },
	onImport (parsed, forceSource = false) {
	this.tempImportFile = parsed
	this.loadTheme(parsed, 'file', forceSource)
	},
	onImportFailure (result) {
	this.$store.dispatch('pushGlobalNotice', { messageKey: 'settings.invalid_theme_imported', level: 'error' })
	},
	importValidator (parsed) {
	const version = parsed._pleroma_theme_version
	return version >= 1 \|\| version <= 2
	},
	clearAll () {
	this.loadThemeFromLocalStorage()
	},

	// Clears all the extra stuff when loading V1 theme
	clearV1 () {
	Object.keys(this.$data)
	.filter(_ => _.endsWith('ColorLocal') \|\| _.endsWith('OpacityLocal'))
	.filter(_ => !v1OnlyNames.includes(_))
	.forEach(key => {
	set(this.$data, key, undefined)
	})
	},

	clearRoundness () {
	Object.keys(this.$data)
	.filter(_ => _.endsWith('RadiusLocal'))
	.forEach(key => {
	set(this.$data, key, undefined)
	})
	},

	clearOpacity () {
	Object.keys(this.$data)
	.filter(_ => _.endsWith('OpacityLocal'))
	.forEach(key => {
	set(this.$data, key, undefined)
	})
	},

	clearShadows () {
	this.shadowsLocal = {}
	},

	clearFonts () {
	this.fontsLocal = {}
	},

	/**
	* This applies stored theme data onto form. Supports three versions of data:
	* v3 (version >= 3) - newest version of themes which supports snapshots for better compatiblity
	* v2 (version = 2) - newer version of themes.
	* v1 (version = 1) - older version of themes (import from file)
	* v1l (version = l1) - older version of theme (load from local storage)
	* v1 and v1l differ because of way themes were stored/exported.
	* @param {Object} theme - theme data (snapshot)
	* @param {Number} version - version of data. 0 means try to guess based on data. "l1" means v1, locastorage type
	* @param {Object} source - theme source - this will be used if compatible
	* @param {Boolean} source - by default source won't be used if version doesn't match since it might render differently
	* this allows importing source anyway
	*/
	normalizeLocalState (theme, version = 0, source, forceSource = false) {
	let input
	if (typeof source !== 'undefined') {
	if (forceSource \|\| source.themeEngineVersion === CURRENT_VERSION) {
	input = source
	version = source.themeEngineVersion
	} else {
	input = theme
	}
	} else {
	input = theme
	}

	const radii = input.radii \|\| input
	const opacity = input.opacity
	const shadows = input.shadows \|\| {}
	const fonts = input.fonts \|\| {}
	const colors = !input.themeEngineVersion
	? colors2to3(input.colors \|\| input)
	: input.colors \|\| input

	if (version === 0) {
	if (input.version) version = input.version
	// Old v1 naming: fg is text, btn is foreground
	if (typeof colors.text === 'undefined' && typeof colors.fg !== 'undefined') {
	version = 1
	}
	// New v2 naming: text is text, fg is foreground
	if (typeof colors.text !== 'undefined' && typeof colors.fg !== 'undefined') {
	version = 2
	}
	}

	this.engineVersion = version

	// Stuff that differs between V1 and V2
	if (version === 1) {
	this.fgColorLocal = rgb2hex(colors.btn)
	this.textColorLocal = rgb2hex(colors.fg)
	}

	if (!this.keepColor) {
	this.clearV1()
	const keys = new Set(version !== 1 ? Object.keys(SLOT_INHERITANCE) : [])
	if (version === 1 \|\| version === 'l1') {
	keys
	.add('bg')
	.add('link')
	.add('cRed')
	.add('cBlue')
	.add('cGreen')
	.add('cOrange')
	}

	keys.forEach(key => {
	const color = colors[key]
	const hex = rgb2hex(colors[key])
	this[key + 'ColorLocal'] = hex === '#aN' ? color : hex
	})
	}

	if (opacity && !this.keepOpacity) {
	this.clearOpacity()
	Object.entries(opacity).forEach(([k, v]) => {
	if (typeof v === 'undefined' \|\| v === null \|\| Number.isNaN(v)) return
	this[k + 'OpacityLocal'] = v
	})
	}

	if (!this.keepRoundness) {
	this.clearRoundness()
	Object.entries(radii).forEach(([k, v]) => {
	// 'Radius' is kept mostly for v1->v2 localstorage transition
	const key = k.endsWith('Radius') ? k.split('Radius')[0] : k
	this[key + 'RadiusLocal'] = v
	})
	}

	if (!this.keepShadows) {
	this.clearShadows()
	if (version === 2) {
	this.shadowsLocal = shadows2to3(shadows, this.previewTheme.opacity)
	} else {
	this.shadowsLocal = shadows
	}
	this.shadowSelected = this.shadowsAvailable[0]
	}

	if (!this.keepFonts) {
	this.clearFonts()
	this.fontsLocal = fonts
	}
	}
	},
	watch: {
	currentRadii () {
	try {
	this.previewRadii = generateRadii({ radii: this.currentRadii })
	this.radiiInvalid = false
	} catch (e) {
	this.radiiInvalid = true
	console.warn(e)
	}
	},
	shadowsLocal: {
	handler () {
	if (Object.getOwnPropertyNames(this.previewColors).length === 1) return
	try {
	this.updatePreviewColorsAndShadows()
	this.shadowsInvalid = false
	} catch (e) {
	this.shadowsInvalid = true
	console.warn(e)
	}
	},
	deep: true
	},
	fontsLocal: {
	handler () {
	try {
	this.previewFonts = generateFonts({ fonts: this.fontsLocal })
	this.fontsInvalid = false
	} catch (e) {
	this.fontsInvalid = true
	console.warn(e)
	}
	},
	deep: true
	},
	currentColors () {
	try {
	this.updatePreviewColorsAndShadows()
	this.colorsInvalid = false
	this.shadowsInvalid = false
	} catch (e) {
	this.colorsInvalid = true
	this.shadowsInvalid = true
	console.warn(e)
	}
	},
	currentOpacity () {
	try {
	this.updatePreviewColorsAndShadows()
	} catch (e) {
	console.warn(e)
	}
	},
	selected () {
	this.dismissWarning()
	if (this.selectedVersion === 1) {
	if (!this.keepRoundness) {
	this.clearRoundness()
	}

	if (!this.keepShadows) {
	this.clearShadows()
	}

	if (!this.keepOpacity) {
	this.clearOpacity()
	}

	if (!this.keepColor) {
	this.clearV1()

	this.bgColorLocal = this.selected[1]
	this.fgColorLocal = this.selected[2]
	this.textColorLocal = this.selected[3]
	this.linkColorLocal = this.selected[4]
	this.cRedColorLocal = this.selected[5]
	this.cGreenColorLocal = this.selected[6]
	this.cBlueColorLocal = this.selected[7]
	this.cOrangeColorLocal = this.selected[8]
	}
	} else if (this.selectedVersion >= 2) {
	this.normalizeLocalState(this.selected.theme, 2, this.selected.source)
	}
	}
	}
	}
	diff --git a/src/components/status/status.js b/src/components/status/status.js
	index 5b178c2ed7..ae734493ec 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,388 +1,386 @@
	import ReplyButton from '../reply_button/reply_button.vue'
	import FavoriteButton from '../favorite_button/favorite_button.vue'
	import ReactButton from '../react_button/react_button.vue'
	import RetweetButton from '../retweet_button/retweet_button.vue'
	import ExtraButtons from '../extra_buttons/extra_buttons.vue'
	import PostStatusForm from '../post_status_form/post_status_form.vue'
	import UserCard from '../user_card/user_card.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import AvatarList from '../avatar_list/avatar_list.vue'
	import Timeago from '../timeago/timeago.vue'
	import StatusContent from '../status_content/status_content.vue'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import StatusPopover from '../status_popover/status_popover.vue'
	import UserListPopover from '../user_list_popover/user_list_popover.vue'
	import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
	import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
	import MentionLink from 'src/components/mention_link/mention_link.vue'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
	import { muteWordHits } from '../../services/status_parser/status_parser.js'
	import { unescape, uniqBy } from 'lodash'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faEnvelope,
	faLock,
	faLockOpen,
	faGlobe,
	faTimes,
	faRetweet,
	faReply,
	faPlusSquare,
	faSmileBeam,
	faEllipsisH,
	faStar,
	faEyeSlash,
	faEye,
	- faThumbtack,
	- faAt
	+ faThumbtack
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faEnvelope,
	faGlobe,
	faLock,
	faLockOpen,
	faTimes,
	faRetweet,
	faReply,
	faPlusSquare,
	faStar,
	faSmileBeam,
	faEllipsisH,
	faEyeSlash,
	faEye,
	- faThumbtack,
	- faAt
	+ faThumbtack
	)

	const Status = {
	name: 'Status',
	components: {
	ReplyButton,
	FavoriteButton,
	ReactButton,
	RetweetButton,
	ExtraButtons,
	PostStatusForm,
	UserCard,
	UserAvatar,
	AvatarList,
	Timeago,
	StatusPopover,
	UserListPopover,
	EmojiReactions,
	StatusContent,
	RichContent,
	MentionLink,
	MentionsLine
	},
	props: [
	'statusoid',
	'expandable',
	'inConversation',
	'focused',
	'highlight',
	'compact',
	'replies',
	'isPreview',
	'noHeading',
	'inlineExpanded',
	'showPinned',
	'inProfile',
	'profileUserId'
	],
	data () {
	return {
	replying: false,
	unmuted: false,
	userExpanded: false,
	mediaPlaying: [],
	suspendable: true,
	error: null,
	headTailLinks: null
	}
	},
	computed: {
	muteWords () {
	return this.mergedConfig.muteWords
	},
	showReasonMutedThread () {
	return (
	this.status.thread_muted \|\|
	(this.status.reblog && this.status.reblog.thread_muted)
	) && !this.inConversation
	},
	repeaterClass () {
	const user = this.statusoid.user
	return highlightClass(user)
	},
	userClass () {
	const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
	return highlightClass(user)
	},
	deleted () {
	return this.statusoid.deleted
	},
	repeaterStyle () {
	const user = this.statusoid.user
	const highlight = this.mergedConfig.highlight
	return highlightStyle(highlight[user.screen_name])
	},
	userStyle () {
	if (this.noHeading) return
	const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
	const highlight = this.mergedConfig.highlight
	return highlightStyle(highlight[user.screen_name])
	},
	userProfileLink () {
	return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
	},
	replyProfileLink () {
	if (this.isReply) {
	const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)
	// FIXME Why user not found sometimes???
	return user ? user.statusnet_profile_url : 'NOT_FOUND'
	}
	},
	retweet () { return !!this.statusoid.retweeted_status },
	retweeterUser () { return this.statusoid.user },
	retweeter () { return this.statusoid.user.name \|\| this.statusoid.user.screen_name_ui },
	retweeterHtml () { return this.statusoid.user.name },
	retweeterProfileLink () { return this.generateUserProfileLink(this.statusoid.user.id, this.statusoid.user.screen_name) },
	status () {
	if (this.retweet) {
	return this.statusoid.retweeted_status
	} else {
	return this.statusoid
	}
	},
	statusFromGlobalRepository () {
	// NOTE: Consider to replace status with statusFromGlobalRepository
	return this.$store.state.statuses.allStatusesObject[this.status.id]
	},
	loggedIn () {
	return !!this.currentUser
	},
	muteWordHits () {
	return muteWordHits(this.status, this.muteWords)
	},
	mentions () {
	return this.status.attentions.filter(attn => {
	return attn.screen_name !== this.replyToName &&
	attn.screen_name !== this.status.user.screen_name
	}).map(attn => ({
	url: attn.statusnet_profile_url,
	content: attn.screen_name,
	userId: attn.id
	}))
	},
	alsoMentions () {
	if (!this.headTailLinks) return []
	const set = new Set(this.headTailLinks.writtenMentions.map(m => m.url))
	return this.headTailLinks.writtenMentions.filter(mention => {
	return !set.has(mention.url)
	})
	},
	mentionsLine () {
	return this.mentionsOwnLine ? this.mentions : this.alsoMentions
	},
	mentionsOwnLine () {
	return this.mergedConfig.mentionsOwnLine
	},
	hasMentionsLine () {
	return this.mentionsLine.length > 0
	},
	muted () {
	if (this.statusoid.user.id === this.currentUser.id) return false
	const { status } = this
	const { reblog } = status
	const relationship = this.$store.getters.relationship(status.user.id)
	const relationshipReblog = reblog && this.$store.getters.relationship(reblog.user.id)
	const reasonsToMute = (
	// Post is muted according to BE
	status.muted \|\|
	// Reprööt of a muted post according to BE
	(reblog && reblog.muted) \|\|
	// Muted user
	relationship.muting \|\|
	// Muted user of a reprööt
	(relationshipReblog && relationshipReblog.muting) \|\|
	// Thread is muted
	status.thread_muted \|\|
	// Wordfiltered
	this.muteWordHits.length > 0
	)
	const excusesNotToMute = (
	(
	this.inProfile && (
	// Don't mute user's posts on user timeline (except reblogs)
	(!reblog && status.user.id === this.profileUserId) \|\|
	// Same as above but also allow self-reblogs
	(reblog && reblog.user.id === this.profileUserId)
	)
	) \|\|
	// Don't mute statuses in muted conversation when said conversation is opened
	(this.inConversation && status.thread_muted)
	// No excuses if post has muted words
	) && !this.muteWordHits.length > 0

	return !this.unmuted && !excusesNotToMute && reasonsToMute
	},
	hideFilteredStatuses () {
	return this.mergedConfig.hideFilteredStatuses
	},
	hideStatus () {
	return (this.muted && this.hideFilteredStatuses) \|\| this.virtualHidden
	},
	isFocused () {
	// retweet or root of an expanded conversation
	if (this.focused) {
	return true
	} else if (!this.inConversation) {
	return false
	}
	// use conversation highlight only when in conversation
	return this.status.id === this.highlight
	},
	isReply () {
	return !!(this.status.in_reply_to_status_id && this.status.in_reply_to_user_id)
	},
	replyToName () {
	if (this.status.in_reply_to_screen_name) {
	return this.status.in_reply_to_screen_name
	} else {
	const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)
	return user && user.screen_name_ui
	}
	},
	replySubject () {
	if (!this.status.summary) return ''
	const decodedSummary = unescape(this.status.summary)
	const behavior = this.mergedConfig.subjectLineBehavior
	const startsWithRe = decodedSummary.match(/^re[: ]/i)
	if ((behavior !== 'noop' && startsWithRe) \|\| behavior === 'masto') {
	return decodedSummary
	} else if (behavior === 'email') {
	return 're: '.concat(decodedSummary)
	} else if (behavior === 'noop') {
	return ''
	}
	},
	combinedFavsAndRepeatsUsers () {
	// Use the status from the global status repository since favs and repeats are saved in it
	const combinedUsers = [].concat(
	this.statusFromGlobalRepository.favoritedBy,
	this.statusFromGlobalRepository.rebloggedBy
	)
	return uniqBy(combinedUsers, 'id')
	},
	tags () {
	return this.status.tags.filter(tagObj => tagObj.hasOwnProperty('name')).map(tagObj => tagObj.name).join(' ')
	},
	hidePostStats () {
	return this.mergedConfig.hidePostStats
	},
	currentUser () {
	return this.$store.state.users.currentUser
	},
	betterShadow () {
	return this.$store.state.interface.browserSupport.cssFilter
	},
	mergedConfig () {
	return this.$store.getters.mergedConfig
	},
	isSuspendable () {
	return !this.replying && this.mediaPlaying.length === 0
	}
	},
	methods: {
	visibilityIcon (visibility) {
	switch (visibility) {
	case 'private':
	return 'lock'
	case 'unlisted':
	return 'lock-open'
	case 'direct':
	return 'envelope'
	default:
	return 'globe'
	}
	},
	showError (error) {
	this.error = error
	},
	clearError () {
	this.error = undefined
	},
	toggleReplying () {
	this.replying = !this.replying
	},
	gotoOriginal (id) {
	if (this.inConversation) {
	this.$emit('goto', id)
	}
	},
	toggleExpanded () {
	this.$emit('toggleExpanded')
	},
	toggleMute () {
	this.unmuted = !this.unmuted
	},
	toggleUserExpanded () {
	this.userExpanded = !this.userExpanded
	},
	generateUserProfileLink (id, name) {
	return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
	},
	addMediaPlaying (id) {
	this.mediaPlaying.push(id)
	},
	removeMediaPlaying (id) {
	this.mediaPlaying = this.mediaPlaying.filter(mediaId => mediaId !== id)
	},
	setHeadTailLinks (headTailLinks) {
	this.headTailLinks = headTailLinks
	}
	},
	watch: {
	'highlight': function (id) {
	if (this.status.id === id) {
	let rect = this.$el.getBoundingClientRect()
	if (rect.top < 100) {
	// Post is above screen, match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.height >= (window.innerHeight - 50)) {
	// Post we wahttp://localhost:8080/users/hj/dmsnt to see is taller than screen so match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.bottom > window.innerHeight - 50) {
	// Post is below screen, match its bottom to screen bottom
	window.scrollBy(0, rect.bottom - window.innerHeight + 50)
	}
	}
	},
	'status.repeat_num': function (num) {
	// refetch repeats when repeat_num is changed in any way
	if (this.isFocused && this.statusFromGlobalRepository.rebloggedBy && this.statusFromGlobalRepository.rebloggedBy.length !== num) {
	this.$store.dispatch('fetchRepeats', this.status.id)
	}
	},
	'status.fave_num': function (num) {
	// refetch favs when fave_num is changed in any way
	if (this.isFocused && this.statusFromGlobalRepository.favoritedBy && this.statusFromGlobalRepository.favoritedBy.length !== num) {
	this.$store.dispatch('fetchFavs', this.status.id)
	}
	},
	'isSuspendable': function (val) {
	this.suspendable = val
	}
	},
	filters: {
	capitalize: function (str) {
	return str.charAt(0).toUpperCase() + str.slice(1)
	}
	}
	}

	export default Status
	diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
	index da5d4dd323..81a687f1ea 100644
	--- a/src/components/status_body/status_body.scss
	+++ b/src/components/status_body/status_body.scss
	@@ -1,126 +1,118 @@
	@import '../../_variables.scss';

	.StatusBody {

	.emoji {
	--_still_image-label-scale: 0.5;
	}

	& .text,
	& .summary {
	font-family: var(--postFont, sans-serif);
	white-space: pre-wrap;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	line-height: 1.4em;
	}

	.summary {
	display: block;
	font-style: italic;
	padding-bottom: 0.5em;
	}

	.text {
	&.-single-line {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	height: 1.4em;
	}
	}

	.summary-wrapper {
	margin-bottom: 0.5em;
	border-style: solid;
	border-width: 0 0 1px 0;
	border-color: var(--border, $fallback--border);
	flex-grow: 0;

	&.-tall {
	position: relative;

	.summary {
	max-height: 2em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	}
	}
	}

	.text-wrapper {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;

	&.-tall-status {
	position: relative;
	height: 220px;
	overflow-x: hidden;
	overflow-y: hidden;
	z-index: 1;

	.rich-content-wrapper {
	min-height: 0;
	mask:
	linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
	linear-gradient(to top, white, white);

	/* Autoprefixed seem to ignore this one, and also syntax is different */
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	}
	}
	}

	& .tall-status-hider,
	& .tall-subject-hider,
	& .status-unhider,
	& .cw-status-hider {
	display: inline-block;
	word-break: break-all;
	width: 100%;
	text-align: center;
	}

	.tall-status-hider {
	position: absolute;
	height: 70px;
	margin-top: 150px;
	line-height: 110px;
	z-index: 2;
	}

	.tall-subject-hider {
	// position: absolute;
	padding-bottom: 0.5em;
	}

	& .status-unhider,
	& .cw-status-hider {
	word-break: break-all;

	svg {
	color: inherit;
	}
	}

	.greentext {
	color: $fallback--cGreen;
	color: var(--postGreentext, $fallback--cGreen);
	}

	.cyantext {
	color: var(--postCyantext, $fallback--cBlue);
	}
	-
	- /* Not sure if this is necessary */
	- video {
	- max-width: 100%;
	- max-height: 400px;
	- vertical-align: middle;
	- object-fit: contain;
	- }
	}
	diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
	index aac44e42c0..0eb11ad0ad 100644
	--- a/src/components/status_body/status_body.vue
	+++ b/src/components/status_body/status_body.vue
	@@ -1,108 +1,108 @@
	<template>
	<div class="StatusBody">
	<div class="body">
	<div
	- v-if="status.summary_html"
	+ v-if="status.summary_raw_html"
	class="summary-wrapper"
	:class="{ '-tall': (longSubject && !showingLongSubject) }"
	>
	<RichContent
	class="media-body summary"
	:html="status.summary_raw_html"
	:emoji="status.emojis"
	/>
	<button
	v-if="longSubject && showingLongSubject"
	class="button-unstyled -link tall-subject-hider"
	@click.prevent="showingLongSubject=false"
	>
	{{ $t("status.hide_full_subject") }}
	</button>
	<button
	v-else-if="longSubject"
	class="button-unstyled -link tall-subject-hider"
	@click.prevent="showingLongSubject=true"
	>
	{{ $t("status.show_full_subject") }}
	</button>
	</div>
	<div
	:class="{'-tall-status': hideTallStatus}"
	class="text-wrapper"
	>
	<button
	v-if="hideTallStatus"
	class="button-unstyled -link tall-status-hider"
	:class="{ '-focused': focused }"
	@click.prevent="toggleShowMore"
	>
	{{ $t("general.show_more") }}
	</button>
	<span
	- v-if="!hideSubjectStatus && !(singleLine && status.summary_html)"
	+ v-if="!hideSubjectStatus && !(singleLine && status.summary_raw_html)"
	class="rich-content-wrapper"
	>
	<MentionsLine
	v-if="!hideMentions && firstMentions && firstMentions.length > 0"
	:mentions="firstMentions"
	/>
	<RichContent
	:class="{ '-single-line': singleLine }"
	class="text media-body"
	:html="status.raw_html"
	:emoji="status.emojis"
	:handle-links="true"
	:greentext="mergedConfig.greentext"
	@parseReady="setHeadTailLinks"
	/>
	<MentionsLine
	v-if="!hideMentions && lastMentions.length > 0 && firstMentions.length <= 1"
	:mentions="lastMentions"
	/>
	</span>

	<button
	v-if="hideSubjectStatus"
	class="button-unstyled -link cw-status-hider"
	@click.prevent="toggleShowMore"
	>
	{{ $t("status.show_content") }}
	<FAIcon
	v-if="attachmentTypes.includes('image')"
	icon="image"
	/>
	<FAIcon
	v-if="attachmentTypes.includes('video')"
	icon="video"
	/>
	<FAIcon
	v-if="attachmentTypes.includes('audio')"
	icon="music"
	/>
	<FAIcon
	v-if="attachmentTypes.includes('unknown')"
	icon="file"
	/>
	<FAIcon
	v-if="status.poll && status.poll.options"
	icon="poll-h"
	/>
	<FAIcon
	v-if="status.card"
	icon="link"
	/>
	</button>
	<button
	v-if="showingMore && !fullContent"
	class="button-unstyled -link status-unhider"
	@click.prevent="toggleShowMore"
	>
	{{ tallStatus ? $t("general.show_less") : $t("status.hide_content") }}
	</button>
	</div>
	</div>
	<slot v-if="!hideSubjectStatus" />
	</div>
	</template>
	<script src="./status_body.js" ></script>
	<style lang="scss" src="./status_body.scss" />
	diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
	index 613ed566d9..477b861f1d 100644
	--- a/src/services/entity_normalizer/entity_normalizer.service.js
	+++ b/src/services/entity_normalizer/entity_normalizer.service.js
	@@ -1,467 +1,461 @@
	import escape from 'escape-html'
	import parseLinkHeader from 'parse-link-header'
	import { isStatusNotification } from '../notification_utils/notification_utils.js'
	import punycode from 'punycode.js'

	/ NOTICE!
	* Do not initialize UI-generated data here.
	* It will override existing data.
	*
	* i.e. user.pinnedStatusIds was set to [] here
	* UI code would update it with data but upon next user fetch
	* it would be reverted back to []
	*/

	const qvitterStatusType = (status) => {
	if (status.is_post_verb) {
	return 'status'
	}

	if (status.retweeted_status) {
	return 'retweet'
	}

	if ((typeof status.uri === 'string' && status.uri.match(/(fave\|objectType=Favourite)/)) \|\|
	(typeof status.text === 'string' && status.text.match(/favorited/))) {
	return 'favorite'
	}

	if (status.text.match(/deleted notice {{tag/) \|\| status.qvitter_delete_notice) {
	return 'deletion'
	}

	if (status.text.match(/started following/) \|\| status.activity_type === 'follow') {
	return 'follow'
	}

	return 'unknown'
	}

	export const parseUser = (data) => {
	const output = {}
	const masto = data.hasOwnProperty('acct')
	// case for users in "mentions" property for statuses in MastoAPI
	const mastoShort = masto && !data.hasOwnProperty('avatar')

	output.id = String(data.id)

	if (masto) {
	output.screen_name = data.acct
	output.statusnet_profile_url = data.url

	// There's nothing else to get
	if (mastoShort) {
	return output
	}

	output.emoji = data.emojis
	output.name = data.display_name
	output.name_html = addEmojis(escape(data.display_name), data.emojis)

	output.description = data.note
	output.description_html = addEmojis(data.note, data.emojis)

	output.fields = data.fields
	output.fields_html = data.fields.map(field => {
	return {
	name: addEmojis(escape(field.name), data.emojis),
	value: addEmojis(field.value, data.emojis)
	}
	})
	output.fields_text = data.fields.map(field => {
	return {
	name: unescape(field.name.replace(/<[^>]*>/g, '')),
	value: unescape(field.value.replace(/<[^>]*>/g, ''))
	}
	})

	// Utilize avatar_static for gif avatars?
	output.profile_image_url = data.avatar
	output.profile_image_url_original = data.avatar

	// Same, utilize header_static?
	output.cover_photo = data.header

	output.friends_count = data.following_count

	output.bot = data.bot

	if (data.pleroma) {
	const relationship = data.pleroma.relationship

	output.background_image = data.pleroma.background_image
	output.favicon = data.pleroma.favicon
	output.token = data.pleroma.chat_token

	if (relationship) {
	output.relationship = relationship
	}

	output.allow_following_move = data.pleroma.allow_following_move

	output.hide_follows = data.pleroma.hide_follows
	output.hide_followers = data.pleroma.hide_followers
	output.hide_follows_count = data.pleroma.hide_follows_count
	output.hide_followers_count = data.pleroma.hide_followers_count

	output.rights = {
	moderator: data.pleroma.is_moderator,
	admin: data.pleroma.is_admin
	}
	// TODO: Clean up in UI? This is duplication from what BE does for qvitterapi
	if (output.rights.admin) {
	output.role = 'admin'
	} else if (output.rights.moderator) {
	output.role = 'moderator'
	} else {
	output.role = 'member'
	}
	}

	if (data.source) {
	output.description = data.source.note
	output.default_scope = data.source.privacy
	output.fields = data.source.fields
	if (data.source.pleroma) {
	output.no_rich_text = data.source.pleroma.no_rich_text
	output.show_role = data.source.pleroma.show_role
	output.discoverable = data.source.pleroma.discoverable
	}
	}

	// TODO: handle is_local
	output.is_local = !output.screen_name.includes('@')
	} else {
	output.screen_name = data.screen_name

	output.name = data.name
	output.name_html = data.name_html

	output.description = data.description
	output.description_html = data.description_html

	output.profile_image_url = data.profile_image_url
	output.profile_image_url_original = data.profile_image_url_original

	output.cover_photo = data.cover_photo

	output.friends_count = data.friends_count

	// output.bot = ??? missing

	output.statusnet_profile_url = data.statusnet_profile_url

	output.is_local = data.is_local
	output.role = data.role
	output.show_role = data.show_role

	if (data.rights) {
	output.rights = {
	moderator: data.rights.delete_others_notice,
	admin: data.rights.admin
	}
	}
	output.no_rich_text = data.no_rich_text
	output.default_scope = data.default_scope
	output.hide_follows = data.hide_follows
	output.hide_followers = data.hide_followers
	output.hide_follows_count = data.hide_follows_count
	output.hide_followers_count = data.hide_followers_count
	output.background_image = data.background_image
	// Websocket token
	output.token = data.token

	// Convert relationsip data to expected format
	output.relationship = {
	muting: data.muted,
	blocking: data.statusnet_blocking,
	followed_by: data.follows_you,
	following: data.following
	}
	}

	output.created_at = new Date(data.created_at)
	output.locked = data.locked
	output.followers_count = data.followers_count
	output.statuses_count = data.statuses_count

	if (data.pleroma) {
	output.follow_request_count = data.pleroma.follow_request_count

	output.tags = data.pleroma.tags

	// deactivated was changed to is_active in Pleroma 2.3.0
	// so check if is_active is present
	output.deactivated = typeof data.pleroma.is_active !== 'undefined'
	? !data.pleroma.is_active // new backend
	: data.pleroma.deactivated // old backend

	output.notification_settings = data.pleroma.notification_settings
	output.unread_chat_count = data.pleroma.unread_chat_count
	}

	output.tags = output.tags \|\| []
	output.rights = output.rights \|\| {}
	output.notification_settings = output.notification_settings \|\| {}

	// Convert punycode to unicode for UI
	output.screen_name_ui = output.screen_name
	if (output.screen_name && output.screen_name.includes('@')) {
	const parts = output.screen_name.split('@')
	let unicodeDomain = punycode.toUnicode(parts[1])
	if (unicodeDomain !== parts[1]) {
	// Add some identifier so users can potentially spot spoofing attempts:
	// lain.com and xn--lin-6cd.com would appear identical otherwise.
	unicodeDomain = '🌏' + unicodeDomain
	output.screen_name_ui = [parts[0], unicodeDomain].join('@')
	}
	}

	return output
	}

	export const parseAttachment = (data) => {
	const output = {}
	const masto = !data.hasOwnProperty('oembed')

	if (masto) {
	// Not exactly same...
	output.mimetype = data.pleroma ? data.pleroma.mime_type : data.type
	output.meta = data.meta // not present in BE yet
	output.id = data.id
	} else {
	output.mimetype = data.mimetype
	// output.meta = ??? missing
	}

	output.url = data.url
	output.large_thumb_url = data.preview_url
	output.description = data.description

	return output
	}
	export const addEmojis = (string, emojis) => {
	const matchOperatorsRegex = /[\|\\{}()[\]^$+*?.-]/g
	return emojis.reduce((acc, emoji) => {
	const regexSafeShortCode = emoji.shortcode.replace(matchOperatorsRegex, '\\$&')
	return acc.replace(
	new RegExp(`:${regexSafeShortCode}:`, 'g'),
	`<img src='${emoji.url}' alt=':${emoji.shortcode}:' title=':${emoji.shortcode}:' class='emoji' />`
	)
	}, string)
	}

	export const parseStatus = (data) => {
	const output = {}
	const masto = data.hasOwnProperty('account')

	if (masto) {
	output.favorited = data.favourited
	output.fave_num = data.favourites_count

	output.repeated = data.reblogged
	output.repeat_num = data.reblogs_count

	output.bookmarked = data.bookmarked

	output.type = data.reblog ? 'retweet' : 'status'
	output.nsfw = data.sensitive

	output.raw_html = data.content
	output.emojis = data.emojis

	output.tags = data.tags

	if (data.pleroma) {
	const { pleroma } = data
	output.text = pleroma.content ? data.pleroma.content['text/plain'] : data.content
	output.summary = pleroma.spoiler_text ? data.pleroma.spoiler_text['text/plain'] : data.spoiler_text
	output.statusnet_conversation_id = data.pleroma.conversation_id
	output.is_local = pleroma.local
	output.in_reply_to_screen_name = data.pleroma.in_reply_to_account_acct
	output.thread_muted = pleroma.thread_muted
	output.emoji_reactions = pleroma.emoji_reactions
	output.parent_visible = pleroma.parent_visible === undefined ? true : pleroma.parent_visible
	} else {
	output.text = data.content
	output.summary = data.spoiler_text
	}

	output.in_reply_to_status_id = data.in_reply_to_id
	output.in_reply_to_user_id = data.in_reply_to_account_id
	output.replies_count = data.replies_count

	if (output.type === 'retweet') {
	output.retweeted_status = parseStatus(data.reblog)
	}

	output.summary_raw_html = escape(data.spoiler_text)
	- output.summary_html = addEmojis(escape(data.spoiler_text), data.emojis)
	output.external_url = data.url
	output.poll = data.poll
	if (output.poll) {
	output.poll.options = (output.poll.options \|\| []).map(field => ({
	...field,
	title_html: addEmojis(escape(field.title), data.emojis)
	}))
	}
	output.pinned = data.pinned
	output.muted = data.muted
	} else {
	output.favorited = data.favorited
	output.fave_num = data.fave_num

	output.repeated = data.repeated
	output.repeat_num = data.repeat_num

	// catchall, temporary
	// Object.assign(output, data)

	output.type = qvitterStatusType(data)

	if (data.nsfw === undefined) {
	output.nsfw = isNsfw(data)
	if (data.retweeted_status) {
	output.nsfw = data.retweeted_status.nsfw
	}
	} else {
	output.nsfw = data.nsfw
	}

	output.raw_html = data.statusnet_html
	output.text = data.text

	output.in_reply_to_status_id = data.in_reply_to_status_id
	output.in_reply_to_user_id = data.in_reply_to_user_id
	output.in_reply_to_screen_name = data.in_reply_to_screen_name
	output.statusnet_conversation_id = data.statusnet_conversation_id

	if (output.type === 'retweet') {
	output.retweeted_status = parseStatus(data.retweeted_status)
	}

	output.summary = data.summary
	output.summary_html = data.summary_html
	output.external_url = data.external_url
	output.is_local = data.is_local
	}

	output.id = String(data.id)
	output.visibility = data.visibility
	output.card = data.card
	output.created_at = new Date(data.created_at)

	// Converting to string, the right way.
	output.in_reply_to_status_id = output.in_reply_to_status_id
	? String(output.in_reply_to_status_id)
	: null
	output.in_reply_to_user_id = output.in_reply_to_user_id
	? String(output.in_reply_to_user_id)
	: null

	output.user = parseUser(masto ? data.account : data.user)

	output.attentions = ((masto ? data.mentions : data.attentions) \|\| []).map(parseUser)

	output.attachments = ((masto ? data.media_attachments : data.attachments) \|\| [])
	.map(parseAttachment)

	const retweetedStatus = masto ? data.reblog : data.retweeted_status
	if (retweetedStatus) {
	output.retweeted_status = parseStatus(retweetedStatus)
	}

	output.favoritedBy = []
	output.rebloggedBy = []

	return output
	}

	export const parseNotification = (data) => {
	const mastoDict = {
	'favourite': 'like',
	'reblog': 'repeat'
	}
	const masto = !data.hasOwnProperty('ntype')
	const output = {}

	if (masto) {
	output.type = mastoDict[data.type] \|\| data.type
	output.seen = data.pleroma.is_seen
	output.status = isStatusNotification(output.type) ? parseStatus(data.status) : null
	output.action = output.status // TODO: Refactor, this is unneeded
	output.target = output.type !== 'move'
	? null
	: parseUser(data.target)
	output.from_profile = parseUser(data.account)
	output.emoji = data.emoji
	} else {
	const parsedNotice = parseStatus(data.notice)
	output.type = data.ntype
	output.seen = Boolean(data.is_seen)
	output.status = output.type === 'like'
	? parseStatus(data.notice.favorited_status)
	: parsedNotice
	output.action = parsedNotice
	output.from_profile = output.type === 'pleroma:chat_mention' ? parseUser(data.account) : parseUser(data.from_profile)
	}

	output.created_at = new Date(data.created_at)
	output.id = parseInt(data.id)

	return output
	}

	const isNsfw = (status) => {
	const nsfwRegex = /#nsfw/i
	return (status.tags \|\| []).includes('nsfw') \|\| !!(status.text \|\| '').match(nsfwRegex)
	}

	export const parseLinkHeaderPagination = (linkHeader, opts = {}) => {
	const flakeId = opts.flakeId
	const parsedLinkHeader = parseLinkHeader(linkHeader)
	if (!parsedLinkHeader) return
	const maxId = parsedLinkHeader.next.max_id
	const minId = parsedLinkHeader.prev.min_id

	return {
	maxId: flakeId ? maxId : parseInt(maxId, 10),
	minId: flakeId ? minId : parseInt(minId, 10)
	}
	}

	export const parseChat = (chat) => {
	const output = {}
	output.id = chat.id
	output.account = parseUser(chat.account)
	output.unread = chat.unread
	output.lastMessage = parseChatMessage(chat.last_message)
	output.updated_at = new Date(chat.updated_at)
	return output
	}

	export const parseChatMessage = (message) => {
	if (!message) { return }
	if (message.isNormalized) { return message }
	const output = message
	output.id = message.id
	output.created_at = new Date(message.created_at)
	output.chat_id = message.chat_id
	output.emojis = message.emojis
	output.content = message.content
	- if (message.content) {
	- output.content = addEmojis(message.content, message.emojis)
	- } else {
	- output.content = ''
	- }
	if (message.attachment) {
	output.attachments = [parseAttachment(message.attachment)]
	} else {
	output.attachments = []
	}
	output.pending = !!message.pending
	output.error = false
	output.idempotency_key = message.idempotency_key
	output.isNormalized = true
	return output
	}
	diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
	index 05c0b25956..f2c3f04e2f 100644
	--- a/test/unit/specs/components/rich_content.spec.js
	+++ b/test/unit/specs/components/rich_content.spec.js
	@@ -1,357 +1,385 @@
	import { shallowMount, createLocalVue } from '@vue/test-utils'
	import RichContent from 'src/components/rich_content/rich_content.jsx'

	const localVue = createLocalVue()

	const makeMention = (who) => `<span class="h-card"><a class="u-url mention" href="https://fake.tld/@${who}">@<span>${who}</span></a></span>`
	const stubMention = (who) => `<span class="h-card"><mentionlink-stub url="https://fake.tld/@${who}" content="@<span>${who}</span>"></mentionlink-stub></span>`
	const lastMentions = (...data) => `<span class="lastMentions">${data.join('')}</span>`
	const p = (...data) => `<p>${data.join('')}</p>`
	const compwrap = (...data) => `<span class="RichContent">${data.join('')}</span>`
	const removedMentionSpan = '<span class="h-card"></span>'

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

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

	it('removes mentions from the beginning of post', () => {
	const html = p(
	makeMention('John'),
	' how are you doing thoday?'
	)
	const expected = p(
	removedMentionSpan,
	'how are you doing thoday?'
	)
	const wrapper = shallowMount(RichContent, {
	localVue,
	propsData: {
	handleLinks: true,
	greentext: true,
	emoji: [],
	html
	}
	})

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

	it('removes mentions from the end of the hellpost (<p>)', () => {
	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()
	].join('')

	const wrapper = shallowMount(RichContent, {
	localVue,
	propsData: {
	handleLinks: true,
	greentext: true,
	emoji: [],
	html
	}
	})

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

	it('removes mentions from the end of the hellpost (<br>)', () => {
	const html = [
	'How are you doing today, fine gentlemen?',
	[
	makeMention('John'),
	makeMention('Josh'),
	makeMention('Jeremy')
	].join('')
	].join('<br>')
	const expected = [
	'How are you doing today, fine gentlemen?',
	// TODO fix this extra line somehow?
	'<br>'
	].join('')

	const wrapper = shallowMount(RichContent, {
	localVue,
	propsData: {
	handleLinks: true,
	greentext: true,
	emoji: [],
	html
	}
	})

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

	it('removes mentions from the end of the hellpost (\\n)', () => {
	const html = [
	'How are you doing today, fine gentlemen?',
	[
	makeMention('John'),
	makeMention('Josh'),
	makeMention('Jeremy')
	].join('')
	].join('\n')
	const expected = [
	'How are you doing today, fine gentlemen?',
	// TODO fix this extra line somehow?
	''
	].join('\n')

	const wrapper = shallowMount(RichContent, {
	localVue,
	propsData: {
	handleLinks: true,
	greentext: true,
	emoji: [],
	html
	}
	})

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

	it('Does not remove mentions in the middle or at the end of text string', () => {
	const html = [
	[
	makeMention('Jack'),
	'let\'s meet up with ',
	makeMention('Janet')
	].join(''),
	[
	'cc: ',
	makeMention('John'),
	makeMention('Josh'),
	makeMention('Jeremy')
	].join('')
	].join('\n')
	const expected = [
	[
	removedMentionSpan,
	'let\'s meet up with ',
	stubMention('Janet')
	].join(''),
	[
	'cc: ',
	stubMention('John'),
	stubMention('Josh'),
	stubMention('Jeremy')
	].join('')
	].join('\n')

	const wrapper = shallowMount(RichContent, {
	localVue,
	propsData: {
	handleLinks: true,
	greentext: true,
	emoji: [],
	html
	}
	})

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

	it('removes mentions from the end if there\'s only one first mention', () => {
	const html = [
	p(
	makeMention('Todd'),
	'so anyway you are wrong'
	),
	p(
	makeMention('Tom'),
	makeMention('Trace'),
	makeMention('Theodor')
	)
	].join('')
	const expected = [
	p(
	removedMentionSpan,
	'so anyway you are wrong'
	),
	// TODO fix this extra line somehow?
	p()
	].join('')

	const wrapper = shallowMount(RichContent, {
	localVue,
	propsData: {
	handleLinks: true,
	greentext: true,
	emoji: [],
	html
	}
	})

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

	it('does not remove mentions from the end if there\'s more than one first mention', () => {
	const html = [
	p(
	makeMention('Zacharie'),
	makeMention('Zinaide'),
	'you guys have cool names, and so do these guys: '
	),
	p(
	makeMention('Watson'),
	makeMention('Wallace'),
	makeMention('Wakamoto')
	)
	].join('')
	const expected = [
	p(
	removedMentionSpan,
	removedMentionSpan,
	'you guys have cool names, and so do these guys: '
	),
	p(
	lastMentions(
	stubMention('Watson'),
	stubMention('Wallace'),
	stubMention('Wakamoto')
	)
	)
	].join('')

	const wrapper = shallowMount(RichContent, {
	localVue,
	propsData: {
	handleLinks: true,
	greentext: true,
	emoji: [],
	html
	}
	})

	expect(wrapper.html()).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 wrapper = shallowMount(RichContent, {
	localVue,
	propsData: {
	handleLinks: false,
	greentext: true,
	emoji: [],
	html
	}
	})

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

	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, {
	localVue,
	propsData: {
	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, {
	localVue,
	propsData: {
	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 alt=":spurdo:" src="about:blank" title=":spurdo:" class="emoji img"></anonymous-stub>'
	)

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

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

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

	const wrapper = shallowMount(RichContent, {
	localVue,
	propsData: {
	handleLinks: false,
	greentext: false,
	emoji: [],
	html
	}
	})

	expect(wrapper.html()).to.eql(compwrap(html))
	})
	+
	+ it('Greentext + last mentions', () => {
	+ const html = [
	+ '>quote',
	+ makeMention('lol'),
	+ '>quote',
	+ '>quote'
	+ ].join('\n')
	+ const expected = [
	+ '<span class="greentext">>quote</span>',
	+ stubMention('lol'),
	+ '<span class="greentext">>quote</span>',
	+ '<span class="greentext">>quote</span>'
	+ ].join('\n')
	+
	+ const wrapper = shallowMount(RichContent, {
	+ localVue,
	+ propsData: {
	+ handleLinks: true,
	+ greentext: true,
	+ emoji: [],
	+ html
	+ }
	+ })
	+
	+ expect(wrapper.html()).to.eql(compwrap(expected))
	+ })
	+
	})
	diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
	index c8965785c1..8a5a6ef90a 100644
	--- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
	+++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
	@@ -1,403 +1,395 @@
	import { parseStatus, parseUser, parseNotification, addEmojis, parseLinkHeaderPagination } from '../../../../../src/services/entity_normalizer/entity_normalizer.service.js'
	import mastoapidata from '../../../../fixtures/mastoapi.json'
	import qvitterapidata from '../../../../fixtures/statuses.json'

	const makeMockStatusQvitter = (overrides = {}) => {
	return Object.assign({
	activity_type: 'post',
	attachments: [],
	attentions: [],
	created_at: 'Tue Jan 15 13:57:56 +0000 2019',
	external_url: 'https://ap.example/whatever',
	fave_num: 1,
	favorited: false,
	id: '10335970',
	in_reply_to_ostatus_uri: null,
	in_reply_to_profileurl: null,
	in_reply_to_screen_name: null,
	in_reply_to_status_id: null,
	in_reply_to_user_id: null,
	is_local: false,
	is_post_verb: true,
	possibly_sensitive: false,
	repeat_num: 0,
	repeated: false,
	statusnet_conversation_id: '16300488',
	summary: null,
	tags: [],
	text: 'haha benis',
	uri: 'https://ap.example/whatever',
	user: makeMockUserQvitter(),
	visibility: 'public'
	}, overrides)
	}

	const makeMockUserQvitter = (overrides = {}) => {
	return Object.assign({
	background_image: null,
	cover_photo: '',
	created_at: 'Mon Jan 14 13:56:51 +0000 2019',
	default_scope: 'public',
	description: 'ebin',
	description_html: '<p>ebin</p>',
	favourites_count: 0,
	fields: [],
	followers_count: 1,
	following: true,
	follows_you: true,
	friends_count: 1,
	id: '60717',
	is_local: false,
	locked: false,
	name: 'Spurdo :ebin:',
	name_html: 'Spurdo <img src="whatever">',
	no_rich_text: false,
	pleroma: { confirmation_pending: false, tags: [] },
	profile_image_url: 'https://ap.example/whatever',
	profile_image_url_https: 'https://ap.example/whatever',
	profile_image_url_original: 'https://ap.example/whatever',
	profile_image_url_profile_size: 'https://ap.example/whatever',
	rights: { delete_others_notice: false },
	screen_name: 'spurdo@ap.example',
	statuses_count: 46,
	statusnet_blocking: false,
	statusnet_profile_url: ''
	}, overrides)
	}

	const makeMockUserMasto = (overrides = {}) => {
	return Object.assign({
	acct: 'hj',
	avatar:
	'https://shigusegubu.club/media/1657b945-8d5b-4ce6-aafb-4c3fc5772120/8ce851029af84d55de9164e30cc7f46d60cbf12eee7e96c5c0d35d9038ddade1.png',
	avatar_static:
	'https://shigusegubu.club/media/1657b945-8d5b-4ce6-aafb-4c3fc5772120/8ce851029af84d55de9164e30cc7f46d60cbf12eee7e96c5c0d35d9038ddade1.png',
	bot: false,
	created_at: '2017-12-17T21:54:14.000Z',
	display_name: 'whatever whatever whatever witch',
	emojis: [],
	fields: [],
	followers_count: 705,
	following_count: 326,
	header:
	'https://shigusegubu.club/media/7ab024d9-2a8a-4fbc-9ce8-da06756ae2db/6aadefe4e264133bc377ab450e6b045b6f5458542a5c59e6c741f86107f0388b.png',
	header_static:
	'https://shigusegubu.club/media/7ab024d9-2a8a-4fbc-9ce8-da06756ae2db/6aadefe4e264133bc377ab450e6b045b6f5458542a5c59e6c741f86107f0388b.png',
	id: '1',
	locked: false,
	note:
	'Volatile Internet Weirdo. Name pronounced as Hee Jay. JS and Java dark arts mage, Elixir trainee. I love sampo and lain. Matrix is <span><a data-user="1" href="https://shigusegubu.club/users/hj">@<span>hj</span></a></span>:matrix.heldscal.la Pronouns are whatever. Do not DM me unless it\'s truly private matter and you\'re instance\'s admin or you risk your DM to be reposted publicly.Wish i was Finnish girl.',
	pleroma: { confirmation_pending: false, tags: null },
	source: { note: '', privacy: 'public', sensitive: false },
	statuses_count: 41775,
	url: 'https://shigusegubu.club/users/hj',
	username: 'hj'
	}, overrides)
	}

	const makeMockStatusMasto = (overrides = {}) => {
	return Object.assign({
	account: makeMockUserMasto(),
	application: { name: 'Web', website: null },
	content:
	'<span><a data-user="14660" href="https://pleroma.soykaf.com/users/sampo">@<span>sampo</span></a></span> god i wish i was there',
	created_at: '2019-01-17T16:29:23.000Z',
	emojis: [],
	favourited: false,
	favourites_count: 1,
	id: '10423476',
	in_reply_to_account_id: '14660',
	in_reply_to_id: '10423197',
	language: null,
	media_attachments: [],
	mentions: [
	{
	acct: 'sampo@pleroma.soykaf.com',
	id: '14660',
	url: 'https://pleroma.soykaf.com/users/sampo',
	username: 'sampo'
	}
	],
	muted: false,
	reblog: null,
	reblogged: false,
	reblogs_count: 0,
	replies_count: 0,
	sensitive: false,
	spoiler_text: '',
	tags: [],
	uri: 'https://shigusegubu.club/objects/16033fbb-97c0-4f0e-b834-7abb92fb8639',
	url: 'https://shigusegubu.club/objects/16033fbb-97c0-4f0e-b834-7abb92fb8639',
	visibility: 'public',
	pleroma: {
	local: true
	}
	}, overrides)
	}

	const makeMockNotificationQvitter = (overrides = {}) => {
	return Object.assign({
	notice: makeMockStatusQvitter(),
	ntype: 'follow',
	from_profile: makeMockUserQvitter(),
	is_seen: 0,
	id: 123
	}, overrides)
	}

	const makeMockEmojiMasto = (overrides = [{}]) => {
	return [
	Object.assign({
	shortcode: 'image',
	static_url: 'https://example.com/image.png',
	url: 'https://example.com/image.png',
	visible_in_picker: false
	}, overrides[0]),
	Object.assign({
	shortcode: 'thinking',
	static_url: 'https://example.com/think.png',
	url: 'https://example.com/think.png',
	visible_in_picker: false
	}, overrides[1])
	]
	}

	describe('API Entities normalizer', () => {
	describe('parseStatus', () => {
	describe('QVitter preprocessing', () => {
	it('doesn\'t blow up', () => {
	const parsed = qvitterapidata.map(parseStatus)
	expect(parsed.length).to.eq(qvitterapidata.length)
	})

	it('identifies favorites', () => {
	const fav = {
	uri: 'tag:soykaf.com,2016-08-21:fave:2558:note:339495:2016-08-21T16:54:04+00:00',
	is_post_verb: false
	}

	const mastoFav = {
	uri: 'tag:mastodon.social,2016-11-27:objectId=73903:objectType=Favourite',
	is_post_verb: false
	}

	expect(parseStatus(makeMockStatusQvitter(fav))).to.have.property('type', 'favorite')
	expect(parseStatus(makeMockStatusQvitter(mastoFav))).to.have.property('type', 'favorite')
	})

	it('processes repeats correctly', () => {
	const post = makeMockStatusQvitter({ retweeted_status: null, id: 'deadbeef' })
	const repeat = makeMockStatusQvitter({ retweeted_status: post, is_post_verb: false, id: 'foobar' })

	const parsedPost = parseStatus(post)
	const parsedRepeat = parseStatus(repeat)

	expect(parsedPost).to.have.property('type', 'status')
	expect(parsedRepeat).to.have.property('type', 'retweet')
	expect(parsedRepeat).to.have.property('retweeted_status')
	expect(parsedRepeat).to.have.deep.property('retweeted_status.id', 'deadbeef')
	})

	it('sets nsfw for statuses with the #nsfw tag', () => {
	const safe = makeMockStatusQvitter({ id: '1', text: 'Hello oniichan' })
	const nsfw = makeMockStatusQvitter({ id: '1', text: 'Hello oniichan #nsfw' })

	expect(parseStatus(safe).nsfw).to.eq(false)
	expect(parseStatus(nsfw).nsfw).to.eq(true)
	})

	it('leaves existing nsfw settings alone', () => {
	const nsfw = makeMockStatusQvitter({ id: '1', text: 'Hello oniichan #nsfw', nsfw: false })

	expect(parseStatus(nsfw).nsfw).to.eq(false)
	})
	})

	describe('Mastoapi preprocessing and converting', () => {
	it('doesn\'t blow up', () => {
	const parsed = mastoapidata.map(parseStatus)
	expect(parsed.length).to.eq(mastoapidata.length)
	})

	it('processes repeats correctly', () => {
	const post = makeMockStatusMasto({ reblog: null, id: 'deadbeef' })
	const repeat = makeMockStatusMasto({ reblog: post, id: 'foobar' })

	const parsedPost = parseStatus(post)
	const parsedRepeat = parseStatus(repeat)

	expect(parsedPost).to.have.property('type', 'status')
	expect(parsedRepeat).to.have.property('type', 'retweet')
	expect(parsedRepeat).to.have.property('retweeted_status')
	expect(parsedRepeat).to.have.deep.property('retweeted_status.id', 'deadbeef')
	})
	-
	- it('adds emojis to subject line', () => {
	- const post = makeMockStatusMasto({ emojis: makeMockEmojiMasto(), spoiler_text: 'CW: 300 IQ :thinking:' })
	-
	- const parsedPost = parseStatus(post)
	-
	- expect(parsedPost).to.have.property('summary_html').that.contains('<img')
	- })
	})
	})

	// Statuses generally already contain some info regarding users and there's nearly 1:1 mapping, so very little to test
	describe('parseUsers (MastoAPI)', () => {
	it('sets correct is_local for users depending on their screen_name', () => {
	const local = makeMockUserMasto({ acct: 'foo' })
	const remote = makeMockUserMasto({ acct: 'foo@bar.baz' })

	expect(parseUser(local)).to.have.property('is_local', true)
	expect(parseUser(remote)).to.have.property('is_local', false)
	})

	it('adds emojis to user name', () => {
	const user = makeMockUserMasto({ emojis: makeMockEmojiMasto(), display_name: 'The :thinking: thinker' })

	const parsedUser = parseUser(user)

	expect(parsedUser).to.have.property('name_html').that.contains('<img')
	})

	it('adds emojis to user bio', () => {
	const user = makeMockUserMasto({ emojis: makeMockEmojiMasto(), note: 'Hello i like to :thinking: a lot' })

	const parsedUser = parseUser(user)

	expect(parsedUser).to.have.property('description_html').that.contains('<img')
	})

	it('adds emojis to user profile fields', () => {
	const user = makeMockUserMasto({ emojis: makeMockEmojiMasto(), fields: [{ name: ':thinking:', value: ':image:' }] })

	const parsedUser = parseUser(user)

	expect(parsedUser).to.have.property('fields_html').to.be.an('array')

	const field = parsedUser.fields_html[0]

	expect(field).to.have.property('name').that.contains('<img')
	expect(field).to.have.property('value').that.contains('<img')
	})

	it('removes html tags from user profile fields', () => {
	const user = makeMockUserMasto({ emojis: makeMockEmojiMasto(), fields: [{ name: 'user', value: '<a rel="me" href="https://example.com/@user">@user</a>' }] })

	const parsedUser = parseUser(user)

	expect(parsedUser).to.have.property('fields_text').to.be.an('array')

	const field = parsedUser.fields_text[0]

	expect(field).to.have.property('name').that.equal('user')
	expect(field).to.have.property('value').that.equal('@user')
	})

	it('adds hide_follows and hide_followers user settings', () => {
	const user = makeMockUserMasto({ pleroma: { hide_followers: true, hide_follows: false, hide_followers_count: false, hide_follows_count: true } })

	expect(parseUser(user)).to.have.property('hide_followers', true)
	expect(parseUser(user)).to.have.property('hide_follows', false)
	expect(parseUser(user)).to.have.property('hide_followers_count', false)
	expect(parseUser(user)).to.have.property('hide_follows_count', true)
	})

	it('converts IDN to unicode and marks it as internatonal', () => {
	const user = makeMockUserMasto({ acct: 'lain@xn--lin-6cd.com' })

	expect(parseUser(user)).to.have.property('screen_name_ui').that.equal('lain@🌏lаin.com')
	})
	})

	// We currently use QvitterAPI notifications only, and especially due to MastoAPI lacking is_seen, support for MastoAPI
	// is more of an afterthought
	describe('parseNotifications (QvitterAPI)', () => {
	it('correctly normalizes data to FE\'s format', () => {
	const notif = makeMockNotificationQvitter({
	id: 123,
	notice: makeMockStatusQvitter({ id: 444 }),
	from_profile: makeMockUserQvitter({ id: 'spurdo' })
	})
	expect(parseNotification(notif)).to.have.property('id', 123)
	expect(parseNotification(notif)).to.have.property('seen', false)
	expect(parseNotification(notif)).to.have.deep.property('status.id', '444')
	expect(parseNotification(notif)).to.have.deep.property('action.id', '444')
	expect(parseNotification(notif)).to.have.deep.property('from_profile.id', 'spurdo')
	})

	it('correctly normalizes favorite notifications', () => {
	const notif = makeMockNotificationQvitter({
	id: 123,
	ntype: 'like',
	notice: makeMockStatusQvitter({
	id: 444,
	favorited_status: makeMockStatusQvitter({ id: 4412 })
	}),
	is_seen: 1,
	from_profile: makeMockUserQvitter({ id: 'spurdo' })
	})
	expect(parseNotification(notif)).to.have.property('id', 123)
	expect(parseNotification(notif)).to.have.property('type', 'like')
	expect(parseNotification(notif)).to.have.property('seen', true)
	expect(parseNotification(notif)).to.have.deep.property('status.id', '4412')
	expect(parseNotification(notif)).to.have.deep.property('action.id', '444')
	expect(parseNotification(notif)).to.have.deep.property('from_profile.id', 'spurdo')
	})
	})

	describe('MastoAPI emoji adder', () => {
	const emojis = makeMockEmojiMasto()
	const imageHtml = '<img src="https://example.com/image.png" alt=":image:" title=":image:" class="emoji" />'
	.replace(/"/g, '\'')
	const thinkHtml = '<img src="https://example.com/think.png" alt=":thinking:" title=":thinking:" class="emoji" />'
	.replace(/"/g, '\'')

	it('correctly replaces shortcodes in supplied string', () => {
	const result = addEmojis('This post has :image: emoji and :thinking: emoji', emojis)
	expect(result).to.include(thinkHtml)
	expect(result).to.include(imageHtml)
	})

	it('handles consecutive emojis correctly', () => {
	const result = addEmojis('Lelel emoji spam :thinking::thinking::thinking::thinking:', emojis)
	expect(result).to.include(thinkHtml + thinkHtml + thinkHtml + thinkHtml)
	})

	it('Doesn\'t replace nonexistent emojis', () => {
	const result = addEmojis('Admin add the :tenshi: emoji', emojis)
	expect(result).to.equal('Admin add the :tenshi: emoji')
	})

	it('Doesn\'t blow up on regex special characters', () => {
	const emojis = makeMockEmojiMasto([{
	shortcode: 'c++'
	}, {
	shortcode: '[a-z] {\|}*'
	}])
	const result = addEmojis('This post has :c++: emoji and :[a-z] {\|}*: emoji', emojis)
	expect(result).to.include('title=\':c++:\'')
	expect(result).to.include('title=\':[a-z] {\|}*:\'')
	})
	})

	describe('Link header pagination', () => {
	it('Parses min and max ids as integers', () => {
	const linkHeader = '<https://example.com/api/v1/notifications?max_id=861676>; rel="next", <https://example.com/api/v1/notifications?min_id=861741>; rel="prev"'
	const result = parseLinkHeaderPagination(linkHeader)
	expect(result).to.eql({
	'maxId': 861676,
	'minId': 861741
	})
	})

	it('Parses min and max ids as flakes', () => {
	const linkHeader = '<http://example.com/api/v1/timelines/home?max_id=9waQx5IIS48qVue2Ai>; rel="next", <http://example.com/api/v1/timelines/home?min_id=9wi61nIPnfn674xgie>; rel="prev"'
	const result = parseLinkHeaderPagination(linkHeader, { flakeId: true })
	expect(result).to.eql({
	'maxId': '9waQx5IIS48qVue2Ai',
	'minId': '9wi61nIPnfn674xgie'
	})
	})
	})
	})

File Metadata

Mime Type: text/x-diff
Expires: Sun, Aug 9, 1:12 PM (1 d, 4 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1724555
Default Alt Text: (97 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions