diff options
Diffstat (limited to 'client/src/app/shared/shared-custom-markup/custom-markup.service.ts')
-rw-r--r-- | client/src/app/shared/shared-custom-markup/custom-markup.service.ts | 36 |
1 files changed, 24 insertions, 12 deletions
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 cb1110593..15da94709 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 | |||
@@ -1,3 +1,4 @@ | |||
1 | import { first } from 'rxjs/operators' | ||
1 | import { ComponentRef, Injectable } from '@angular/core' | 2 | import { ComponentRef, Injectable } from '@angular/core' |
2 | import { MarkdownService } from '@app/core' | 3 | import { MarkdownService } from '@app/core' |
3 | import { | 4 | import { |
@@ -19,8 +20,9 @@ import { | |||
19 | VideoMiniatureMarkupComponent, | 20 | VideoMiniatureMarkupComponent, |
20 | VideosListMarkupComponent | 21 | VideosListMarkupComponent |
21 | } from './peertube-custom-tags' | 22 | } from './peertube-custom-tags' |
23 | import { CustomMarkupComponent } from './peertube-custom-tags/shared' | ||
22 | 24 | ||
23 | type AngularBuilderFunction = (el: HTMLElement) => ComponentRef<any> | 25 | type AngularBuilderFunction = (el: HTMLElement) => ComponentRef<CustomMarkupComponent> |
24 | type HTMLBuilderFunction = (el: HTMLElement) => HTMLElement | 26 | type HTMLBuilderFunction = (el: HTMLElement) => HTMLElement |
25 | 27 | ||
26 | @Injectable() | 28 | @Injectable() |
@@ -45,7 +47,10 @@ export class CustomMarkupService { | |||
45 | private dynamicElementService: DynamicElementService, | 47 | private dynamicElementService: DynamicElementService, |
46 | private markdown: MarkdownService | 48 | private markdown: MarkdownService |
47 | ) { | 49 | ) { |
48 | this.customMarkdownRenderer = async (text: string) => this.buildElement(text) | 50 | this.customMarkdownRenderer = (text: string) => { |
51 | return this.buildElement(text) | ||
52 | .then(({ rootElement }) => rootElement) | ||
53 | } | ||
49 | } | 54 | } |
50 | 55 | ||
51 | getCustomMarkdownRenderer () { | 56 | getCustomMarkdownRenderer () { |
@@ -60,23 +65,30 @@ export class CustomMarkupService { | |||
60 | 65 | ||
61 | for (const selector of Object.keys(this.htmlBuilders)) { | 66 | for (const selector of Object.keys(this.htmlBuilders)) { |
62 | rootElement.querySelectorAll(selector) | 67 | rootElement.querySelectorAll(selector) |
63 | .forEach((e: HTMLElement) => { | 68 | .forEach((e: HTMLElement) => { |
64 | try { | 69 | try { |
65 | const element = this.execHTMLBuilder(selector, e) | 70 | const element = this.execHTMLBuilder(selector, e) |
66 | // Insert as first child | 71 | // Insert as first child |
67 | e.insertBefore(element, e.firstChild) | 72 | e.insertBefore(element, e.firstChild) |
68 | } catch (err) { | 73 | } catch (err) { |
69 | console.error('Cannot inject component %s.', selector, err) | 74 | console.error('Cannot inject component %s.', selector, err) |
70 | } | 75 | } |
71 | }) | 76 | }) |
72 | } | 77 | } |
73 | 78 | ||
79 | const loadedPromises: Promise<boolean>[] = [] | ||
80 | |||
74 | for (const selector of Object.keys(this.angularBuilders)) { | 81 | for (const selector of Object.keys(this.angularBuilders)) { |
75 | rootElement.querySelectorAll(selector) | 82 | rootElement.querySelectorAll(selector) |
76 | .forEach((e: HTMLElement) => { | 83 | .forEach((e: HTMLElement) => { |
77 | try { | 84 | try { |
78 | const component = this.execAngularBuilder(selector, e) | 85 | const component = this.execAngularBuilder(selector, e) |
79 | 86 | ||
87 | if (component.instance.loaded) { | ||
88 | const p = component.instance.loaded.pipe(first()).toPromise() | ||
89 | loadedPromises.push(p) | ||
90 | } | ||
91 | |||
80 | this.dynamicElementService.injectElement(e, component) | 92 | this.dynamicElementService.injectElement(e, component) |
81 | } catch (err) { | 93 | } catch (err) { |
82 | console.error('Cannot inject component %s.', selector, err) | 94 | console.error('Cannot inject component %s.', selector, err) |
@@ -84,7 +96,7 @@ export class CustomMarkupService { | |||
84 | }) | 96 | }) |
85 | } | 97 | } |
86 | 98 | ||
87 | return rootElement | 99 | return { rootElement, componentsLoaded: Promise.all(loadedPromises) } |
88 | } | 100 | } |
89 | 101 | ||
90 | private getSupportedTags () { | 102 | private getSupportedTags () { |