Add HTML message rendering support (#22)

Sanitize and render HTML in messages, as the avail bustracker does.

Closes #21

Author: benmelz

package-lock.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@fontsource/open-sans": "*",
     "@vitejs/plugin-react": "*",
+    "dompurify": "*",
     "prop-types": "*",
     "react": "*",
     "react-dom": "*",

package.json

@@ -1,11 +1,12 @@
+import DOMPurify from 'dompurify';
 import PropTypes from 'prop-types';
 import classNames from './PublicMessage.module.css';
 
 /**
  * Component that displays a message within a {@link PublicMessageBoard}.
  *
  * @constructor
- * @param {String} message - the text content of the message to be displayed.
+ * @param {String} message - the text content of the message to be displayed (HTML Supported).
  * @param {Number} priority - the "priority" level specified by Avail.
  * @param {Array} routes - list of routes affected.
  * @return {JSX.Element}
@@ -32,9 +33,8 @@ export default function PublicMessage({message, priority, routes}) {
       <td
         className={`${classNames['priority']} ${classNames[`priority-${priority}`]}`}
         colSpan={(routes) ? 1 : 2}
-      >
-        {message}
-      </td>
+        dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(message)}}
+      />
     </tr>
   );
 }

src/components/PublicMessage.jsx

@@ -3,7 +3,7 @@ import {useCallback, useEffect, useMemo, useState} from 'react';
 /**
  * @typedef PublicMessageObject
  * @property {Number} id - a unique id for the message, from InfoPoint
- * @property {String} message - the text for a public message.
+ * @property {String} message - the text for a public message (HTML Supported).
  * @property {Number} priority - the priority of the message specified by Avail.
  * @property {[RouteObject]|null} routes - list of routes affected by this message, null if message is general.
  * @property {Number|null} sortOrder - a pre-set sort order determined by the routes, if applicable.