Allow HTML Tags in Markdown text (#761)

Currently, our markdown sanitizer blocks every HTML tag.

Let's modify the sanitization pipeline such that it only occurs 
during editing in the markdown comment editor.

package.json

@@ -60,6 +60,7 @@
     "apollo-link-context": "^1.0.20",
     "core-js": "^3.16.4",
     "diff-match-patch": "^1.0.4",
+    "dompurify": "^2.3.1",
     "electron-log": "^4.4.1",
     "graphql": "^14.6.0",
     "graphql-tag": "2.11.0",
@@ -83,6 +84,7 @@
     "@graphql-codegen/typescript-operations": "^1.18.4",
     "@graphql-codegen/typescript-resolvers": "^1.20.0",
     "@octokit/graphql-schema": "^8.24.0",
+    "@types/dompurify": "^2.3.1",
     "@types/jasmine": "^3.8.2",
     "@types/jasminewd2": "2.0.8",
     "@types/node": "~12.12.6",

src/app/shared/comment-editor/comment-editor.component.html

@@ -27,7 +27,7 @@
     </mat-tab>
     <mat-tab label="Preview">
       <div class="tab-content" style="min-height: 228px">
-        <markdown #markdownArea *ngIf="commentField.value !== ''" [data]="commentField.value"></markdown>
+        <markdown #markdownArea *ngIf="commentField.value !== ''" [data]="sanitize(commentField.value)"></markdown>
         <div *ngIf="commentField.value ===''"> Nothing to preview. </div>
       </div>
     </mat-tab>

src/app/shared/comment-editor/comment-editor.component.ts

@@ -8,6 +8,7 @@ import {
 import { ErrorHandlingService } from '../../core/services/error-handling.service';
 import { HttpErrorResponse } from '@angular/common/http';
 import { ElectronService } from '../../core/services/electron.service';
+import * as DOMPurify from 'dompurify';
 
 const DISPLAYABLE_CONTENT = ['gif', 'jpeg', 'jpg', 'png'];
 const BYTES_PER_MB = 1000000;
@@ -82,6 +83,11 @@ export class CommentEditorComponent implements OnInit {
     event.preventDefault();
   }
 
+  // Sanitize markdown
+  sanitize(commentFieldValue) {
+    return DOMPurify.sanitize(commentFieldValue);
+  }
+
   // To enable file drop in non-input elements, the dragOver event must be cancelled.
   enableFileDrop(event) {
     event.preventDefault();

src/app/shared/lib/marked.ts

@@ -15,7 +15,7 @@ export function markedOptionsFactory(): MarkedOptions {
     tables: true,
     breaks: false,
     pedantic: false,
-    sanitize: true,
+    sanitize: false,
     smartLists: true,
     smartypants: false,
   };