-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',
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() debounceTime = 150
+
+ @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
) { }
ngOnInit () {
this.contentChanged
.pipe(
- debounceTime(150),
+ debounceTime(this.debounceTime),
distinctUntilChanged()
)
.subscribe(() => this.updatePreviews())
}
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) {
}
}
+ setDisabledState (isDisabled: boolean) {
+ this.disabled = isDisabled
+ }
+
private lockBodyScroll () {
this.scrollPosition = this.viewportScroller.getScrollPosition()
document.getElementById('content').classList.add('lock-scroll')
}
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
}
}