client/src/app/core/renderer/html-renderer.service.ts

   1 import { Injectable } from '@angular/core'
   2 import { LinkifierService } from './linkifier.service'
   3
   4 @Injectable()
   5 export class HtmlRendererService {
   6   private sanitizeHtml: typeof import ('sanitize-html')
   7
   8   constructor (private linkifier: LinkifierService) {
   9
  10   }
  11
  12   async convertToBr (text: string) {
  13     await this.loadSanitizeHtml()
  14
  15     const html = text.replace(/\r?\n/g, '<br />')
  16
  17     return this.sanitizeHtml(html, {
  18       allowedTags: [ 'br' ]
  19     })
  20   }
  21
  22   async toSafeHtml (text: string) {
  23     await this.loadSanitizeHtml()
  24
  25     // Convert possible markdown to html
  26     const html = this.linkifier.linkify(text)
  27
  28     return this.sanitizeHtml(html, {
  29       allowedTags: [ 'a', 'p', 'span', 'br', 'strong', 'em', 'ul', 'ol', 'li' ],
  30       allowedSchemes: [ 'http', 'https' ],
  31       allowedAttributes: {
  32         'a': [ 'href', 'class', 'target', 'rel' ]
  33       },
  34       transformTags: {
  35         a: (tagName, attribs) => {
  36           let rel = 'noopener noreferrer'
  37           if (attribs.rel === 'me') rel += ' me'
  38
  39           return {
  40             tagName,
  41             attribs: Object.assign(attribs, {
  42               target: '_blank',
  43               rel
  44             })
  45           }
  46         }
  47       }
  48     })
  49   }
  50
  51   private async loadSanitizeHtml () {
  52     // FIXME: import('..') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
  53     this.sanitizeHtml = (await import('sanitize-html') as any).default
  54   }
  55 }