render html/markdown for new comment notification email (#3255)

Co-authored-by: kimsible <kimsible@users.noreply.github.com>
Co-authored-by: Rigel Kent <sendmemail@rigelk.eu>

3 files changed, 57 insertions, 6 deletions

diff --git a/server/lib/emailer.ts b/server/lib/emailer.ts
index 25b0aaedd..6532fb4b4 100644
--- a/server/lib/emailer.ts
+++ b/server/lib/emailer.ts
@@ -15,6 +15,53 @@ import { MAbuseFull, MAbuseMessage, MAccountDefault, MActorFollowActors, MActorF
 import { MCommentOwnerVideo, MVideo, MVideoAccountLight } from '../types/models/video'
 import { JobQueue } from './job-queue'
 
+const sanitizeHtml = require('sanitize-html')
+const markdownItEmoji = require('markdown-it-emoji/light')
+const MarkdownItClass = require('markdown-it')
+const markdownIt = new MarkdownItClass('default', { linkify: true, breaks: true, html: true })
+
+markdownIt.enable([
+  'linkify',
+  'autolink',
+  'emphasis',
+  'link',
+  'newline',
+  'list'
+])
+
+markdownIt.use(markdownItEmoji)
+
+const toSafeHtml = text => {
+  // Restore line feed
+  const textWithLineFeed = text.replace(/<br.?\/?>/g, '\r\n')
+
+  // Convert possible markdown (emojis, emphasis and lists) to html
+  const html = markdownIt.render(textWithLineFeed)
+
+  // Convert to safe Html
+  return sanitizeHtml(html, {
+    allowedTags: [ 'a', 'p', 'span', 'br', 'strong', 'em', 'ul', 'ol', 'li' ],
+    allowedSchemes: [ 'http', 'https' ],
+    allowedAttributes: {
+      a: [ 'href', 'class', 'target', 'rel' ]
+    },
+    transformTags: {
+      a: (tagName, attribs) => {
+        let rel = 'noopener noreferrer'
+        if (attribs.rel === 'me') rel += ' me'
+
+        return {
+          tagName,
+          attribs: Object.assign(attribs, {
+            target: '_blank',
+            rel
+          })
+        }
+      }
+    }
+  })
+}
+
 const Email = require('email-templates')
 
 class Emailer {
@@ -236,6 +283,7 @@ class Emailer {
     const video = comment.Video
     const videoUrl = WEBSERVER.URL + comment.Video.getWatchStaticPath()
     const commentUrl = WEBSERVER.URL + comment.getCommentStaticPath()
+    const commentHtml = toSafeHtml(comment.text)
 
     const emailPayload: EmailPayload = {
       template: 'video-comment-new',
@@ -245,6 +293,7 @@ class Emailer {
         accountName: comment.Account.getDisplayName(),
         accountUrl: comment.Account.Actor.url,
         comment,
+        commentHtml,
         video,
         videoUrl,
         action: {
@@ -262,6 +311,7 @@ class Emailer {
     const video = comment.Video
     const videoUrl = WEBSERVER.URL + comment.Video.getWatchStaticPath()
     const commentUrl = WEBSERVER.URL + comment.getCommentStaticPath()
+    const commentHtml = toSafeHtml(comment.text)
 
     const emailPayload: EmailPayload = {
       template: 'video-comment-mention',
@@ -269,6 +319,7 @@ class Emailer {
       subject: 'Mention on video ' + video.name,
       locals: {
         comment,
+        commentHtml,
         video,
         videoUrl,
         accountName,
diff --git a/server/lib/emails/video-comment-mention/html.pug b/server/lib/emails/video-comment-mention/html.pug
index 9e9ced62d..a34c6b090 100644
--- a/server/lib/emails/video-comment-mention/html.pug
+++ b/server/lib/emails/video-comment-mention/html.pug
@@ -5,7 +5,7 @@ block title
 
 block content
   p.
-    #[a(href=accountUrl title=handle) #{accountName}] mentioned you in a comment on video 
+    #[a(href=accountUrl title=handle) #{accountName}] mentioned you in a comment on video
     "#[a(href=videoUrl) #{video.name}]":
-  blockquote #{comment.text}
-  br(style="display: none;")
\ No newline at end of file
+  blockquote !{commentHtml}
+  br(style="display: none;")
diff --git a/server/lib/emails/video-comment-new/html.pug b/server/lib/emails/video-comment-new/html.pug
index 075af5717..cbb683fee 100644
--- a/server/lib/emails/video-comment-new/html.pug
+++ b/server/lib/emails/video-comment-new/html.pug
@@ -5,7 +5,7 @@ block title
 
 block content
   p.
-    #[a(href=accountUrl title=handle) #{accountName}] added a comment on your video 
+    #[a(href=accountUrl title=handle) #{accountName}] added a comment on your video
     "#[a(href=videoUrl) #{video.name}]":
-  blockquote #{comment.text}
-  br(style="display: none;")
\ No newline at end of file
+  blockquote !{commentHtml}
+  br(style="display: none;")