client/src/app/core/renderer/linkifier.service.ts

   1 import { Injectable } from '@angular/core'
   2 import { getAbsoluteAPIUrl } from '@app/helpers/utils'
   3
   4 @Injectable()
   5 export class LinkifierService {
   6   static CLASSNAME = 'linkified'
   7
   8   private linkifyModule: any
   9   private linkifyHtmlModule: any
  10
  11   private linkifyOptions = {
  12     className: {
  13       mention: LinkifierService.CLASSNAME + '-mention',
  14       url: LinkifierService.CLASSNAME + '-url'
  15     }
  16   }
  17
  18   async linkify (text: string) {
  19     if (!this.linkifyModule) {
  20       const result = await Promise.all([
  21         import('linkifyjs'), // ES module
  22         import('linkifyjs/html').then(m => m.default)
  23       ])
  24
  25       this.linkifyModule = result[0]
  26       this.linkifyHtmlModule = result[1]
  27
  28       this.mentionWithDomainPlugin()
  29     }
  30
  31     return this.linkifyHtmlModule(text, this.linkifyOptions)
  32   }
  33
  34   private mentionWithDomainPlugin () {
  35     const TT = this.linkifyModule.scanner.TOKENS // Text tokens
  36     const { TOKENS: MT, State } = this.linkifyModule.parser // Multi tokens, state
  37     const MultiToken = MT.Base
  38     const S_START = this.linkifyModule.parser.start
  39
  40     const TT_AT = TT.AT
  41     const TT_DOMAIN = TT.DOMAIN
  42     const TT_LOCALHOST = TT.LOCALHOST
  43     const TT_NUM = TT.NUM
  44     const TT_COLON = TT.COLON
  45     const TT_SLASH = TT.SLASH
  46     const TT_TLD = TT.TLD
  47     const TT_UNDERSCORE = TT.UNDERSCORE
  48     const TT_DOT = TT.DOT
  49
  50     function MENTION (this: any, value: any) {
  51       this.v = value
  52     }
  53
  54     this.linkifyModule.inherits(MultiToken, MENTION, {
  55       type: 'mentionWithDomain',
  56       isLink: true,
  57       toHref () {
  58         return getAbsoluteAPIUrl() + '/services/redirect/accounts/' + this.toString().substr(1)
  59       }
  60     })
  61
  62     const S_AT = S_START.jump(TT_AT) // @
  63     const S_AT_SYMS = new State()
  64     const S_MENTION = new State(MENTION)
  65     const S_MENTION_DIVIDER = new State()
  66     const S_MENTION_DIVIDER_SYMS = new State()
  67
  68     // @_,
  69     S_AT.on(TT_UNDERSCORE, S_AT_SYMS)
  70
  71     //  @_*
  72     S_AT_SYMS
  73       .on(TT_UNDERSCORE, S_AT_SYMS)
  74       .on(TT_DOT, S_AT_SYMS)
  75
  76     // Valid mention (not made up entirely of symbols)
  77     S_AT
  78       .on(TT_DOMAIN, S_MENTION)
  79       .on(TT_LOCALHOST, S_MENTION)
  80       .on(TT_TLD, S_MENTION)
  81       .on(TT_NUM, S_MENTION)
  82
  83     S_AT_SYMS
  84       .on(TT_DOMAIN, S_MENTION)
  85       .on(TT_LOCALHOST, S_MENTION)
  86       .on(TT_TLD, S_MENTION)
  87       .on(TT_NUM, S_MENTION)
  88
  89     // More valid mentions
  90     S_MENTION
  91       .on(TT_DOMAIN, S_MENTION)
  92       .on(TT_LOCALHOST, S_MENTION)
  93       .on(TT_TLD, S_MENTION)
  94       .on(TT_COLON, S_MENTION)
  95       .on(TT_NUM, S_MENTION)
  96       .on(TT_UNDERSCORE, S_MENTION)
  97
  98     // Mention with a divider
  99     S_MENTION
 100       .on(TT_AT, S_MENTION_DIVIDER)
 101       .on(TT_SLASH, S_MENTION_DIVIDER)
 102       .on(TT_DOT, S_MENTION_DIVIDER)
 103
 104     // Mention _ trailing stash plus syms
 105     S_MENTION_DIVIDER.on(TT_UNDERSCORE, S_MENTION_DIVIDER_SYMS)
 106     S_MENTION_DIVIDER_SYMS.on(TT_UNDERSCORE, S_MENTION_DIVIDER_SYMS)
 107
 108     // Once we get a word token, mentions can start up again
 109     S_MENTION_DIVIDER
 110       .on(TT_DOMAIN, S_MENTION)
 111       .on(TT_LOCALHOST, S_MENTION)
 112       .on(TT_TLD, S_MENTION)
 113       .on(TT_NUM, S_MENTION)
 114
 115     S_MENTION_DIVIDER_SYMS
 116       .on(TT_DOMAIN, S_MENTION)
 117       .on(TT_LOCALHOST, S_MENTION)
 118       .on(TT_TLD, S_MENTION)
 119       .on(TT_NUM, S_MENTION)
 120   }
 121 }