diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 4d27fe6d..65c62baa 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -45,7 +45,7 @@ const MentionLink = {
},
isYou () {
// FIXME why user !== currentUser???
- return this.user && this.user.screen_name === this.currentUser.screen_name
+ return this.user && this.user.id === this.currentUser.id
},
userName () {
return this.user && this.userNameFullUi.split('@')[0]
diff --git a/src/components/mentions_line/mentions_line.js b/src/components/mentions_line/mentions_line.js
index 83eeea4c..a4a0c724 100644
--- a/src/components/mentions_line/mentions_line.js
+++ b/src/components/mentions_line/mentions_line.js
@@ -1,6 +1,8 @@
import MentionLink from 'src/components/mention_link/mention_link.vue'
import { mapGetters } from 'vuex'
+export const MENTIONS_LIMIT = 5
+
const MentionsLine = {
name: 'MentionsLine',
props: {
@@ -14,14 +16,11 @@ const MentionsLine = {
MentionLink
},
computed: {
- limit () {
- return 5
- },
mentionsComputed () {
- return this.mentions.slice(0, this.limit)
+ return this.mentions.slice(0, MENTIONS_LIMIT)
},
extraMentions () {
- return this.mentions.slice(this.limit)
+ return this.mentions.slice(MENTIONS_LIMIT)
},
manyMentions () {
return this.extraMentions.length > 0
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index 32b737ec..1353541f 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -4,8 +4,7 @@ import { getTagName, processTextForEmoji, getAttrs } from 'src/services/html_con
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'
-import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
+import MentionsLine, { MENTIONS_LIMIT } from 'src/components/mentions_line/mentions_line.vue'
import './rich_content.scss'
@@ -13,12 +12,11 @@ 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)
+ * - Groups all mentions into <MentionsLine>, this affects all mentions regardles
+ * of where they are (beginning/middle/end), even single mentions are converted
+ * to a <MentionsLine> containing single <MentionLink>.
* - 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.
@@ -61,12 +59,13 @@ export default Vue.component('RichContent', {
// NEVER EVER TOUCH DATA INSIDE RENDER
render (h) {
// Pre-process HTML
- const { newHtml: html } = preProcessPerLine(this.html, this.greentext, this.handleLinks)
+ const { newHtml: html } = preProcessPerLine(this.html, this.greentext)
let currentMentions = null // Current chain of mentions, we group all mentions together
- // to collapse too many mentions in a row
const lastTags = [] // Tags that appear at the end of post body
const writtenMentions = [] // All mentions that appear in post body
+ const invisibleMentions = [] // All mentions that go beyond the limiter (see MentionsLine)
+ // to collapse too many mentions in a row
const writtenTags = [] // All tags that appear in post body
// unique index for vue "tag" property
let mentionIndex = 0
@@ -99,6 +98,9 @@ export default Vue.component('RichContent', {
currentMentions = []
}
currentMentions.push(linkData)
+ if (currentMentions.length > MENTIONS_LIMIT) {
+ invisibleMentions.push(linkData)
+ }
if (currentMentions.length === 1) {
return <MentionsLine mentions={ currentMentions } />
} else {
@@ -232,7 +234,8 @@ export default Vue.component('RichContent', {
const event = {
lastTags,
writtenMentions,
- writtenTags
+ writtenTags,
+ invisibleMentions
}
// DO NOT MOVE TO UPDATE. BAD IDEA.
@@ -243,27 +246,32 @@ export default Vue.component('RichContent', {
})
const getLinkData = (attrs, children, index) => {
+ const stripTags = (item) => {
+ if (typeof item === 'string') {
+ return item
+ } else {
+ return item[1].map(stripTags).join('')
+ }
+ }
+ const textContent = children.map(stripTags).join('')
return {
index,
url: attrs.href,
hashtag: attrs['data-tag'],
- content: flattenDeep(children).join('')
+ content: flattenDeep(children).join(''),
+ textContent
}
}
/** Pre-processing HTML
*
- * Currently this does two things:
+ * Currently this does one thing:
* - add green/cyantexting
- * - wrap and mark last line containing only mentions as ".lastMentionsLine" for
- * more compact hellthreads.
*
* @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, handleLinks) => {
- const lastMentions = []
+export const preProcessPerLine = (html, greentext) => {
const greentextHandle = new Set(['p', 'div'])
const lines = convertHtmlToLines(html)
@@ -277,7 +285,7 @@ export const preProcessPerLine = (html, greentext, handleLinks) => {
if (
// Only if greentext is engaged
greentext &&
- // Only handle p's and divs. Don't want to affect blocquotes, code etc
+ // Only handle p's and divs. Don't want to affect blockquotes, code etc
item.level.every(l => greentextHandle.has(l)) &&
// Only if line begins with '>' or '<'
(string.includes('>') || string.includes('<'))
@@ -292,31 +300,8 @@ export const preProcessPerLine = (html, greentext, handleLinks) => {
}
}
- // Converting that line part into tree
- const tree = convertHtmlToTree(string)
-
- const process = (item) => {
- if (Array.isArray(item)) {
- const [opener, children, closer] = item
- const tag = getTagName(opener)
- if (tag === 'span' || tag === 'p') {
- // For span and p we need to go deeper
- return [opener, [...children].map(process), closer]
- } else {
- return [opener, children, closer]
- }
- }
-
- if (typeof item === 'string') {
- return item
- }
- }
-
- // We now processed our tree, now we need to mark line as lastMentions
- const result = [...tree].map(process)
-
- return flattenDeep(result).join('')
+ return string
}).reverse().join('')
- return { newHtml, lastMentions }
+ return { newHtml }
}
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index 8757154d..b941765c 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -32,7 +32,8 @@ const StatusContent = {
showingTall: this.fullContent || (this.inConversation && this.focused),
showingLongSubject: false,
// not as computed because it sets the initial state which will be changed later
- expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject
+ expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject,
+ postLength: this.status.text.length
}
},
computed: {
@@ -47,7 +48,7 @@ const StatusContent = {
// Using max-height + overflow: auto for status components resulted in false positives
// very often with japanese characters, and it was very annoying.
tallStatus () {
- const lengthScore = this.status.raw_html.split(/<p|<br/).length + this.status.text.length / 80
+ const lengthScore = this.status.raw_html.split(/<p|<br/).length + this.postLength / 80
return lengthScore > 20
},
longSubject () {
@@ -86,7 +87,7 @@ const StatusContent = {
methods: {
onParseReady (event) {
this.$emit('parseReady', event)
- const { writtenMentions } = event
+ const { writtenMentions, invisibleMentions } = event
writtenMentions
.filter(mention => !mention.notifying)
.forEach(mention => {
@@ -97,6 +98,15 @@ const StatusContent = {
const host = url.replace(/^https?:\/\//, '').replace(/\/.+?$/, '')
this.$store.dispatch('fetchUserIfMissing', `${handle}@${host}`)
})
+ /* This is a bit of a hack to make current tall status detector work
+ * with rich mentions. Invisible mentions are detected at RichContent level
+ * and also we generate plaintext version of mentions by stripping tags
+ * so here we subtract from post length by each mention that became invisible
+ * via MentionsLine
+ */
+ this.postLength = invisibleMentions.reduce((acc, mention) => {
+ return acc - mention.textContent.length - 1
+ }, this.postLength)
},
toggleShowMore () {
if (this.mightHideBecauseTall) {