No OneTemporary
Actions

Size

50 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
	index ffb36f50eb..4144d8950e 100644
	--- a/src/components/rich_content/rich_content.jsx
	+++ b/src/components/rich_content/rich_content.jsx
	@@ -1,356 +1,368 @@
	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 MentionsLine from 'src/components/mentions_line/mentions_line.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
	+ },
	+ hideMentions: {
	+ 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
	+ let firstMentionReplaced = false

	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 ''
	+ if (!firstMentionReplaced && !this.hideMentions) {
	+ firstMentionReplaced = true
	+ return <MentionsLine mentions={ firstMentions } />
	+ } else {
	+ 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 && lastMentions.length > 1) {
	break
	} else {
	- return ''
	+ return !this.hideMentions ? <MentionsLine mentions={lastMentions} /> : ''
	}
	} 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 = []
	const greentextHandle = new Set(['p', 'div'])

	let nonEmptyIndex = -1
	const lines = convertHtmlToLines(html)
	const linesNum = lines.filter(c => c.text).length
	const newHtml = lines.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
	nonEmptyIndex += 1

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

	// 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 mentionsNum = 0
	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
	mentionsNum++
	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)

	if (
	handleLinks && // Do we handle links at all?
	mentionsNum > 1 && // Does it have more than one mention?
	!hasLooseText && // Don't do anything if it has something besides mentions
	nonEmptyIndex === 0 && // Only check last (first since list is reversed) line
	nonEmptyIndex !== linesNum - 1 // Don't do anything if there's only one line
	) {
	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/status_body/status_body.js b/src/components/status_body/status_body.js
	index 26491e1b47..9ee7a10967 100644
	--- a/src/components/status_body/status_body.js
	+++ b/src/components/status_body/status_body.js
	@@ -1,112 +1,102 @@
	import fileType from 'src/services/file_type/file_type.service'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	-import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
	import { mapGetters } from 'vuex'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { set } from 'vue'
	import {
	faFile,
	faMusic,
	faImage,
	faLink,
	faPollH
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faFile,
	faMusic,
	faImage,
	faLink,
	faPollH
	)

	const StatusContent = {
	name: 'StatusContent',
	props: [
	'status',
	'focused',
	'noHeading',
	'fullContent',
	'singleLine',
	'hideMentions'
	],
	data () {
	return {
	showingTall: this.fullContent \|\| (this.inConversation && this.focused),
	showingLongSubject: false,
	// not as computed because it sets the initial state which will be changed later
	expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject,
	- headTailLinks: null,
	- firstMentions: [],
	- lastMentions: []
	}
	},
	computed: {
	localCollapseSubjectDefault () {
	return this.mergedConfig.collapseMessageWithSubject
	},
	// This is a bit hacky, but we want to approximate post height before rendering
	// so we count newlines (masto uses <p> for paragraphs, GS uses <br> between them)
	// as well as approximate line count by counting characters and approximating ~80
	// per line.
	//
	// Using max-height + overflow: auto for status components resulted in false positives
	// very often with japanese characters, and it was very annoying.
	tallStatus () {
	const lengthScore = this.status.raw_html.split(/<p\|<br/).length + this.status.text.length / 80
	return lengthScore > 20
	},
	longSubject () {
	return this.status.summary.length > 240
	},
	// When a status has a subject and is also tall, we should only have one show more/less button. If the default is to collapse statuses with subjects, we just treat it like a status with a subject; otherwise, we just treat it like a tall status.
	mightHideBecauseSubject () {
	return !!this.status.summary && this.localCollapseSubjectDefault
	},
	mightHideBecauseTall () {
	return this.tallStatus && !(this.status.summary && this.localCollapseSubjectDefault)
	},
	hideSubjectStatus () {
	return this.mightHideBecauseSubject && !this.expandingSubject
	},
	hideTallStatus () {
	return this.mightHideBecauseTall && !this.showingTall
	},
	showingMore () {
	return (this.mightHideBecauseTall && this.showingTall) \|\| (this.mightHideBecauseSubject && this.expandingSubject)
	},
	attachmentTypes () {
	return this.status.attachments.map(file => fileType.fileType(file.mimetype))
	},
	...mapGetters(['mergedConfig'])
	},
	components: {
	- RichContent,
	- MentionsLine
	+ RichContent
	},
	mounted () {
	this.status.attentions && this.status.attentions.forEach(attn => {
	const { id } = attn
	this.$store.dispatch('fetchUserIfMissing', id)
	})
	},
	methods: {
	toggleShowMore () {
	if (this.mightHideBecauseTall) {
	this.showingTall = !this.showingTall
	} else if (this.mightHideBecauseSubject) {
	this.expandingSubject = !this.expandingSubject
	}
	},
	- setHeadTailLinks (headTailLinks) {
	- set(this, 'headTailLinks', headTailLinks)
	- set(this, 'firstMentions', headTailLinks.firstMentions)
	- set(this, 'lastMentions', headTailLinks.lastMentions)
	- },
	generateTagLink (tag) {
	return `/tag/${tag}`
	}
	}
	}

	export default StatusContent
	diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
	index 81a687f1ea..c7732bfe93 100644
	--- a/src/components/status_body/status_body.scss
	+++ b/src/components/status_body/status_body.scss
	@@ -1,118 +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 {
	+ .media-body {
	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);
	}
	}
	diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
	index 3dc4916c44..2be46303b3 100644
	--- a/src/components/status_body/status_body.vue
	+++ b/src/components/status_body/status_body.vue
	@@ -1,108 +1,97 @@
	<template>
	<div class="StatusBody">
	<div class="body">
	<div
	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
	+ <RichContent
	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 > 1 && firstMentions.length <= 1"
	- :mentions="lastMentions"
	- />
	- </span>
	+ :class="{ '-single-line': singleLine }"
	+ class="text media-body"
	+ :html="status.raw_html"
	+ :emoji="status.emojis"
	+ :handle-links="true"
	+ :hide-mentions="hideMentions"
	+ :greentext="mergedConfig.greentext"
	+ @parseReady="$emit('parseReady', $event)"
	+ />

	<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/components/status_content/status_content.js b/src/components/status_content/status_content.js
	index 11a4974b58..51895ef64b 100644
	--- a/src/components/status_content/status_content.js
	+++ b/src/components/status_content/status_content.js
	@@ -1,105 +1,102 @@
	import Attachment from '../attachment/attachment.vue'
	import Poll from '../poll/poll.vue'
	import Gallery from '../gallery/gallery.vue'
	import StatusBody from 'src/components/status_body/status_body.vue'
	import LinkPreview from '../link-preview/link-preview.vue'
	import fileType from 'src/services/file_type/file_type.service'
	import { mapGetters, mapState } from 'vuex'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faCircleNotch,
	faFile,
	faMusic,
	faImage,
	faLink,
	faPollH
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faCircleNotch,
	faFile,
	faMusic,
	faImage,
	faLink,
	faPollH
	)

	const StatusContent = {
	name: 'StatusContent',
	props: [
	'status',
	'focused',
	'noHeading',
	'fullContent',
	'singleLine',
	'hideMentions'
	],
	computed: {
	hideAttachments () {
	return (this.mergedConfig.hideAttachments && !this.inConversation) \|\|
	(this.mergedConfig.hideAttachmentsInConv && this.inConversation)
	},
	nsfwClickthrough () {
	if (!this.status.nsfw) {
	return false
	}
	if (this.status.summary && this.localCollapseSubjectDefault) {
	return false
	}
	return true
	},
	attachmentSize () {
	if ((this.mergedConfig.hideAttachments && !this.inConversation) \|\|
	(this.mergedConfig.hideAttachmentsInConv && this.inConversation) \|\|
	(this.status.attachments.length > this.maxThumbnails)) {
	return 'hide'
	} else if (this.compact) {
	return 'small'
	}
	return 'normal'
	},
	galleryTypes () {
	if (this.attachmentSize === 'hide') {
	return []
	}
	return this.mergedConfig.playVideosInModal
	? ['image', 'video']
	: ['image']
	},
	galleryAttachments () {
	return this.status.attachments.filter(
	file => fileType.fileMatchesSomeType(this.galleryTypes, file)
	)
	},
	nonGalleryAttachments () {
	return this.status.attachments.filter(
	file => !fileType.fileMatchesSomeType(this.galleryTypes, file)
	)
	},
	maxThumbnails () {
	return this.mergedConfig.maxThumbnails
	},
	...mapGetters(['mergedConfig']),
	...mapState({
	currentUser: state => state.users.currentUser
	})
	},
	components: {
	Attachment,
	Poll,
	Gallery,
	LinkPreview,
	StatusBody
	},
	methods: {
	- setHeadTailLinks (headTailLinks) {
	- this.$emit('parseReady', headTailLinks)
	- },
	setMedia () {
	const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
	return () => this.$store.dispatch('setMedia', attachments)
	}
	}
	}

	export default StatusContent
	diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
	index feb34d2c13..2e71757d67 100644
	--- a/src/components/status_content/status_content.vue
	+++ b/src/components/status_content/status_content.vue
	@@ -1,63 +1,63 @@
	<template>
	<div class="StatusContent">
	<slot name="header" />
	<StatusBody
	:status="status"
	:single-line="singleLine"
	:hide-mentions="hideMentions"
	- @parseReady="setHeadTailLinks"
	+ @parseReady="$emit('parseReady', $event)"
	>
	<div v-if="status.poll && status.poll.options">
	<poll :base-poll="status.poll" />
	</div>

	<div
	v-if="status.attachments.length !== 0"
	class="attachments media-body"
	>
	<attachment
	v-for="attachment in nonGalleryAttachments"
	:key="attachment.id"
	class="non-gallery"
	:size="attachmentSize"
	:nsfw="nsfwClickthrough"
	:attachment="attachment"
	:allow-play="true"
	:set-media="setMedia()"
	@play="$emit('mediaplay', attachment.id)"
	@pause="$emit('mediapause', attachment.id)"
	/>
	<gallery
	v-if="galleryAttachments.length > 0"
	:nsfw="nsfwClickthrough"
	:attachments="galleryAttachments"
	:set-media="setMedia()"
	/>
	</div>

	<div
	v-if="status.card && !noHeading"
	class="link-preview media-body"
	>
	<link-preview
	:card="status.card"
	:size="attachmentSize"
	:nsfw="nsfwClickthrough"
	/>
	</div>
	</StatusBody>
	<slot name="footer" />
	</div>
	</template>

	<script src="./status_content.js" ></script>
	<style lang="scss">
	@import '../../_variables.scss';

	$status-margin: 0.75em;

	.StatusContent {
	flex: 1;
	min-width: 0;
	}
	</style>
	diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
	index 835fbea2cc..c6ec43154a 100644
	--- a/test/unit/specs/components/rich_content.spec.js
	+++ b/test/unit/specs/components/rich_content.spec.js
	@@ -1,518 +1,607 @@
	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: {
	+ hideMentions: true,
	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: {
	+ hideMentions: true,
	+ handleLinks: true,
	+ greentext: true,
	+ emoji: [],
	+ html
	+ }
	+ })
	+
	+ expect(wrapper.html()).to.eql(compwrap(expected))
	+ })
	+
	+ it('replaces first mention with mentionsline if hideMentions=false', () => {
	+ const html = p(
	+ makeMention('John'),
	+ ' how are you doing thoday?'
	+ )
	+ const expected = p(
	+ '<span class="h-card">',
	+ '<mentionsline-stub mentions="',
	+ '[object Object]',
	+ '"></mentionsline-stub>',
	+ '</span>',
	+ 'how are you doing thoday?'
	+ )
	+ const wrapper = shallowMount(RichContent, {
	+ localVue,
	+ propsData: {
	+ hideMentions: false,
	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: {
	+ hideMentions: true,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html
	}
	})

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

	+ it('replaces mentions at the end of the hellpost if hideMentions=false (<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(
	+ '<mentionsline-stub mentions="',
	+ '[object Object],',
	+ '[object Object],',
	+ '[object Object]',
	+ '"></mentionsline-stub>'
	+ )
	+ ].join('')
	+
	+ const wrapper = shallowMount(RichContent, {
	+ localVue,
	+ propsData: {
	+ hideMentions: false,
	+ 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: {
	+ hideMentions: true,
	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: {
	+ hideMentions: true,
	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: {
	+ hideMentions: true,
	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: {
	+ hideMentions: true,
	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: {
	+ hideMentions: true,
	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: {
	+ hideMentions: true,
	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: {
	+ hideMentions: true,
	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: {
	+ hideMentions: true,
	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: {
	+ hideMentions: true,
	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: {
	+ hideMentions: true,
	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))
	})

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

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

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

	it('Don\'t remove last mention if it\'s the only one', () => {
	const html = [
	'Bruh',
	'Bruh',
	makeMention('foo'),
	makeMention('bar'),
	makeMention('baz')
	].join('<br>')
	+ const expected = [
	+ 'Bruh',
	+ 'Bruh',
	+ stubMention('foo'),
	+ stubMention('bar'),
	+ stubMention('baz')
	+ ].join('<br>')

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

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

	it('Don\'t remove last mentions if there are more than one first mention - remove first instead', () => {
	const html = [
	[
	makeMention('foo'),
	makeMention('bar')
	].join(' '),
	'Bruh',
	'Bruh',
	[
	makeMention('foo'),
	makeMention('bar'),
	makeMention('baz')
	].join(' ')
	].join('\n')

	const expected = [
	[
	removedMentionSpan,
	removedMentionSpan,
	'Bruh' // Due to trim we remove extra newline
	].join(''),
	'Bruh',
	lastMentions([
	stubMention('foo'),
	stubMention('bar'),
	stubMention('baz')
	].join(' '))
	].join('\n')

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

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

	it('Remove last mentions if there\'s just one first mention - remove all', () => {
	const html = [
	[
	makeMention('foo')
	].join(' '),
	'Bruh',
	'Bruh',
	[
	makeMention('foo'),
	makeMention('bar'),
	makeMention('baz')
	].join(' ')
	].join('\n')

	const expected = [
	[
	removedMentionSpan,
	'Bruh' // Due to trim we remove extra newline
	].join(''),
	'Bruh\n' // Can't remove this one yet
	].join('\n')

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

	expect(wrapper.html()).to.eql(compwrap(expected))
	})
	})
	diff --git a/test/unit/specs/services/html_converter/html_line_converter.spec.js b/test/unit/specs/services/html_converter/html_line_converter.spec.js
	index c8c89700b3..de7c7fc26a 100644
	--- a/test/unit/specs/services/html_converter/html_line_converter.spec.js
	+++ b/test/unit/specs/services/html_converter/html_line_converter.spec.js
	@@ -1,164 +1,164 @@
	import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js'

	const greentextHandle = new Set(['p', 'div'])
	const mapOnlyText = (processor) => (input) => {
	if (input.text && input.level.every(l => greentextHandle.has(l))) {
	return processor(input.text)
	} else if (input.text) {
	return input.text
	} else {
	return input
	}
	}

	-describe.only('html_line_converter', () => {
	+describe('html_line_converter', () => {
	describe('with processor that keeps original line should not make any changes to HTML when', () => {
	const processorKeep = (line) => line
	it('fed with regular HTML with newlines', () => {
	const inputOutput = '1<br/>2<p class="lol">3 4</p> 5 \n 6 <p > 7 <br> 8 </p> <br>\n<br/>'
	const result = convertHtmlToLines(inputOutput)
	const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
	expect(comparableResult).to.eql(inputOutput)
	})

	it('fed with possibly broken HTML with invalid tags/composition', () => {
	const inputOutput = '<feeee dwdwddddddw> <i>ayy<b>lm</i>ao</b> </section>'
	const result = convertHtmlToLines(inputOutput)
	const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
	expect(comparableResult).to.eql(inputOutput)
	})

	it('fed with very broken HTML with broken composition', () => {
	const inputOutput = '</p> lmao what </div> whats going on <div> wha <p>'
	const result = convertHtmlToLines(inputOutput)
	const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
	expect(comparableResult).to.eql(inputOutput)
	})

	it('fed with sorta valid HTML but tags aren\'t closed', () => {
	const inputOutput = 'just leaving a <div> hanging'
	const result = convertHtmlToLines(inputOutput)
	const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
	expect(comparableResult).to.eql(inputOutput)
	})

	it('fed with not really HTML at this point... tags that aren\'t finished', () => {
	const inputOutput = 'do you expect me to finish this <div class='
	const result = convertHtmlToLines(inputOutput)
	const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
	expect(comparableResult).to.eql(inputOutput)
	})

	it('fed with dubiously valid HTML (p within p and also div inside p)', () => {
	const inputOutput = 'look ma <p> p \nwithin <p> p! </p> and a <br/><div>div!</div></p>'
	const result = convertHtmlToLines(inputOutput)
	const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
	expect(comparableResult).to.eql(inputOutput)
	})

	it('fed with maybe valid HTML? self-closing divs and ps', () => {
	const inputOutput = 'a <div class="what"/> what now <p aria-label="wtf"/> ?'
	const result = convertHtmlToLines(inputOutput)
	const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
	expect(comparableResult).to.eql(inputOutput)
	})

	it('fed with valid XHTML containing a CDATA', () => {
	const inputOutput = 'Yes, it is me, <![CDATA[DIO]]>'
	const result = convertHtmlToLines(inputOutput)
	const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
	expect(comparableResult).to.eql(inputOutput)
	})
	})
	describe('with processor that replaces lines with word "_" should match expected line when', () => {
	const processorReplace = (line) => '_'
	it('fed with regular HTML with newlines', () => {
	const input = '1<br/>2<p class="lol">3 4</p> 5 \n 6 <p > 7 <br> 8 </p> <br>\n<br/>'
	const output = '_<br/>_<p class="lol">_</p>_\n_<p >_<br>_</p> <br>\n<br/>'
	const result = convertHtmlToLines(input)
	const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
	expect(comparableResult).to.eql(output)
	})

	it('fed with possibly broken HTML with invalid tags/composition', () => {
	const input = '<feeee dwdwddddddw> <i>ayy<b>lm</i>ao</b> </section>'
	const output = '_'
	const result = convertHtmlToLines(input)
	const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
	expect(comparableResult).to.eql(output)
	})

	it('fed with very broken HTML with broken composition', () => {
	const input = '</p> lmao what </div> whats going on <div> wha <p>'
	const output = '_<div>_<p>'
	const result = convertHtmlToLines(input)
	const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
	expect(comparableResult).to.eql(output)
	})

	it('fed with sorta valid HTML but tags aren\'t closed', () => {
	const input = 'just leaving a <div> hanging'
	const output = '_<div>_'
	const result = convertHtmlToLines(input)
	const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
	expect(comparableResult).to.eql(output)
	})

	it('fed with not really HTML at this point... tags that aren\'t finished', () => {
	const input = 'do you expect me to finish this <div class='
	const output = '_'
	const result = convertHtmlToLines(input)
	const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
	expect(comparableResult).to.eql(output)
	})

	it('fed with dubiously valid HTML (p within p and also div inside p)', () => {
	const input = 'look ma <p> p \nwithin <p> p! </p> and a <br/><div>div!</div></p>'
	const output = '_<p>_\n_<p>_</p>_<br/><div>_</div></p>'
	const result = convertHtmlToLines(input)
	const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
	expect(comparableResult).to.eql(output)
	})

	it('fed with maybe valid HTML? (XHTML) self-closing divs and ps', () => {
	const input = 'a <div class="what"/> what now <p aria-label="wtf"/> ?'
	const output = '_<div class="what"/>_<p aria-label="wtf"/>_'
	const result = convertHtmlToLines(input)
	const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
	expect(comparableResult).to.eql(output)
	})

	it('fed with valid XHTML containing a CDATA', () => {
	const input = 'Yes, it is me, <![CDATA[DIO]]>'
	const output = '_'
	const result = convertHtmlToLines(input)
	const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
	expect(comparableResult).to.eql(output)
	})

	it('Testing handling ignored blocks', () => {
	const input = `
	<pre><code>> rei = "0"
	'0'
	> rei == 0
	true
	> rei == null
	false</code></pre><blockquote>That, christian-like JS diagram but it’s evangelion instead.</blockquote>
	`
	const result = convertHtmlToLines(input)
	const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
	expect(comparableResult).to.eql(input)
	})
	it('Testing handling ignored blocks 2', () => {
	const input = `
	<blockquote>An SSL error has happened.</blockquote><p>Shakespeare</p>
	`
	const output = `
	<blockquote>An SSL error has happened.</blockquote><p>_</p>
	`
	const result = convertHtmlToLines(input)
	const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
	expect(comparableResult).to.eql(output)
	})
	})
	})

File Metadata

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

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions