diff options
Diffstat (limited to 'client/src/app/shared/forms/markdown-textarea.component.ts')
-rw-r--r-- | client/src/app/shared/forms/markdown-textarea.component.ts | 37 |
1 files changed, 22 insertions, 15 deletions
diff --git a/client/src/app/shared/forms/markdown-textarea.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts index 2eae1b27e..928a63b28 100644 --- a/client/src/app/shared/forms/markdown-textarea.component.ts +++ b/client/src/app/shared/forms/markdown-textarea.component.ts | |||
@@ -21,29 +21,30 @@ import truncate from 'lodash-es/truncate' | |||
21 | }) | 21 | }) |
22 | 22 | ||
23 | export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit { | 23 | export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit { |
24 | @Input() description = '' | 24 | @Input() content = '' |
25 | @Input() classes: string[] = [] | 25 | @Input() classes: string[] = [] |
26 | @Input() textareaWidth = '100%' | 26 | @Input() textareaWidth = '100%' |
27 | @Input() textareaHeight = '150px' | 27 | @Input() textareaHeight = '150px' |
28 | @Input() previewColumn = false | 28 | @Input() previewColumn = false |
29 | @Input() truncate: number | 29 | @Input() truncate: number |
30 | @Input() markdownType: 'text' | 'enhanced' = 'text' | ||
30 | 31 | ||
31 | textareaMarginRight = '0' | 32 | textareaMarginRight = '0' |
32 | flexDirection = 'column' | 33 | flexDirection = 'column' |
33 | truncatedDescriptionHTML = '' | 34 | truncatedPreviewHTML = '' |
34 | descriptionHTML = '' | 35 | previewHTML = '' |
35 | 36 | ||
36 | private descriptionChanged = new Subject<string>() | 37 | private contentChanged = new Subject<string>() |
37 | 38 | ||
38 | constructor (private markdownService: MarkdownService) {} | 39 | constructor (private markdownService: MarkdownService) {} |
39 | 40 | ||
40 | ngOnInit () { | 41 | ngOnInit () { |
41 | this.descriptionChanged | 42 | this.contentChanged |
42 | .debounceTime(150) | 43 | .debounceTime(150) |
43 | .distinctUntilChanged() | 44 | .distinctUntilChanged() |
44 | .subscribe(() => this.updateDescriptionPreviews()) | 45 | .subscribe(() => this.updatePreviews()) |
45 | 46 | ||
46 | this.descriptionChanged.next(this.description) | 47 | this.contentChanged.next(this.content) |
47 | 48 | ||
48 | if (this.previewColumn) { | 49 | if (this.previewColumn) { |
49 | this.flexDirection = 'row' | 50 | this.flexDirection = 'row' |
@@ -54,9 +55,9 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit { | |||
54 | propagateChange = (_: any) => { /* empty */ } | 55 | propagateChange = (_: any) => { /* empty */ } |
55 | 56 | ||
56 | writeValue (description: string) { | 57 | writeValue (description: string) { |
57 | this.description = description | 58 | this.content = description |
58 | 59 | ||
59 | this.descriptionChanged.next(this.description) | 60 | this.contentChanged.next(this.content) |
60 | } | 61 | } |
61 | 62 | ||
62 | registerOnChange (fn: (_: any) => void) { | 63 | registerOnChange (fn: (_: any) => void) { |
@@ -68,19 +69,25 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit { | |||
68 | } | 69 | } |
69 | 70 | ||
70 | onModelChange () { | 71 | onModelChange () { |
71 | this.propagateChange(this.description) | 72 | this.propagateChange(this.content) |
72 | 73 | ||
73 | this.descriptionChanged.next(this.description) | 74 | this.contentChanged.next(this.content) |
74 | } | 75 | } |
75 | 76 | ||
76 | arePreviewsDisplayed () { | 77 | arePreviewsDisplayed () { |
77 | return isInSmallView() === false | 78 | return isInSmallView() === false |
78 | } | 79 | } |
79 | 80 | ||
80 | private updateDescriptionPreviews () { | 81 | private updatePreviews () { |
81 | if (this.description === null || this.description === undefined) return | 82 | if (this.content === null || this.content === undefined) return |
82 | 83 | ||
83 | this.truncatedDescriptionHTML = this.markdownService.markdownToHTML(truncate(this.description, { length: this.truncate })) | 84 | this.truncatedPreviewHTML = this.markdownRender(truncate(this.content, { length: this.truncate })) |
84 | this.descriptionHTML = this.markdownService.markdownToHTML(this.description) | 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) | ||
85 | } | 92 | } |
86 | } | 93 | } |