Handle line feeds in comments

client/src/app/shared/misc/utils.ts

@@ -88,6 +88,12 @@ function objectToFormData (obj: any, form?: FormData, namespace?: string) {
   return fd
 }
 
+function lineFeedToHtml (obj: object, keyToNormalize: string) {
+  return immutableAssign(obj, {
+    [keyToNormalize]: obj[keyToNormalize].replace(/\r?\n|\r/g, '<br />')
+  })
+}
+
 export {
   viewportHeight,
   getParameterByName,
@@ -97,5 +103,6 @@ export {
   isInSmallView,
   isInMobileView,
   immutableAssign,
-  objectToFormData
+  objectToFormData,
+  lineFeedToHtml
 }

client/src/app/videos/+video-watch/comment/video-comment.component.ts

@@ -90,7 +90,7 @@ export class VideoCommentComponent implements OnInit, OnChanges {
 
   private init () {
     this.sanitizedCommentHTML = sanitizeHtml(this.comment.text, {
-      allowedTags: [ 'p', 'span' ]
+      allowedTags: [ 'p', 'span', 'br' ]
     })
 
     this.newParentComments = this.parentComments.concat([ this.comment ])

client/src/app/videos/+video-watch/comment/video-comment.service.ts

@@ -2,6 +2,7 @@ import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import 'rxjs/add/operator/catch'
 import 'rxjs/add/operator/map'
+import { immutableAssign, lineFeedToHtml } from '@app/shared/misc/utils'
 import { Observable } from 'rxjs/Observable'
 import { ResultList } from '../../../../../../shared/models'
 import {
@@ -26,16 +27,18 @@ export class VideoCommentService {
 
   addCommentThread (videoId: number | string, comment: VideoCommentCreate) {
     const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comment-threads'
+    const normalizedComment = lineFeedToHtml(comment, 'text')
 
-    return this.authHttp.post(url, comment)
+    return this.authHttp.post(url, normalizedComment)
       .map(data => this.extractVideoComment(data['comment']))
       .catch(this.restExtractor.handleError)
   }
 
   addCommentReply (videoId: number | string, inReplyToCommentId: number, comment: VideoCommentCreate) {
     const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comments/' + inReplyToCommentId
+    const normalizedComment = lineFeedToHtml(comment, 'text')
 
-    return this.authHttp.post(url, comment)
+    return this.authHttp.post(url, normalizedComment)
       .map(data => this.extractVideoComment(data['comment']))
       .catch(this.restExtractor.handleError)
   }

server/middlewares/validators/video-comments.ts

@@ -43,7 +43,7 @@ const addVideoCommentThreadValidator = [
   body('text').custom(isValidVideoCommentText).not().isEmpty().withMessage('Should have a valid comment text'),
 
   async (req: express.Request, res: express.Response, next: express.NextFunction) => {
-    logger.debug('Checking addVideoCommentThread parameters.', { parameters: req.params })
+    logger.debug('Checking addVideoCommentThread parameters.', { parameters: req.params, body: req.body })
 
     if (areValidationErrors(req, res)) return
     if (!await isVideoExist(req.params.videoId, res)) return
@@ -59,7 +59,7 @@ const addVideoCommentReplyValidator = [
   body('text').custom(isValidVideoCommentText).not().isEmpty().withMessage('Should have a valid comment text'),
 
   async (req: express.Request, res: express.Response, next: express.NextFunction) => {
-    logger.debug('Checking addVideoCommentReply parameters.', { parameters: req.params })
+    logger.debug('Checking addVideoCommentReply parameters.', { parameters: req.params, body: req.body })
 
     if (areValidationErrors(req, res)) return
     if (!await isVideoExist(req.params.videoId, res)) return