DigitaleBibliothek / Frontend / 674a4829ce5

Commits

Yury Bondarenko authored 674a4829ce5 22 Oct 2022

96252: Even more lazy dsMarkdown

src/app/shared/utils/markdown.pipe.ts

Modified

--
+import { Inject, InjectionToken, Pipe, PipeTransform } from '@angular/core';
--
+import MarkdownIt from 'markdown-it';
--
+import * as sanitizeHtml from 'sanitize-html';
-+
+import { Inject, InjectionToken, Pipe, PipeTransform, SecurityContext } from '@angular/core';
-2
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-3
+import { environment } from '../../../environments/environment';
-4
-+
+const markdownItLoader = async () => (await import('markdown-it')).default;
-+
+type LazyMarkdownIt = ReturnType<typeof markdownItLoader>;
-+
+const MARKDOWN_IT = new InjectionToken<LazyMarkdownIt>(
-+
+  'Lazily loaded MarkdownIt',
-+
+  { providedIn: 'root', factory: markdownItLoader }
-+
+);
-+
-12
+const mathjaxLoader = async () => (await import('markdown-it-mathjax3')).default;
-13
+type Mathjax = ReturnType<typeof mathjaxLoader>;
-14
+const MATHJAX = new InjectionToken<Mathjax>(
-15
+  'Lazily loaded mathjax',
-16
+  { providedIn: 'root', factory: mathjaxLoader }
-17
+);
-18
-+
+const sanitizeHtmlLoader = async () => (await import('sanitize-html') as any).default;
-+
+type SanitizeHtml = ReturnType<typeof sanitizeHtmlLoader>;
-+
+const SANITIZE_HTML = new InjectionToken<SanitizeHtml>(
-+
+  'Lazily loaded sanitize-html',
-+
+  { providedIn: 'root', factory: sanitizeHtmlLoader }
-+
+);
-+
-26
+/**
-27
+ * Pipe for rendering markdown and mathjax.
-28
+ * - markdown will only be rendered if {@link MarkdownConfig#enabled} is true
-29
+ * - mathjax will only be rendered if both {@link MarkdownConfig#enabled} and {@link MarkdownConfig#mathjax} are true
-30
+ *
-31
+ * This pipe should be used on the 'innerHTML' attribute of a component, in combination with an async pipe.
-32
+ * Example usage:
-33
+ *   <span class="example" [innerHTML]="'# title' | dsMarkdown | async"></span>
-34
+ * Result:
-35
+ *   <span class="example">
-36
+ *     <h1>title</h1>
-37
+ *   </span>
-38
+ */
-39
+@Pipe({
-40
+  name: 'dsMarkdown'
-41
+})
-42
+export class MarkdownPipe implements PipeTransform {
-43
-44
+  constructor(
-45
+    protected sanitizer: DomSanitizer,
-+
+    @Inject(MARKDOWN_IT) private markdownIt: LazyMarkdownIt,
-47
+    @Inject(MATHJAX) private mathjax: Mathjax,
-+
+    @Inject(SANITIZE_HTML) private sanitizeHtml: SanitizeHtml,
-49
+  ) {
-50
+  }
-51
-52
+  async transform(value: string): Promise<SafeHtml> {
-53
+    if (!environment.markdown.enabled) {
-54
+      return value;
-55
+    }
-+
+    const MarkdownIt = await this.markdownIt;
-57
+    const md = new MarkdownIt({
-58
+      html: true,
-59
+      linkify: true,
-60
+    });
-+
-+
+    let html: string;
-63
+    if (environment.markdown.mathjax) {
-64
+      md.use(await this.mathjax);
--
+    }
--
+    return this.sanitizer.bypassSecurityTrustHtml(
--
+      sanitizeHtml(md.render(value), {
-+
+      const sanitizeHtml = await this.sanitizeHtml
-+
+      html = sanitizeHtml(md.render(value), {
-67
+        // sanitize-html doesn't let through SVG by default, so we extend its allowlists to cover MathJax SVG
-68
+        allowedTags: [
-69
+          ...sanitizeHtml.defaults.allowedTags,
-70
+          'mjx-container', 'svg', 'g', 'path', 'rect', 'text'
-71
+        ],
-72
+        allowedAttributes: {
-73
+          ...sanitizeHtml.defaults.allowedAttributes,
-74
+          'mjx-container': [
-75
+            'class', 'style', 'jax'
-76
+          ],
-86
+          rect: [
-87
+            'width', 'height', 'x', 'y', 'transform', 'style'
-88
+          ],
-89
+          text: [
-90
+            'transform', 'font-size'
-91
+          ]
-92
+        },
-93
+        parser: {
-94
+          lowerCaseAttributeNames: false,
-95
+        },
--
+      })
--
+    );
-+
+      });
-+
+    } else {
-+
+      html = this.sanitizer.sanitize(SecurityContext.HTML, md.render(value));
-+
+    }
-+
-+
+    return this.sanitizer.bypassSecurityTrustHtml(html)
-102
+  }
-103
+}

Frontend

Commits

Jira Issues

Add shortcut