aboutsummaryrefslogtreecommitdiff
path: root/src/components/rich_content/rich_content.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/rich_content/rich_content.jsx')
-rw-r--r--src/components/rich_content/rich_content.jsx33
1 files changed, 26 insertions, 7 deletions
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index 00cf6623..c15877c8 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -9,25 +9,41 @@ import './rich_content.scss'
export default Vue.component('RichContent', {
name: 'RichContent',
props: {
+ // Original html content
html: {
required: true,
type: String
},
+ // Emoji object, as in status.emojis, note the "s" at the end...
emoji: {
required: true,
type: Array
+ },
+ // Whether to handle links or not (posts: yes, everything else: no)
+ handleLinks: {
+ required: false,
+ type: Boolean,
+ default: false
}
},
render (h) {
const renderImage = (tag) => {
- const attrs = getAttrs(tag)
- return <StillImage {...{ attrs }} class="img"/>
+ return <StillImage
+ {...{ attrs: getAttrs(tag) }}
+ class="img"
+ />
}
const renderMention = (attrs, children) => {
- return <MentionLink url={attrs.href} content={flattenDeep(children).join('')} origattrs={attrs}/>
+ return <MentionLink
+ url={attrs.href}
+ content={flattenDeep(children).join('')}
+ origattrs={attrs}
+ />
}
- const structure = convertHtml(this.html)
+
+ // Processor to use with mini_html_converter
const processItem = (item) => {
+ // Handle text noes - just add emoji
if (typeof item === 'string') {
if (item.includes(':')) {
return processTextForEmoji(
@@ -46,18 +62,21 @@ export default Vue.component('RichContent', {
return unescape(item)
}
}
+ // Handle tag nodes
if (Array.isArray(item)) {
const [opener, children] = item
const Tag = getTagName(opener)
switch (Tag) {
- case 'img':
+ case 'img': // replace images with StillImage
return renderImage(opener)
- case 'a':
+ case 'a': // replace mentions with MentionLink
+ if (!this.handleLinks) break
const attrs = getAttrs(opener)
if (attrs['class'] && attrs['class'].includes('mention')) {
return renderMention(attrs, children)
}
}
+ // Render tag as is
if (children !== undefined) {
return <Tag {...{ attrs: getAttrs(opener) }}>
{ children.map(processItem) }
@@ -68,7 +87,7 @@ export default Vue.component('RichContent', {
}
}
return <span class="RichContent">
- { structure.map(processItem) }
+ { convertHtml(this.html).map(processItem) }
</span>
}
})