diff options
Diffstat (limited to 'client/src/app/videos')
-rw-r--r-- | client/src/app/videos/+video-edit/shared/video-edit.component.html | 6 | ||||
-rw-r--r-- | client/src/app/videos/shared/markdown.service.ts | 42 |
2 files changed, 28 insertions, 20 deletions
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html index f88abcbf8..f4ec4f95c 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.html +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html | |||
@@ -20,7 +20,8 @@ | |||
20 | </div> | 20 | </div> |
21 | 21 | ||
22 | <div class="form-group"> | 22 | <div class="form-group"> |
23 | <label for="description">Description</label> <my-help helpType="markdownText"></my-help> | 23 | <label for="description">Description</label> |
24 | <my-help helpType="markdownText" preHtml="Video descriptions are truncated by default and require manual action to expand them."></my-help> | ||
24 | <my-markdown-textarea truncate="250" formControlName="description"></my-markdown-textarea> | 25 | <my-markdown-textarea truncate="250" formControlName="description"></my-markdown-textarea> |
25 | 26 | ||
26 | <div *ngIf="formErrors.description" class="form-error"> | 27 | <div *ngIf="formErrors.description" class="form-error"> |
@@ -127,7 +128,8 @@ | |||
127 | </div> | 128 | </div> |
128 | 129 | ||
129 | <div class="form-group"> | 130 | <div class="form-group"> |
130 | <label for="support">Support</label><my-help helpType="markdownEnhanced"></my-help> | 131 | <label for="support">Support</label> |
132 | <my-help helpType="markdownEnhanced" preHtml="Short text to tell to people how they can support you (membership platform...)."></my-help> | ||
131 | <my-markdown-textarea | 133 | <my-markdown-textarea |
132 | id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced" | 134 | id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced" |
133 | [classes]="{ 'input-error': formErrors['support'] }" | 135 | [classes]="{ 'input-error': formErrors['support'] }" |
diff --git a/client/src/app/videos/shared/markdown.service.ts b/client/src/app/videos/shared/markdown.service.ts index fdd0ec8d2..9d73efa46 100644 --- a/client/src/app/videos/shared/markdown.service.ts +++ b/client/src/app/videos/shared/markdown.service.ts | |||
@@ -4,28 +4,22 @@ import * as MarkdownIt from 'markdown-it' | |||
4 | 4 | ||
5 | @Injectable() | 5 | @Injectable() |
6 | export class MarkdownService { | 6 | export class MarkdownService { |
7 | static TEXT_RULES = [ | ||
8 | 'linkify', | ||
9 | 'autolink', | ||
10 | 'emphasis', | ||
11 | 'link', | ||
12 | 'newline', | ||
13 | 'list' | ||
14 | ] | ||
15 | static ENHANCED_RULES = MarkdownService.TEXT_RULES.concat([ 'image' ]) | ||
16 | |||
7 | private textMarkdownIt: MarkdownIt.MarkdownIt | 17 | private textMarkdownIt: MarkdownIt.MarkdownIt |
8 | private enhancedMarkdownIt: MarkdownIt.MarkdownIt | 18 | private enhancedMarkdownIt: MarkdownIt.MarkdownIt |
9 | 19 | ||
10 | constructor () { | 20 | constructor () { |
11 | this.textMarkdownIt = new MarkdownIt('zero', { linkify: true, breaks: true }) | 21 | this.textMarkdownIt = this.createMarkdownIt(MarkdownService.TEXT_RULES) |
12 | .enable('linkify') | 22 | this.enhancedMarkdownIt = this.createMarkdownIt(MarkdownService.ENHANCED_RULES) |
13 | .enable('autolink') | ||
14 | .enable('emphasis') | ||
15 | .enable('link') | ||
16 | .enable('newline') | ||
17 | .enable('list') | ||
18 | this.setTargetToLinks(this.textMarkdownIt) | ||
19 | |||
20 | this.enhancedMarkdownIt = new MarkdownIt('zero', { linkify: true, breaks: true }) | ||
21 | .enable('linkify') | ||
22 | .enable('autolink') | ||
23 | .enable('emphasis') | ||
24 | .enable('link') | ||
25 | .enable('newline') | ||
26 | .enable('list') | ||
27 | .enable('image') | ||
28 | this.setTargetToLinks(this.enhancedMarkdownIt) | ||
29 | } | 23 | } |
30 | 24 | ||
31 | textMarkdownToHTML (markdown: string) { | 25 | textMarkdownToHTML (markdown: string) { |
@@ -40,6 +34,18 @@ export class MarkdownService { | |||
40 | return this.avoidTruncatedLinks(html) | 34 | return this.avoidTruncatedLinks(html) |
41 | } | 35 | } |
42 | 36 | ||
37 | private createMarkdownIt (rules: string[]) { | ||
38 | const markdownIt = new MarkdownIt('zero', { linkify: true, breaks: true }) | ||
39 | |||
40 | for (let rule of rules) { | ||
41 | markdownIt.enable(rule) | ||
42 | } | ||
43 | |||
44 | this.setTargetToLinks(markdownIt) | ||
45 | |||
46 | return markdownIt | ||
47 | } | ||
48 | |||
43 | private setTargetToLinks (markdownIt: MarkdownIt.MarkdownIt) { | 49 | private setTargetToLinks (markdownIt: MarkdownIt.MarkdownIt) { |
44 | // Snippet from markdown-it documentation: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer | 50 | // Snippet from markdown-it documentation: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer |
45 | const defaultRender = markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) { | 51 | const defaultRender = markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) { |