From 49aa10e1c0e279d692fb92695f92e4b8548f6b12 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Fri, 26 Feb 2021 16:37:46 +0200 Subject: add screen_name_ui to tests --- test/unit/specs/components/user_profile.spec.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'test/unit/specs/components') diff --git a/test/unit/specs/components/user_profile.spec.js b/test/unit/specs/components/user_profile.spec.js index 80092b41..142db73c 100644 --- a/test/unit/specs/components/user_profile.spec.js +++ b/test/unit/specs/components/user_profile.spec.js @@ -31,13 +31,15 @@ const testGetters = { const localUser = { id: 100, is_local: true, - screen_name: 'testUser' + screen_name: 'testUser', + screen_name_ui: 'testUser' } const extUser = { id: 100, is_local: false, - screen_name: 'testUser@test.instance' + screen_name: 'testUser@test.instance', + screen_name_ui: 'testUser@test.instance' } const externalProfileStore = new Vuex.Store({ -- cgit v1.2.3-70-g09d2 From cd4455675024a3dfc8930184114d5f92438d0466 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sat, 12 Jun 2021 19:47:23 +0300 Subject: restructure and tests squash! restructure and tests --- src/components/rich_content/rich_content.jsx | 17 +- src/components/status_body/status_body.vue | 1 - .../html_converter/html_line_converter.service.js | 8 +- .../html_converter/html_tree_converter.service.js | 53 +-- src/services/html_converter/utility.service.js | 73 +++++ test/unit/specs/components/rich_content.spec.js | 357 +++++++++++++++++++++ .../html_converter/html_line_converter.spec.js | 2 +- .../html_converter/html_tree_converter.spec.js | 38 +-- .../specs/services/html_converter/utility.spec.js | 37 +++ 9 files changed, 481 insertions(+), 105 deletions(-) create mode 100644 src/services/html_converter/utility.service.js create mode 100644 test/unit/specs/components/rich_content.spec.js create mode 100644 test/unit/specs/services/html_converter/utility.spec.js (limited to 'test/unit/specs/components') diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx index ad77d615..ef15aaeb 100644 --- a/src/components/rich_content/rich_content.jsx +++ b/src/components/rich_content/rich_content.jsx @@ -1,6 +1,7 @@ import Vue from 'vue' import { unescape, flattenDeep } from 'lodash' -import { convertHtmlToTree, getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/html_tree_converter.service.js' +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' @@ -31,18 +32,12 @@ export default Vue.component('RichContent', { required: false, type: Boolean, default: false - }, - // Whether to hide last mentions (hellthreads) - 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.hideMentions) + 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 @@ -228,8 +223,9 @@ const getLinkData = (attrs, children, index) => { * * @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) => { +export const preProcessPerLine = (html, greentext, handleLinks) => { const lastMentions = [] let nonEmptyIndex = 0 @@ -264,6 +260,7 @@ export const preProcessPerLine = (html, greentext) => { 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 @@ -297,7 +294,7 @@ export const preProcessPerLine = (html, greentext) => { const result = [...tree].map(process) // Only check last (first since list is reversed) line - if (hasMentions && !hasLooseText && nonEmptyIndex++ === 0) { + if (handleLinks && hasMentions && !hasLooseText && nonEmptyIndex++ === 0) { let mentionIndex = 0 const process = (item) => { if (Array.isArray(item)) { diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue index b84541d7..aac44e42 100644 --- a/src/components/status_body/status_body.vue +++ b/src/components/status_body/status_body.vue @@ -52,7 +52,6 @@ :html="status.raw_html" :emoji="status.emojis" :handle-links="true" - :hide-mentions="hideMentions" :greentext="mergedConfig.greentext" @parseReady="setHeadTailLinks" /> diff --git a/src/services/html_converter/html_line_converter.service.js b/src/services/html_converter/html_line_converter.service.js index d8f5ecb8..e448d5cd 100644 --- a/src/services/html_converter/html_line_converter.service.js +++ b/src/services/html_converter/html_line_converter.service.js @@ -1,3 +1,5 @@ +import { getTagName } from './utility.service.js' + /** * This is a tiny purpose-built HTML parser/processor. This basically detects * any type of visual newline and converts entire HTML into a array structure. @@ -26,12 +28,6 @@ export const convertHtmlToLines = (html) => { let textBuffer = '' // Current line content let tagBuffer = null // Current tag buffer, if null = we are not currently reading a tag - // Extracts tag name from tag, i.e. => span - const getTagName = (tag) => { - const result = /(?:<\/(\w+)>|<(\w+)\s?[^/]*?\/?>)/gi.exec(tag) - return result && (result[1] || result[2]) - } - const flush = () => { // Processes current line buffer, adds it to output buffer and clears line buffer if (textBuffer.trim().length > 0 && !level.some(l => ignoredTags.has(l))) { buffer.push({ text: textBuffer }) diff --git a/src/services/html_converter/html_tree_converter.service.js b/src/services/html_converter/html_tree_converter.service.js index badd473a..804d35d7 100644 --- a/src/services/html_converter/html_tree_converter.service.js +++ b/src/services/html_converter/html_tree_converter.service.js @@ -1,3 +1,5 @@ +import { getTagName } from './utility.service.js' + /** * This is a not-so-tiny purpose-built HTML parser/processor. This parses html * and converts it into a tree structure representing tag openers/closers and @@ -93,54 +95,3 @@ export const convertHtmlToTree = (html) => { flushText() return buffer } - -// Extracts tag name from tag, i.e. => span -export const getTagName = (tag) => { - const result = /(?:<\/(\w+)>|<(\w+)\s?.*?\/?>)/gi.exec(tag) - return result && (result[1] || result[2]) -} - -export const processTextForEmoji = (text, emojis, processor) => { - const buffer = [] - let textBuffer = '' - for (let i = 0; i < text.length; i++) { - const char = text[i] - if (char === ':') { - const next = text.slice(i + 1) - let found = false - for (let emoji of emojis) { - if (next.slice(0, emoji.shortcode.length + 1) === (emoji.shortcode + ':')) { - found = emoji - break - } - } - if (found) { - buffer.push(textBuffer) - textBuffer = '' - buffer.push(processor(found)) - i += found.shortcode.length + 1 - } else { - textBuffer += char - } - } else { - textBuffer += char - } - } - if (textBuffer) buffer.push(textBuffer) - return buffer -} - -export const getAttrs = tag => { - const innertag = tag - .substring(1, tag.length - 1) - .replace(new RegExp('^' + getTagName(tag)), '') - .replace(/\/?$/, '') - .trim() - const attrs = Array.from(innertag.matchAll(/([a-z0-9-]+)(?:=("[^"]+?"|'[^']+?'))?/gi)) - .map(([trash, key, value]) => [key, value]) - .map(([k, v]) => { - if (!v) return [k, true] - return [k, v.substring(1, v.length - 1)] - }) - return Object.fromEntries(attrs) -} diff --git a/src/services/html_converter/utility.service.js b/src/services/html_converter/utility.service.js new file mode 100644 index 00000000..4d0c36c2 --- /dev/null +++ b/src/services/html_converter/utility.service.js @@ -0,0 +1,73 @@ +/** + * Extract tag name from tag opener/closer. + * + * @param {String} tag - tag string, i.e. '' + * @return {String} - tagname, i.e. "div" + */ +export const getTagName = (tag) => { + const result = /(?:<\/(\w+)>|<(\w+)\s?.*?\/?>)/gi.exec(tag) + return result && (result[1] || result[2]) +} + +/** + * Extract attributes from tag opener. + * + * @param {String} tag - tag string, i.e. '' + * @return {Object} - map of attributes key = attribute name, value = attribute value + * attributes without values represented as boolean true + */ +export const getAttrs = tag => { + const innertag = tag + .substring(1, tag.length - 1) + .replace(new RegExp('^' + getTagName(tag)), '') + .replace(/\/?$/, '') + .trim() + const attrs = Array.from(innertag.matchAll(/([a-z0-9-]+)(?:=("[^"]+?"|'[^']+?'))?/gi)) + .map(([trash, key, value]) => [key, value]) + .map(([k, v]) => { + if (!v) return [k, true] + return [k, v.substring(1, v.length - 1)] + }) + return Object.fromEntries(attrs) +} + +/** + * Finds shortcodes in text + * + * @param {String} text - original text to find emojis in + * @param {{ url: String, shortcode: Sring }[]} emoji - list of shortcodes to find + * @param {Function} processor - function to call on each encountered emoji, + * function is passed single object containing matching emoji ({ url, shortcode }) + * return value will be inserted into resulting array instead of :shortcode: + * @return {Array} resulting array with non-emoji parts of text and whatever {processor} + * returned for emoji + */ +export const processTextForEmoji = (text, emojis, processor) => { + const buffer = [] + let textBuffer = '' + for (let i = 0; i < text.length; i++) { + const char = text[i] + if (char === ':') { + const next = text.slice(i + 1) + let found = false + for (let emoji of emojis) { + if (next.slice(0, emoji.shortcode.length + 1) === (emoji.shortcode + ':')) { + found = emoji + break + } + } + if (found) { + buffer.push(textBuffer) + textBuffer = '' + buffer.push(processor(found)) + i += found.shortcode.length + 1 + } else { + textBuffer += char + } + } else { + textBuffer += char + } + } + if (textBuffer) buffer.push(textBuffer) + return buffer +} diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js new file mode 100644 index 00000000..05c0b259 --- /dev/null +++ b/test/unit/specs/components/rich_content.spec.js @@ -0,0 +1,357 @@ +import { shallowMount, createLocalVue } from '@vue/test-utils' +import RichContent from 'src/components/rich_content/rich_content.jsx' + +const localVue = createLocalVue() + +const makeMention = (who) => `@${who}` +const stubMention = (who) => `` +const lastMentions = (...data) => `${data.join('')}` +const p = (...data) => `

${data.join('')}

` +const compwrap = (...data) => `${data.join('')}` +const removedMentionSpan = '' + +describe('RichContent', () => { + it('renders simple post without exploding', () => { + const html = p('Hello world!') + const wrapper = shallowMount(RichContent, { + localVue, + propsData: { + 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: { + handleLinks: true, + greentext: true, + emoji: [], + html + } + }) + + expect(wrapper.html()).to.eql(compwrap(expected)) + }) + + it('removes mentions from the end of the hellpost (

)', () => { + 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: { + handleLinks: true, + greentext: true, + emoji: [], + html + } + }) + + expect(wrapper.html()).to.eql(compwrap(expected)) + }) + + it('removes mentions from the end of the hellpost (
)', () => { + const html = [ + 'How are you doing today, fine gentlemen?', + [ + makeMention('John'), + makeMention('Josh'), + makeMention('Jeremy') + ].join('') + ].join('
') + const expected = [ + 'How are you doing today, fine gentlemen?', + // TODO fix this extra line somehow? + '
' + ].join('') + + const wrapper = shallowMount(RichContent, { + localVue, + propsData: { + 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: { + 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: { + 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: { + 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: { + 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: { + 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 = [ + '>preordering videogames', + '>any year' + ].join('\n') + + const wrapper = shallowMount(RichContent, { + localVue, + propsData: { + 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: { + 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 ', + '' + ) + + const wrapper = shallowMount(RichContent, { + localVue, + propsData: { + 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: { + handleLinks: false, + greentext: false, + emoji: [], + html + } + }) + + expect(wrapper.html()).to.eql(compwrap(html)) + }) +}) 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 532ea187..9485233f 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 @@ -2,7 +2,7 @@ import { convertHtmlToLines } from 'src/services/html_converter/html_line_conver const mapOnlyText = (processor) => (input) => input.text ? processor(input.text) : input -describe('TinyPostHTMLProcessor', () => { +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', () => { diff --git a/test/unit/specs/services/html_converter/html_tree_converter.spec.js b/test/unit/specs/services/html_converter/html_tree_converter.spec.js index a54745c3..7283021b 100644 --- a/test/unit/specs/services/html_converter/html_tree_converter.spec.js +++ b/test/unit/specs/services/html_converter/html_tree_converter.spec.js @@ -1,6 +1,6 @@ -import { convertHtmlToTree, processTextForEmoji, getAttrs } from 'src/services/html_converter/html_tree_converter.service.js' +import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js' -describe('MiniHtmlConverter', () => { +describe('html_tree_converter', () => { describe('convertHtmlToTree', () => { it('converts html into a tree structure', () => { const input = '1

2

345' @@ -129,38 +129,4 @@ describe('MiniHtmlConverter', () => { ]) }) }) - - describe('processTextForEmoji', () => { - it('processes all emoji in text', () => { - const input = 'Hello from finland! :lol: We have best water! :lmao:' - const emojis = [ - { shortcode: 'lol', src: 'LOL' }, - { shortcode: 'lmao', src: 'LMAO' } - ] - const processor = ({ shortcode, src }) => ({ shortcode, src }) - expect(processTextForEmoji(input, emojis, processor)).to.eql([ - 'Hello from finland! ', - { shortcode: 'lol', src: 'LOL' }, - ' We have best water! ', - { shortcode: 'lmao', src: 'LMAO' } - ]) - }) - it('leaves text as is', () => { - const input = 'Number one: that\'s terror' - const emojis = [] - const processor = ({ shortcode, src }) => ({ shortcode, src }) - expect(processTextForEmoji(input, emojis, processor)).to.eql([ - 'Number one: that\'s terror' - ]) - }) - }) - - describe('getAttrs', () => { - it('extracts arguments from tag', () => { - const input = '' - const output = { src: 'boop', cool: true, ebin: 'true' } - - expect(getAttrs(input)).to.eql(output) - }) - }) }) diff --git a/test/unit/specs/services/html_converter/utility.spec.js b/test/unit/specs/services/html_converter/utility.spec.js new file mode 100644 index 00000000..cf6fd99b --- /dev/null +++ b/test/unit/specs/services/html_converter/utility.spec.js @@ -0,0 +1,37 @@ +import { processTextForEmoji, getAttrs } from 'src/services/html_converter/utility.service.js' + +describe('html_converter utility', () => { + describe('processTextForEmoji', () => { + it('processes all emoji in text', () => { + const input = 'Hello from finland! :lol: We have best water! :lmao:' + const emojis = [ + { shortcode: 'lol', src: 'LOL' }, + { shortcode: 'lmao', src: 'LMAO' } + ] + const processor = ({ shortcode, src }) => ({ shortcode, src }) + expect(processTextForEmoji(input, emojis, processor)).to.eql([ + 'Hello from finland! ', + { shortcode: 'lol', src: 'LOL' }, + ' We have best water! ', + { shortcode: 'lmao', src: 'LMAO' } + ]) + }) + it('leaves text as is', () => { + const input = 'Number one: that\'s terror' + const emojis = [] + const processor = ({ shortcode, src }) => ({ shortcode, src }) + expect(processTextForEmoji(input, emojis, processor)).to.eql([ + 'Number one: that\'s terror' + ]) + }) + }) + + describe('getAttrs', () => { + it('extracts arguments from tag', () => { + const input = '' + const output = { src: 'boop', cool: true, ebin: 'true' } + + expect(getAttrs(input)).to.eql(output) + }) + }) +}) -- cgit v1.2.3-70-g09d2 From 418f029789f5e1cc22fd7db4f269088633d90050 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sat, 12 Jun 2021 20:42:17 +0300 Subject: review + fixes --- src/components/mention_link/mention_link.vue | 2 -- src/components/mentions_line/mentions_line.scss | 1 + src/components/rich_content/rich_content.jsx | 21 ++++++++++++++++ .../settings_modal/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/entity_normalizer.service.js | 6 ----- test/unit/specs/components/rich_content.spec.js | 28 ++++++++++++++++++++++ .../entity_normalizer/entity_normalizer.spec.js | 8 ------- 10 files changed, 55 insertions(+), 31 deletions(-) (limited to 'test/unit/specs/components') 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]" > - - 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 -s + * - Removes mentions from beginning and end (hellthread style only) + * - Replaces emoji shortcodes with 'd images. + * + * Stuff like removing mentions from beginning and end is done so that they could + * be either replaced by collapsible 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 `${string}` } else if (cleanedString.startsWith('<')) { + nonEmptyIndex += 1 return `${string}` } } 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 @@
@@ -39,7 +39,7 @@ {{ $t("general.show_more") }} { } 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 = [ + '>quote', + stubMention('lol'), + '>quote', + '>quote' + ].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(' Date: Sat, 12 Jun 2021 20:42:59 +0300 Subject: lint --- test/unit/specs/components/rich_content.spec.js | 1 - 1 file changed, 1 deletion(-) (limited to 'test/unit/specs/components') diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js index f2c3f04e..20322019 100644 --- a/test/unit/specs/components/rich_content.spec.js +++ b/test/unit/specs/components/rich_content.spec.js @@ -381,5 +381,4 @@ describe('RichContent', () => { expect(wrapper.html()).to.eql(compwrap(expected)) }) - }) -- cgit v1.2.3-70-g09d2 From 9c70f3e4df2e28863b51156fdbd25e253a3a1b98 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sat, 12 Jun 2021 21:49:40 +0300 Subject: fixed a bug + made a testcase out of it --- src/components/rich_content/rich_content.jsx | 5 ++-- test/unit/specs/components/rich_content.spec.js | 35 +++++++++++++++++++++++++ 2 files changed, 37 insertions(+), 3 deletions(-) (limited to 'test/unit/specs/components') diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx index 0aae7a55..e188763f 100644 --- a/src/components/rich_content/rich_content.jsx +++ b/src/components/rich_content/rich_content.jsx @@ -247,12 +247,13 @@ const getLinkData = (attrs, children, index) => { export const preProcessPerLine = (html, greentext, handleLinks) => { const lastMentions = [] - let nonEmptyIndex = 0 + let nonEmptyIndex = -1 const newHtml = convertHtmlToLines(html).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 (greentext && (string.includes('>') || string.includes('<'))) { @@ -260,10 +261,8 @@ export const preProcessPerLine = (html, greentext, handleLinks) => { .replace(/@\w+/gi, '') // remove mentions (even failed ones) .trim() if (cleanedString.startsWith('>')) { - nonEmptyIndex += 1 return `${string}` } else if (cleanedString.startsWith('<')) { - nonEmptyIndex += 1 return `${string}` } } diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js index 20322019..ff491a3a 100644 --- a/test/unit/specs/components/rich_content.spec.js +++ b/test/unit/specs/components/rich_content.spec.js @@ -381,4 +381,39 @@ describe('RichContent', () => { expect(wrapper.html()).to.eql(compwrap(expected)) }) + + it('One buggy example', () => { + const html = [ + 'Bruh', + 'Bruh', + [ + makeMention('foo'), + makeMention('bar'), + makeMention('baz') + ].join(''), + 'Bruh' + ].join('
') + const expected = [ + 'Bruh', + 'Bruh', + [ + stubMention('foo'), + stubMention('bar'), + stubMention('baz') + ].join(''), + 'Bruh' + ].join('
') + + const wrapper = shallowMount(RichContent, { + localVue, + propsData: { + handleLinks: true, + greentext: true, + emoji: [], + html + } + }) + + expect(wrapper.html()).to.eql(compwrap(expected)) + }) }) -- cgit v1.2.3-70-g09d2 From 636dbdaba8375cb991368620419e2997df0f57a9 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 13 Jun 2021 22:22:59 +0300 Subject: more fixes --- src/components/rich_content/rich_content.jsx | 19 +++-- src/components/status_body/status_body.vue | 2 +- test/unit/specs/components/rich_content.spec.js | 99 +++++++++++++++++++++++++ 3 files changed, 113 insertions(+), 7 deletions(-) (limited to 'test/unit/specs/components') diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx index 328e9201..ffb36f50 100644 --- a/src/components/rich_content/rich_content.jsx +++ b/src/components/rich_content/rich_content.jsx @@ -140,7 +140,7 @@ export default Vue.component('RichContent', { switch (Tag) { case 'span': // replace images with StillImage if (attrs['class'] && attrs['class'].includes('lastMentions')) { - if (firstMentions.length > 1) { + if (firstMentions.length > 1 && lastMentions.length > 1) { break } else { return '' @@ -249,7 +249,9 @@ export const preProcessPerLine = (html, greentext, handleLinks) => { const greentextHandle = new Set(['p', 'div']) let nonEmptyIndex = -1 - const newHtml = convertHtmlToLines(html).reverse().map((item, index, array) => { + 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 @@ -281,7 +283,7 @@ export const preProcessPerLine = (html, greentext, handleLinks) => { // If line has loose text, i.e. text outside a mention or a tag // we won't touch mentions. let hasLooseText = false - let hasMentions = false + let mentionsNum = 0 const process = (item) => { if (Array.isArray(item)) { const [opener, children, closer] = item @@ -292,7 +294,7 @@ export const preProcessPerLine = (html, greentext, handleLinks) => { const attrs = getAttrs(opener) if (attrs['class'] && attrs['class'].includes('mention')) { // Got mentions - hasMentions = true + mentionsNum++ return [opener, children, closer] } else { // Not a mention? Means we have loose text or whatever @@ -321,8 +323,13 @@ export const preProcessPerLine = (html, greentext, handleLinks) => { // We now processed our tree, now we need to mark line as lastMentions const result = [...tree].map(process) - // Only check last (first since list is reversed) line - if (handleLinks && hasMentions && !hasLooseText && nonEmptyIndex++ === 0) { + 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)) { diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue index 0eb11ad0..3dc4916c 100644 --- a/src/components/status_body/status_body.vue +++ b/src/components/status_body/status_body.vue @@ -56,7 +56,7 @@ @parseReady="setHeadTailLinks" /> diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js index ff491a3a..835fbea2 100644 --- a/test/unit/specs/components/rich_content.spec.js +++ b/test/unit/specs/components/rich_content.spec.js @@ -416,4 +416,103 @@ describe('RichContent', () => { 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('
') + + const wrapper = shallowMount(RichContent, { + localVue, + propsData: { + handleLinks: true, + greentext: true, + emoji: [], + html + } + }) + + expect(wrapper.html()).to.eql(compwrap(html)) + }) + + 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: { + 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: { + handleLinks: true, + greentext: true, + emoji: [], + html + } + }) + + expect(wrapper.html()).to.eql(compwrap(expected)) + }) }) -- cgit v1.2.3-70-g09d2 From c21b1cf89840297a781e6adc66cc195b8741cac6 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 14 Jun 2021 10:30:08 +0300 Subject: do the impossible, fix the unfixable --- src/components/rich_content/rich_content.jsx | 16 +++- src/components/status_body/status_body.js | 12 +-- src/components/status_body/status_body.scss | 2 +- src/components/status_body/status_body.vue | 31 +++----- src/components/status_content/status_content.js | 3 - src/components/status_content/status_content.vue | 2 +- test/unit/specs/components/rich_content.spec.js | 91 +++++++++++++++++++++- .../html_converter/html_line_converter.spec.js | 2 +- 8 files changed, 118 insertions(+), 41 deletions(-) (limited to 'test/unit/specs/components') diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx index ffb36f50..4144d895 100644 --- a/src/components/rich_content/rich_content.jsx +++ b/src/components/rich_content/rich_content.jsx @@ -5,6 +5,7 @@ import { convertHtmlToTree } from 'src/services/html_converter/html_tree_convert 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' @@ -51,6 +52,11 @@ export default Vue.component('RichContent', { required: false, type: Boolean, default: false + }, + hideMentions: { + required: false, + type: Boolean, + default: false } }, // NEVER EVER TOUCH DATA INSIDE RENDER @@ -64,6 +70,7 @@ export default Vue.component('RichContent', { // unique index for vue "tag" property let mentionIndex = 0 let tagsIndex = 0 + let firstMentionReplaced = false const renderImage = (tag) => { return + } else { + return '' + } } else { return 1 && lastMentions.length > 1) { break } else { - return '' + return !this.hideMentions ? : '' } } else { break diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js index 26491e1b..9ee7a109 100644 --- a/src/components/status_body/status_body.js +++ b/src/components/status_body/status_body.js @@ -1,6 +1,5 @@ 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' @@ -36,9 +35,6 @@ const StatusContent = { 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: { @@ -81,8 +77,7 @@ const StatusContent = { ...mapGetters(['mergedConfig']) }, components: { - RichContent, - MentionsLine + RichContent }, mounted () { this.status.attentions && this.status.attentions.forEach(attn => { @@ -98,11 +93,6 @@ const StatusContent = { 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}` } diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index 81a687f1..c7732bfe 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -62,7 +62,7 @@ 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, diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue index 3dc4916c..2be46303 100644 --- a/src/components/status_body/status_body.vue +++ b/src/components/status_body/status_body.vue @@ -38,28 +38,17 @@ > {{ $t("general.show_more") }} - - - - - + :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)" + />