aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-05-31 11:33:49 +0200
committerChocobozzz <me@florianbigard.com>2021-05-31 11:33:49 +0200
commit8ee25e17b88b970703f4df9e74cb4726bbffd837 (patch)
tree450d73715c747c82efe6c919ebeda6411c01c5e0 /client/src/app
parent15f35256af15b97d2298cc44e76ffcafe73a1c88 (diff)
downloadPeerTube-8ee25e17b88b970703f4df9e74cb4726bbffd837.tar.gz
PeerTube-8ee25e17b88b970703f4df9e74cb4726bbffd837.tar.zst
PeerTube-8ee25e17b88b970703f4df9e74cb4726bbffd837.zip
Add ability to set custom markdown in description
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.html4
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.ts20
-rw-r--r--client/src/app/+about/about.module.ts4
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html2
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-homepage.component.ts8
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html6
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.ts9
-rw-r--r--client/src/app/+home/home.component.html2
-rw-r--r--client/src/app/+home/home.component.ts10
-rw-r--r--client/src/app/shared/shared-custom-markup/custom-markup-container.component.html1
-rw-r--r--client/src/app/shared/shared-custom-markup/custom-markup-container.component.ts26
-rw-r--r--client/src/app/shared/shared-custom-markup/custom-markup.service.ts24
-rw-r--r--client/src/app/shared/shared-custom-markup/index.ts1
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.html (renamed from client/src/app/shared/shared-custom-markup/button-markup.component.html)0
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.scss (renamed from client/src/app/shared/shared-custom-markup/button-markup.component.scss)0
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.ts (renamed from client/src/app/shared/shared-custom-markup/button-markup.component.ts)2
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html (renamed from client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.html)0
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss (renamed from client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.scss)0
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts (renamed from client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.ts)2
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/embed-markup.component.ts (renamed from client/src/app/shared/shared-custom-markup/embed-markup.component.ts)0
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/index.ts6
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.html (renamed from client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.html)0
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.scss (renamed from client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.scss)0
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.ts (renamed from client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.ts)4
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.html (renamed from client/src/app/shared/shared-custom-markup/video-miniature-markup.component.html)0
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.scss (renamed from client/src/app/shared/shared-custom-markup/video-miniature-markup.component.scss)0
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.ts (renamed from client/src/app/shared/shared-custom-markup/video-miniature-markup.component.ts)4
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.html (renamed from client/src/app/shared/shared-custom-markup/videos-list-markup.component.html)0
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss (renamed from client/src/app/shared/shared-custom-markup/videos-list-markup.component.scss)0
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts (renamed from client/src/app/shared/shared-custom-markup/videos-list-markup.component.ts)4
-rw-r--r--client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts21
-rw-r--r--client/src/app/shared/shared-instance/instance-about-accordion.component.ts1
-rw-r--r--client/src/app/shared/shared-instance/instance.service.ts1
-rw-r--r--client/src/app/shared/shared-instance/shared-instance.module.ts4
34 files changed, 118 insertions, 48 deletions
diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index 1f372090e..29dfd89fb 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -91,7 +91,7 @@
91 91
92 <div class="anchor" id="information"></div> 92 <div class="anchor" id="information"></div>
93 <a 93 <a
94 *ngIf="html.description" 94 *ngIf="descriptionContent"
95 class="anchor-link" 95 class="anchor-link"
96 routerLink="/about/instance" 96 routerLink="/about/instance"
97 fragment="information" 97 fragment="information"
@@ -113,7 +113,7 @@
113 <h3 i18n class="section-title">Description</h3> 113 <h3 i18n class="section-title">Description</h3>
114 </a> 114 </a>
115 115
116 <div [innerHTML]="html.description"></div> 116 <my-custom-markup-container [content]="descriptionContent"></my-custom-markup-container>
117 </div> 117 </div>
118 118
119 <div class="anchor" id="moderation"></div> 119 <div class="anchor" id="moderation"></div>
diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts
index 7eb382a46..2e0996429 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -1,11 +1,12 @@
1import { ViewportScroller } from '@angular/common' 1import { ViewportScroller } from '@angular/common'
2import { AfterViewChecked, Component, OnInit, ViewChild } from '@angular/core' 2import { AfterViewChecked, Component, ElementRef, OnInit, ViewChild } from '@angular/core'
3import { ActivatedRoute } from '@angular/router' 3import { ActivatedRoute } from '@angular/router'
4import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component' 4import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
5import { Notifier } from '@app/core' 5import { Notifier } from '@app/core'
6import { copyToClipboard } from '../../../root-helpers/utils' 6import { CustomMarkupService } from '@app/shared/shared-custom-markup'
7import { InstanceService } from '@app/shared/shared-instance' 7import { InstanceService } from '@app/shared/shared-instance'
8import { ServerConfig } from '@shared/models' 8import { About, ServerConfig } from '@shared/models'
9import { copyToClipboard } from '../../../root-helpers/utils'
9import { ResolverData } from './about-instance.resolver' 10import { ResolverData } from './about-instance.resolver'
10 11
11@Component({ 12@Component({
@@ -14,12 +15,13 @@ import { ResolverData } from './about-instance.resolver'
14 styleUrls: [ './about-instance.component.scss' ] 15 styleUrls: [ './about-instance.component.scss' ]
15}) 16})
16export class AboutInstanceComponent implements OnInit, AfterViewChecked { 17export class AboutInstanceComponent implements OnInit, AfterViewChecked {
18 @ViewChild('descriptionWrapper') descriptionWrapper: ElementRef<HTMLInputElement>
17 @ViewChild('contactAdminModal', { static: true }) contactAdminModal: ContactAdminModalComponent 19 @ViewChild('contactAdminModal', { static: true }) contactAdminModal: ContactAdminModalComponent
18 20
19 shortDescription = '' 21 shortDescription = ''
22 descriptionContent: string
20 23
21 html = { 24 html = {
22 description: '',
23 terms: '', 25 terms: '',
24 codeOfConduct: '', 26 codeOfConduct: '',
25 moderationInformation: '', 27 moderationInformation: '',
@@ -40,6 +42,7 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
40 private lastScrollHash: string 42 private lastScrollHash: string
41 43
42 constructor ( 44 constructor (
45 private customMarkupService: CustomMarkupService,
43 private viewportScroller: ViewportScroller, 46 private viewportScroller: ViewportScroller,
44 private route: ActivatedRoute, 47 private route: ActivatedRoute,
45 private notifier: Notifier, 48 private notifier: Notifier,
@@ -67,9 +70,12 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
67 this.categories = categories 70 this.categories = categories
68 71
69 this.shortDescription = about.instance.shortDescription 72 this.shortDescription = about.instance.shortDescription
73 this.descriptionContent = about.instance.description
70 74
71 this.html = await this.instanceService.buildHtml(about) 75 this.html = await this.instanceService.buildHtml(about)
72 76
77 await this.injectDescription(about)
78
73 this.initialized = true 79 this.initialized = true
74 } 80 }
75 81
@@ -90,4 +96,10 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
90 copyToClipboard(link) 96 copyToClipboard(link)
91 this.notifier.success(link, $localize `Link copied`) 97 this.notifier.success(link, $localize `Link copied`)
92 } 98 }
99
100 private async injectDescription (about: About) {
101 const element = await this.customMarkupService.buildElement(about.instance.description)
102
103 this.descriptionWrapper.nativeElement.appendChild(element)
104 }
93} 105}
diff --git a/client/src/app/+about/about.module.ts b/client/src/app/+about/about.module.ts
index 1aca14033..dfea52fb8 100644
--- a/client/src/app/+about/about.module.ts
+++ b/client/src/app/+about/about.module.ts
@@ -5,6 +5,7 @@ import { AboutInstanceResolver } from '@app/+about/about-instance/about-instance
5import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component' 5import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
6import { AboutPeertubeContributorsComponent } from '@app/+about/about-peertube/about-peertube-contributors.component' 6import { AboutPeertubeContributorsComponent } from '@app/+about/about-peertube/about-peertube-contributors.component'
7import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component' 7import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component'
8import { SharedCustomMarkupModule } from '@app/shared/shared-custom-markup'
8import { SharedFormModule } from '@app/shared/shared-forms' 9import { SharedFormModule } from '@app/shared/shared-forms'
9import { SharedGlobalIconModule } from '@app/shared/shared-icons' 10import { SharedGlobalIconModule } from '@app/shared/shared-icons'
10import { SharedInstanceModule } from '@app/shared/shared-instance' 11import { SharedInstanceModule } from '@app/shared/shared-instance'
@@ -19,7 +20,8 @@ import { AboutComponent } from './about.component'
19 SharedMainModule, 20 SharedMainModule,
20 SharedFormModule, 21 SharedFormModule,
21 SharedInstanceModule, 22 SharedInstanceModule,
22 SharedGlobalIconModule 23 SharedGlobalIconModule,
24 SharedCustomMarkupModule
23 ], 25 ],
24 26
25 declarations: [ 27 declarations: [
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
index baaac5fb7..2286a5a1a 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
@@ -17,7 +17,7 @@
17 17
18 <my-markdown-textarea 18 <my-markdown-textarea
19 name="instanceCustomHomepageContent" formControlName="content" textareaMaxWidth="90%" textareaHeight="300px" 19 name="instanceCustomHomepageContent" formControlName="content" textareaMaxWidth="90%" textareaHeight="300px"
20 [customMarkdownRenderer]="customMarkdownRenderer" 20 [customMarkdownRenderer]="getCustomMarkdownRenderer()"
21 [classes]="{ 'input-error': formErrors['instanceCustomHomepage.content'] }" 21 [classes]="{ 'input-error': formErrors['instanceCustomHomepage.content'] }"
22 ></my-markdown-textarea> 22 ></my-markdown-textarea>
23 23
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.ts
index 7decf8f75..1923ede39 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.ts
@@ -7,7 +7,7 @@ import { CustomMarkupService } from '@app/shared/shared-custom-markup'
7 templateUrl: './edit-homepage.component.html', 7 templateUrl: './edit-homepage.component.html',
8 styleUrls: [ './edit-custom-config.component.scss' ] 8 styleUrls: [ './edit-custom-config.component.scss' ]
9}) 9})
10export class EditHomepageComponent implements OnInit { 10export class EditHomepageComponent {
11 @Input() form: FormGroup 11 @Input() form: FormGroup
12 @Input() formErrors: any 12 @Input() formErrors: any
13 13
@@ -17,9 +17,7 @@ export class EditHomepageComponent implements OnInit {
17 17
18 } 18 }
19 19
20 ngOnInit () { 20 getCustomMarkdownRenderer () {
21 this.customMarkdownRenderer = async (text: string) => { 21 return this.customMarkup.getCustomMarkdownRenderer()
22 return this.customMarkup.buildElement(text)
23 }
24 } 22 }
25} 23}
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
index cbff26e5a..d806616bd 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
@@ -32,10 +32,14 @@
32 </div> 32 </div>
33 33
34 <div class="form-group"> 34 <div class="form-group">
35 <label i18n for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help> 35 <label i18n for="instanceDescription">Description</label>
36 <div class="label-small-info">
37 <my-custom-markup-help></my-custom-markup-help>
38 </div>
36 39
37 <my-markdown-textarea 40 <my-markdown-textarea
38 name="instanceDescription" formControlName="description" textareaMaxWidth="500px" 41 name="instanceDescription" formControlName="description" textareaMaxWidth="500px"
42 [customMarkdownRenderer]="getCustomMarkdownRenderer()"
39 [classes]="{ 'input-error': formErrors['instance.description'] }" 43 [classes]="{ 'input-error': formErrors['instance.description'] }"
40 ></my-markdown-textarea> 44 ></my-markdown-textarea>
41 45
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.ts
index 26365e707..4185f121f 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.ts
@@ -1,6 +1,7 @@
1import { SelectOptionsItem } from 'src/types/select-options-item.model' 1import { SelectOptionsItem } from 'src/types/select-options-item.model'
2import { Component, Input } from '@angular/core' 2import { Component, Input } from '@angular/core'
3import { FormGroup } from '@angular/forms' 3import { FormGroup } from '@angular/forms'
4import { CustomMarkupService } from '@app/shared/shared-custom-markup'
4 5
5@Component({ 6@Component({
6 selector: 'my-edit-instance-information', 7 selector: 'my-edit-instance-information',
@@ -13,4 +14,12 @@ export class EditInstanceInformationComponent {
13 14
14 @Input() languageItems: SelectOptionsItem[] = [] 15 @Input() languageItems: SelectOptionsItem[] = []
15 @Input() categoryItems: SelectOptionsItem[] = [] 16 @Input() categoryItems: SelectOptionsItem[] = []
17
18 constructor (private customMarkup: CustomMarkupService) {
19
20 }
21
22 getCustomMarkdownRenderer () {
23 return this.customMarkup.getCustomMarkdownRenderer()
24 }
16} 25}
diff --git a/client/src/app/+home/home.component.html b/client/src/app/+home/home.component.html
index 645b9dc69..dfce46618 100644
--- a/client/src/app/+home/home.component.html
+++ b/client/src/app/+home/home.component.html
@@ -1,4 +1,4 @@
1<div class="root margin-content"> 1<div class="root margin-content">
2 <div #contentWrapper></div> 2 <my-custom-markup-container [content]="homepageContent"></my-custom-markup-container>
3</div> 3</div>
4 4
diff --git a/client/src/app/+home/home.component.ts b/client/src/app/+home/home.component.ts
index 16d3a6df7..6e0c96760 100644
--- a/client/src/app/+home/home.component.ts
+++ b/client/src/app/+home/home.component.ts
@@ -1,6 +1,4 @@
1
2import { Component, ElementRef, OnInit, ViewChild } from '@angular/core' 1import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
3import { CustomMarkupService } from '@app/shared/shared-custom-markup'
4import { CustomPageService } from '@app/shared/shared-main/custom-page' 2import { CustomPageService } from '@app/shared/shared-main/custom-page'
5 3
6@Component({ 4@Component({
@@ -11,16 +9,14 @@ import { CustomPageService } from '@app/shared/shared-main/custom-page'
11export class HomeComponent implements OnInit { 9export class HomeComponent implements OnInit {
12 @ViewChild('contentWrapper') contentWrapper: ElementRef<HTMLInputElement> 10 @ViewChild('contentWrapper') contentWrapper: ElementRef<HTMLInputElement>
13 11
12 homepageContent: string
13
14 constructor ( 14 constructor (
15 private customMarkupService: CustomMarkupService,
16 private customPageService: CustomPageService 15 private customPageService: CustomPageService
17 ) { } 16 ) { }
18 17
19 async ngOnInit () { 18 async ngOnInit () {
20 this.customPageService.getInstanceHomepage() 19 this.customPageService.getInstanceHomepage()
21 .subscribe(async ({ content }) => { 20 .subscribe(({ content }) => this.homepageContent = content)
22 const element = await this.customMarkupService.buildElement(content)
23 this.contentWrapper.nativeElement.appendChild(element)
24 })
25 } 21 }
26} 22}
diff --git a/client/src/app/shared/shared-custom-markup/custom-markup-container.component.html b/client/src/app/shared/shared-custom-markup/custom-markup-container.component.html
new file mode 100644
index 000000000..3ad88645d
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/custom-markup-container.component.html
@@ -0,0 +1 @@
<div #contentWrapper></div>
diff --git a/client/src/app/shared/shared-custom-markup/custom-markup-container.component.ts b/client/src/app/shared/shared-custom-markup/custom-markup-container.component.ts
new file mode 100644
index 000000000..3d49c6768
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/custom-markup-container.component.ts
@@ -0,0 +1,26 @@
1import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core'
2import { CustomMarkupService } from './custom-markup.service'
3
4@Component({
5 selector: 'my-custom-markup-container',
6 templateUrl: './custom-markup-container.component.html'
7})
8export class CustomMarkupContainerComponent implements OnChanges {
9 @ViewChild('contentWrapper') contentWrapper: ElementRef<HTMLInputElement>
10
11 @Input() content: string
12
13 constructor (
14 private customMarkupService: CustomMarkupService
15 ) { }
16
17 async ngOnChanges () {
18 await this.buildElement()
19 }
20
21 private async buildElement () {
22 const element = await this.customMarkupService.buildElement(this.content)
23 this.contentWrapper.nativeElement.appendChild(element)
24 }
25
26}
diff --git a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
index 09414da95..dbb07914e 100644
--- a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
+++ b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
@@ -8,13 +8,15 @@ import {
8 VideoMiniatureMarkupData, 8 VideoMiniatureMarkupData,
9 VideosListMarkupData 9 VideosListMarkupData
10} from '@shared/models' 10} from '@shared/models'
11import { ButtonMarkupComponent } from './button-markup.component'
12import { ChannelMiniatureMarkupComponent } from './channel-miniature-markup.component'
13import { DynamicElementService } from './dynamic-element.service' 11import { DynamicElementService } from './dynamic-element.service'
14import { EmbedMarkupComponent } from './embed-markup.component' 12import {
15import { PlaylistMiniatureMarkupComponent } from './playlist-miniature-markup.component' 13 ButtonMarkupComponent,
16import { VideoMiniatureMarkupComponent } from './video-miniature-markup.component' 14 ChannelMiniatureMarkupComponent,
17import { VideosListMarkupComponent } from './videos-list-markup.component' 15 EmbedMarkupComponent,
16 PlaylistMiniatureMarkupComponent,
17 VideoMiniatureMarkupComponent,
18 VideosListMarkupComponent
19} from './peertube-custom-tags'
18 20
19type BuilderFunction = (el: HTMLElement) => ComponentRef<any> 21type BuilderFunction = (el: HTMLElement) => ComponentRef<any>
20 22
@@ -30,10 +32,18 @@ export class CustomMarkupService {
30 'peertube-videos-list': el => this.videosListBuilder(el) 32 'peertube-videos-list': el => this.videosListBuilder(el)
31 } 33 }
32 34
35 private customMarkdownRenderer: (text: string) => Promise<HTMLElement>
36
33 constructor ( 37 constructor (
34 private dynamicElementService: DynamicElementService, 38 private dynamicElementService: DynamicElementService,
35 private markdown: MarkdownService 39 private markdown: MarkdownService
36 ) { } 40 ) {
41 this.customMarkdownRenderer = async (text: string) => this.buildElement(text)
42 }
43
44 getCustomMarkdownRenderer () {
45 return this.customMarkdownRenderer
46 }
37 47
38 async buildElement (text: string) { 48 async buildElement (text: string) {
39 const html = await this.markdown.customPageMarkdownToHTML(text, this.getSupportedTags()) 49 const html = await this.markdown.customPageMarkdownToHTML(text, this.getSupportedTags())
diff --git a/client/src/app/shared/shared-custom-markup/index.ts b/client/src/app/shared/shared-custom-markup/index.ts
index a9ac2516c..3bff3a914 100644
--- a/client/src/app/shared/shared-custom-markup/index.ts
+++ b/client/src/app/shared/shared-custom-markup/index.ts
@@ -1,4 +1,5 @@
1export * from './custom-markup.service' 1export * from './custom-markup.service'
2export * from './custom-markup-container.component'
2export * from './dynamic-element.service' 3export * from './dynamic-element.service'
3export * from './custom-markup-help.component' 4export * from './custom-markup-help.component'
4export * from './shared-custom-markup.module' 5export * from './shared-custom-markup.module'
diff --git a/client/src/app/shared/shared-custom-markup/button-markup.component.html b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.html
index 619bb9d8c..619bb9d8c 100644
--- a/client/src/app/shared/shared-custom-markup/button-markup.component.html
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.html
diff --git a/client/src/app/shared/shared-custom-markup/button-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.scss
index f43d6b400..f43d6b400 100644
--- a/client/src/app/shared/shared-custom-markup/button-markup.component.scss
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.scss
diff --git a/client/src/app/shared/shared-custom-markup/button-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.ts
index c0aab2edd..987b37d19 100644
--- a/client/src/app/shared/shared-custom-markup/button-markup.component.ts
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.ts
@@ -1,5 +1,5 @@
1import { Component, Input } from '@angular/core' 1import { Component, Input } from '@angular/core'
2import { VideoChannel } from '../shared-main' 2import { VideoChannel } from '../../shared-main'
3 3
4/* 4/*
5 * Markup component that creates a button 5 * Markup component that creates a button
diff --git a/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.html b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html
index da81006b9..da81006b9 100644
--- a/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.html
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html
diff --git a/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss
index 85018afe2..85018afe2 100644
--- a/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.scss
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss
diff --git a/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts
index 97bb5567e..25deafb80 100644
--- a/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.ts
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts
@@ -1,5 +1,5 @@
1import { Component, Input, OnInit } from '@angular/core' 1import { Component, Input, OnInit } from '@angular/core'
2import { VideoChannel, VideoChannelService } from '../shared-main' 2import { VideoChannel, VideoChannelService } from '../../shared-main'
3 3
4/* 4/*
5 * Markup component that creates a channel miniature only 5 * Markup component that creates a channel miniature only
diff --git a/client/src/app/shared/shared-custom-markup/embed-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/embed-markup.component.ts
index a854d89f6..a854d89f6 100644
--- a/client/src/app/shared/shared-custom-markup/embed-markup.component.ts
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/embed-markup.component.ts
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/index.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/index.ts
new file mode 100644
index 000000000..ee2a8f330
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/index.ts
@@ -0,0 +1,6 @@
1export * from './button-markup.component'
2export * from './channel-miniature-markup.component'
3export * from './embed-markup.component'
4export * from './playlist-miniature-markup.component'
5export * from './video-miniature-markup.component'
6export * from './videos-list-markup.component'
diff --git a/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.html b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.html
index 4e1d1a13f..4e1d1a13f 100644
--- a/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.html
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.html
diff --git a/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.scss
index 281cef726..281cef726 100644
--- a/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.scss
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.scss
diff --git a/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.ts
index 7aee450f1..eddc3636e 100644
--- a/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.ts
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.ts
@@ -1,6 +1,6 @@
1import { Component, Input, OnInit } from '@angular/core' 1import { Component, Input, OnInit } from '@angular/core'
2import { MiniatureDisplayOptions } from '../shared-video-miniature' 2import { MiniatureDisplayOptions } from '../../shared-video-miniature'
3import { VideoPlaylist, VideoPlaylistService } from '../shared-video-playlist' 3import { VideoPlaylist, VideoPlaylistService } from '../../shared-video-playlist'
4 4
5/* 5/*
6 * Markup component that creates a playlist miniature only 6 * Markup component that creates a playlist miniature only
diff --git a/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.html b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.html
index 9b4930b6d..9b4930b6d 100644
--- a/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.html
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.html
diff --git a/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.scss
index 81e265f29..81e265f29 100644
--- a/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.scss
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.scss
diff --git a/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.ts
index 79add0c3b..c833c56c7 100644
--- a/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.ts
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.ts
@@ -1,7 +1,7 @@
1import { Component, Input, OnInit } from '@angular/core' 1import { Component, Input, OnInit } from '@angular/core'
2import { AuthService } from '@app/core' 2import { AuthService } from '@app/core'
3import { Video, VideoService } from '../shared-main' 3import { Video, VideoService } from '../../shared-main'
4import { MiniatureDisplayOptions } from '../shared-video-miniature' 4import { MiniatureDisplayOptions } from '../../shared-video-miniature'
5 5
6/* 6/*
7 * Markup component that creates a video miniature only 7 * Markup component that creates a video miniature only
diff --git a/client/src/app/shared/shared-custom-markup/videos-list-markup.component.html b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.html
index 501f35e04..501f35e04 100644
--- a/client/src/app/shared/shared-custom-markup/videos-list-markup.component.html
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.html
diff --git a/client/src/app/shared/shared-custom-markup/videos-list-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss
index dcd931090..dcd931090 100644
--- a/client/src/app/shared/shared-custom-markup/videos-list-markup.component.scss
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss
diff --git a/client/src/app/shared/shared-custom-markup/videos-list-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts
index cc25d0a51..8d9e223da 100644
--- a/client/src/app/shared/shared-custom-markup/videos-list-markup.component.ts
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts
@@ -1,8 +1,8 @@
1import { Component, Input, OnInit } from '@angular/core' 1import { Component, Input, OnInit } from '@angular/core'
2import { AuthService } from '@app/core' 2import { AuthService } from '@app/core'
3import { VideoSortField } from '@shared/models' 3import { VideoSortField } from '@shared/models'
4import { Video, VideoService } from '../shared-main' 4import { Video, VideoService } from '../../shared-main'
5import { MiniatureDisplayOptions } from '../shared-video-miniature' 5import { MiniatureDisplayOptions } from '../../shared-video-miniature'
6 6
7/* 7/*
8 * Markup component list videos depending on criterias 8 * Markup component list videos depending on criterias
diff --git a/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts b/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts
index 66f6b98f6..dccd64709 100644
--- a/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts
+++ b/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts
@@ -5,15 +5,18 @@ import { SharedGlobalIconModule } from '../shared-icons'
5import { SharedMainModule } from '../shared-main' 5import { SharedMainModule } from '../shared-main'
6import { SharedVideoMiniatureModule } from '../shared-video-miniature' 6import { SharedVideoMiniatureModule } from '../shared-video-miniature'
7import { SharedVideoPlaylistModule } from '../shared-video-playlist' 7import { SharedVideoPlaylistModule } from '../shared-video-playlist'
8import { ButtonMarkupComponent } from './button-markup.component' 8import { CustomMarkupContainerComponent } from './custom-markup-container.component'
9import { ChannelMiniatureMarkupComponent } from './channel-miniature-markup.component'
10import { CustomMarkupHelpComponent } from './custom-markup-help.component' 9import { CustomMarkupHelpComponent } from './custom-markup-help.component'
11import { CustomMarkupService } from './custom-markup.service' 10import { CustomMarkupService } from './custom-markup.service'
12import { DynamicElementService } from './dynamic-element.service' 11import { DynamicElementService } from './dynamic-element.service'
13import { EmbedMarkupComponent } from './embed-markup.component' 12import {
14import { PlaylistMiniatureMarkupComponent } from './playlist-miniature-markup.component' 13 ButtonMarkupComponent,
15import { VideoMiniatureMarkupComponent } from './video-miniature-markup.component' 14 ChannelMiniatureMarkupComponent,
16import { VideosListMarkupComponent } from './videos-list-markup.component' 15 EmbedMarkupComponent,
16 PlaylistMiniatureMarkupComponent,
17 VideoMiniatureMarkupComponent,
18 VideosListMarkupComponent
19} from './peertube-custom-tags'
17 20
18@NgModule({ 21@NgModule({
19 imports: [ 22 imports: [
@@ -33,7 +36,8 @@ import { VideosListMarkupComponent } from './videos-list-markup.component'
33 EmbedMarkupComponent, 36 EmbedMarkupComponent,
34 VideosListMarkupComponent, 37 VideosListMarkupComponent,
35 ButtonMarkupComponent, 38 ButtonMarkupComponent,
36 CustomMarkupHelpComponent 39 CustomMarkupHelpComponent,
40 CustomMarkupContainerComponent
37 ], 41 ],
38 42
39 exports: [ 43 exports: [
@@ -43,7 +47,8 @@ import { VideosListMarkupComponent } from './videos-list-markup.component'
43 VideosListMarkupComponent, 47 VideosListMarkupComponent,
44 EmbedMarkupComponent, 48 EmbedMarkupComponent,
45 ButtonMarkupComponent, 49 ButtonMarkupComponent,
46 CustomMarkupHelpComponent 50 CustomMarkupHelpComponent,
51 CustomMarkupContainerComponent
47 ], 52 ],
48 53
49 providers: [ 54 providers: [
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.ts b/client/src/app/shared/shared-instance/instance-about-accordion.component.ts
index ab75c31ae..8e7bf2021 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.ts
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.ts
@@ -23,7 +23,6 @@ export class InstanceAboutAccordionComponent implements OnInit {
23 23
24 about: About 24 about: About
25 aboutHtml = { 25 aboutHtml = {
26 description: '',
27 terms: '', 26 terms: '',
28 codeOfConduct: '', 27 codeOfConduct: '',
29 moderationInformation: '', 28 moderationInformation: '',
diff --git a/client/src/app/shared/shared-instance/instance.service.ts b/client/src/app/shared/shared-instance/instance.service.ts
index 0a30446df..70e022178 100644
--- a/client/src/app/shared/shared-instance/instance.service.ts
+++ b/client/src/app/shared/shared-instance/instance.service.ts
@@ -40,7 +40,6 @@ export class InstanceService {
40 40
41 async buildHtml (about: About) { 41 async buildHtml (about: About) {
42 const html = { 42 const html = {
43 description: '',
44 terms: '', 43 terms: '',
45 codeOfConduct: '', 44 codeOfConduct: '',
46 moderationInformation: '', 45 moderationInformation: '',
diff --git a/client/src/app/shared/shared-instance/shared-instance.module.ts b/client/src/app/shared/shared-instance/shared-instance.module.ts
index 13c681ab8..77a64b538 100644
--- a/client/src/app/shared/shared-instance/shared-instance.module.ts
+++ b/client/src/app/shared/shared-instance/shared-instance.module.ts
@@ -1,6 +1,7 @@
1 1
2import { NgModule } from '@angular/core' 2import { NgModule } from '@angular/core'
3import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap' 3import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
4import { SharedCustomMarkupModule } from '../shared-custom-markup'
4import { SharedMainModule } from '../shared-main/shared-main.module' 5import { SharedMainModule } from '../shared-main/shared-main.module'
5import { FeatureBooleanComponent } from './feature-boolean.component' 6import { FeatureBooleanComponent } from './feature-boolean.component'
6import { InstanceAboutAccordionComponent } from './instance-about-accordion.component' 7import { InstanceAboutAccordionComponent } from './instance-about-accordion.component'
@@ -12,7 +13,8 @@ import { InstanceService } from './instance.service'
12@NgModule({ 13@NgModule({
13 imports: [ 14 imports: [
14 SharedMainModule, 15 SharedMainModule,
15 NgbAccordionModule 16 NgbAccordionModule,
17 SharedCustomMarkupModule
16 ], 18 ],
17 19
18 declarations: [ 20 declarations: [