Added Markdown formatting in playlist descriptions

Implements https://github.com/Chocobozzz/PeerTube/issues/3627

4 files changed, 15 insertions, 12 deletions

diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
index 9b9befca4..c39e90a1e 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
@@ -41,11 +41,11 @@
         </div>
 
         <div class="form-group">
-          <label i18n for="description">Description</label>
-          <textarea
+          <label i18n for="description">Description</label><my-help helpType="markdownText"></my-help>
+          <my-markdown-textarea
             id="description" formControlName="description"
-            class="form-control" [ngClass]="{ 'input-error': formErrors['description'] }"
-          ></textarea>
+            [ngClass]="{ 'input-error': formErrors['description'] }"
+          ></my-markdown-textarea>
           <div *ngIf="formErrors.description" class="form-error">
             {{ formErrors.description }}
           </div>
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
index 420391322..47c323d6d 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
@@ -16,12 +16,6 @@ input[type=text] {
   display: block;
 }
 
-textarea {
-  @include peertube-textarea(500px, 150px);
-
-  display: block;
-}
-
 .peertube-select-container {
   @include peertube-select-container(340px);
 }
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
index 95f11f030..3cccbe080 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
@@ -32,6 +32,6 @@
       <span i18n class="updated-at">Updated {{ playlist.updatedAt | myFromNow }}</span>
     </div>
 
-    <div *ngIf="displayDescription" class="video-info-description">{{ playlist.description }}</div>
+    <div *ngIf="displayDescription" class="video-info-description" [innerHTML]="playlistDescription"></div>
   </div>
 </div>
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
index c80ea2e6b..dd9fe0a5a 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
@@ -1,6 +1,7 @@
 import { LinkType } from 'src/types/link.type'
 import { Component, Input, OnInit } from '@angular/core'
 import { VideoPlaylist } from './video-playlist.model'
+import { MarkdownService } from '@app/core'
 
 @Component({
   selector: 'my-video-playlist-miniature',
@@ -22,9 +23,17 @@ export class VideoPlaylistMiniatureComponent implements OnInit {
   routerLink: any
   playlistHref: string
   playlistTarget: string
+  playlistDescription: string
 
-  ngOnInit () {
+  constructor (
+    private markdownService: MarkdownService
+  ) {}
+
+  async ngOnInit () {
     this.buildPlaylistUrl()
+    if (this.displayDescription) {
+      this.playlistDescription = await this.markdownService.textMarkdownToHTML(this.playlist.description)
+    }
   }
 
   buildPlaylistUrl () {