diff options
Diffstat (limited to 'client/src/app/shared/shared-forms')
-rw-r--r-- | client/src/app/shared/shared-forms/markdown-textarea.component.html | 1 | ||||
-rw-r--r-- | client/src/app/shared/shared-forms/markdown-textarea.component.ts | 45 |
2 files changed, 39 insertions, 7 deletions
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.html b/client/src/app/shared/shared-forms/markdown-textarea.component.html index 513b543cd..6e70e2f37 100644 --- a/client/src/app/shared/shared-forms/markdown-textarea.component.html +++ b/client/src/app/shared/shared-forms/markdown-textarea.component.html | |||
@@ -19,6 +19,7 @@ | |||
19 | <a ngbNavLink i18n>Complete preview</a> | 19 | <a ngbNavLink i18n>Complete preview</a> |
20 | 20 | ||
21 | <ng-template ngbNavContent> | 21 | <ng-template ngbNavContent> |
22 | <div #previewElement></div> | ||
22 | <div [innerHTML]="previewHTML"></div> | 23 | <div [innerHTML]="previewHTML"></div> |
23 | </ng-template> | 24 | </ng-template> |
24 | </ng-container> | 25 | </ng-container> |
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 9b3ab9cf3..a233a4205 100644 --- a/client/src/app/shared/shared-forms/markdown-textarea.component.ts +++ b/client/src/app/shared/shared-forms/markdown-textarea.component.ts | |||
@@ -1,9 +1,10 @@ | |||
1 | import { ViewportScroller } from '@angular/common' | ||
2 | import truncate from 'lodash-es/truncate' | 1 | import truncate from 'lodash-es/truncate' |
3 | import { Subject } from 'rxjs' | 2 | import { Subject } from 'rxjs' |
4 | import { debounceTime, distinctUntilChanged } from 'rxjs/operators' | 3 | import { debounceTime, distinctUntilChanged } from 'rxjs/operators' |
4 | import { ViewportScroller } from '@angular/common' | ||
5 | import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core' | 5 | import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core' |
6 | import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' | 6 | import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' |
7 | import { SafeHtml } from '@angular/platform-browser' | ||
7 | import { MarkdownService, ScreenService } from '@app/core' | 8 | import { MarkdownService, ScreenService } from '@app/core' |
8 | 9 | ||
9 | @Component({ | 10 | @Component({ |
@@ -21,18 +22,27 @@ import { MarkdownService, ScreenService } from '@app/core' | |||
21 | 22 | ||
22 | export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit { | 23 | export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit { |
23 | @Input() content = '' | 24 | @Input() content = '' |
25 | |||
24 | @Input() classes: string[] | { [klass: string]: any[] | any } = [] | 26 | @Input() classes: string[] | { [klass: string]: any[] | any } = [] |
27 | |||
25 | @Input() textareaMaxWidth = '100%' | 28 | @Input() textareaMaxWidth = '100%' |
26 | @Input() textareaHeight = '150px' | 29 | @Input() textareaHeight = '150px' |
30 | |||
27 | @Input() truncate: number | 31 | @Input() truncate: number |
32 | |||
28 | @Input() markdownType: 'text' | 'enhanced' = 'text' | 33 | @Input() markdownType: 'text' | 'enhanced' = 'text' |
34 | @Input() customMarkdownRenderer?: (text: string) => Promise<string | HTMLElement> | ||
35 | |||
29 | @Input() markdownVideo = false | 36 | @Input() markdownVideo = false |
37 | |||
30 | @Input() name = 'description' | 38 | @Input() name = 'description' |
31 | 39 | ||
32 | @ViewChild('textarea') textareaElement: ElementRef | 40 | @ViewChild('textarea') textareaElement: ElementRef |
41 | @ViewChild('previewElement') previewElement: ElementRef | ||
42 | |||
43 | truncatedPreviewHTML: SafeHtml | string = '' | ||
44 | previewHTML: SafeHtml | string = '' | ||
33 | 45 | ||
34 | truncatedPreviewHTML = '' | ||
35 | previewHTML = '' | ||
36 | isMaximized = false | 46 | isMaximized = false |
37 | 47 | ||
38 | maximizeInText = $localize`Maximize editor` | 48 | maximizeInText = $localize`Maximize editor` |
@@ -115,10 +125,31 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit { | |||
115 | } | 125 | } |
116 | 126 | ||
117 | private async markdownRender (text: string) { | 127 | private async markdownRender (text: string) { |
118 | const html = this.markdownType === 'text' ? | 128 | let html: string |
119 | await this.markdownService.textMarkdownToHTML(text) : | 129 | |
120 | await this.markdownService.enhancedMarkdownToHTML(text) | 130 | if (this.customMarkdownRenderer) { |
131 | const result = await this.customMarkdownRenderer(text) | ||
132 | |||
133 | if (result instanceof HTMLElement) { | ||
134 | html = '' | ||
135 | |||
136 | const wrapperElement = this.previewElement.nativeElement as HTMLElement | ||
137 | wrapperElement.innerHTML = '' | ||
138 | wrapperElement.appendChild(result) | ||
139 | return | ||
140 | } | ||
141 | |||
142 | html = result | ||
143 | } else if (this.markdownType === 'text') { | ||
144 | html = await this.markdownService.textMarkdownToHTML(text) | ||
145 | } else { | ||
146 | html = await this.markdownService.enhancedMarkdownToHTML(text) | ||
147 | } | ||
148 | |||
149 | if (this.markdownVideo) { | ||
150 | html = this.markdownService.processVideoTimestamps(html) | ||
151 | } | ||
121 | 152 | ||
122 | return this.markdownVideo ? this.markdownService.processVideoTimestamps(html) : html | 153 | return html |
123 | } | 154 | } |
124 | } | 155 | } |