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

   1 import { Injectable } from '@angular/core'
   2
   3 import * as 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.MarkdownIt
  18   private enhancedMarkdownIt: MarkdownIt.MarkdownIt
  19
  20   constructor () {
  21     this.textMarkdownIt = this.createMarkdownIt(MarkdownService.TEXT_RULES)
  22     this.enhancedMarkdownIt = this.createMarkdownIt(MarkdownService.ENHANCED_RULES)
  23   }
  24
  25   textMarkdownToHTML (markdown: string) {
  26     const html = this.textMarkdownIt.render(markdown)
  27
  28     return this.avoidTruncatedLinks(html)
  29   }
  30
  31   enhancedMarkdownToHTML (markdown: string) {
  32     const html = this.enhancedMarkdownIt.render(markdown)
  33
  34     return this.avoidTruncatedLinks(html)
  35   }
  36
  37   private createMarkdownIt (rules: string[]) {
  38     const markdownIt = new MarkdownIt('zero', { linkify: true, breaks: true })
  39
  40     for (let rule of rules) {
  41       markdownIt.enable(rule)
  42     }
  43
  44     this.setTargetToLinks(markdownIt)
  45
  46     return markdownIt
  47   }
  48
  49   private setTargetToLinks (markdownIt: MarkdownIt.MarkdownIt) {
  50     // Snippet from markdown-it documentation: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
  51     const defaultRender = markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) {
  52       return self.renderToken(tokens, idx, options)
  53     }
  54
  55     markdownIt.renderer.rules.link_open = function (tokens, index, options, env, self) {
  56       const token = tokens[index]
  57
  58       const targetIndex = token.attrIndex('target')
  59       if (targetIndex < 0) token.attrPush([ 'target', '_blank' ])
  60       else token.attrs[targetIndex][1] = '_blank'
  61
  62       const relIndex = token.attrIndex('rel')
  63       if (relIndex < 0) token.attrPush([ 'rel', 'noopener noreferrer' ])
  64       else token.attrs[relIndex][1] = 'noopener noreferrer'
  65
  66       // pass token to default renderer.
  67       return defaultRender(tokens, index, options, env, self)
  68     }
  69   }
  70
  71   private avoidTruncatedLinks (html: string) {
  72     return html.replace(/<a[^>]+>([^<]+)<\/a>\s*...((<\/p>)|(<\/li>)|(<\/strong>))?$/mi, '$1...')
  73   }
  74 }