review + fixes

This commit is contained in:
Henry Jameson 2021-06-12 20:42:17 +03:00
parent 90a188f2c3
commit 418f029789
10 changed files with 55 additions and 31 deletions

View file

@ -41,12 +41,10 @@
class="full popover-default" class="full popover-default"
:class="[highlightType]" :class="[highlightType]"
> >
<!-- eslint-disable vue/no-v-html -->
<span <span
class="userNameFull" class="userNameFull"
v-text="'@' + userNameFull" v-text="'@' + userNameFull"
/> />
<!-- eslint-enable vue/no-v-html -->
</span> </span>
</span> </span>
</span> </span>

View file

@ -1,6 +1,7 @@
.MentionsLine { .MentionsLine {
.showMoreLess { .showMoreLess {
white-space: normal; white-space: normal;
&.-newStyle { &.-newStyle {
line-height: 1.5; line-height: 1.5;
font-size: inherit; font-size: inherit;

View file

@ -8,6 +8,25 @@ import MentionLink from 'src/components/mention_link/mention_link.vue'
import './rich_content.scss' 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', { export default Vue.component('RichContent', {
name: 'RichContent', name: 'RichContent',
props: { props: {
@ -241,8 +260,10 @@ export const preProcessPerLine = (html, greentext, handleLinks) => {
.replace(/@\w+/gi, '') // remove mentions (even failed ones) .replace(/@\w+/gi, '') // remove mentions (even failed ones)
.trim() .trim()
if (cleanedString.startsWith('&gt;')) { if (cleanedString.startsWith('&gt;')) {
nonEmptyIndex += 1
return `<span class='greentext'>${string}</span>` return `<span class='greentext'>${string}</span>`
} else if (cleanedString.startsWith('&lt;')) { } else if (cleanedString.startsWith('&lt;')) {
nonEmptyIndex += 1
return `<span class='cyantext'>${string}</span>` return `<span class='cyantext'>${string}</span>`
} }
} }

View file

@ -474,7 +474,7 @@ export default {
this.loadThemeFromLocalStorage(false, true) this.loadThemeFromLocalStorage(false, true)
break break
case 'file': case 'file':
console.error('Forcing snapshout from file is not supported yet') console.error('Forcing snapshot from file is not supported yet')
break break
} }
this.dismissWarning() this.dismissWarning()

View file

@ -35,8 +35,7 @@ import {
faStar, faStar,
faEyeSlash, faEyeSlash,
faEye, faEye,
faThumbtack, faThumbtack
faAt
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
@ -53,8 +52,7 @@ library.add(
faEllipsisH, faEllipsisH,
faEyeSlash, faEyeSlash,
faEye, faEye,
faThumbtack, faThumbtack
faAt
) )
const Status = { const Status = {

View file

@ -115,12 +115,4 @@
.cyantext { .cyantext {
color: var(--postCyantext, $fallback--cBlue); color: var(--postCyantext, $fallback--cBlue);
} }
/* Not sure if this is necessary */
video {
max-width: 100%;
max-height: 400px;
vertical-align: middle;
object-fit: contain;
}
} }

View file

@ -2,7 +2,7 @@
<div class="StatusBody"> <div class="StatusBody">
<div class="body"> <div class="body">
<div <div
v-if="status.summary_html" v-if="status.summary_raw_html"
class="summary-wrapper" class="summary-wrapper"
:class="{ '-tall': (longSubject && !showingLongSubject) }" :class="{ '-tall': (longSubject && !showingLongSubject) }"
> >
@ -39,7 +39,7 @@
{{ $t("general.show_more") }} {{ $t("general.show_more") }}
</button> </button>
<span <span
v-if="!hideSubjectStatus && !(singleLine && status.summary_html)" v-if="!hideSubjectStatus && !(singleLine && status.summary_raw_html)"
class="rich-content-wrapper" class="rich-content-wrapper"
> >
<MentionsLine <MentionsLine

View file

@ -296,7 +296,6 @@ export const parseStatus = (data) => {
} }
output.summary_raw_html = escape(data.spoiler_text) output.summary_raw_html = escape(data.spoiler_text)
output.summary_html = addEmojis(escape(data.spoiler_text), data.emojis)
output.external_url = data.url output.external_url = data.url
output.poll = data.poll output.poll = data.poll
if (output.poll) { if (output.poll) {
@ -449,11 +448,6 @@ export const parseChatMessage = (message) => {
output.chat_id = message.chat_id output.chat_id = message.chat_id
output.emojis = message.emojis output.emojis = message.emojis
output.content = message.content output.content = message.content
if (message.content) {
output.content = addEmojis(message.content, message.emojis)
} else {
output.content = ''
}
if (message.attachment) { if (message.attachment) {
output.attachments = [parseAttachment(message.attachment)] output.attachments = [parseAttachment(message.attachment)]
} else { } else {

View file

@ -354,4 +354,32 @@ describe('RichContent', () => {
expect(wrapper.html()).to.eql(compwrap(html)) expect(wrapper.html()).to.eql(compwrap(html))
}) })
it('Greentext + last mentions', () => {
const html = [
'&gt;quote',
makeMention('lol'),
'&gt;quote',
'&gt;quote'
].join('\n')
const expected = [
'<span class="greentext">&gt;quote</span>',
stubMention('lol'),
'<span class="greentext">&gt;quote</span>',
'<span class="greentext">&gt;quote</span>'
].join('\n')
const wrapper = shallowMount(RichContent, {
localVue,
propsData: {
handleLinks: true,
greentext: true,
emoji: [],
html
}
})
expect(wrapper.html()).to.eql(compwrap(expected))
})
}) })

View file

@ -231,14 +231,6 @@ describe('API Entities normalizer', () => {
expect(parsedRepeat).to.have.property('retweeted_status') expect(parsedRepeat).to.have.property('retweeted_status')
expect(parsedRepeat).to.have.deep.property('retweeted_status.id', 'deadbeef') 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')
})
}) })
}) })