diff --git a/src/components/hashtag_link/hashtag_link.js b/src/components/hashtag_link/hashtag_link.js new file mode 100644 index 00000000..a2433c2a --- /dev/null +++ b/src/components/hashtag_link/hashtag_link.js @@ -0,0 +1,36 @@ +import { extractTagFromUrl } from 'src/services/matcher/matcher.service.js' + +const HashtagLink = { + name: 'HashtagLink', + props: { + url: { + required: true, + type: String + }, + content: { + required: true, + type: String + }, + tag: { + required: false, + type: String, + default: '' + } + }, + methods: { + onClick () { + const tag = this.tag || extractTagFromUrl(this.url) + if (tag) { + const link = this.generateTagLink(tag) + this.$router.push(link) + } else { + window.open(this.url, '_blank') + } + }, + generateTagLink (tag) { + return `/tag/${tag}` + } + } +} + +export default HashtagLink diff --git a/src/components/hashtag_link/hashtag_link.scss b/src/components/hashtag_link/hashtag_link.scss new file mode 100644 index 00000000..78e8fb99 --- /dev/null +++ b/src/components/hashtag_link/hashtag_link.scss @@ -0,0 +1,6 @@ +.HashtagLink { + position: relative; + white-space: normal; + display: inline-block; + color: var(--link); +} diff --git a/src/components/hashtag_link/hashtag_link.vue b/src/components/hashtag_link/hashtag_link.vue new file mode 100644 index 00000000..918ed26b --- /dev/null +++ b/src/components/hashtag_link/hashtag_link.vue @@ -0,0 +1,19 @@ + + + + + + + + + + + diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index 625eb727..a22b486c 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -17,8 +17,9 @@ :style="style" :class="classnames" > - @@ -35,7 +36,7 @@ class="you" >{{ $t('status.you') }} - + { const linkData = getLinkData(attrs, children, tagsIndex++) writtenTags.push(linkData) - attrs.target = '_blank' if (!encounteredTextReverse) { lastTags.push(linkData) } - return - { children.map(processItem) } - + return } const renderMention = (attrs, children) => { @@ -211,7 +209,10 @@ export default Vue.component('RichContent', { if (!this.handleLinks) break const attrs = getAttrs(opener) // should only be this - if (attrs['class'] && attrs['class'].includes('hashtag')) { + if ( + (attrs['class'] && attrs['class'].includes('hashtag')) || // Pleroma style + (attrs['rel'] === 'tag') // Mastodon style + ) { return renderHashtag(attrs, children, encounteredTextReverse) } else { attrs.target = '_blank' @@ -275,7 +276,7 @@ const getLinkData = (attrs, children, index) => { return { index, url: attrs.href, - hashtag: attrs['data-tag'], + tag: attrs['data-tag'], content: flattenDeep(children).join(''), textContent } diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js index b29edeab..f6c478a9 100644 --- a/test/unit/specs/components/rich_content.spec.js +++ b/test/unit/specs/components/rich_content.spec.js @@ -300,10 +300,10 @@ describe('RichContent', () => { '', '', 'NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg', - ' ', - '#nou', - ' ', - '#screencap', + ' ', + '', + ' ', + '', ' ' ].join('')
', '', 'NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg', - ' ', - '#nou', - ' ', - '#screencap', + ' ', + '', + ' ', + '', '