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="[highlightType]"
>
<!-- eslint-disable vue/no-v-html -->
<span
class="userNameFull"
v-text="'@' + userNameFull"
/>
<!-- eslint-enable vue/no-v-html -->
</span>
</span>
</span>

View file

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

View file

@ -8,6 +8,25 @@ 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: {
@ -241,8 +260,10 @@ export const preProcessPerLine = (html, greentext, handleLinks) => {
.replace(/@\w+/gi, '') // remove mentions (even failed ones)
.trim()
if (cleanedString.startsWith('&gt;')) {
nonEmptyIndex += 1
return `<span class='greentext'>${string}</span>`
} else if (cleanedString.startsWith('&lt;')) {
nonEmptyIndex += 1
return `<span class='cyantext'>${string}</span>`
}
}

View file

@ -474,7 +474,7 @@ export default {
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()

View file

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

View file

@ -115,12 +115,4 @@
.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;
}
}

View file

@ -2,7 +2,7 @@
<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) }"
>
@ -39,7 +39,7 @@
{{ $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

View file

@ -296,7 +296,6 @@ export const parseStatus = (data) => {
}
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) {
@ -449,11 +448,6 @@ export const parseChatMessage = (message) => {
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 {

View file

@ -354,4 +354,32 @@ describe('RichContent', () => {
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.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')
})
})
})