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, idx, options, env, self) {
  56       // If you are sure other plugins can't add `target` - drop check below
  57       const aIndex = tokens[idx].attrIndex('target')
  58
  59       if (aIndex < 0) {
  60         tokens[idx].attrPush(['target', '_blank']) // add new attribute
  61       } else {
  62         tokens[idx].attrs[aIndex][1] = '_blank'    // replace value of existing attr
  63       }
  64
  65       // pass token to default renderer.
  66       return defaultRender(tokens, idx, options, env, self)
  67     }
  68   }
  69
  70   private avoidTruncatedLinks (html) {
  71     return html.replace(/<a[^>]+>([^<]+)<\/a>\s*...(<\/p>)?$/mi, '$1...')
  72   }
  73 }