Add unicode emoji to markdown

5 files changed, 29 insertions, 10 deletions

diff --git a/client/package.json b/client/package.json
index 9769cc813..11e3bf45b 100644
--- a/client/package.json
+++ b/client/package.json
@@ -61,6 +61,7 @@
     "@types/linkifyjs": "^2.1.2",
     "@types/lodash-es": "^4.17.0",
     "@types/markdown-it": "^10.0.1",
+    "@types/markdown-it-emoji": "^1.4.0",
     "@types/node": "^14.0.14",
     "@types/sanitize-html": "1.23.2",
     "@types/socket.io-client": "^1.4.32",
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
index ec8da02e2..b4f8bda5e 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
+++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
@@ -13,6 +13,7 @@
               <li>Links</li>
               <li>Break lines</li>
               <li>Lists</li>
+              <li>Emojis</li>
             </ul>
           </div>
         </ng-template>
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.ts b/client/src/app/+videos/+video-watch/comment/video-comment.component.ts
index fe069b54c..5491023ee 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment.component.ts
+++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.ts
@@ -149,7 +149,7 @@ export class VideoCommentComponent implements OnInit, OnChanges {
   }
 
   private async init () {
-    const html = await this.markdownService.textMarkdownToHTML(this.comment.text, true)
+    const html = await this.markdownService.textMarkdownToHTML(this.comment.text, true, true)
     this.sanitizedCommentHTML = await this.markdownService.processVideoTimestamps(html)
     this.newParentComments = this.parentComments.concat([ this.comment ])
 
diff --git a/client/src/app/core/renderer/markdown.service.ts b/client/src/app/core/renderer/markdown.service.ts
index 0c43bebab..2ff3de34e 100644
--- a/client/src/app/core/renderer/markdown.service.ts
+++ b/client/src/app/core/renderer/markdown.service.ts
@@ -1,4 +1,5 @@
 import * as MarkdownIt from 'markdown-it'
+import MarkdownItEmoji from 'markdown-it-emoji'
 import { buildVideoLink } from 'src/assets/player/utils'
 import { Injectable } from '@angular/core'
 import { HtmlRendererService } from './html-renderer.service'
@@ -59,20 +60,20 @@ export class MarkdownService {
 
   constructor (private htmlRenderer: HtmlRendererService) {}
 
-  textMarkdownToHTML (markdown: string, withHtml = false) {
-    if (withHtml) return this.render('textWithHTMLMarkdownIt', markdown)
+  textMarkdownToHTML (markdown: string, withHtml = false, withEmoji = false) {
+    if (withHtml) return this.render('textWithHTMLMarkdownIt', markdown, withEmoji)
 
-    return this.render('textMarkdownIt', markdown)
+    return this.render('textMarkdownIt', markdown, withEmoji)
   }
 
-  enhancedMarkdownToHTML (markdown: string, withHtml = false) {
-    if (withHtml) return this.render('enhancedWithHTMLMarkdownIt', markdown)
+  enhancedMarkdownToHTML (markdown: string, withHtml = false, withEmoji = false) {
+    if (withHtml) return this.render('enhancedWithHTMLMarkdownIt', markdown, withEmoji)
 
-    return this.render('enhancedMarkdownIt', markdown)
+    return this.render('enhancedMarkdownIt', markdown, withEmoji)
   }
 
   completeMarkdownToHTML (markdown: string) {
-    return this.render('completeMarkdownIt', markdown)
+    return this.render('completeMarkdownIt', markdown, true)
   }
 
   async processVideoTimestamps (html: string) {
@@ -83,12 +84,16 @@ export class MarkdownService {
     })
   }
 
-  private async render (name: keyof MarkdownParsers, markdown: string) {
+  private async render (name: keyof MarkdownParsers, markdown: string, withEmoji = false) {
     if (!markdown) return ''
 
     const config = this.parsersConfig[ name ]
     if (!this.markdownParsers[ name ]) {
       this.markdownParsers[ name ] = await this.createMarkdownIt(config)
+
+      if (withEmoji) {
+        this.markdownParsers[ name ].use(MarkdownItEmoji)
+      }
     }
 
     let html = this.markdownParsers[ name ].render(markdown)
diff --git a/client/yarn.lock b/client/yarn.lock
index db52a4a54..594ca6750 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1569,7 +1569,14 @@
   dependencies:
     "@types/node" "*"
 
-"@types/markdown-it@^10.0.1":
+"@types/markdown-it-emoji@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@types/markdown-it-emoji/-/markdown-it-emoji-1.4.0.tgz#2102dcb3cdaf15d7ee1c01df0fda00f61ca5fece"
+  integrity sha512-TeSq2kwZZwzt/6mfKW3FXtvVdtt9ne+Fvf5/jiBejOhGcnG3keVfsxQaHSUhy0xyHaCXDfj+kZLSPQrDtR5N4w==
+  dependencies:
+    "@types/markdown-it" "*"
+
+"@types/markdown-it@*", "@types/markdown-it@^10.0.1":
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-10.0.1.tgz#94e252ab689c8e9ceb9aff2946e0a458390105eb"
   integrity sha512-L1ibTdA5IUe/cRBlf3N3syAOBQSN1WCMGtAWir6mKxibiRl4LmpZM4jLz+7zAqiMnhQuAP1sqZOF9wXgn2kpEg==
@@ -7376,6 +7383,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+markdown-it-emoji@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-emoji/-/markdown-it-emoji-1.4.0.tgz#9bee0e9a990a963ba96df6980c4fddb05dfb4dcc"
+  integrity sha1-m+4OmpkKljupbfaYDE/dsF37Tcw=
+
 markdown-it@^11.0.0:
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-11.0.0.tgz#dbfc30363e43d756ebc52c38586b91b90046b876"