Merging sanitize-html for artist bios

src/js/views/Album.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
+import sanitizeHtml from 'sanitize-html';
+
 import ErrorMessage from '../components/ErrorMessage';
 import TrackList from '../components/TrackList';
 import Thumbnail from '../components/Thumbnail';
@@ -332,10 +334,10 @@ class Album extends React.Component {
           <section className="wiki">
             <h4 className="wiki__title">{i18n('album.wiki.title')}</h4>
             <div className="wiki__text">
-              <p>{album.wiki}</p>
+              <p dangerouslySetInnerHTML={{ __html: sanitizeHtml(album.wiki) }}></p>
               <br />
               <div className="mid_grey-text">
-                <I18n path="album.wiki.published" params={{ date: album.wiki_publish_date }} />
+                <I18n path="album.wiki.published" date={album.wiki_publish_date} />
               </div>
             </div>
           </section>

src/js/views/Artist.js

@@ -2,6 +2,9 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Route, Switch } from 'react-router-dom';
+
+import sanitizeHtml from 'sanitize-html';
+
 import ErrorMessage from '../components/ErrorMessage';
 import Link from '../components/Link';
 import TrackList from '../components/TrackList';
@@ -452,7 +455,7 @@ class Artist extends React.Component {
             <br />
             {artist.biography && (
               <div className="biography-text">
-                <p>{artist.biography}</p>
+                <p dangerouslySetInnerHTML={{ __html: sanitizeHtml(artist.biography) }}></p>
                 <br />
                 <div className="mid_grey-text">
                   <I18n path="artist.about.wiki.published" date={artist.biography_publish_date} />

src/scss/views/_album.scss

@@ -38,6 +38,11 @@ main .album-view {
     padding-top: 40px;
   }
 
+  .wiki__text {
+      overflow-wrap: break-word;
+      white-space: pre-wrap;
+  }
+
   @include responsive($bp_medium) {
     padding-top: 0;
     padding-left: 10px;

src/scss/views/_artist.scss

@@ -66,6 +66,7 @@
 
         .biography-text {
           overflow-wrap: break-word;
+	  white-space: pre-wrap;
         }
       }
     }