Added a way to add html to content

components/blocks/content.tsx

@@ -7,17 +7,30 @@ import { PageBlocksContent } from "../../tina/__generated__/types";
 import { tinaField } from "tinacms/dist/react";
 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 prose-lg" }
+                className={ "" }
                 data-tina-field={ tinaField(data, "body") }
                 size="large"
                 width="medium"
             >
-                <TinaMarkdown components={ inlineComponents } content={ data.body } />
+                <TinaMarkdown components={ { ...inlineComponents, html: props => <HTMLInline { ...props } /> } } content={ data.body } />
             </Container>
         </Section>
     );

components/blocks/main-title.tsx

@@ -0,0 +1,45 @@
+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 { tinaField } from "tinacms/dist/react";
+import { PageBlockFunction } from "../blocks-renderer";
+import inlineComponents, { richTextTemplates } from "../inline/inline-definitions";
+
+export const MainTitle: PageBlockFunction<PageBlocksContent> = ({ data }) => {
+    return (
+        <Section>
+            <Container
+                className={ "" }
+                data-tina-field={ tinaField(data, "body") }
+                size="large"
+                width="medium"
+            >
+                <TinaMarkdown components={ inlineComponents } content={ data.body } />
+            </Container>
+        </Section>
+    );
+};
+
+export const mainTitleBlockSchema: Template = {
+    name: "mainTitle",
+    label: "Main title",
+    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."
+        }
+    },
+    fields: [
+        {
+
+            type: "rich-text",
+            label: "Body",
+            name: "body",
+            templates: richTextTemplates,
+            isBody: true
+        }
+    ]
+};

components/inline/image.tsx

@@ -26,10 +26,41 @@ export interface ImageProps {
     position: imagePosition
 }
 
-const Image = (props: ImageProps) => (
-    <div>
-        <img src={ props.imageUrl }/>
+
+const Image = (props: ImageProps) => {
+    const getDecorationTypeClass = (): string | undefined => {
+        switch (props.decorations) {
+            case imageDecorations.default:
+                return "default-border";
+            case imageDecorations.noStyle:
+                return undefined;
+            default:
+                return undefined;
+        }
+    };
+
+    const getSizeTypeClass = (): string | undefined => {
+        switch (props.size) {
+            case imageSize.small:
+                return "sm-size";
+            case imageSize.medium:
+                return "md-size";
+            case imageSize.large:
+                return "lg-size";
+            default:
+                return undefined;
+        }
+    };
+
+    const decorationTypeClass = getDecorationTypeClass();
+
+    const sizeTypeClass = getSizeTypeClass();
+
+    return (<div className={ "inline-image" }>
+        <img className={ `${ decorationTypeClass ? `${ decorationTypeClass }` : "" }${ sizeTypeClass ? ` ${ sizeTypeClass }` : "" }` }
+            src={ props.imageUrl }/>
     </div>);
+};
 
 export const imageSchema: RichTextTemplate = {
     name: "Image",

components/layout/layout.tsx

@@ -28,7 +28,7 @@ export const Layout = ({
                 />
             </Head>
             <div
-                className={ "min-h-screen flex flex-col font-nunito" }
+                className={ "min-h-screen flex flex-col" }
             >
                 <Header data={ data?.header } />
                 <div className="flex-1 text-gray-800 bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-1000 flex flex-col">