Webatrice: update deps (#4700)

* save work

* fix reset styling

* fix toast reducer

* update non-react deps

* update react libraries

* remove jquery, use sanitize-html instead

* add missing change

* fix deps and dev deps

* update workflow to target Node 16

* run @mui/codemod to remove @mui/styles

* add default body font size

* update react 17 to 18

* declare enum before use

* add rel attr to links

* fix font sizing issue

* trailing commas

* refactor deep destructuring

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/websocket/utils/sanitizeHtml.util.ts

@@ -1,52 +1,17 @@
-import $ from 'jquery';
+import sanitize from 'sanitize-html';
 
 export function sanitizeHtml(msg: string): string {
-  const $div = $('<div>').html(msg);
-  const whitelist = {
-    tags: 'br,a,img,center,b,font',
-    attrs: ['href', 'color'],
-    href: ['http://', 'https://', 'ftp://', '//']
-  };
-
-  // remove all tags, attributes, and href protocols except some
-  enforceTagWhitelist($div, whitelist.tags);
-  enforceAttrWhitelist($div, whitelist.attrs);
-  enforceHrefWhitelist($div, whitelist.href);
-
-  return $div.html();
-}
-
-function enforceTagWhitelist($el: JQuery<HTMLElement>, tags: string): void {
-  $el.find('*').not(tags).each(function enforceTag() {
-    $(this).replaceWith(this.innerHTML);
-  });
-}
-
-function enforceAttrWhitelist($el: JQuery<HTMLElement>, attrs: string[]): void {
-  $el.find('*').each(function enforceAttribute() {
-    const attributes = this.attributes;
-    let i = attributes.length;
-    while (i--) {
-      const attr = attributes[i];
-      if ($.inArray(attr.name, attrs) === -1) {
-        this.removeAttributeNode(attr);
-      }
+  return sanitize(msg, {
+    allowedTags: ['br', 'a', 'img', 'center', 'b', 'font'],
+    allowedAttributes: {
+      '*': ['href', 'color', 'rel', 'target'],
+    },
+    allowedSchemes: ['http', 'https', 'ftp'],
+    transformTags: {
+      'a': sanitize.simpleTransform('a', {
+        target: '_blank',
+        rel: 'noopener noreferrer',
+      }),
     }
   });
 }
-
-function enforceHrefWhitelist($el: JQuery<HTMLElement>, hrefs: string[]): void {
-  $el.find('[href]').each(function enforceHref() {
-    const $_el = $(this);
-    const attributeValue = $_el.attr('href');
-
-    for (let protocol in hrefs) {
-      if (attributeValue.indexOf(hrefs[protocol]) === 0) {
-        $_el.attr('target', '_blank');
-        return;
-      }
-    }
-
-    $_el.removeAttr('href');
-  });
-}