Lazy load linkifier

3 files changed, 31 insertions, 18 deletions

diff --git a/client/angular.json b/client/angular.json
index e453ce273..5ecc335cb 100644
--- a/client/angular.json
+++ b/client/angular.json
@@ -168,7 +168,11 @@
               "@babel/runtime/helpers/possibleConstructorReturn",
               "@babel/runtime/helpers/inherits",
               "@babel/runtime/helpers/construct",
-              "@videojs/xhr"
+              "@videojs/xhr",
+              "htmlparser2",
+              "url",
+              "parse-srcset",
+              "postcss"
             ],
             "scripts": []
           },
diff --git a/client/src/app/core/renderer/html-renderer.service.ts b/client/src/app/core/renderer/html-renderer.service.ts
index 1fe91b96b..3176cf6a4 100644
--- a/client/src/app/core/renderer/html-renderer.service.ts
+++ b/client/src/app/core/renderer/html-renderer.service.ts
@@ -21,10 +21,12 @@ export class HtmlRendererService {
   }
 
   async toSafeHtml (text: string) {
-    await this.loadSanitizeHtml()
+    const [ html ] = await Promise.all([
+      // Convert possible markdown to html
+      this.linkifier.linkify(text),
 
-    // Convert possible markdown to html
-    const html = this.linkifier.linkify(text)
+      this.loadSanitizeHtml()
+    ])
 
     return this.sanitizeHtml(html, SANITIZE_OPTIONS)
   }
diff --git a/client/src/app/core/renderer/linkifier.service.ts b/client/src/app/core/renderer/linkifier.service.ts
index 46d5b0089..db9326d63 100644
--- a/client/src/app/core/renderer/linkifier.service.ts
+++ b/client/src/app/core/renderer/linkifier.service.ts
@@ -1,13 +1,13 @@
 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',
@@ -15,20 +15,27 @@ export class LinkifierService {
     }
   }
 
-  constructor () {
-    // Apply plugin
-    this.mentionWithDomainPlugin(linkify)
-  }
+  async linkify (text: string) {
+    if (!this.linkifyModule) {
+      const result = await Promise.all([
+        import('linkifyjs'), // ES module
+        import('linkifyjs/html').then(m => m.default)
+      ])
+
+      this.linkifyModule = result[0]
+      this.linkifyHtmlModule = result[1]
+
+      this.mentionWithDomainPlugin()
+    }
 
-  linkify (text: string) {
-    return linkifyHtml(text, this.linkifyOptions)
+    return this.linkifyHtmlModule(text, this.linkifyOptions)
   }
 
-  private mentionWithDomainPlugin (linkify: any) {
-    const TT = linkify.scanner.TOKENS // Text tokens
-    const { TOKENS: MT, State } = linkify.parser // Multi tokens, state
+  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 = linkify.parser.start
+    const S_START = this.linkifyModule.parser.start
 
     const TT_AT = TT.AT
     const TT_DOMAIN = TT.DOMAIN
@@ -44,7 +51,7 @@ export class LinkifierService {
       this.v = value
     }
 
-    linkify.inherits(MultiToken, MENTION, {
+    this.linkifyModule.inherits(MultiToken, MENTION, {
       type: 'mentionWithDomain',
       isLink: true,
       toHref () {