Moved greentext to RichContent, improved how first mentions are

restored, now shows mentions not uh, mention in post body
This commit is contained in:
Henry Jameson 2021-06-10 12:08:31 +03:00
parent 566964992a
commit aec867b300
8 changed files with 166 additions and 78 deletions

View File

@ -6,6 +6,7 @@ const MentionLink = {
name: 'MentionLink',
props: {
url: {
required: true,
type: String
},
content: {

View File

@ -4,7 +4,7 @@ import { mapGetters } from 'vuex'
const MentionsLine = {
name: 'MentionsLine',
props: {
attentions: {
mentions: {
required: true,
type: Array
}
@ -20,11 +20,11 @@ const MentionsLine = {
limit () {
return 6
},
mentions () {
return this.attentions.slice(0, this.limit)
mentionsComputed () {
return this.mentions.slice(0, this.limit)
},
extraMentions () {
return this.attentions.slice(this.limit)
return this.mentions.slice(this.limit)
},
manyMentions () {
return this.extraMentions.length > 0

View File

@ -1,11 +1,11 @@
<template>
<span class="MentionsLine">
<MentionLink
v-for="mention in mentions"
:key="mention.statusnet_profile_url"
v-for="mention in mentionsComputed"
:key="mention.index"
class="mention-link"
:content="mention.statusnet_profile_url"
:url="mention.statusnet_profile_url"
:content="mention.content"
:url="mention.url"
:first-mention="false"
/><span
v-if="manyMentions"
@ -17,10 +17,10 @@
>
<MentionLink
v-for="mention in extraMentions"
:key="mention.statusnet_profile_url"
:key="mention.index"
class="mention-link"
:content="mention.statusnet_profile_url"
:url="mention.statusnet_profile_url"
:content="mention.content"
:url="mention.url"
:first-mention="false"
/>
</span><button

View File

@ -1,6 +1,7 @@
import Vue from 'vue'
import { unescape, flattenDeep } from 'lodash'
import { convertHtml, getTagName, processTextForEmoji, getAttrs } from 'src/services/mini_html_converter/mini_html_converter.service.js'
import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
import StillImage from 'src/components/still-image/still-image.vue'
import MentionLink from 'src/components/mention_link/mention_link.vue'
@ -24,15 +25,25 @@ export default Vue.component('RichContent', {
required: false,
type: Boolean,
default: false
},
// Meme arrows
greentext: {
required: false,
type: Boolean,
default: false
}
},
render (h) {
// Pre-process HTML
const html = this.greentext ? addGreentext(this.html) : this.html
const renderImage = (tag) => {
return <StillImage
{...{ attrs: getAttrs(tag) }}
class="img"
/>
}
const renderMention = (attrs, children, encounteredText) => {
return <MentionLink
url={attrs.href}
@ -41,10 +52,12 @@ export default Vue.component('RichContent', {
/>
}
// We stop treating mentions as "first" ones when we encounter
// non-whitespace text
let encounteredText = false
// Processor to use with mini_html_converter
const processItem = (item) => {
// Handle text noes - just add emoji
// Handle text nodes - just add emoji
if (typeof item === 'string') {
const emptyText = item.trim() === ''
if (emptyText) {
@ -72,6 +85,7 @@ export default Vue.component('RichContent', {
return unescapedItem
}
}
// Handle tag nodes
if (Array.isArray(item)) {
const [opener, children] = item
@ -84,8 +98,14 @@ export default Vue.component('RichContent', {
const attrs = getAttrs(opener)
if (attrs['class'] && attrs['class'].includes('mention')) {
return renderMention(attrs, children, encounteredText)
} else {
attrs.target = '_blank'
return <a {...{ attrs }}>
{ children.map(processItem) }
</a>
}
}
// Render tag as is
if (children !== undefined) {
return <Tag {...{ attrs: getAttrs(opener) }}>
@ -97,7 +117,95 @@ export default Vue.component('RichContent', {
}
}
return <span class="RichContent">
{ convertHtml(this.html).map(processItem) }
{ this.$slots.prefix }
{ convertHtml(html).map(processItem) }
{ this.$slots.suffix }
</span>
}
})
export const addGreentext = (html) => {
try {
if (html.includes('&gt;')) {
// This checks if post has '>' at the beginning, excluding mentions so that @mention >impying works
return processHtml(html, (string) => {
if (
string.includes('&gt;') && string
.replace(/<[^>]+?>/gi, '') // remove all tags
.replace(/@\w+/gi, '') // remove mentions (even failed ones)
.trim()
.startsWith('&gt;')
) {
return `<span class='greentext'>${string}</span>`
} else {
return string
}
})
} else {
return html
}
} catch (e) {
console.error('Failed to process status html', e)
return html
}
}
export const getHeadTailLinks = (html) => {
// Exported object properties
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
const writtenTags = [] // All tags that appear in post body
let encounteredText = false
let processingFirstMentions = true
let index = 0 // unique index for vue "tag" property
const getLinkData = (attrs, children, index) => {
return {
index,
url: attrs.href,
hashtag: attrs['data-tag'],
content: flattenDeep(children).join('')
}
}
// Processor to use with mini_html_converter
const processItem = (item) => {
// Handle text nodes - stop treating mentions as "first" when text encountered
if (typeof item === 'string') {
const emptyText = item.trim() === ''
if (emptyText) return
if (!encounteredText) {
encounteredText = true
processingFirstMentions = false
}
// Encountered text? That means tags we've been collectings aren't "last"!
lastTags.splice(0)
return
}
// Handle tag nodes
if (Array.isArray(item)) {
const [opener, children] = item
const Tag = getTagName(opener)
if (Tag !== 'a') return children && children.forEach(processItem)
const attrs = getAttrs(opener)
if (attrs['class']) {
const linkData = getLinkData(attrs, children, index++)
if (attrs['class'].includes('mention')) {
if (processingFirstMentions) {
firstMentions.push(linkData)
}
writtenMentions.push(linkData)
} else if (attrs['class'].includes('hashtag')) {
lastTags.push(linkData)
writtenTags.push(linkData)
}
return // Stop processing, we don't care about link's contents
}
children && children.forEach(processItem)
}
}
convertHtml(html).forEach(processItem)
return { firstMentions, writtenMentions, writtenTags, lastTags }
}

View File

@ -19,6 +19,7 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import { muteWordHits } from '../../services/status_parser/status_parser.js'
import { unescape, uniqBy } from 'lodash'
import { getHeadTailLinks } from 'src/components/rich_content/rich_content.jsx'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
@ -166,17 +167,33 @@ const Status = {
muteWordHits () {
return muteWordHits(this.status, this.muteWords)
},
mentionsOwnLine () {
return this.mergedConfig.mentionsOwnLine
headTailLinks () {
return getHeadTailLinks(this.status.raw_html)
},
mentions () {
return this.status.attentions.filter(attn => {
return attn.screen_name !== this.replyToName &&
attn.screen_name !== this.status.user.screen_name
}).map(attn => ({
url: attn.statusnet_profile_url,
content: attn.screen_name,
userId: attn.id
}))
},
alsoMentions () {
const set = new Set(this.headTailLinks.writtenMentions.map(m => m.url))
return this.headTailLinks.writtenMentions.filter(mention => {
return !set.has(mention.url)
})
},
hasMentions () {
return this.mentions.length > 0
mentionsLine () {
return this.mentionsOwnLine ? this.mentions : this.alsoMentions
},
mentionsOwnLine () {
return this.mergedConfig.mentionsOwnLine
},
hasMentionsLine () {
return this.mentionsLine.length > 0
},
muted () {
if (this.statusoid.user.id === this.currentUser.id) return false

View File

@ -294,7 +294,7 @@
</div>
<div
v-if="hasMentions && mentionsOwnLine"
v-if="hasMentionsLine"
class="heading-mentions-row"
>
<div
@ -316,7 +316,7 @@
</span>
</span>
<MentionsLine
:attentions="mentions"
:mentions="mentionsLine"
class="mentions-line"
/>
</div>

View File

@ -1,8 +1,6 @@
import fileType from 'src/services/file_type/file_type.service'
import RichContent from 'src/components/rich_content/rich_content.jsx'
import RichContent, { getHeadTailLinks } from 'src/components/rich_content/rich_content.jsx'
import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
import { extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
import { mapGetters } from 'vuex'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
@ -28,7 +26,10 @@ const StatusContent = {
'focused',
'noHeading',
'fullContent',
'singleLine'
'singleLine',
// if this was computed at upper level it can be passed here, otherwise
// it will be in this component
'headTailLinks'
],
data () {
return {
@ -72,44 +73,18 @@ const StatusContent = {
showingMore () {
return (this.mightHideBecauseTall && this.showingTall) || (this.mightHideBecauseSubject && this.expandingSubject)
},
postBodyHtml () {
const html = this.status.raw_html
if (this.mergedConfig.greentext) {
try {
if (html.includes('&gt;')) {
// This checks if post has '>' at the beginning, excluding mentions so that @mention >impying works
return processHtml(html, (string) => {
if (string.includes('&gt;') &&
string
.replace(/<[^>]+?>/gi, '') // remove all tags
.replace(/@\w+/gi, '') // remove mentions (even failed ones)
.trim()
.startsWith('&gt;')) {
return `<span class='greentext'>${string}</span>`
} else {
return string
}
})
} else {
return html
}
} catch (e) {
console.error('Failed to process status html', e)
return html
}
} else {
return html
}
},
attachmentTypes () {
return this.status.attachments.map(file => fileType.fileType(file.mimetype))
},
mentionsOwnLine () {
return this.mergedConfig.mentionsOwnLine
},
headTailLinksComputed () {
if (this.headTailLinks) return this.headTailLinks
return getHeadTailLinks(this.status.raw_html)
},
mentions () {
return this.status.attentions
return this.headTailLinksComputed.firstMentions
},
...mapGetters(['mergedConfig'])
},
@ -124,21 +99,6 @@ const StatusContent = {
})
},
methods: {
linkClicked (event) {
const target = event.target.closest('.status-content a')
if (target) {
if (target.rel.match(/(?:^|\s)tag(?:$|\s)/) || target.className.match(/hashtag/)) {
// Extract tag name from dataset or link url
const tag = target.dataset.tag || extractTagFromUrl(target.href)
if (tag) {
const link = this.generateTagLink(tag)
this.$router.push(link)
return
}
}
window.open(target.href, '_blank')
}
},
toggleShowMore () {
if (this.mightHideBecauseTall) {
this.showingTall = !this.showingTall

View File

@ -10,7 +10,6 @@
class="media-body summary"
:html="status.summary_raw_html"
:emoji="status.emojis"
@click.prevent="linkClicked"
/>
<button
v-if="longSubject && showingLongSubject"
@ -43,19 +42,22 @@
class="text-wrapper"
v-if="!hideSubjectStatus && !(singleLine && status.summary_html)"
>
<MentionsLine
v-if="!mentionsOwnLine"
:attentions="status.attentions"
class="mentions-line"
/>
<RichContent
:class="{ '-single-line': singleLine }"
class="text media-body"
:html="postBodyHtml"
:html="status.raw_html"
:emoji="status.emojis"
:handle-links="true"
@click.prevent="linkClicked"
:greentext="mergedConfig.greentext"
>
<template v-slot:prefix>
<MentionsLine
v-if="!mentionsOwnLine"
:mentions="mentions"
class="mentions-line"
/>
</template>
</RichContent>
</span>
<button