Use <img> tags for rendered LaTeX content (#114)

The output type is SVG, so using the PDF renderer isn't useful. Also, ensure Angular always trusts our blob:// URLs.
UST-QuAntiL · Oct 26, 2020 · a4c13f4 · a4c13f4
1 parent c490e58
commit a4c13f4
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 26 deletions.
diff --git a/src/app/components/generics/dialogs/latex-editor-dialog.component.html b/src/app/components/generics/dialogs/latex-editor-dialog.component.html
@@ -1,9 +1,9 @@
 <mat-dialog-content class="dialog-container">
-  <h1 mat-dialog-title id="title" >{{data.title}}</h1>
+  <h1 mat-dialog-title id="title">{{ data.title }}</h1>
   <mat-card class="card-container">
     <div>Default LaTeX packages:</div>
     <div *ngFor="let defaultPackage of defaultLatexPackages">
-      <mat-label style="font-weight: bold">{{defaultPackage}}</mat-label>
+      <mat-label style="font-weight: bold;">{{ defaultPackage }}</mat-label>
     </div>
   </mat-card>
   <mat-card class="card-container">
@@ -36,11 +36,42 @@ <h1 mat-dialog-title id="title" >{{data.title}}</h1>
   </mat-card>
   <mat-card class="card-container">
     <mat-label class="input-label">Rendered result</mat-label>
-    <pdf-viewer *ngIf="urlToRenderedPdfBlob" [src]="urlToRenderedPdfBlob" [render-text]="true" style="display: block"></pdf-viewer>
+    <img
+      *ngIf="urlToRenderedBlob"
+      [src]="urlToRenderedBlob"
+      style="display: block;"
+    />
   </mat-card>
   <mat-card class="card-container">
-    <button color="red" outline="true" type="button" mdbBtn class="control-button cancel-button" (click)="dialogRef.close()">Cancel</button>
-    <button color="orange" outline="true" type="button" mdbBtn class="control-button preview-button" (click)="onGenerateLatex()">Preview</button>
-    <button color="green" outline="true" type="button" mdbBtn class="control-button submit-button" (click)="onSubmit()">Submit</button>
+    <button
+      color="red"
+      outline="true"
+      type="button"
+      mdbBtn
+      class="control-button cancel-button"
+      (click)="dialogRef.close()"
+    >
+      Cancel
+    </button>
+    <button
+      color="orange"
+      outline="true"
+      type="button"
+      mdbBtn
+      class="control-button preview-button"
+      (click)="onGenerateLatex()"
+    >
+      Preview
+    </button>
+    <button
+      color="green"
+      outline="true"
+      type="button"
+      mdbBtn
+      class="control-button submit-button"
+      (click)="onSubmit()"
+    >
+      Submit
+    </button>
   </mat-card>
 </mat-dialog-content>
diff --git a/src/app/components/generics/dialogs/latex-editor-dialog.component.ts b/src/app/components/generics/dialogs/latex-editor-dialog.component.ts
@@ -1,4 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import {
   MAT_DIALOG_DATA,
   MatDialog,
@@ -17,9 +18,10 @@ export class LatexEditorDialogComponent implements OnInit {
   inputText = '';
   latexPackages = '';
   defaultLatexPackages = [];
-  urlToRenderedPdfBlob: string;
+  urlToRenderedBlob: SafeUrl;
 
   constructor(
+    private sanitizer: DomSanitizer,
     public dialogRef: MatDialogRef<LatexEditorDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: DialogData,
     public dialog: MatDialog,
@@ -51,14 +53,14 @@ export class LatexEditorDialogComponent implements OnInit {
   }
 
   onGenerateLatex(): void {
-    this.urlToRenderedPdfBlob = undefined;
+    this.urlToRenderedBlob = undefined;
     this.utilService
       .renderLatexContentAndReturnUrlToPdfBlob(
         this.inputText,
         this.latexPackages
       )
-      .subscribe((response) => {
-        this.urlToRenderedPdfBlob = response;
+      .subscribe((url) => {
+        this.urlToRenderedBlob = this.sanitizer.bypassSecurityTrustUrl(url);
       });
   }
 }

diff --git a/src/app/components/generics/property-input/text-input.component.html b/src/app/components/generics/property-input/text-input.component.html
@@ -1,9 +1,13 @@
 <div>
-  <mat-slide-toggle *ngIf="latexActive && multiline"
-                    [(ngModel)]="toggleLatex"
-                    (ngModelChange)="toggleLatexFlag()"
-                    style="float: right; font-size: x-small"
-  >{{toggleLatex ? 'Disable LaTeX rendering' : 'Enable LaTeX rendering'}}</mat-slide-toggle>
+  <mat-slide-toggle
+    *ngIf="latexActive && multiline"
+    [(ngModel)]="toggleLatex"
+    (ngModelChange)="toggleLatexFlag()"
+    style="float: right; font-size: x-small;"
+    >{{
+      toggleLatex ? 'Disable LaTeX rendering' : 'Enable LaTeX rendering'
+    }}</mat-slide-toggle
+  >
 
   <mat-form-field>
     <mat-label class="input-label">{{ name }}</mat-label>
@@ -28,8 +32,10 @@
       matInput
     ></textarea>
     <button
-      *ngIf="(!toggleLatex && (inputValue !== value)) ||
-      (toggleLatex && (packedLatexValue !== value))"
+      *ngIf="
+        (!toggleLatex && inputValue !== value) ||
+        (toggleLatex && packedLatexValue !== value)
+      "
       mat-button
       matSuffix
       mat-icon-button
@@ -58,11 +64,16 @@
       matSuffix
       mat-icon-button
       aria-label="Clear"
-      (click)="openLatexEditor()">
-      <mat-icon svgIcon="latex" style="background-size: 24px 24px"></mat-icon>
+      (click)="openLatexEditor()"
+    >
+      <mat-icon svgIcon="latex" style="background-size: 24px 24px;"></mat-icon>
     </button>
   </mat-form-field>
 </div>
 <div>
-  <pdf-viewer *ngIf="urlToRenderedPdfBlob" [src]="urlToRenderedPdfBlob" [render-text]="true" style="display: block"></pdf-viewer>
+  <img
+    *ngIf="urlToRenderedBlob"
+    [src]="urlToRenderedBlob"
+    style="display: block;"
+  />
 </div>
diff --git a/src/app/components/generics/property-input/text-input.component.ts b/src/app/components/generics/property-input/text-input.component.ts
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { MatIconRegistry } from '@angular/material/icon';
-import { DomSanitizer } from '@angular/platform-browser';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { LatexEditorDialogComponent } from '../dialogs/latex-editor-dialog.component';
 import { UtilService } from '../../../util/util.service';
 import { DoProvider } from './abstract-value-accessor';
@@ -27,7 +27,7 @@ export class TextInputComponent implements OnInit {
   inputValue: string;
   toggleLatex = false;
   packedLatexValue: string;
-  urlToRenderedPdfBlob: string;
+  urlToRenderedBlob: SafeUrl;
 
   constructor(
     private utilService: UtilService,
@@ -84,7 +84,7 @@ export class TextInputComponent implements OnInit {
       this.inputValue = this.utilService.getUnpackedLatexText(
         this.packedLatexValue
       );
-      this.urlToRenderedPdfBlob = null;
+      this.urlToRenderedBlob = null;
       if (this.inputValue !== this.value) {
         this.inputChanged();
       }
@@ -116,8 +116,8 @@ export class TextInputComponent implements OnInit {
   private renderLatexContent(latexValue: string): void {
     this.utilService
       .renderPackedDataAndReturnUrlToPdfBlob(latexValue)
-      .subscribe((blobUrl) => {
-        this.urlToRenderedPdfBlob = blobUrl;
+      .subscribe((url) => {
+        this.urlToRenderedBlob = this.sanitizer.bypassSecurityTrustUrl(url);
       });
   }
 }
diff --git a/src/app/util/util.service.ts b/src/app/util/util.service.ts
@@ -206,7 +206,7 @@ export class UtilService {
       output: this.latexRendererServiceConstants.getDefaultRenderOutput(),
     };
     return this.latexRendererService.renderLatex({ body: latexBody }).pipe(
-      map((response: string[]) => {
+      map((response) => {
         if (response) {
           const latexBlob = this.latexRendererServiceConstants.createBlobFromRenderedResult(
             response