some docs, added richcontent to usernames in status, updated stillImage
to allow scale of "gif" label
This commit is contained in:
parent
aec05686d0
commit
04fa1f0b2d
7 changed files with 44 additions and 24 deletions
|
@ -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>
|
||||
}
|
||||
})
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue