Lazy load linkifier
This commit is contained in:
parent
c4f7fe09cd
commit
b355b39408
3 changed files with 32 additions and 19 deletions
|
@ -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": []
|
||||
},
|
||||
|
|
|
@ -21,10 +21,12 @@ export class HtmlRendererService {
|
|||
}
|
||||
|
||||
async toSafeHtml (text: string) {
|
||||
await this.loadSanitizeHtml()
|
||||
|
||||
const [ html ] = await Promise.all([
|
||||
// Convert possible markdown to html
|
||||
const html = this.linkifier.linkify(text)
|
||||
this.linkifier.linkify(text),
|
||||
|
||||
this.loadSanitizeHtml()
|
||||
])
|
||||
|
||||
return this.sanitizeHtml(html, SANITIZE_OPTIONS)
|
||||
}
|
||||
|
|
|
@ -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 () {
|
||||
|
|
Loading…
Reference in a new issue