Fix custom markup

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-custom-markup / custom-markup-container.component.ts

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
index 4e802b14dd0f20795294922dd20fc25d2645a460..b2ee2d8f28de1c72ff3ab86faa79cce54b14ba13 100644 (file)
--- 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
@@ -6,9 +6,9 @@ import { CustomMarkupService } from './custom-markup.service'
   templateUrl: './custom-markup-container.component.html'
 })
 export class CustomMarkupContainerComponent implements OnChanges {
-  @ViewChild('contentWrapper') contentWrapper: ElementRef<HTMLInputElement>
+  @ViewChild('contentWrapper', { static: true }) contentWrapper: ElementRef<HTMLInputElement>
 
-  @Input() content: string
+  @Input() content: string | HTMLDivElement
 
   displayed = false
 
@@ -17,17 +17,23 @@ export class CustomMarkupContainerComponent implements OnChanges {
   ) { }
 
   async ngOnChanges () {
-    await this.buildElement()
+    await this.rebuild()
   }
 
-  private async buildElement () {
-    if (!this.content) return
+  private async rebuild () {
+    if (this.content instanceof HTMLDivElement) {
+      return this.loadElement(this.content)
+    }
 
     const { rootElement, componentsLoaded } = await this.customMarkupService.buildElement(this.content)
-    this.contentWrapper.nativeElement.appendChild(rootElement)
-
     await componentsLoaded
 
+    return this.loadElement(rootElement)
+  }
+
+  private loadElement (el: HTMLDivElement) {
+    this.contentWrapper.nativeElement.appendChild(el)
+
     this.displayed = true
   }
 }