Upgrade linkifyjs

client/angular.json

@@ -156,6 +156,7 @@
               "chart.js",
               "htmlparser2",
               "markdown-it-emoji/light",
+              "linkifyjs/lib/linkify-html",
               "sanitize-html",
               "debug",
               "@peertube/p2p-media-loader-hlsjs",

client/package.json

@@ -102,7 +102,9 @@
     "html-webpack-plugin": "^5.3.1",
     "https-browserify": "^1.0.0",
     "jschannel": "^1.0.2",
-    "linkifyjs": "^2.1.5",
+    "linkify-html": "^3.0.2",
+    "linkify-plugin-mention": "^3.0.2",
+    "linkifyjs": "^3.0.2",
     "lodash-es": "^4.17.4",
     "markdown-it": "12.2.0",
     "mini-css-extract-plugin": "^2.2.0",

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

@@ -12,110 +12,26 @@ export class LinkifierService {
     className: {
       mention: LinkifierService.CLASSNAME + '-mention',
       url: LinkifierService.CLASSNAME + '-url'
+    },
+    formatHref: {
+      mention: (href: string) => {
+        return getAbsoluteAPIUrl() + '/services/redirect/accounts/' + href.substr(1)
+      }
     }
   }
 
   async linkify (text: string) {
     if (!this.linkifyModule) {
       const result = await Promise.all([
-        import('linkifyjs'), // ES module
+        import('linkifyjs'),
-        import('linkifyjs/html').then(m => m.default)
+        import('linkify-plugin-mention'),
+        import('linkify-html').then(m => (m as any).default)
       ])
 
       this.linkifyModule = result[0]
-      this.linkifyHtmlModule = result[1]
+      this.linkifyHtmlModule = result[2]
-
-      this.mentionWithDomainPlugin()
     }
 
     return this.linkifyHtmlModule(text, this.linkifyOptions)
   }
-
-  private mentionWithDomainPlugin () {
-    const TT = this.linkifyModule.scanner.TOKENS // Text tokens
-    const { TOKENS: MT, State } = this.linkifyModule.parser // Multi tokens, state
-    const MultiToken = MT.Base
-    const S_START = this.linkifyModule.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.linkifyModule.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)
-  }
 }

client/yarn.lock

@@ -7852,6 +7852,11 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
+linkify-html@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/linkify-html/-/linkify-html-3.0.2.tgz#d9cd1bbb8afa54560d35427a22dbf2018ea44eb8"
+  integrity sha512-vHIFhMjEFptdaRqk6wfNmtoBKkFPAkZGUwsThMafSnkqc02gZc6+bfAAxVgMZAn7NTxDYgSW2q04kmVAzYtEaA==
+
 linkify-it@^3.0.1:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-3.0.3.tgz#a98baf44ce45a550efb4d49c769d07524cc2fa2e"
@@ -7859,10 +7864,15 @@ linkify-it@^3.0.1:
   dependencies:
     uc.micro "^1.0.1"
 
-linkifyjs@^2.1.5:
+linkify-plugin-mention@^3.0.2:
-  version "2.1.9"
+  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-2.1.9.tgz#af06e45a2866ff06c4766582590d098a4d584702"
+  resolved "https://registry.yarnpkg.com/linkify-plugin-mention/-/linkify-plugin-mention-3.0.2.tgz#ecb29e5840532e86c33007c54b210e5b5de266e9"
-  integrity sha512-74ivurkK6WHvHFozVaGtQWV38FzBwSTGNmJolEgFp7QgR2bl6ArUWlvT4GcHKbPe1z3nWYi+VUdDZk16zDOVug==
+  integrity sha512-NWYZLFyZV5uJWETHpNzsFZO+gk22hu5sbj8rndthfv5t+hQTozYkKt13b5nugvk30QSRQ4ULvhsTrEA8ohceOA==
+
+linkifyjs@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-3.0.2.tgz#f1d300300ef21dab0eaabdd8a661186723f924ba"
+  integrity sha512-PSHDxSAWkZQ208W4PI/+yo9NHSI6NAHKmazMtyRavyibJgrPOioPIjQn7zyapASQlKoPmAV+tOlqzTqX3XFWXQ==
 
 load-ip-set@^2.2.1:
   version "2.2.1"