client/src/app/shared/forms/markdown-textarea.component.ts

   1 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
   2 import { Component, forwardRef, Input, OnInit } from '@angular/core'
   3 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
   4 import { isInSmallView } from '@app/shared/misc/utils'
   5 import { MarkdownService } from '@app/videos/shared'
   6 import { Subject } from 'rxjs/Subject'
   7 import truncate from 'lodash-es/truncate'
   8
   9 @Component({
  10   selector: 'my-markdown-textarea',
  11   templateUrl: './markdown-textarea.component.html',
  12   styleUrls: [ './markdown-textarea.component.scss' ],
  13   providers: [
  14     {
  15       provide: NG_VALUE_ACCESSOR,
  16       useExisting: forwardRef(() => MarkdownTextareaComponent),
  17       multi: true
  18     }
  19   ]
  20 })
  21
  22 export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
  23   @Input() content = ''
  24   @Input() classes: string[] = []
  25   @Input() textareaWidth = '100%'
  26   @Input() textareaHeight = '150px'
  27   @Input() previewColumn = false
  28   @Input() truncate: number
  29   @Input() markdownType: 'text' | 'enhanced' = 'text'
  30
  31   textareaMarginRight = '0'
  32   flexDirection = 'column'
  33   truncatedPreviewHTML = ''
  34   previewHTML = ''
  35
  36   private contentChanged = new Subject<string>()
  37
  38   constructor (private markdownService: MarkdownService) {}
  39
  40   ngOnInit () {
  41     this.contentChanged
  42         .pipe(
  43           debounceTime(150),
  44           distinctUntilChanged()
  45         )
  46         .subscribe(() => this.updatePreviews())
  47
  48     this.contentChanged.next(this.content)
  49
  50     if (this.previewColumn) {
  51       this.flexDirection = 'row'
  52       this.textareaMarginRight = '15px'
  53     }
  54   }
  55
  56   propagateChange = (_: any) => { /* empty */ }
  57
  58   writeValue (description: string) {
  59     this.content = description
  60
  61     this.contentChanged.next(this.content)
  62   }
  63
  64   registerOnChange (fn: (_: any) => void) {
  65     this.propagateChange = fn
  66   }
  67
  68   registerOnTouched () {
  69     // Unused
  70   }
  71
  72   onModelChange () {
  73     this.propagateChange(this.content)
  74
  75     this.contentChanged.next(this.content)
  76   }
  77
  78   arePreviewsDisplayed () {
  79     return isInSmallView() === false
  80   }
  81
  82   private updatePreviews () {
  83     if (this.content === null || this.content === undefined) return
  84
  85     this.truncatedPreviewHTML = this.markdownRender(truncate(this.content, { length: this.truncate }))
  86     this.previewHTML = this.markdownRender(this.content)
  87   }
  88
  89   private markdownRender (text: string) {
  90     if (this.markdownType === 'text') return this.markdownService.textMarkdownToHTML(text)
  91
  92     return this.markdownService.enhancedMarkdownToHTML(text)
  93   }
  94 }