X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fcore%2Frenderer%2Flinkifier.service.ts;h=d99591d6c630497cae8bf01d0979a6bfbfa36b1d;hb=8ca52bcc2c37d457e8b19a237c66b8dd1c00b6b9;hp=46d5b00893606db4fc88155ac16c0c941a9197e2;hpb=67ed6552b831df66713bac9e672738796128d33f;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/core/renderer/linkifier.service.ts b/client/src/app/core/renderer/linkifier.service.ts index 46d5b0089..d99591d6c 100644 --- a/client/src/app/core/renderer/linkifier.service.ts +++ b/client/src/app/core/renderer/linkifier.service.ts @@ -1,114 +1,37 @@ import { Injectable } from '@angular/core' import { getAbsoluteAPIUrl } from '@app/helpers/utils' -import * as linkify from 'linkifyjs' -import linkifyHtml from 'linkifyjs/html' @Injectable() export class LinkifierService { - static CLASSNAME = 'linkified' + private linkifyModule: any + private linkifyHtmlModule: any + private linkifyOptions = { className: { mention: LinkifierService.CLASSNAME + '-mention', url: LinkifierService.CLASSNAME + '-url' + }, + formatHref: { + mention: (href: string) => { + return getAbsoluteAPIUrl() + '/services/redirect/accounts/' + href.substring(1) + } } } - constructor () { - // Apply plugin - this.mentionWithDomainPlugin(linkify) - } - - linkify (text: string) { - return linkifyHtml(text, this.linkifyOptions) - } - - private mentionWithDomainPlugin (linkify: any) { - const TT = linkify.scanner.TOKENS // Text tokens - const { TOKENS: MT, State } = linkify.parser // Multi tokens, state - const MultiToken = MT.Base - const S_START = linkify.parser.start - - const TT_AT = TT.AT - const TT_DOMAIN = TT.DOMAIN - const TT_LOCALHOST = TT.LOCALHOST - const TT_NUM = TT.NUM - const TT_COLON = TT.COLON - const TT_SLASH = TT.SLASH - const TT_TLD = TT.TLD - const TT_UNDERSCORE = TT.UNDERSCORE - const TT_DOT = TT.DOT + async linkify (text: string) { + if (!this.linkifyModule) { + const result = await Promise.all([ + import('linkifyjs'), + import('linkify-plugin-mention'), + import('linkify-html').then(m => (m as any).default) + ]) - function MENTION (this: any, value: any) { - this.v = value + this.linkifyModule = result[0] + this.linkifyHtmlModule = result[2] } - linkify.inherits(MultiToken, MENTION, { - type: 'mentionWithDomain', - isLink: true, - toHref () { - return getAbsoluteAPIUrl() + '/services/redirect/accounts/' + this.toString().substr(1) - } - }) - - const S_AT = S_START.jump(TT_AT) // @ - const S_AT_SYMS = new State() - const S_MENTION = new State(MENTION) - const S_MENTION_DIVIDER = new State() - const S_MENTION_DIVIDER_SYMS = new State() - - // @_, - S_AT.on(TT_UNDERSCORE, S_AT_SYMS) - - // @_* - S_AT_SYMS - .on(TT_UNDERSCORE, S_AT_SYMS) - .on(TT_DOT, S_AT_SYMS) - - // Valid mention (not made up entirely of symbols) - S_AT - .on(TT_DOMAIN, S_MENTION) - .on(TT_LOCALHOST, S_MENTION) - .on(TT_TLD, S_MENTION) - .on(TT_NUM, S_MENTION) - - S_AT_SYMS - .on(TT_DOMAIN, S_MENTION) - .on(TT_LOCALHOST, S_MENTION) - .on(TT_TLD, S_MENTION) - .on(TT_NUM, S_MENTION) - - // More valid mentions - S_MENTION - .on(TT_DOMAIN, S_MENTION) - .on(TT_LOCALHOST, S_MENTION) - .on(TT_TLD, S_MENTION) - .on(TT_COLON, S_MENTION) - .on(TT_NUM, S_MENTION) - .on(TT_UNDERSCORE, S_MENTION) - - // Mention with a divider - S_MENTION - .on(TT_AT, S_MENTION_DIVIDER) - .on(TT_SLASH, S_MENTION_DIVIDER) - .on(TT_DOT, S_MENTION_DIVIDER) - - // Mention _ trailing stash plus syms - S_MENTION_DIVIDER.on(TT_UNDERSCORE, S_MENTION_DIVIDER_SYMS) - S_MENTION_DIVIDER_SYMS.on(TT_UNDERSCORE, S_MENTION_DIVIDER_SYMS) - - // Once we get a word token, mentions can start up again - S_MENTION_DIVIDER - .on(TT_DOMAIN, S_MENTION) - .on(TT_LOCALHOST, S_MENTION) - .on(TT_TLD, S_MENTION) - .on(TT_NUM, S_MENTION) - - S_MENTION_DIVIDER_SYMS - .on(TT_DOMAIN, S_MENTION) - .on(TT_LOCALHOST, S_MENTION) - .on(TT_TLD, S_MENTION) - .on(TT_NUM, S_MENTION) + return this.linkifyHtmlModule(text, this.linkifyOptions) } }