Merge commit from fork

* Rework frontend code interacting directly with DOM

Rework frontend code that uses user-supplied data to render things like
comments and notes. In places where using React's built-in sanitization
is possible, the feature is used. In other places, where some markup
might be necessary, DOMPurify is used to sanitize the HTML before
rendering it.

Solves: GHSA-rh3r-8pxm-hg4w

* Remove test post DOM rework

* fixup! Rework frontend code interacting directly with DOM

ui/src/artist/ArtistShow.jsx

@@ -1,4 +1,4 @@
-import React, { useState, createElement, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import { useMediaQuery, withWidth } from '@material-ui/core'
 import {
   useShowController,
@@ -53,9 +53,7 @@ const ArtistDetails = (props) => {
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('sm'))
   const [artistInfo, setArtistInfo] = useState()
 
-  const biography =
-    artistInfo?.biography?.replace(new RegExp('<.*>', 'g'), '') ||
-    record.biography
+  const biography = artistInfo?.biography || record.biography
 
   useEffect(() => {
     subsonic
@@ -72,16 +70,8 @@ const ArtistDetails = (props) => {
       })
   }, [record.id])
 
-  const component = isDesktop ? DesktopArtistDetails : MobileArtistDetails
-  return (
-    <>
-      {createElement(component, {
-        artistInfo,
-        record,
-        biography,
-      })}
-    </>
-  )
+  const Component = isDesktop ? DesktopArtistDetails : MobileArtistDetails
+  return <Component artistInfo={artistInfo} record={record} biography={biography} />
 }
 
 const ArtistShowLayout = (props) => {

ui/src/artist/DesktopArtistDetails.jsx

@@ -11,6 +11,7 @@ import Lightbox from 'react-image-lightbox'
 import ExpandInfoDialog from '../dialogs/ExpandInfoDialog'
 import AlbumInfo from '../album/AlbumInfo'
 import subsonic from '../subsonic'
+import { SafeHTML } from '../common/SafeHTML'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -172,7 +173,7 @@ const DesktopArtistDetails = ({ artistInfo, record, biography }) => {
                 variant={'body1'}
                 onClick={() => setExpanded(!expanded)}
               >
-                <span dangerouslySetInnerHTML={{ __html: biography }} />
+                <span><SafeHTML>{biography}</SafeHTML></span>
               </Typography>
             </Collapse>
           </CardContent>

ui/src/artist/MobileArtistDetails.jsx

@@ -7,6 +7,7 @@ import config from '../config'
 import { LoveButton, RatingField } from '../common'
 import Lightbox from 'react-image-lightbox'
 import subsonic from '../subsonic'
+import { SafeHTML } from '../common/SafeHTML'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -168,7 +169,7 @@ const MobileArtistDetails = ({ artistInfo, biography, record }) => {
       <div className={classes.biography}>
         <Collapse collapsedHeight={'1.5em'} in={expanded} timeout={'auto'}>
           <Typography variant={'body1'} onClick={() => setExpanded(!expanded)}>
-            <span dangerouslySetInnerHTML={{ __html: biography }} />
+            <span><SafeHTML>{biography}</SafeHTML></span>
           </Typography>
         </Collapse>
       </div>