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) => {