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",

components/blocks/main-title.tsx

@@ -1,23 +1,24 @@
 import React from "react";
 import { Container } from "../util/container";
 import { Section } from "../util/section";
-import { TinaMarkdown } from "tinacms/dist/rich-text";
 import type { Template } from "tinacms";
-import { PageBlocksContent } from "../../tina/__generated__/types";
+import { PageBlocksMainTitle } from "../../tina/__generated__/types";
 import { tinaField } from "tinacms/dist/react";
 import { PageBlockFunction } from "../blocks-renderer";
-import inlineComponents, { richTextTemplates } from "../inline/inline-definitions";
 
-export const MainTitle: PageBlockFunction<PageBlocksContent> = ({ data }) => {
+export const MainTitle: PageBlockFunction<PageBlocksMainTitle> = ({ data }) => {
     return (
         <Section>
             <Container
-                className={ "" }
-                data-tina-field={ tinaField(data, "body") }
-                size="large"
-                width="medium"
+                className={ "prose default-text-color my-2 main-title" }
+
+                size="custom"
+                width="large"
             >
-                <TinaMarkdown components={ inlineComponents } content={ data.body } />
+                <div className={ "main-title" }
+                    data-tina-field={ tinaField(data, "title") }>
+                    { data.title }
+                </div>
             </Container>
         </Section>
     );
@@ -29,17 +30,14 @@ export const mainTitleBlockSchema: Template = {
     ui: {
         previewSrc: "/blocks/content.png",
         defaultItem: {
-            body: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede."
+            title: "Lorem ipsum"
         }
     },
     fields: [
         {
-
-            type: "rich-text",
-            label: "Body",
-            name: "body",
-            templates: richTextTemplates,
-            isBody: true
+            type: "string",
+            label: "Title",
+            name: "title"
         }
     ]
 };