From 0672dc769b6ee42b4357748c62aaeabf8801c472 Mon Sep 17 00:00:00 2001 From: kimsible Date: Sat, 8 Aug 2020 12:01:28 +0200 Subject: Add unicode emoji to markdown --- client/package.json | 1 + .../comment/video-comment-add.component.html | 1 + .../+video-watch/comment/video-comment.component.ts | 2 +- client/src/app/core/renderer/markdown.service.ts | 21 +++++++++++++-------- client/yarn.lock | 14 +++++++++++++- 5 files changed, 29 insertions(+), 10 deletions(-) (limited to 'client') 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 @@
  • Links
  • Break lines
  • Lists
    • +
  • Emojis
    • 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" -- cgit v1.2.3