Handle line feeds in comments

3 files changed, 14 insertions, 4 deletions

diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
index e2e4c5b36..64bc69b0d 100644
--- a/client/src/app/shared/misc/utils.ts
+++ b/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
 }
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 7c664ca60..9176de80f 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
@@ -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 ])
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.service.ts b/client/src/app/videos/+video-watch/comment/video-comment.service.ts
index c42f55496..14d32b1aa 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.service.ts
+++ b/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)
   }