22 files changed, 72 insertions, 23 deletions

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 @@
+import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core'
+import { CustomMarkupService } from './custom-markup.service'
+
+@Component({
+  selector: 'my-custom-markup-container',
+  templateUrl: './custom-markup-container.component.html'
+})
+export class CustomMarkupContainerComponent implements OnChanges {
+  @ViewChild('contentWrapper') contentWrapper: ElementRef<HTMLInputElement>
+
+  @Input() content: string
+
+  constructor (
+    private customMarkupService: CustomMarkupService
+  ) { }
+
+  async ngOnChanges () {
+    await this.buildElement()
+  }
+
+  private async buildElement () {
+    const element = await this.customMarkupService.buildElement(this.content)
+    this.contentWrapper.nativeElement.appendChild(element)
+  }
+
+}
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 {
   VideoMiniatureMarkupData,
   VideosListMarkupData
 } from '@shared/models'
-import { ButtonMarkupComponent } from './button-markup.component'
-import { ChannelMiniatureMarkupComponent } from './channel-miniature-markup.component'
 import { DynamicElementService } from './dynamic-element.service'
-import { EmbedMarkupComponent } from './embed-markup.component'
-import { PlaylistMiniatureMarkupComponent } from './playlist-miniature-markup.component'
-import { VideoMiniatureMarkupComponent } from './video-miniature-markup.component'
-import { VideosListMarkupComponent } from './videos-list-markup.component'
+import {
+  ButtonMarkupComponent,
+  ChannelMiniatureMarkupComponent,
+  EmbedMarkupComponent,
+  PlaylistMiniatureMarkupComponent,
+  VideoMiniatureMarkupComponent,
+  VideosListMarkupComponent
+} from './peertube-custom-tags'
 
 type BuilderFunction = (el: HTMLElement) => ComponentRef<any>
 
@@ -30,10 +32,18 @@ export class CustomMarkupService {
     'peertube-videos-list': el => this.videosListBuilder(el)
   }
 
+  private customMarkdownRenderer: (text: string) => Promise<HTMLElement>
+
   constructor (
     private dynamicElementService: DynamicElementService,
     private markdown: MarkdownService
-  ) { }
+  ) {
+    this.customMarkdownRenderer = async (text: string) => this.buildElement(text)
+  }
+
+  getCustomMarkdownRenderer () {
+    return this.customMarkdownRenderer
+  }
 
   async buildElement (text: string) {
     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 @@
 export * from './custom-markup.service'
+export * from './custom-markup-container.component'
 export * from './dynamic-element.service'
 export * from './custom-markup-help.component'
 export * 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 @@
 import { Component, Input } from '@angular/core'
-import { VideoChannel } from '../shared-main'
+import { VideoChannel } from '../../shared-main'
 
 /*
  * 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 @@
 import { Component, Input, OnInit } from '@angular/core'
-import { VideoChannel, VideoChannelService } from '../shared-main'
+import { VideoChannel, VideoChannelService } from '../../shared-main'
 
 /*
  * 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 @@
+export * from './button-markup.component'
+export * from './channel-miniature-markup.component'
+export * from './embed-markup.component'
+export * from './playlist-miniature-markup.component'
+export * from './video-miniature-markup.component'
+export * 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 @@
 import { Component, Input, OnInit } from '@angular/core'
-import { MiniatureDisplayOptions } from '../shared-video-miniature'
-import { VideoPlaylist, VideoPlaylistService } from '../shared-video-playlist'
+import { MiniatureDisplayOptions } from '../../shared-video-miniature'
+import { VideoPlaylist, VideoPlaylistService } from '../../shared-video-playlist'
 
 /*
  * 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 @@
 import { Component, Input, OnInit } from '@angular/core'
 import { AuthService } from '@app/core'
-import { Video, VideoService } from '../shared-main'
-import { MiniatureDisplayOptions } from '../shared-video-miniature'
+import { Video, VideoService } from '../../shared-main'
+import { MiniatureDisplayOptions } from '../../shared-video-miniature'
 
 /*
  * 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 @@
 import { Component, Input, OnInit } from '@angular/core'
 import { AuthService } from '@app/core'
 import { VideoSortField } from '@shared/models'
-import { Video, VideoService } from '../shared-main'
-import { MiniatureDisplayOptions } from '../shared-video-miniature'
+import { Video, VideoService } from '../../shared-main'
+import { MiniatureDisplayOptions } from '../../shared-video-miniature'
 
 /*
  * 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'
 import { SharedMainModule } from '../shared-main'
 import { SharedVideoMiniatureModule } from '../shared-video-miniature'
 import { SharedVideoPlaylistModule } from '../shared-video-playlist'
-import { ButtonMarkupComponent } from './button-markup.component'
-import { ChannelMiniatureMarkupComponent } from './channel-miniature-markup.component'
+import { CustomMarkupContainerComponent } from './custom-markup-container.component'
 import { CustomMarkupHelpComponent } from './custom-markup-help.component'
 import { CustomMarkupService } from './custom-markup.service'
 import { DynamicElementService } from './dynamic-element.service'
-import { EmbedMarkupComponent } from './embed-markup.component'
-import { PlaylistMiniatureMarkupComponent } from './playlist-miniature-markup.component'
-import { VideoMiniatureMarkupComponent } from './video-miniature-markup.component'
-import { VideosListMarkupComponent } from './videos-list-markup.component'
+import {
+  ButtonMarkupComponent,
+  ChannelMiniatureMarkupComponent,
+  EmbedMarkupComponent,
+  PlaylistMiniatureMarkupComponent,
+  VideoMiniatureMarkupComponent,
+  VideosListMarkupComponent
+} from './peertube-custom-tags'
 
 @NgModule({
   imports: [
@@ -33,7 +36,8 @@ import { VideosListMarkupComponent } from './videos-list-markup.component'
     EmbedMarkupComponent,
     VideosListMarkupComponent,
     ButtonMarkupComponent,
-    CustomMarkupHelpComponent
+    CustomMarkupHelpComponent,
+    CustomMarkupContainerComponent
   ],
 
   exports: [
@@ -43,7 +47,8 @@ import { VideosListMarkupComponent } from './videos-list-markup.component'
     VideosListMarkupComponent,
     EmbedMarkupComponent,
     ButtonMarkupComponent,
-    CustomMarkupHelpComponent
+    CustomMarkupHelpComponent,
+    CustomMarkupContainerComponent
   ],
 
   providers: [