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