Fix escapeHTML not working properly and create allowHTML parameter for Notifications. (#3168) rizwanmustafa

* Modify config to allow hot reload on html

* Now inject monkeytype.js bundle only in development mode

* Remove asset injunction in production

* Modify method of escapeHTML

* add parameter for allowing html

* Allow html for the banner

* remove debug log

frontend/src/ts/elements/notifications.ts

@@ -30,10 +30,11 @@ class Notification {
     customIcon?: string,
     closeCallback = (): void => {
       //
-    }
+    },
+    allowHTML?: boolean
   ) {
     this.type = type;
-    this.message = Misc.escapeHTML(message);
+    this.message = allowHTML ? message : Misc.escapeHTML(message);
     this.level = level;
     if (type === "banner") {
       this.duration = duration as number;
@@ -224,7 +225,8 @@ export function add(
   duration?: number,
   customTitle?: string,
   customIcon?: string,
-  closeCallback?: () => void
+  closeCallback?: () => void,
+  allowHTML?: boolean
 ): void {
   // notificationHistory.push(
   new Notification(
@@ -234,7 +236,8 @@ export function add(
     duration,
     customTitle,
     customIcon,
-    closeCallback
+    closeCallback,
+    allowHTML
   ).show();
   // );
 }
@@ -244,7 +247,8 @@ export function addBanner(
   level = -1,
   customIcon = "bullhorn",
   sticky = false,
-  closeCallback?: () => void
+  closeCallback?: () => void,
+  allowHTML?: boolean
 ): void {
   // notificationHistory.push(
   new Notification(
@@ -254,7 +258,8 @@ export function addBanner(
     sticky ? -1 : 0,
     undefined,
     customIcon,
-    closeCallback
+    closeCallback,
+    allowHTML
   ).show();
   // );
 }

frontend/src/ts/elements/psa.ts

@@ -24,6 +24,8 @@ async function getLatest(): Promise<MonkeyTypes.PSA[]> {
       "PSA request failed. If this issue persists the server might be experiencing unexpected down time. <a target= '_blank' href='https://monkeytype.instatus.com/'>Check the status page</a> or <a target= '_blank' href='https://twitter.com/monkeytypegame'>Twitter</a> for more information.",
       -1,
       "exclamation-triangle",
+      true,
+      undefined,
       true
     );
     return [];

frontend/src/ts/utils/misc.ts

@@ -782,20 +782,15 @@ export function escapeRegExp(str: string): string {
   return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
-const unescapedToEscapedHtml: Record<string, string> = {
-  "&": "&amp;",
-  "<": "&lt;",
-  ">": "&gt;",
-  '"': "&quot;",
-  "'": "&#x27;",
-  "/": "&#x2F;",
-};
-
 export function escapeHTML(str: string): string {
-  return Object.entries(unescapedToEscapedHtml).reduce(
-    (previous, [current, value]) => previous.replace(current, value),
-    str
-  );
+  str = str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+
+  return str;
 }
 
 export function cleanTypographySymbols(textToClean: string): string {