aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/renderer
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-06-23 14:10:17 +0200
committerChocobozzz <chocobozzz@cpy.re>2020-06-23 16:00:49 +0200
commit67ed6552b831df66713bac9e672738796128d33f (patch)
tree59c97d41e0b49d75a90aa3de987968ab9b1ff447 /client/src/app/shared/renderer
parent0c4bacbff53bc732f5a2677d62a6ead7752e2405 (diff)
downloadPeerTube-67ed6552b831df66713bac9e672738796128d33f.tar.gz
PeerTube-67ed6552b831df66713bac9e672738796128d33f.tar.zst
PeerTube-67ed6552b831df66713bac9e672738796128d33f.zip
Reorganize client shared modules
Diffstat (limited to 'client/src/app/shared/renderer')
-rw-r--r--client/src/app/shared/renderer/html-renderer.service.ts40
-rw-r--r--client/src/app/shared/renderer/index.ts3
-rw-r--r--client/src/app/shared/renderer/linkifier.service.ts114
-rw-r--r--client/src/app/shared/renderer/markdown.service.ts145
4 files changed, 0 insertions, 302 deletions
diff --git a/client/src/app/shared/renderer/html-renderer.service.ts b/client/src/app/shared/renderer/html-renderer.service.ts
deleted file mode 100644
index 1ddd8fe2f..000000000
--- a/client/src/app/shared/renderer/html-renderer.service.ts
+++ /dev/null
@@ -1,40 +0,0 @@
1import { Injectable } from '@angular/core'
2import { LinkifierService } from '@app/shared/renderer/linkifier.service'
3
4@Injectable()
5export class HtmlRendererService {
6
7 constructor (private linkifier: LinkifierService) {
8
9 }
10
11 async toSafeHtml (text: string) {
12 // FIXME: import('..') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
13 const sanitizeHtml: typeof import ('sanitize-html') = (await import('sanitize-html') as any).default
14
15 // Convert possible markdown to html
16 const html = this.linkifier.linkify(text)
17
18 return sanitizeHtml(html, {
19 allowedTags: [ 'a', 'p', 'span', 'br', 'strong', 'em', 'ul', 'ol', 'li' ],
20 allowedSchemes: [ 'http', 'https' ],
21 allowedAttributes: {
22 'a': [ 'href', 'class', 'target', 'rel' ]
23 },
24 transformTags: {
25 a: (tagName, attribs) => {
26 let rel = 'noopener noreferrer'
27 if (attribs.rel === 'me') rel += ' me'
28
29 return {
30 tagName,
31 attribs: Object.assign(attribs, {
32 target: '_blank',
33 rel
34 })
35 }
36 }
37 }
38 })
39 }
40}
diff --git a/client/src/app/shared/renderer/index.ts b/client/src/app/shared/renderer/index.ts
deleted file mode 100644
index 39202b385..000000000
--- a/client/src/app/shared/renderer/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
1export * from './html-renderer.service'
2export * from './linkifier.service'
3export * from './markdown.service'
diff --git a/client/src/app/shared/renderer/linkifier.service.ts b/client/src/app/shared/renderer/linkifier.service.ts
deleted file mode 100644
index 95d5f17cc..000000000
--- a/client/src/app/shared/renderer/linkifier.service.ts
+++ /dev/null
@@ -1,114 +0,0 @@
1import { Injectable } from '@angular/core'
2import { getAbsoluteAPIUrl } from '@app/shared/misc/utils'
3import * as linkify from 'linkifyjs'
4import linkifyHtml from 'linkifyjs/html'
5
6@Injectable()
7export class LinkifierService {
8
9 static CLASSNAME = 'linkified'
10
11 private linkifyOptions = {
12 className: {
13 mention: LinkifierService.CLASSNAME + '-mention',
14 url: LinkifierService.CLASSNAME + '-url'
15 }
16 }
17
18 constructor () {
19 // Apply plugin
20 this.mentionWithDomainPlugin(linkify)
21 }
22
23 linkify (text: string) {
24 return linkifyHtml(text, this.linkifyOptions)
25 }
26
27 private mentionWithDomainPlugin (linkify: any) {
28 const TT = linkify.scanner.TOKENS // Text tokens
29 const { TOKENS: MT, State } = linkify.parser // Multi tokens, state
30 const MultiToken = MT.Base
31 const S_START = linkify.parser.start
32
33 const TT_AT = TT.AT
34 const TT_DOMAIN = TT.DOMAIN
35 const TT_LOCALHOST = TT.LOCALHOST
36 const TT_NUM = TT.NUM
37 const TT_COLON = TT.COLON
38 const TT_SLASH = TT.SLASH
39 const TT_TLD = TT.TLD
40 const TT_UNDERSCORE = TT.UNDERSCORE
41 const TT_DOT = TT.DOT
42
43 function MENTION (this: any, value: any) {
44 this.v = value
45 }
46
47 linkify.inherits(MultiToken, MENTION, {
48 type: 'mentionWithDomain',
49 isLink: true,
50 toHref () {
51 return getAbsoluteAPIUrl() + '/services/redirect/accounts/' + this.toString().substr(1)
52 }
53 })
54
55 const S_AT = S_START.jump(TT_AT) // @
56 const S_AT_SYMS = new State()
57 const S_MENTION = new State(MENTION)
58 const S_MENTION_DIVIDER = new State()
59 const S_MENTION_DIVIDER_SYMS = new State()
60
61 // @_,
62 S_AT.on(TT_UNDERSCORE, S_AT_SYMS)
63
64 // @_*
65 S_AT_SYMS
66 .on(TT_UNDERSCORE, S_AT_SYMS)
67 .on(TT_DOT, S_AT_SYMS)
68
69 // Valid mention (not made up entirely of symbols)
70 S_AT
71 .on(TT_DOMAIN, S_MENTION)
72 .on(TT_LOCALHOST, S_MENTION)
73 .on(TT_TLD, S_MENTION)
74 .on(TT_NUM, S_MENTION)
75
76 S_AT_SYMS
77 .on(TT_DOMAIN, S_MENTION)
78 .on(TT_LOCALHOST, S_MENTION)
79 .on(TT_TLD, S_MENTION)
80 .on(TT_NUM, S_MENTION)
81
82 // More valid mentions
83 S_MENTION
84 .on(TT_DOMAIN, S_MENTION)
85 .on(TT_LOCALHOST, S_MENTION)
86 .on(TT_TLD, S_MENTION)
87 .on(TT_COLON, S_MENTION)
88 .on(TT_NUM, S_MENTION)
89 .on(TT_UNDERSCORE, S_MENTION)
90
91 // Mention with a divider
92 S_MENTION
93 .on(TT_AT, S_MENTION_DIVIDER)
94 .on(TT_SLASH, S_MENTION_DIVIDER)
95 .on(TT_DOT, S_MENTION_DIVIDER)
96
97 // Mention _ trailing stash plus syms
98 S_MENTION_DIVIDER.on(TT_UNDERSCORE, S_MENTION_DIVIDER_SYMS)
99 S_MENTION_DIVIDER_SYMS.on(TT_UNDERSCORE, S_MENTION_DIVIDER_SYMS)
100
101 // Once we get a word token, mentions can start up again
102 S_MENTION_DIVIDER
103 .on(TT_DOMAIN, S_MENTION)
104 .on(TT_LOCALHOST, S_MENTION)
105 .on(TT_TLD, S_MENTION)
106 .on(TT_NUM, S_MENTION)
107
108 S_MENTION_DIVIDER_SYMS
109 .on(TT_DOMAIN, S_MENTION)
110 .on(TT_LOCALHOST, S_MENTION)
111 .on(TT_TLD, S_MENTION)
112 .on(TT_NUM, S_MENTION)
113 }
114}
diff --git a/client/src/app/shared/renderer/markdown.service.ts b/client/src/app/shared/renderer/markdown.service.ts
deleted file mode 100644
index f0c87326f..000000000
--- a/client/src/app/shared/renderer/markdown.service.ts
+++ /dev/null
@@ -1,145 +0,0 @@
1import { Injectable } from '@angular/core'
2import { buildVideoLink } from '../../../assets/player/utils'
3import { HtmlRendererService } from '@app/shared/renderer/html-renderer.service'
4import * as MarkdownIt from 'markdown-it'
5
6type MarkdownParsers = {
7 textMarkdownIt: MarkdownIt
8 textWithHTMLMarkdownIt: MarkdownIt
9
10 enhancedMarkdownIt: MarkdownIt
11 enhancedWithHTMLMarkdownIt: MarkdownIt
12
13 completeMarkdownIt: MarkdownIt
14}
15
16type MarkdownConfig = {
17 rules: string[]
18 html: boolean
19 escape?: boolean
20}
21
22type MarkdownParserConfigs = {
23 [id in keyof MarkdownParsers]: MarkdownConfig
24}
25
26@Injectable()
27export class MarkdownService {
28 static TEXT_RULES = [
29 'linkify',
30 'autolink',
31 'emphasis',
32 'link',
33 'newline',
34 'list'
35 ]
36 static TEXT_WITH_HTML_RULES = MarkdownService.TEXT_RULES.concat([ 'html_inline', 'html_block' ])
37
38 static ENHANCED_RULES = MarkdownService.TEXT_RULES.concat([ 'image' ])
39 static ENHANCED_WITH_HTML_RULES = MarkdownService.TEXT_WITH_HTML_RULES.concat([ 'image' ])
40
41 static COMPLETE_RULES = MarkdownService.ENHANCED_WITH_HTML_RULES.concat([ 'block', 'inline', 'heading', 'paragraph' ])
42
43 private markdownParsers: MarkdownParsers = {
44 textMarkdownIt: null,
45 textWithHTMLMarkdownIt: null,
46 enhancedMarkdownIt: null,
47 enhancedWithHTMLMarkdownIt: null,
48 completeMarkdownIt: null
49 }
50 private parsersConfig: MarkdownParserConfigs = {
51 textMarkdownIt: { rules: MarkdownService.TEXT_RULES, html: false },
52 textWithHTMLMarkdownIt: { rules: MarkdownService.TEXT_WITH_HTML_RULES, html: true, escape: true },
53
54 enhancedMarkdownIt: { rules: MarkdownService.ENHANCED_RULES, html: false },
55 enhancedWithHTMLMarkdownIt: { rules: MarkdownService.ENHANCED_WITH_HTML_RULES, html: true, escape: true },
56
57 completeMarkdownIt: { rules: MarkdownService.COMPLETE_RULES, html: true }
58 }
59
60 constructor (private htmlRenderer: HtmlRendererService) {}
61
62 textMarkdownToHTML (markdown: string, withHtml = false) {
63 if (withHtml) return this.render('textWithHTMLMarkdownIt', markdown)
64
65 return this.render('textMarkdownIt', markdown)
66 }
67
68 enhancedMarkdownToHTML (markdown: string, withHtml = false) {
69 if (withHtml) return this.render('enhancedWithHTMLMarkdownIt', markdown)
70
71 return this.render('enhancedMarkdownIt', markdown)
72 }
73
74 completeMarkdownToHTML (markdown: string) {
75 return this.render('completeMarkdownIt', markdown)
76 }
77
78 async processVideoTimestamps (html: string) {
79 return html.replace(/((\d{1,2}):)?(\d{1,2}):(\d{1,2})/g, function (str, _, h, m, s) {
80 const t = (3600 * +(h || 0)) + (60 * +(m || 0)) + (+(s || 0))
81 const url = buildVideoLink({ startTime: t })
82 return `<a class="video-timestamp" href="${url}">${str}</a>`
83 })
84 }
85
86 private async render (name: keyof MarkdownParsers, markdown: string) {
87 if (!markdown) return ''
88
89 const config = this.parsersConfig[ name ]
90 if (!this.markdownParsers[ name ]) {
91 this.markdownParsers[ name ] = await this.createMarkdownIt(config)
92 }
93
94 let html = this.markdownParsers[ name ].render(markdown)
95 html = this.avoidTruncatedTags(html)
96
97 if (config.escape) return this.htmlRenderer.toSafeHtml(html)
98
99 return html
100 }
101
102 private async createMarkdownIt (config: MarkdownConfig) {
103 // FIXME: import('...') returns a struct module, containing a "default" field
104 const MarkdownItClass: typeof import ('markdown-it') = (await import('markdown-it') as any).default
105
106 const markdownIt = new MarkdownItClass('zero', { linkify: true, breaks: true, html: config.html })
107
108 for (const rule of config.rules) {
109 markdownIt.enable(rule)
110 }
111
112 this.setTargetToLinks(markdownIt)
113
114 return markdownIt
115 }
116
117 private setTargetToLinks (markdownIt: MarkdownIt) {
118 // Snippet from markdown-it documentation: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
119 const defaultRender = markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) {
120 return self.renderToken(tokens, idx, options)
121 }
122
123 markdownIt.renderer.rules.link_open = function (tokens, index, options, env, self) {
124 const token = tokens[index]
125
126 const targetIndex = token.attrIndex('target')
127 if (targetIndex < 0) token.attrPush([ 'target', '_blank' ])
128 else token.attrs[targetIndex][1] = '_blank'
129
130 const relIndex = token.attrIndex('rel')
131 if (relIndex < 0) token.attrPush([ 'rel', 'noopener noreferrer' ])
132 else token.attrs[relIndex][1] = 'noopener noreferrer'
133
134 // pass token to default renderer.
135 return defaultRender(tokens, index, options, env, self)
136 }
137 }
138
139 private avoidTruncatedTags (html: string) {
140 return html.replace(/\*\*?([^*]+)$/, '$1')
141 .replace(/<a[^>]+>([^<]+)<\/a>\s*...((<\/p>)|(<\/li>)|(<\/strong>))?$/mi, '$1...')
142 .replace(/\[[^\]]+\]\(([^\)]+)$/m, '$1')
143 .replace(/\s?\[[^\]]+\]?[.]{3}<\/p>$/m, '...</p>')
144 }
145}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-25 13:26:57 +0000