commit: cd4455675024a3dfc8930184114d5f92438d0466
parent ca6c7d5b10e48299dcb0ee65248de14f27ed78c8
Author: Henry Jameson <me@hjkos.com>
Date: Sat, 12 Jun 2021 19:47:23 +0300
restructure and tests
squash! restructure and tests
Diffstat:
9 files changed, 481 insertions(+), 105 deletions(-)
diff --git 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
@@ -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
@@ -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 a="b"> => 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
@@ -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 a="b"> => 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
@@ -0,0 +1,73 @@
+/**
+ * Extract tag name from tag opener/closer.
+ *
+ * @param {String} tag - tag string, i.e. '<a href="...">'
+ * @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. '<a href="...">'
+ * @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
@@ -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) => `<span class="h-card"><a class="u-url mention" href="https://fake.tld/@${who}">@<span>${who}</span></a></span>`
+const stubMention = (who) => `<span class="h-card"><mentionlink-stub url="https://fake.tld/@${who}" content="@<span>${who}</span>"></mentionlink-stub></span>`
+const lastMentions = (...data) => `<span class="lastMentions">${data.join('')}</span>`
+const p = (...data) => `<p>${data.join('')}</p>`
+const compwrap = (...data) => `<span class="RichContent">${data.join('')}</span>`
+const removedMentionSpan = '<span class="h-card"></span>'
+
+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 (<p>)', () => {
+ 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 (<br>)', () => {
+ const html = [
+ 'How are you doing today, fine gentlemen?',
+ [
+ makeMention('John'),
+ makeMention('Josh'),
+ makeMention('Jeremy')
+ ].join('')
+ ].join('<br>')
+ const expected = [
+ 'How are you doing today, fine gentlemen?',
+ // TODO fix this extra line somehow?
+ '<br>'
+ ].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 = [
+ '<span class="greentext">>preordering videogames</span>',
+ '<span class="greentext">>any year</span>'
+ ].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 ',
+ '<anonymous-stub alt=":spurdo:" src="about:blank" title=":spurdo:" class="emoji img"></anonymous-stub>'
+ )
+
+ 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
@@ -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
@@ -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 <p>2</p> <b>3<img src="a">4</b>5'
@@ -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 = '<img src="boop" cool ebin=\'true\'>'
- 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
@@ -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 = '<img src="boop" cool ebin=\'true\'>'
+ const output = { src: 'boop', cool: true, ebin: 'true' }
+
+ expect(getAttrs(input)).to.eql(output)
+ })
+ })
+})
