X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fforms%2Fmarkdown-textarea.component.ts;h=cbcfdfe78aba73d9b9aac2ea8f14e79f357c383e;hb=be27ef3b4682c5639039474c39ee0d234d16f482;hp=928a63b28115ecb4bd0c521b4dec84d4e89726d1;hpb=07fa4c97ca50b83b0bee9230da97d02401b4e05f;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/shared/forms/markdown-textarea.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts index 928a63b28..cbcfdfe78 100644 --- a/client/src/app/shared/forms/markdown-textarea.component.ts +++ b/client/src/app/shared/forms/markdown-textarea.component.ts @@ -1,11 +1,10 @@ +import { debounceTime, distinctUntilChanged } from 'rxjs/operators' 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 { isInSmallView } from '@app/shared/misc/utils' -import { MarkdownService } from '@app/videos/shared' -import { Subject } from 'rxjs/Subject' +import { Subject } from 'rxjs' import truncate from 'lodash-es/truncate' +import { ScreenService } from '@app/shared/misc/screen.service' +import { MarkdownService } from '@app/shared/renderer' @Component({ selector: 'my-markdown-textarea', @@ -22,12 +21,14 @@ import truncate from 'lodash-es/truncate' export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit { @Input() content = '' - @Input() classes: string[] = [] + @Input() classes: string[] | { [klass: string]: any[] | any } = [] @Input() textareaWidth = '100%' @Input() textareaHeight = '150px' @Input() previewColumn = false @Input() truncate: number @Input() markdownType: 'text' | 'enhanced' = 'text' + @Input() markdownVideo = false + @Input() name = 'description' textareaMarginRight = '0' flexDirection = 'column' @@ -36,13 +37,18 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit { private contentChanged = new Subject() - constructor (private markdownService: MarkdownService) {} + constructor ( + private screenService: ScreenService, + private markdownService: MarkdownService +) {} ngOnInit () { this.contentChanged - .debounceTime(150) - .distinctUntilChanged() - .subscribe(() => this.updatePreviews()) + .pipe( + debounceTime(150), + distinctUntilChanged() + ) + .subscribe(() => this.updatePreviews()) this.contentChanged.next(this.content) @@ -75,19 +81,21 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit { } arePreviewsDisplayed () { - return isInSmallView() === false + return this.screenService.isInSmallView() === false } - private updatePreviews () { + private async updatePreviews () { if (this.content === null || this.content === undefined) return - this.truncatedPreviewHTML = this.markdownRender(truncate(this.content, { length: this.truncate })) - this.previewHTML = this.markdownRender(this.content) + this.truncatedPreviewHTML = await this.markdownRender(truncate(this.content, { length: this.truncate })) + this.previewHTML = await this.markdownRender(this.content) } - private markdownRender (text: string) { - if (this.markdownType === 'text') return this.markdownService.textMarkdownToHTML(text) + private async markdownRender (text: string) { + const html = this.markdownType === 'text' ? + await this.markdownService.textMarkdownToHTML(text) : + await this.markdownService.enhancedMarkdownToHTML(text) - return this.markdownService.enhancedMarkdownToHTML(text) + return this.markdownVideo ? this.markdownService.processVideoTimestamps(html) : html } }