Refactoring login component style

[github/Chocobozzz/PeerTube.git] / client / src / app / core / renderer / linkifier.service.ts

diff --git a/client/src/app/core/renderer/linkifier.service.ts b/client/src/app/core/renderer/linkifier.service.ts
index 46d5b00893606db4fc88155ac16c0c941a9197e2..5c99722f6e4fbb786dfb543913dfba71f5c47905 100644 (file)
--- a/client/src/app/core/renderer/linkifier.service.ts
+++ b/client/src/app/core/renderer/linkifier.service.ts
@@ -1,114 +1,84 @@
 import { Injectable } from '@angular/core'
 import { getAbsoluteAPIUrl } from '@app/helpers/utils'
-import * as linkify from 'linkifyjs'
-import linkifyHtml from 'linkifyjs/html'
+import * as LinkifyJS from 'linkifyjs'
 
 @Injectable()
 export class LinkifierService {
-
   static CLASSNAME = 'linkified'
 
+  private linkifyModule: typeof LinkifyJS
+  private linkifyHtmlModule: any
+
+  private mentionPluginInitialized = false
+
   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)
-  }
+  async linkify (text: string) {
+    if (!this.linkifyModule) {
+      const result = await Promise.all([
+        import('linkifyjs'),
+        import('linkify-html').then(m => (m as any).default)
+      ])
 
-  linkify (text: string) {
-    return linkifyHtml(text, this.linkifyOptions)
-  }
+      this.linkifyModule = result[0]
+      this.linkifyHtmlModule = result[1]
 
-  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
-
-    function MENTION (this: any, value: any) {
-      this.v = value
+      this.buildMentionPlugin()
     }
 
-    linkify.inherits(MultiToken, MENTION, {
-      type: 'mentionWithDomain',
+    return this.linkifyHtmlModule(text, this.linkifyOptions)
+  }
+
+  private buildMentionPlugin () {
+    if (this.mentionPluginInitialized) return
+
+    const MentionToken = this.linkifyModule.createTokenClass('mention', {
       isLink: true,
       toHref () {
-        return getAbsoluteAPIUrl() + '/services/redirect/accounts/' + this.toString().substr(1)
+        return '/' + this.toString().slice(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)
+    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
   }
 }