From 418f029789f5e1cc22fd7db4f269088633d90050 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 12 Jun 2021 20:42:17 +0300
Subject: [PATCH] review + fixes
---
src/components/mention_link/mention_link.vue | 2 --
.../mentions_line/mentions_line.scss | 1 +
src/components/rich_content/rich_content.jsx | 21 ++++++++++++++
.../tabs/theme_tab/theme_tab.js | 2 +-
src/components/status/status.js | 6 ++--
src/components/status_body/status_body.scss | 8 ------
src/components/status_body/status_body.vue | 4 +--
.../entity_normalizer.service.js | 6 ----
.../specs/components/rich_content.spec.js | 28 +++++++++++++++++++
.../entity_normalizer.spec.js | 8 ------
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
index 3449f4bd..e4d395fa 100644
--- 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
index 59f75fbb..90d1e0a4 100644
--- 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
index ef15aaeb..0aae7a55 100644
--- 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
index 63416e93..85749045 100644
--- 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
index 5b178c2e..ae734493 100644
--- 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
index da5d4dd3..81a687f1 100644
--- 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
index aac44e42..0eb11ad0 100644
--- 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
index 613ed566..477b861f 100644
--- 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
index 05c0b259..f2c3f04e 100644
--- 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
index c8965785..8a5a6ef9 100644
--- 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')
- })
})
})