6 files changed, 16 insertions, 127 deletions

diff --git a/client/src/app/videos/+video-edit/shared/video-description.component.html b/client/src/app/videos/+video-edit/shared/video-description.component.html
deleted file mode 100644
index 989292c47..000000000
--- a/client/src/app/videos/+video-edit/shared/video-description.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<textarea
-  [(ngModel)]="description" (ngModelChange)="onModelChange()"
-  id="description" name="description">
-</textarea>
-
-<tabset *ngIf="arePreviewsDisplayed()" #staticTabs class="previews">
-  <tab heading="Truncated description preview" [innerHTML]="truncatedDescriptionHTML"></tab>
-  <tab heading="Complete description preview" [innerHTML]="descriptionHTML"></tab>
-</tabset>
diff --git a/client/src/app/videos/+video-edit/shared/video-description.component.scss b/client/src/app/videos/+video-edit/shared/video-description.component.scss
deleted file mode 100644
index 2c731bee3..000000000
--- a/client/src/app/videos/+video-edit/shared/video-description.component.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-textarea {
-  @include peertube-textarea(100%, 150px);
-
-  margin-bottom: 15px;
-}
-
-/deep/ {
-  .nav-link {
-    display: flex !important;
-    align-items: center;
-    height: 30px !important;
-    padding: 0 15px !important;
-  }
-
-  .tab-content {
-    min-height: 75px;
-    padding: 15px;
-    font-size: 15px;
-  }
-}
-
diff --git a/client/src/app/videos/+video-edit/shared/video-description.component.ts b/client/src/app/videos/+video-edit/shared/video-description.component.ts
deleted file mode 100644
index eba345412..000000000
--- a/client/src/app/videos/+video-edit/shared/video-description.component.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Component, forwardRef, Input, OnInit } from '@angular/core'
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
-import 'rxjs/add/operator/debounceTime'
-import 'rxjs/add/operator/distinctUntilChanged'
-import { isInMobileView } from '@app/shared/misc/utils'
-import { Subject } from 'rxjs/Subject'
-import { MarkdownService } from '../../shared'
-import truncate from 'lodash-es/truncate'
-
-@Component({
-  selector: 'my-video-description',
-  templateUrl: './video-description.component.html',
-  styleUrls: [ './video-description.component.scss' ],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => VideoDescriptionComponent),
-      multi: true
-    }
-  ]
-})
-
-export class VideoDescriptionComponent implements ControlValueAccessor, OnInit {
-  @Input() description = ''
-  truncatedDescriptionHTML = ''
-  descriptionHTML = ''
-
-  private descriptionChanged = new Subject<string>()
-
-  constructor (private markdownService: MarkdownService) {}
-
-  ngOnInit () {
-    this.descriptionChanged
-      .debounceTime(150)
-      .distinctUntilChanged()
-      .subscribe(() => this.updateDescriptionPreviews())
-
-    this.descriptionChanged.next(this.description)
-  }
-
-  propagateChange = (_: any) => { /* empty */ }
-
-  writeValue (description: string) {
-    this.description = description
-
-    this.descriptionChanged.next(this.description)
-  }
-
-  registerOnChange (fn: (_: any) => void) {
-    this.propagateChange = fn
-  }
-
-  registerOnTouched () {
-    // Unused
-  }
-
-  onModelChange () {
-    this.propagateChange(this.description)
-
-    this.descriptionChanged.next(this.description)
-  }
-
-  arePreviewsDisplayed () {
-    return isInMobileView() === false
-  }
-
-  private updateDescriptionPreviews () {
-    if (!this.description) return
-
-    this.truncatedDescriptionHTML = this.markdownService.markdownToHTML(truncate(this.description, { length: 250 }))
-    this.descriptionHTML = this.markdownService.markdownToHTML(this.description)
-  }
-}
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
index 80377933e..d031825bd 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -12,14 +12,14 @@
     <div class="form-group">
       <label class="label-tags">Tags</label> <span>(press Enter to add)</span>
       <tag-input
-          [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
-          formControlName="tags" maxItems="5" modelAsStrings="true"
+        [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
+        formControlName="tags" maxItems="5" modelAsStrings="true"
       ></tag-input>
     </div>
 
     <div class="form-group">
       <label for="description">Description</label>
-      <my-video-description formControlName="description"></my-video-description>
+      <my-markdown-textarea truncate="250" formControlName="description"></my-markdown-textarea>
 
       <div *ngIf="formErrors.description" class="form-error">
         {{ formErrors.description }}
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.module.ts b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
index ce106d82f..098a71ae6 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.module.ts
+++ b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
@@ -1,23 +1,17 @@
 import { NgModule } from '@angular/core'
-
-import { TagInputModule } from 'ngx-chips'
 import { TabsModule } from 'ngx-bootstrap/tabs'
-
-import { MarkdownService } from '../../shared'
+import { TagInputModule } from 'ngx-chips'
 import { SharedModule } from '../../../shared'
-import { VideoDescriptionComponent } from './video-description.component'
 import { VideoEditComponent } from './video-edit.component'
 
 @NgModule({
   imports: [
     TagInputModule,
-    TabsModule.forRoot(),
 
     SharedModule
   ],
 
   declarations: [
-    VideoDescriptionComponent,
     VideoEditComponent
   ],
 
@@ -25,12 +19,9 @@ import { VideoEditComponent } from './video-edit.component'
     TagInputModule,
     TabsModule,
 
-    VideoDescriptionComponent,
     VideoEditComponent
   ],
 
-  providers: [
-    MarkdownService
-  ]
+  providers: []
 })
 export class VideoEditModule { }
diff --git a/client/src/app/videos/shared/markdown.service.ts b/client/src/app/videos/shared/markdown.service.ts
index 82745f0c6..fd0330f9b 100644
--- a/client/src/app/videos/shared/markdown.service.ts
+++ b/client/src/app/videos/shared/markdown.service.ts
@@ -14,6 +14,17 @@ export class MarkdownService {
       .enable('link')
       .enable('newline')
 
+    this.setTargetToLinks()
+  }
+
+  markdownToHTML (markdown: string) {
+    const html = this.markdownIt.render(markdown)
+
+    // Avoid linkify truncated links
+    return html.replace(/<a[^>]+>([^<]+)<\/a>\s*...(<\/p>)?$/mi, '$1...')
+  }
+
+  private setTargetToLinks () {
     // Snippet from markdown-it documentation: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
     const defaultRender = this.markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) {
       return self.renderToken(tokens, idx, options)
@@ -33,11 +44,4 @@ export class MarkdownService {
       return defaultRender(tokens, idx, options, env, self)
     }
   }
-
-  markdownToHTML (markdown: string) {
-    const html = this.markdownIt.render(markdown)
-
-    // Avoid linkify truncated links
-    return html.replace(/<a[^>]+>([^<]+)<\/a>\s*...(<\/p>)?$/mi, '$1...')
-  }
 }