From 2890b615f31ab7d519d8be66b49ff8712df90c51 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 4 Jan 2018 17:50:30 +0100 Subject: Handle HTML is comments --- client/package.json | 2 + .../comment/video-comment.component.html | 2 +- .../comment/video-comment.component.scss | 8 +++ .../comment/video-comment.component.ts | 13 +++- client/yarn.lock | 71 +++++++++++++++++++++- 5 files changed, 90 insertions(+), 6 deletions(-) (limited to 'client') diff --git a/client/package.json b/client/package.json index ba0a318bc..efdd5711b 100644 --- a/client/package.json +++ b/client/package.json @@ -41,6 +41,7 @@ "@types/lodash-es": "^4.17.0", "@types/markdown-it": "^0.0.4", "@types/node": "^8.0.33", + "@types/sanitize-html": "^1.14.0", "@types/video.js": "6.2.0", "@types/webtorrent": "^0.98.4", "angular2-notifications": "^0.9.6", @@ -67,6 +68,7 @@ "raw-loader": "^0.5.1", "resolve-url-loader": "^2.0.0", "rxjs": "^5.4.2", + "sanitize-html": "^1.16.3", "sass-loader": "^6.0.3", "sass-resources-loader": "^1.2.1", "standard": "^10.0.0", diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.html b/client/src/app/videos/+video-watch/comment/video-comment.component.html index 4f9597607..8edd12124 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.component.html +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.html @@ -6,7 +6,7 @@ {{ comment.by }}
{{ comment.createdAt | myFromNow }}
-
{{ comment.text }}
+
Reply
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss index a22c5a9fd..8e53dbca8 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss @@ -32,6 +32,14 @@ } } + .comment-html { + a { + @include disable-default-a-behaviour; + + color: #000; + } + } + .comment-actions { margin: 10px 0; display: flex; 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 9bc9c8844..2ecc8a143 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 @@ -1,4 +1,5 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core' +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' +import * as sanitizeHtml from 'sanitize-html' import { Account as AccountInterface } from '../../../../../../shared/models/actors' import { UserRight } from '../../../../../../shared/models/users' import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model' @@ -12,7 +13,7 @@ import { VideoComment } from './video-comment.model' templateUrl: './video-comment.component.html', styleUrls: ['./video-comment.component.scss'] }) -export class VideoCommentComponent { +export class VideoCommentComponent implements OnInit { @Input() video: Video @Input() comment: VideoComment @Input() commentTree: VideoCommentThreadTree @@ -23,12 +24,20 @@ export class VideoCommentComponent { @Output() threadCreated = new EventEmitter() @Output() resetReply = new EventEmitter() + sanitizedCommentHTML = '' + constructor (private authService: AuthService) {} get user () { return this.authService.getUser() } + ngOnInit () { + this.sanitizedCommentHTML = sanitizeHtml(this.comment.text, { + allowedTags: [ 'p', 'span' ] + }) + } + onCommentReplyCreated (createdComment: VideoComment) { if (!this.commentTree) { this.commentTree = { diff --git a/client/yarn.lock b/client/yarn.lock index a3928ef40..a0bfa789d 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -255,6 +255,10 @@ "@types/node" "*" "@types/parse-torrent-file" "*" +"@types/sanitize-html@^1.14.0": + version "1.14.0" + resolved "https://registry.yarnpkg.com/@types/sanitize-html/-/sanitize-html-1.14.0.tgz#9a03ec58306e24feaa3fbdb8ab593934d53ecb05" + "@types/simple-peer@*": version "6.1.4" resolved "https://registry.yarnpkg.com/@types/simple-peer/-/simple-peer-6.1.4.tgz#1d1384e1d8dc17b9e7d1673d704febe91ca48191" @@ -466,7 +470,7 @@ array-union@^1.0.1: dependencies: array-uniq "^1.0.1" -array-uniq@^1.0.1: +array-uniq@^1.0.1, array-uniq@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6" @@ -1921,7 +1925,7 @@ domain-browser@^1.1.1: version "1.1.7" resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc" -domelementtype@1: +domelementtype@1, domelementtype@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2" @@ -1935,6 +1939,12 @@ domhandler@2.1: dependencies: domelementtype "1" +domhandler@^2.3.0: + version "2.4.1" + resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.1.tgz#892e47000a99be55bbf3774ffea0561d8879c259" + dependencies: + domelementtype "1" + domutils@1.1: version "1.1.6" resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485" @@ -1948,6 +1958,13 @@ domutils@1.5.1: dom-serializer "0" domelementtype "1" +domutils@^1.5.1: + version "1.6.2" + resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.6.2.tgz#1958cc0b4c9426e9ed367fb1c8e854891b0fa3ff" + dependencies: + dom-serializer "0" + domelementtype "1" + duplexer@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1" @@ -2027,7 +2044,7 @@ enhanced-resolve@^3.1.0, enhanced-resolve@^3.4.0: object-assign "^4.0.1" tapable "^0.2.7" -entities@~1.1.1: +entities@^1.1.1, entities@~1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0" @@ -3077,6 +3094,17 @@ html-webpack-plugin@^2.19.0, html-webpack-plugin@^2.29.0: pretty-error "^2.0.2" toposort "^1.0.0" +htmlparser2@^3.9.0: + version "3.9.2" + resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338" + dependencies: + domelementtype "^1.3.0" + domhandler "^2.3.0" + domutils "^1.5.1" + entities "^1.1.1" + inherits "^2.0.1" + readable-stream "^2.0.2" + htmlparser2@~3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe" @@ -3917,6 +3945,10 @@ lodash.defaults@^4.0.0: version "4.2.0" resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c" +lodash.escaperegexp@^4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz#64762c48618082518ac3df4ccf5d5886dae20347" + lodash.isarguments@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a" @@ -5238,6 +5270,14 @@ postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.13: source-map "^0.6.1" supports-color "^4.4.0" +postcss@^6.0.14: + version "6.0.15" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.15.tgz#f460cd6269fede0d1bf6defff0b934a9845d974d" + dependencies: + chalk "^2.3.0" + source-map "^0.6.1" + supports-color "^5.1.0" + prebuild-install@~2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-2.3.0.tgz#19481247df728b854ab57b187ce234211311b485" @@ -5891,6 +5931,18 @@ safe-json-parse@4.0.0: dependencies: rust-result "^1.0.0" +sanitize-html@^1.16.3: + version "1.16.3" + resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-1.16.3.tgz#96c1b44a36ff7312e1c22a14b05274370ac8bd56" + dependencies: + htmlparser2 "^3.9.0" + lodash.clonedeep "^4.5.0" + lodash.escaperegexp "^4.1.2" + lodash.mergewith "^4.6.0" + postcss "^6.0.14" + srcset "^1.0.0" + xtend "^4.0.0" + sass-graph@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.2.4.tgz#13fbd63cd1caf0908b9fd93476ad43a51d1e0b49" @@ -6335,6 +6387,13 @@ sprintf-js@~1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c" +srcset@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/srcset/-/srcset-1.0.0.tgz#a5669de12b42f3b1d5e83ed03c71046fc48f41ef" + dependencies: + array-uniq "^1.0.2" + number-is-nan "^1.0.0" + sshpk@^1.7.0: version "1.13.1" resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.13.1.tgz#512df6da6287144316dc4c18fe1cf1d940739be3" @@ -6562,6 +6621,12 @@ supports-color@^4.0.0, supports-color@^4.2.1, supports-color@^4.4.0: dependencies: has-flag "^2.0.0" +supports-color@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.1.0.tgz#058a021d1b619f7ddf3980d712ea3590ce7de3d5" + dependencies: + has-flag "^2.0.0" + svgo@^0.7.0: version "0.7.2" resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5" -- cgit v1.2.3