Fix HTML in account/channel description

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-forms / markdown-textarea.component.ts

diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.ts b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
index d47f22d1d1796771014fe3470d52f66cba5c1c7c..e3371f22c7592b594f58f9e7551758020fe8a12d 100644 (file)
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
@@ -1,10 +1,12 @@
-import { ViewportScroller } from '@angular/common'
 import truncate from 'lodash-es/truncate'
 import { Subject } from 'rxjs'
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
+import { ViewportScroller } from '@angular/common'
 import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
-import { MarkdownService } from '@app/core'
+import { SafeHtml } from '@angular/platform-browser'
+import { MarkdownService, ScreenService } from '@app/core'
+import { Video } from '@shared/models'
 
 @Component({
   selector: 'my-markdown-textarea',
@@ -21,25 +23,36 @@ import { MarkdownService } from '@app/core'
 
 export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
   @Input() content = ''
-  @Input() classes: string[] | { [klass: string]: any[] | any } = []
-  @Input() textareaMaxWidth = '100%'
-  @Input() textareaHeight = '150px'
+
+  @Input() formError: string
+
   @Input() truncate: number
+
   @Input() markdownType: 'text' | 'enhanced' = 'text'
-  @Input() markdownVideo = false
+  @Input() customMarkdownRenderer?: (text: string) => Promise<string | HTMLElement>
+
+  @Input() markdownVideo: Video
+
   @Input() name = 'description'
 
   @ViewChild('textarea') textareaElement: ElementRef
+  @ViewChild('previewElement') previewElement: ElementRef
+
+  truncatedPreviewHTML: SafeHtml | string = ''
+  previewHTML: SafeHtml | string = ''
 
-  truncatedPreviewHTML = ''
-  previewHTML = ''
   isMaximized = false
+  disabled = false
+
+  maximizeInText = $localize`Maximize editor`
+  maximizeOutText = $localize`Exit maximized editor`
 
   private contentChanged = new Subject<string>()
   private scrollPosition: [number, number]
 
   constructor (
     private viewportScroller: ViewportScroller,
+    private screenService: ScreenService,
     private markdownService: MarkdownService
   ) { }
 
@@ -77,10 +90,15 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
   }
 
   onMaximizeClick () {
+    if (this.disabled) return
+
     this.isMaximized = !this.isMaximized
 
     // Make sure textarea have the focus
-    this.textareaElement.nativeElement.focus()
+    // Except on touchscreens devices, the virtual keyboard may move up and hide the textarea in maximized mode
+    if (!this.screenService.isInTouchScreen()) {
+      this.textareaElement.nativeElement.focus()
+    }
 
     // Make sure the window has no scrollbars
     if (!this.isMaximized) {
@@ -90,6 +108,10 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
     }
   }
 
+  setDisabledState (isDisabled: boolean) {
+    this.disabled = isDisabled
+  }
+
   private lockBodyScroll () {
     this.scrollPosition = this.viewportScroller.getScrollPosition()
     document.getElementById('content').classList.add('lock-scroll')
@@ -108,10 +130,29 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
   }
 
   private async markdownRender (text: string) {
-    const html = this.markdownType === 'text' ?
-      await this.markdownService.textMarkdownToHTML(text) :
-      await this.markdownService.enhancedMarkdownToHTML(text)
+    let html: string
+
+    if (this.customMarkdownRenderer) {
+      const result = await this.customMarkdownRenderer(text)
+
+      if (result instanceof HTMLElement) {
+        const wrapperElement = this.previewElement.nativeElement as HTMLElement
+        wrapperElement.innerHTML = ''
+        wrapperElement.appendChild(result)
+        return
+      }
+
+      html = result
+    } else if (this.markdownType === 'text') {
+      html = await this.markdownService.textMarkdownToHTML({ markdown: text })
+    } else {
+      html = await this.markdownService.enhancedMarkdownToHTML({ markdown: text })
+    }
+
+    if (this.markdownVideo) {
+      html = this.markdownService.processVideoTimestamps(this.markdownVideo.shortUUID, html)
+    }
 
-    return this.markdownVideo ? this.markdownService.processVideoTimestamps(html) : html
+    return html
   }
 }