Browse Source

Lazy load linkifier

pull/3334/head
Chocobozzz 1 week ago
parent
commit
b355b39408
No known key found for this signature in database GPG Key ID: 583A612D890159BE
3 changed files with 31 additions and 18 deletions
  1. +5
    -1
      client/angular.json
  2. +5
    -3
      client/src/app/core/renderer/html-renderer.service.ts
  3. +21
    -14
      client/src/app/core/renderer/linkifier.service.ts

+ 5
- 1
client/angular.json View File

@@ -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": []
},


+ 5
- 3
client/src/app/core/renderer/html-renderer.service.ts View File

@@ -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)
}


+ 21
- 14
client/src/app/core/renderer/linkifier.service.ts View File

@@ -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…
Cancel
Save