diff --git a/client/package.json b/client/package.json index 31d9b1e7c..5e4e4845e 100644 --- a/client/package.json +++ b/client/package.json @@ -105,7 +105,6 @@ "intl-messageformat": "^10.1.0", "jschannel": "^1.0.2", "linkify-html": "^4.0.2", - "linkify-plugin-mention": "^4.0.2", "linkifyjs": "^4.0.2", "lodash-es": "^4.17.4", "markdown-it": "13.0.1", diff --git a/client/src/app/core/renderer/linkifier.service.ts b/client/src/app/core/renderer/linkifier.service.ts index d99591d6c..5c99722f6 100644 --- a/client/src/app/core/renderer/linkifier.service.ts +++ b/client/src/app/core/renderer/linkifier.service.ts @@ -1,13 +1,16 @@ import { Injectable } from '@angular/core' import { getAbsoluteAPIUrl } from '@app/helpers/utils' +import * as LinkifyJS from 'linkifyjs' @Injectable() export class LinkifierService { static CLASSNAME = 'linkified' - private linkifyModule: any + private linkifyModule: typeof LinkifyJS private linkifyHtmlModule: any + private mentionPluginInitialized = false + private linkifyOptions = { className: { mention: LinkifierService.CLASSNAME + '-mention', @@ -24,14 +27,58 @@ export class LinkifierService { if (!this.linkifyModule) { const result = await Promise.all([ import('linkifyjs'), - import('linkify-plugin-mention'), import('linkify-html').then(m => (m as any).default) ]) this.linkifyModule = result[0] - this.linkifyHtmlModule = result[2] + this.linkifyHtmlModule = result[1] + + this.buildMentionPlugin() } return this.linkifyHtmlModule(text, this.linkifyOptions) } + + private buildMentionPlugin () { + if (this.mentionPluginInitialized) return + + const MentionToken = this.linkifyModule.createTokenClass('mention', { + isLink: true, + toHref () { + return '/' + this.toString().slice(1) + } + }) + + this.linkifyModule.registerPlugin('mention', ({ scanner, parser }) => { + const { DOT, HYPHEN, UNDERSCORE, AT } = scanner.tokens + const { domain } = scanner.tokens.groups + + // Start with @ + const At = parser.start.tt(AT) + + // Valid mention (not made up entirely of symbols) + const Mention = At.tt(UNDERSCORE, MentionToken as any) + + At.ta(domain, Mention) + At.tt(UNDERSCORE, Mention) + + // More valid mentions + Mention.ta(domain, Mention) + Mention.tt(HYPHEN, Mention) + Mention.tt(UNDERSCORE, Mention) + + // ADDED: . transitions + const MentionDot = Mention.tt(DOT) + MentionDot.ta(domain, Mention) + MentionDot.tt(HYPHEN, Mention) + MentionDot.tt(UNDERSCORE, Mention) + + const MentionAt = Mention.tt(AT) + MentionAt.ta(domain, Mention) + MentionAt.tt(HYPHEN, Mention) + MentionAt.tt(UNDERSCORE, Mention) + }) + + this.mentionPluginInitialized = true + } } diff --git a/client/yarn.lock b/client/yarn.lock index 1799df7b1..62cf2819d 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -7393,11 +7393,6 @@ linkify-it@^4.0.1: dependencies: uc.micro "^1.0.1" -linkify-plugin-mention@^4.0.2: - version "4.0.2" - resolved "https://registry.yarnpkg.com/linkify-plugin-mention/-/linkify-plugin-mention-4.0.2.tgz#866e50d4047ea24fc647ebf706b15b0cd30afa63" - integrity sha512-W30NL/uQxZahg6Ao/roZSe8ndXaQ+3UjOwUUtM+dVEOAUH5L6L02eLncH/lZLU3ZBj3VjwfZ+r98gw6Tp/8zEw== - linkifyjs@^4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.0.2.tgz#5844ea70f4427004e50036d983b66da50fe13389"