feat: anitize descriptions on help page

allow to customize description content by sanitizing it's content

closes #102

src/components/PageHelp/PageHelp.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import sanitizeHtml from 'sanitize-html';
 import HeroHeadline from "../HeroHeadline/HeroHeadline";
 import Fadeable from "../Fadeable/Fadeable";
 import SetTitle from "../SetTitle";
@@ -10,6 +11,13 @@ interface Props {
   onLeave: () => void;
 }
 
+const sanitize = (dirty: string, options: sanitizeHtml.IOptions = {}) => ({
+  __html: sanitizeHtml(
+    dirty,
+    options
+  )
+});
+
 const PageHelp: React.FC<Props> = ({ leaving, onLeave }) => {
   const { pageHelp } = useMessages();
 
@@ -22,19 +30,29 @@ const PageHelp: React.FC<Props> = ({ leaving, onLeave }) => {
         <HeroHeadline>{title}</HeroHeadline>
         <div className="fullpage-content">
           {paragraphs.map(({ headline, values }) => (
-            <React.Fragment key={headline}>
-              <h3>{headline}</h3>
-              {values.map((element, index) => (
-                <p key={index}>{element}</p>
-              ))}
-            </React.Fragment>
+              <React.Fragment key={headline}>
+                <h3>{headline}</h3>
+                {values.map((element, index) => {
+                  const content = sanitizeHtml(element, {
+                    allowedTags: ['b', 'i', 'em', 'strong', 'a', 'ul', 'ol', 'li'],
+                    allowedAttributes: {
+                      'a': ['href', 'target']
+                    },
+                  });
+                  console.log(content);
+                  return (
+                    <p key={index} dangerouslySetInnerHTML={sanitize(element)}></p>
+                  )
+                })
+              }
+              </React.Fragment>
           ))}
 
           <p>{quadrantsPreDescription ?? "The quadrants are:"}</p>
           <ul>
             {quadrants.map(({ name, description }) => (
               <li key={name}>
-                <strong>{name}:</strong> {description}
+                <strong>{name}:</strong> <span dangerouslySetInnerHTML={sanitize(description)}></span>
               </li>
             ))}
           </ul>
@@ -43,7 +61,7 @@ const PageHelp: React.FC<Props> = ({ leaving, onLeave }) => {
           <ul>
             {rings.map(({ name, description }) => (
               <li key={name}>
-                <strong>{name}:</strong> {description}
+                <strong>{name}:</strong> <span dangerouslySetInnerHTML={sanitize(description)}></span>
               </li>
             ))}
           </ul>