Better art therapie page

components/inline/inline-definitions.tsx

@@ -6,6 +6,19 @@ import { Prism } from "tinacms/dist/rich-text/prism";
 import React from "react";
 import Image, { ImageProps, imageSchema } from "./image";
 import { RichTextTemplate } from "@tinacms/schema-tools";
+import sanitizeHtml from "sanitize-html";
+
+const HTMLInline = (props: { value: string }) => {
+    const createSanitizedMarkup = (text: string) => {
+        return { __html: sanitizeHtml(text, {
+            allowedAttributes: {
+                div: [ "class" ]
+            }
+        }) };
+    };
+
+    return <span dangerouslySetInnerHTML={ createSanitizedMarkup(props.value) } />;
+};
 
 const inlineComponents: Components<{
     BlockQuote: BlockQuoteProps;
@@ -14,14 +27,18 @@ const inlineComponents: Components<{
     Image: ImageProps;
 }> = {
     code_block: (props) => <Prism { ...props } />,
-    BlockQuote,
-    DateTime,
-    NewsletterSignup,
+    html: HTMLInline,
     img: (props) => (
         <span className="flex items-center justify-center">
             <img src={ props.url } alt={ props.alt } />
         </span>
     ),
+    li: (props) => (
+        <li>{ props.children }</li>
+    ),
+    BlockQuote,
+    DateTime,
+    NewsletterSignup,
     Image
 };