Better art therapie page

components/blocks/content.tsx

@@ -9,28 +9,21 @@ import { PageBlockFunction } from "../blocks-renderer";
 import inlineComponents, { richTextTemplates } from "../inline/inline-definitions";
 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) } />;
-};
-
 export const Content: PageBlockFunction<PageBlocksContent> = ({ data }) => {
     return (
         <Section>
             <Container
-                className={ "prose default-text-color" }
+                className={ "prose default-paragraph-style pb-4 pt-4" }
                 data-tina-field={ tinaField(data, "body") }
-                size="small"
+                size="custom"
                 width="large"
             >
-                <TinaMarkdown components={ { ...inlineComponents, html: props => <HTMLInline { ...props } /> } } content={ data.body } />
+                { data.withTitle ?
+                    <div className={ "main-title" }
+                        data-tina-field={ tinaField(data, "title") }>
+                        { data.title }
+                    </div> : null }
+                <TinaMarkdown components={ inlineComponents } content={ data.body } />
             </Container>
         </Section>
     );
@@ -46,6 +39,16 @@ export const contentBlockSchema: Template = {
         }
     },
     fields: [
+        {
+            type: "boolean",
+            label: "With Title",
+            name: "withTitle"
+        },
+        {
+            type: "string",
+            label: "Title",
+            name: "title"
+        },
         {
 
             type: "rich-text",