Merge branch 'master' into feat/stacks

package.json

@@ -27,7 +27,7 @@
     "test:e2e": "yarn workspace test-e2e start",
     "lint": "ng lint",
     "lint:docs": "cspell \"documentation/docs/**/*.md\" --config \"cspell.config.yml\"",
-    "analyse": "ng build --configuration=production --stats-json && npx webpack-bundle-analyzer www/stats.json",
+    "analyse": "yarn workflow optimise_build && ng build --configuration=production --stats-json && npx webpack-bundle-analyzer www/stats.json",
     "version": "yarn workspace scripts start version",
     "format": "yarn prettier . --write --log-level silent"
   },
@@ -139,6 +139,7 @@
     "@types/marked": "^2.0.3",
     "@types/node": "^18.18.13",
     "@types/nouislider": "^15.0.0",
+    "@types/qrcode": "^1.5.5",
     "@types/swiper": "~4.2.0",
     "@typescript-eslint/eslint-plugin": "^6.13.1",
     "@typescript-eslint/parser": "^6.13.1",

src/app/shared/components/template/components/latex/latex.component.ts

@@ -1,9 +1,25 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, computed } from "@angular/core";
 import { TemplateBaseComponent } from "src/app/shared/components/template/components/base";
 
+import { DomSanitizer } from "@angular/platform-browser";
+
+import DOMPurify from "dompurify";
+import { latexToHtml } from "./latex.utils";
+
 @Component({
   selector: "template-latex-component",
-  template: ` <span [innerHTML]="this._row.value | latex"> </span> `,
+  template: ` <span [innerHTML]="parsedLatex()"> </span> `,
 })
 /** Render text that includes LaTeX equations **/
-export class TmplLatexComponent extends TemplateBaseComponent {}
+export class TmplLatexComponent extends TemplateBaseComponent {
+  public parsedLatex = computed(() => {
+    const value = this.value();
+    const html = latexToHtml(value);
+    const sanitizedHtml = DOMPurify.sanitize(html);
+    return this.domSanitizer.bypassSecurityTrustHtml(sanitizedHtml);
+  });
+
+  constructor(private domSanitizer: DomSanitizer) {
+    super();
+  }
+}

src/app/shared/components/template/components/latex/latex.utils.ts

@@ -0,0 +1,48 @@
+import katex from "katex";
+import { extractMath, Segment } from "extract-math";
+
+export function latexToHtml(latexInput: string) {
+  let segments: Segment[] = [];
+  if (latexInput && typeof latexInput === "string" && latexInput.length >= 0) {
+    const dollarSignDelimitedSegments = extractMath(latexInput, {
+      delimiters: {
+        inline: ["$", "$"],
+        display: ["$$", "$$"],
+      },
+    });
+
+    segments =
+      dollarSignDelimitedSegments.length > 1
+        ? dollarSignDelimitedSegments
+        : extractMath(latexInput, {
+            delimiters: {
+              inline: ["\\(", "\\)"],
+              display: ["\\[", "\\]"],
+            },
+          });
+
+    let htmlString = `<p>`;
+
+    // detect whether input string contains a LaTeX 'math' segment, and is therefore in LaTeX's 'paragraph mode', else is itself in 'math mode'
+    if (segments.some((segment) => segment.math)) {
+      for (const segment of segments) {
+        if (segment.math) {
+          htmlString += katex.renderToString(segment.raw, {
+            displayMode: segment.type === "display",
+            throwOnError: true,
+          });
+        } else {
+          htmlString += segment.value;
+        }
+      }
+    } else {
+      htmlString += katex.renderToString(latexInput, {
+        throwOnError: true,
+      });
+    }
+    htmlString += `</p>`;
+
+    return htmlString;
+  }
+  return latexInput;
+}

src/app/shared/components/template/components/qr-code/qr-code.component.html

@@ -1,3 +1,3 @@
 <div class="image-wrapper">
-  <img src="{{ _row.value | qrCode | async }}" alt="{{ _row.value }}" />
+  <img src="{{ qrCodeData() | async }}" [alt]="_row.value" />
 </div>

src/app/shared/components/template/components/qr-code/qr-code.component.ts

@@ -1,9 +1,23 @@
-import { Component } from "@angular/core";
+import { Component, computed, effect } from "@angular/core";
+import QRCode from "qrcode";
 import { TemplateBaseComponent } from "../base";
 
 @Component({
   selector: "plh-qr-code",
   templateUrl: "./qr-code.component.html",
   styleUrls: ["./qr-code.component.scss"],
 })
-export class TmplQRCodeComponent extends TemplateBaseComponent {}
+export class TmplQRCodeComponent extends TemplateBaseComponent {
+  /**
+   * Computed signal used to generate QR code from value input
+   *
+   * NOTE - as computed signals do not accept async values this method
+   * returns a promise which should be handled via async pipe
+   * */
+  public qrCodeData = computed((): Promise<string> => {
+    const value = this.value();
+    if (value && typeof value === "string") {
+      return QRCode.toDataURL(value);
+    }
+  });
+}

src/app/shared/components/template/pipes/index.ts

@@ -2,13 +2,11 @@ import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 
 import { FilterDisplayComponentPipe } from "./filter-display-component.pipe";
-import { LatexPipe } from "./latex.pipe";
 import { MarkdownPipe } from "./markdown.pipe";
 import { NumberingPipe } from "./numbering.pipe";
 import { PLHAssetPipe } from "./plh-asset.pipe";
 import { StyleListPipe } from "./styleList.pipe";
 import { TranslatePipe } from "./translate.pipe";
-import { QRCodePipe } from "./qr-code.pipe";
 
 const TEMPLATE_PIPES = [
   FilterDisplayComponentPipe,
@@ -17,8 +15,6 @@ const TEMPLATE_PIPES = [
   NumberingPipe,
   StyleListPipe,
   TranslatePipe,
-  LatexPipe,
-  QRCodePipe,
 ];
 
 @NgModule({

src/app/shared/utils/utils.ts

@@ -208,7 +208,7 @@ export function getBooleanParamFromTemplateRow(
   _default: boolean
 ): boolean {
   const params = row.parameter_list || {};
-  return params.hasOwnProperty(name) ? params[name] === "true" : _default;
+  return params.hasOwnProperty(name) ? parseBoolean(params[name]) : _default;
 }
 
 export function getAnswerListParamFromTemplateRow(

yarn.lock

@@ -7869,6 +7869,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/qrcode@npm:^1.5.5":
+  version: 1.5.5
+  resolution: "@types/qrcode@npm:1.5.5"
+  dependencies:
+    "@types/node": "*"
+  checksum: d92c1d3e77406bf13a03ec521b2ffb1ac99b2e6ea3a17cad670f2610f62e1293554c57e4074bb2fd4e9369f475f863b69e0ae8c543cb049c4a3c1b0c2d92522a
+  languageName: node
+  linkType: hard
+
 "@types/qs@npm:*":
   version: 6.9.11
   resolution: "@types/qs@npm:6.9.11"
@@ -15131,6 +15140,7 @@ __metadata:
     "@types/marked": ^2.0.3
     "@types/node": ^18.18.13
     "@types/nouislider": ^15.0.0
+    "@types/qrcode": ^1.5.5
     "@types/swiper": ~4.2.0
     "@typescript-eslint/eslint-plugin": ^6.13.1
     "@typescript-eslint/parser": ^6.13.1