4 files changed, 132 insertions, 0 deletions

diff --git a/client/src/app/shared/forms/form-validators/custom-config.ts b/client/src/app/shared/forms/form-validators/custom-config.ts
index 17ae0e75c..9e3fa98d8 100644
--- a/client/src/app/shared/forms/form-validators/custom-config.ts
+++ b/client/src/app/shared/forms/form-validators/custom-config.ts
@@ -1,5 +1,12 @@
 import { Validators } from '@angular/forms'
 
+export const INSTANCE_NAME = {
+  VALIDATORS: [ Validators.required ],
+  MESSAGES: {
+    'required': 'Instance name is required.',
+  }
+}
+
 export const CACHE_PREVIEWS_SIZE = {
   VALIDATORS: [ Validators.required, Validators.min(1), Validators.pattern('[0-9]+') ],
   MESSAGES: {
diff --git a/client/src/app/shared/forms/markdown-textarea.component.html b/client/src/app/shared/forms/markdown-textarea.component.html
new file mode 100644
index 000000000..d2d4cf95c
--- /dev/null
+++ b/client/src/app/shared/forms/markdown-textarea.component.html
@@ -0,0 +1,12 @@
+<div class="root" [ngStyle]="{ 'flex-direction': flexDirection }">
+  <textarea
+    [(ngModel)]="description" (ngModelChange)="onModelChange()"
+    [ngClass]="classes" [ngStyle]="{ width: textareaWidth, height: textareaHeight, 'margin-right': textareaMarginRight }"
+    id="description" name="description">
+  </textarea>
+
+  <tabset *ngIf="arePreviewsDisplayed()" #staticTabs class="previews">
+    <tab *ngIf="truncate !== undefined" heading="Truncated description preview" [innerHTML]="truncatedDescriptionHTML"></tab>
+    <tab heading="Complete description preview" [innerHTML]="descriptionHTML"></tab>
+  </tabset>
+</div>
diff --git a/client/src/app/shared/forms/markdown-textarea.component.scss b/client/src/app/shared/forms/markdown-textarea.component.scss
new file mode 100644
index 000000000..82aff541d
--- /dev/null
+++ b/client/src/app/shared/forms/markdown-textarea.component.scss
@@ -0,0 +1,27 @@
+@import '_variables';
+@import '_mixins';
+
+.root {
+  display: flex;
+  
+  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/shared/forms/markdown-textarea.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts
new file mode 100644
index 000000000..20f13b28c
--- /dev/null
+++ b/client/src/app/shared/forms/markdown-textarea.component.ts
@@ -0,0 +1,86 @@
+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 { MarkdownService } from '@app/videos/shared'
+import { Subject } from 'rxjs/Subject'
+import truncate from 'lodash-es/truncate'
+
+@Component({
+  selector: 'my-markdown-textarea',
+  templateUrl: './markdown-textarea.component.html',
+  styleUrls: [ './markdown-textarea.component.scss' ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => MarkdownTextareaComponent),
+      multi: true
+    }
+  ]
+})
+
+export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
+  @Input() description = ''
+  @Input() classes: string[] = []
+  @Input() textareaWidth = '100%'
+  @Input() textareaHeight = '150px'
+  @Input() previewColumn = false
+  @Input() truncate: number
+
+  textareaMarginRight = '0'
+  flexDirection = 'column'
+  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)
+
+    if (this.previewColumn) {
+      this.flexDirection = 'row'
+      this.textareaMarginRight = '15px'
+    }
+  }
+
+  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 === null || this.description === undefined) return
+
+    this.truncatedDescriptionHTML = this.markdownService.markdownToHTML(truncate(this.description, { length: this.truncate }))
+    this.descriptionHTML = this.markdownService.markdownToHTML(this.description)
+  }
+}