client/src/app/shared/renderer/markdown.service.ts

   1 import { Injectable } from '@angular/core'
   2
   3 import { MarkdownIt } from 'markdown-it'
   4
   5 @Injectable()
   6 export class MarkdownService {
   7   static TEXT_RULES = [
   8     'linkify',
   9     'autolink',
  10     'emphasis',
  11     'link',
  12     'newline',
  13     'list'
  14   ]
  15   static ENHANCED_RULES = MarkdownService.TEXT_RULES.concat([ 'image' ])
  16
  17   private textMarkdownIt: MarkdownIt
  18   private enhancedMarkdownIt: MarkdownIt
  19
  20   async textMarkdownToHTML (markdown: string) {
  21     if (!markdown) return ''
  22
  23     if (!this.textMarkdownIt) {
  24       this.textMarkdownIt = await this.createMarkdownIt(MarkdownService.TEXT_RULES)
  25     }
  26
  27     const html = this.textMarkdownIt.render(markdown)
  28     return this.avoidTruncatedTags(html)
  29   }
  30
  31   async enhancedMarkdownToHTML (markdown: string) {
  32     if (!markdown) return ''
  33
  34     if (!this.enhancedMarkdownIt) {
  35       this.enhancedMarkdownIt = await this.createMarkdownIt(MarkdownService.ENHANCED_RULES)
  36     }
  37
  38     const html = this.enhancedMarkdownIt.render(markdown)
  39     return this.avoidTruncatedTags(html)
  40   }
  41
  42   private async createMarkdownIt (rules: string[]) {
  43     // FIXME: import('..') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
  44     const MarkdownItClass: typeof import ('markdown-it') = (await import('markdown-it') as any).default
  45
  46     const markdownIt = new MarkdownItClass('zero', { linkify: true, breaks: true })
  47
  48     for (const rule of rules) {
  49       markdownIt.enable(rule)
  50     }
  51
  52     this.setTargetToLinks(markdownIt)
  53
  54     return markdownIt
  55   }
  56
  57   private setTargetToLinks (markdownIt: MarkdownIt) {
  58     // Snippet from markdown-it documentation: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
  59     const defaultRender = markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) {
  60       return self.renderToken(tokens, idx, options)
  61     }
  62
  63     markdownIt.renderer.rules.link_open = function (tokens, index, options, env, self) {
  64       const token = tokens[index]
  65
  66       const targetIndex = token.attrIndex('target')
  67       if (targetIndex < 0) token.attrPush([ 'target', '_blank' ])
  68       else token.attrs[targetIndex][1] = '_blank'
  69
  70       const relIndex = token.attrIndex('rel')
  71       if (relIndex < 0) token.attrPush([ 'rel', 'noopener noreferrer' ])
  72       else token.attrs[relIndex][1] = 'noopener noreferrer'
  73
  74       // pass token to default renderer.
  75       return defaultRender(tokens, index, options, env, self)
  76     }
  77   }
  78
  79   private avoidTruncatedTags (html: string) {
  80     return html.replace(/\*\*?([^*]+)$/, '$1')
  81       .replace(/<a[^>]+>([^<]+)<\/a>\s*...((<\/p>)|(<\/li>)|(<\/strong>))?$/mi, '$1...')
  82       .replace(/\[[^\]]+\]?\(?([^\)]+)$/, '$1')
  83
  84   }
  85 }