Make MentionsLine aware of line breaking by non-br elements

This commit is contained in:
tusooa 2023-07-24 18:28:02 -04:00
parent 510392e4ca
commit 56a74aa392
No known key found for this signature in database
GPG Key ID: 42AEC43D48433C51
2 changed files with 37 additions and 18 deletions

View File

@ -0,0 +1 @@
Make MentionsLine aware of line breaking by non-br elements

View File

@ -8,6 +8,27 @@ import HashtagLink from 'src/components/hashtag_link/hashtag_link.vue'
import './rich_content.scss' import './rich_content.scss'
const MAYBE_LINE_BREAKING_ELEMENTS = [
'blockquote',
'br',
'hr',
'ul',
'ol',
'li',
'p',
'table',
'tbody',
'td',
'th',
'thead',
'tr',
'h1',
'h2',
'h3',
'h4',
'h5'
]
/** /**
* RichContent, The Über-powered component for rendering Post HTML. * RichContent, The Über-powered component for rendering Post HTML.
* *
@ -166,25 +187,22 @@ export default {
!(children && typeof children[0] === 'string' && children[0].match(/^\s/)) !(children && typeof children[0] === 'string' && children[0].match(/^\s/))
? lastSpacing ? lastSpacing
: '' : ''
switch (Tag) { if (MAYBE_LINE_BREAKING_ELEMENTS.includes(Tag)) {
case 'br': // all the elements that can cause a line change
currentMentions = null
} else if (Tag === 'img') { // replace images with StillImage
return ['', [mentionsLinePadding, renderImage(opener)], '']
} else if (Tag === 'a' && this.handleLinks) { // replace mentions with MentionLink
if (fullAttrs.class && fullAttrs.class.includes('mention')) {
// Handling mentions here
return renderMention(attrs, children)
} else {
currentMentions = null currentMentions = null
break }
case 'img': // replace images with StillImage } else if (Tag === 'span') {
return ['', [mentionsLinePadding, renderImage(opener)], ''] if (this.handleLinks && fullAttrs.class && fullAttrs.class.includes('h-card')) {
case 'a': // replace mentions with MentionLink return ['', children.map(processItem), '']
if (!this.handleLinks) break }
if (fullAttrs.class && fullAttrs.class.includes('mention')) {
// Handling mentions here
return renderMention(attrs, children)
} else {
currentMentions = null
break
}
case 'span':
if (this.handleLinks && fullAttrs.class && fullAttrs.class.includes('h-card')) {
return ['', children.map(processItem), '']
}
} }
if (children !== undefined) { if (children !== undefined) {