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

   1 import truncate from 'lodash-es/truncate'
   2 import { Subject } from 'rxjs'
   3 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
   4 import { ViewportScroller } from '@angular/common'
   5 import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core'
   6 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
   7 import { SafeHtml } from '@angular/platform-browser'
   8 import { MarkdownService, ScreenService } from '@app/core'
   9 import { Video } from '@shared/models'
  10
  11 @Component({
  12   selector: 'my-markdown-textarea',
  13   templateUrl: './markdown-textarea.component.html',
  14   styleUrls: [ './markdown-textarea.component.scss' ],
  15   providers: [
  16     {
  17       provide: NG_VALUE_ACCESSOR,
  18       useExisting: forwardRef(() => MarkdownTextareaComponent),
  19       multi: true
  20     }
  21   ]
  22 })
  23
  24 export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
  25   @Input() content = ''
  26
  27   @Input() formError: string
  28   @Input() classes: string[] | { [klass: string]: any[] | any } = []
  29
  30   @Input() textareaMaxWidth = '100%'
  31   @Input() textareaHeight = '150px'
  32
  33   @Input() truncate: number
  34
  35   @Input() markdownType: 'text' | 'enhanced' = 'text'
  36   @Input() customMarkdownRenderer?: (text: string) => Promise<string | HTMLElement>
  37
  38   @Input() markdownVideo: Video
  39
  40   @Input() name = 'description'
  41
  42   @ViewChild('textarea') textareaElement: ElementRef
  43   @ViewChild('previewElement') previewElement: ElementRef
  44
  45   truncatedPreviewHTML: SafeHtml | string = ''
  46   previewHTML: SafeHtml | string = ''
  47
  48   isMaximized = false
  49   disabled = false
  50
  51   maximizeInText = $localize`Maximize editor`
  52   maximizeOutText = $localize`Exit maximized editor`
  53
  54   private contentChanged = new Subject<string>()
  55   private scrollPosition: [number, number]
  56
  57   constructor (
  58     private viewportScroller: ViewportScroller,
  59     private screenService: ScreenService,
  60     private markdownService: MarkdownService
  61   ) { }
  62
  63   ngOnInit () {
  64     this.contentChanged
  65         .pipe(
  66           debounceTime(150),
  67           distinctUntilChanged()
  68         )
  69         .subscribe(() => this.updatePreviews())
  70
  71     this.contentChanged.next(this.content)
  72   }
  73
  74   propagateChange = (_: any) => { /* empty */ }
  75
  76   writeValue (description: string) {
  77     this.content = description
  78
  79     this.contentChanged.next(this.content)
  80   }
  81
  82   registerOnChange (fn: (_: any) => void) {
  83     this.propagateChange = fn
  84   }
  85
  86   registerOnTouched () {
  87     // Unused
  88   }
  89
  90   onModelChange () {
  91     this.propagateChange(this.content)
  92
  93     this.contentChanged.next(this.content)
  94   }
  95
  96   onMaximizeClick () {
  97     if (this.disabled) return
  98
  99     this.isMaximized = !this.isMaximized
 100
 101     // Make sure textarea have the focus
 102     // Except on touchscreens devices, the virtual keyboard may move up and hide the textarea in maximized mode
 103     if (!this.screenService.isInTouchScreen()) {
 104       this.textareaElement.nativeElement.focus()
 105     }
 106
 107     // Make sure the window has no scrollbars
 108     if (!this.isMaximized) {
 109       this.unlockBodyScroll()
 110     } else {
 111       this.lockBodyScroll()
 112     }
 113   }
 114
 115   setDisabledState (isDisabled: boolean) {
 116     this.disabled = isDisabled
 117   }
 118
 119   private lockBodyScroll () {
 120     this.scrollPosition = this.viewportScroller.getScrollPosition()
 121     document.getElementById('content').classList.add('lock-scroll')
 122   }
 123
 124   private unlockBodyScroll () {
 125     document.getElementById('content').classList.remove('lock-scroll')
 126     this.viewportScroller.scrollToPosition(this.scrollPosition)
 127   }
 128
 129   private async updatePreviews () {
 130     if (this.content === null || this.content === undefined) return
 131
 132     this.truncatedPreviewHTML = await this.markdownRender(truncate(this.content, { length: this.truncate }))
 133     this.previewHTML = await this.markdownRender(this.content)
 134   }
 135
 136   private async markdownRender (text: string) {
 137     let html: string
 138
 139     if (this.customMarkdownRenderer) {
 140       const result = await this.customMarkdownRenderer(text)
 141
 142       if (result instanceof HTMLElement) {
 143         const wrapperElement = this.previewElement.nativeElement as HTMLElement
 144         wrapperElement.innerHTML = ''
 145         wrapperElement.appendChild(result)
 146         return
 147       }
 148
 149       html = result
 150     } else if (this.markdownType === 'text') {
 151       html = await this.markdownService.textMarkdownToHTML(text)
 152     } else {
 153       html = await this.markdownService.enhancedMarkdownToHTML(text)
 154     }
 155
 156     if (this.markdownVideo) {
 157       html = this.markdownService.processVideoTimestamps(this.markdownVideo.shortUUID, html)
 158     }
 159
 160     return html
 161   }
 162 }