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

   1 import * as MarkdownIt from 'markdown-it'
   2 import { buildVideoLink } from 'src/assets/player/utils'
   3 import { Injectable } from '@angular/core'
   4 import {
   5   COMPLETE_RULES,
   6   ENHANCED_RULES,
   7   ENHANCED_WITH_HTML_RULES,
   8   TEXT_RULES,
   9   TEXT_WITH_HTML_RULES
  10 } from '@shared/core-utils/renderer/markdown'
  11 import { HtmlRendererService } from './html-renderer.service'
  12
  13 type MarkdownParsers = {
  14   textMarkdownIt: MarkdownIt
  15   textWithHTMLMarkdownIt: MarkdownIt
  16
  17   enhancedMarkdownIt: MarkdownIt
  18   enhancedWithHTMLMarkdownIt: MarkdownIt
  19
  20   completeMarkdownIt: MarkdownIt
  21 }
  22
  23 type MarkdownConfig = {
  24   rules: string[]
  25   html: boolean
  26   escape?: boolean
  27 }
  28
  29 type MarkdownParserConfigs = {
  30   [id in keyof MarkdownParsers]: MarkdownConfig
  31 }
  32
  33 @Injectable()
  34 export class MarkdownService {
  35   private markdownParsers: MarkdownParsers = {
  36     textMarkdownIt: null,
  37     textWithHTMLMarkdownIt: null,
  38     enhancedMarkdownIt: null,
  39     enhancedWithHTMLMarkdownIt: null,
  40     completeMarkdownIt: null
  41   }
  42   private parsersConfig: MarkdownParserConfigs = {
  43     textMarkdownIt: { rules: TEXT_RULES, html: false },
  44     textWithHTMLMarkdownIt: { rules: TEXT_WITH_HTML_RULES, html: true, escape: true },
  45
  46     enhancedMarkdownIt: { rules: ENHANCED_RULES, html: false },
  47     enhancedWithHTMLMarkdownIt: { rules: ENHANCED_WITH_HTML_RULES, html: true, escape: true },
  48
  49     completeMarkdownIt: { rules: COMPLETE_RULES, html: true }
  50   }
  51
  52   constructor (private htmlRenderer: HtmlRendererService) {}
  53
  54   textMarkdownToHTML (markdown: string, withHtml = false, withEmoji = false) {
  55     if (withHtml) return this.render('textWithHTMLMarkdownIt', markdown, withEmoji)
  56
  57     return this.render('textMarkdownIt', markdown, withEmoji)
  58   }
  59
  60   enhancedMarkdownToHTML (markdown: string, withHtml = false, withEmoji = false) {
  61     if (withHtml) return this.render('enhancedWithHTMLMarkdownIt', markdown, withEmoji)
  62
  63     return this.render('enhancedMarkdownIt', markdown, withEmoji)
  64   }
  65
  66   completeMarkdownToHTML (markdown: string) {
  67     return this.render('completeMarkdownIt', markdown, true)
  68   }
  69
  70   async processVideoTimestamps (html: string) {
  71     return html.replace(/((\d{1,2}):)?(\d{1,2}):(\d{1,2})/g, function (str, _, h, m, s) {
  72       const t = (3600 * +(h || 0)) + (60 * +(m || 0)) + (+(s || 0))
  73       const url = buildVideoLink({ startTime: t })
  74       return `<a class="video-timestamp" href="${url}">${str}</a>`
  75     })
  76   }
  77
  78   private async render (name: keyof MarkdownParsers, markdown: string, withEmoji = false) {
  79     if (!markdown) return ''
  80
  81     const config = this.parsersConfig[ name ]
  82     if (!this.markdownParsers[ name ]) {
  83       this.markdownParsers[ name ] = await this.createMarkdownIt(config)
  84
  85       if (withEmoji) {
  86         // TODO: write types
  87         const emoji = require('markdown-it-emoji/light')
  88         this.markdownParsers[ name ].use(emoji)
  89       }
  90     }
  91
  92     let html = this.markdownParsers[ name ].render(markdown)
  93     html = this.avoidTruncatedTags(html)
  94
  95     if (config.escape) return this.htmlRenderer.toSafeHtml(html)
  96
  97     return html
  98   }
  99
 100   private async createMarkdownIt (config: MarkdownConfig) {
 101     // FIXME: import('...') returns a struct module, containing a "default" field
 102     const MarkdownItClass: typeof import ('markdown-it') = (await import('markdown-it') as any).default
 103
 104     const markdownIt = new MarkdownItClass('zero', { linkify: true, breaks: true, html: config.html })
 105
 106     for (const rule of config.rules) {
 107       markdownIt.enable(rule)
 108     }
 109
 110     this.setTargetToLinks(markdownIt)
 111
 112     return markdownIt
 113   }
 114
 115   private setTargetToLinks (markdownIt: MarkdownIt) {
 116     // Snippet from markdown-it documentation: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
 117     const defaultRender = markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) {
 118       return self.renderToken(tokens, idx, options)
 119     }
 120
 121     markdownIt.renderer.rules.link_open = function (tokens, index, options, env, self) {
 122       const token = tokens[index]
 123
 124       const targetIndex = token.attrIndex('target')
 125       if (targetIndex < 0) token.attrPush([ 'target', '_blank' ])
 126       else token.attrs[targetIndex][1] = '_blank'
 127
 128       const relIndex = token.attrIndex('rel')
 129       if (relIndex < 0) token.attrPush([ 'rel', 'noopener noreferrer' ])
 130       else token.attrs[relIndex][1] = 'noopener noreferrer'
 131
 132       // pass token to default renderer.
 133       return defaultRender(tokens, index, options, env, self)
 134     }
 135   }
 136
 137   private avoidTruncatedTags (html: string) {
 138     return html.replace(/\*\*?([^*]+)$/, '$1')
 139       .replace(/<a[^>]+>([^<]+)<\/a>\s*...((<\/p>)|(<\/li>)|(<\/strong>))?$/mi, '$1...')
 140       .replace(/\[[^\]]+\]\(([^\)]+)$/m, '$1')
 141       .replace(/\s?\[[^\]]+\]?[.]{3}<\/p>$/m, '...</p>')
 142   }
 143 }