diff --git a/src/app/core/shared/client-math.service.ts b/src/app/core/shared/client-math.service.ts index 2fde521ba9..0630ec3246 100644 --- a/src/app/core/shared/client-math.service.ts +++ b/src/app/core/shared/client-math.service.ts @@ -31,7 +31,7 @@ export class ClientMathService extends MathService { protected mathJaxOptions = { tex: { - inlineMath: [['$', '$'], ['\\(', '\\)']], + inlineMath: [['$', '$'], ['$$', '$$'], ['\\(', '\\)']], }, svg: { fontCache: 'global', @@ -108,7 +108,7 @@ export class ClientMathService extends MathService { */ render(element: HTMLElement) { if (environment.markdown.mathjax) { - this._window.nativeWindow.MathJax.typesetPromise([element]); + return (window as any).MathJax.typesetPromise([element]) as Promise; } } } diff --git a/src/app/core/shared/math.service.spec.ts b/src/app/core/shared/math.service.spec.ts index cc0b2814f2..75d8bf1024 100644 --- a/src/app/core/shared/math.service.spec.ts +++ b/src/app/core/shared/math.service.spec.ts @@ -22,8 +22,8 @@ export class MockMathService extends MathService { return of(true); } - render(element: HTMLElement): void { - return; + render(element: HTMLElement): Promise { + return Promise.resolve(); } } diff --git a/src/app/core/shared/math.service.ts b/src/app/core/shared/math.service.ts index c06ce06220..909e039564 100644 --- a/src/app/core/shared/math.service.ts +++ b/src/app/core/shared/math.service.ts @@ -15,5 +15,5 @@ export abstract class MathService { protected abstract registerMathJaxAsync(config: MathJaxConfig): Promise; abstract ready(): Observable; - abstract render(element: HTMLElement): void; + abstract render(element: HTMLElement): Promise; } diff --git a/src/app/core/shared/server-math.service.ts b/src/app/core/shared/server-math.service.ts index 75fa775fee..62070dbafc 100644 --- a/src/app/core/shared/server-math.service.ts +++ b/src/app/core/shared/server-math.service.ts @@ -47,6 +47,6 @@ export class ServerMathService extends MathService { } render(element: HTMLElement) { - return; + return Promise.resolve(); } } diff --git a/src/app/shared/utils/markdown.directive.ts b/src/app/shared/utils/markdown.directive.ts index a38b079ffd..0540e25cc5 100644 --- a/src/app/shared/utils/markdown.directive.ts +++ b/src/app/shared/utils/markdown.directive.ts @@ -55,30 +55,40 @@ export class MarkdownDirective implements OnInit, OnDestroy { async render(value: string, forcePreview = false): Promise { if (isEmpty(value) || (!environment.markdown.enabled && !forcePreview)) { - return value; + this.el.innerHTML = value; + return; + } else { + if (environment.markdown.mathjax) { + this.renderMathjaxThenMarkdown(value); + } else { + this.renderMarkdown(value); + } } + } + + private renderMathjaxThenMarkdown(value: string) { + const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, value); + this.el.innerHTML = sanitized; + this.mathService.ready().pipe( + filter((ready) => ready), + take(1), + takeUntil(this.alive$), + ).subscribe(() => { + this.mathService.render(this.el)?.then(_ => { + this.renderMarkdown(this.el.innerHTML, true); + }); + }); + } + + private async renderMarkdown(value: string, alreadySanitized = false) { const MarkdownIt = await this.markdownIt; const md = new MarkdownIt({ html: true, linkify: true, }); - const html = this.sanitizer.sanitize(SecurityContext.HTML, md.render(value)); + const html = alreadySanitized ? md.render(value) : this.sanitizer.sanitize(SecurityContext.HTML, md.render(value)); this.el.innerHTML = html; - - if (environment.markdown.mathjax) { - this.renderMathjax(); - } - } - - private renderMathjax() { - this.mathService.ready().pipe( - filter((ready) => ready), - take(1), - takeUntil(this.alive$), - ).subscribe(() => { - this.mathService.render(this.el); - }); } ngOnDestroy() {