commit: 418f029789f5e1cc22fd7db4f269088633d90050 parent 90a188f2c3c16b926c75bf4aa749633e6967e5a0 Author: Henry Jameson <me@hjkos.com> Date: Sat, 12 Jun 2021 20:42:17 +0300 review + fixesDiffstat:
10 files changed, 55 insertions(+), 31 deletions(-)
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue @@ -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> diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss @@ -1,6 +1,7 @@ .MentionsLine { .showMoreLess { white-space: normal; + &.-newStyle { line-height: 1.5; font-size: inherit; diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx @@ -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('>')) { + nonEmptyIndex += 1 return `<span class='greentext'>${string}</span>` } else if (cleanedString.startsWith('<')) { + nonEmptyIndex += 1 return `<span class='cyantext'>${string}</span>` } } diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js @@ -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() diff --git a/src/components/status/status.js b/src/components/status/status.js @@ -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 = { diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss @@ -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; - } } diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue @@ -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 diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js @@ -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 { diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js @@ -354,4 +354,32 @@ describe('RichContent', () => { 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 @@ -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') - }) }) })