Better art therapie page

components/inline/date-time.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import format from "date-fns/format";
-import { Template } from "tinacms";
 import { RichTextTemplate } from "@tinacms/schema-tools";
 
 export interface DateTimeProps {

components/inline/image.tsx

@@ -3,6 +3,7 @@ import { RichTextTemplate } from "@tinacms/schema-tools";
 import { tinaField } from "tinacms/dist/react";
 
 enum imageSize {
+    extraSmall = "extra-small",
     small = "small",
     medium = "medium",
     large = "large"
@@ -24,7 +25,9 @@ export interface ImageProps {
     size: imageSize;
     imageUrl: string,
     decorations: imageDecorations,
-    position: imagePosition
+    position: imagePosition,
+    inline: boolean,
+    alt: string
 }
 
 
@@ -42,6 +45,8 @@ const Image = (props: ImageProps) => {
 
     const getSizeTypeClass = (): string | undefined => {
         switch (props.size) {
+            case imageSize.extraSmall:
+                return "xs-size";
             case imageSize.small:
                 return "sm-size";
             case imageSize.medium:
@@ -56,11 +61,11 @@ const Image = (props: ImageProps) => {
     const getPositionTypeClass = (): string | undefined => {
         switch (props.position) {
             case imagePosition.left:
-                return "float-left mr-2";
+                return (props.inline) ? "float-left mr-2" : "flex justify-start";
             case imagePosition.middle:
                 return "flex justify-center";
             case imagePosition.right:
-                return "float-right ml-2";
+                return (props.inline) ? "float-right ml-2" : "flex justify-end";
             default:
                 return undefined;
         }
@@ -77,6 +82,7 @@ const Image = (props: ImageProps) => {
     return (<div className={ `not-prose inline-image${ getClassNameWithSpace(positionTypeClass) }` }>
         <img className={ `${ decorationTypeClass ? `${ decorationTypeClass }` : "" }${ getClassNameWithSpace(sizeTypeClass) }` }
             data-tina-field={ tinaField(props, "imageUrl") }
+            alt={ props.alt }
             src={ props.imageUrl }/>
     </div>);
 };
@@ -84,7 +90,6 @@ const Image = (props: ImageProps) => {
 export const imageSchema: RichTextTemplate = {
     name: "Image",
     label: "Image",
-    inline: true,
     ui: {
         defaultItem: {
             size: Object.values(imageSize)[0],
@@ -109,11 +114,21 @@ export const imageSchema: RichTextTemplate = {
             label: "Image",
             type: "image"
         },
+        {
+            name: "inline",
+            label: "Inline",
+            type: "boolean"
+        },
         {
             name: "decorations",
             label: "Decorations",
             type: "string",
             options: Object.values(imageDecorations)
+        },
+        {
+            name: "alt",
+            label: "Alt",
+            type: "string"
         }
     ] };
 

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
 };
 

components/inline/newsletter-signup.tsx

@@ -1,6 +1,5 @@
 import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
 import React from "react";
-import format from "date-fns/format";
 import { RichTextTemplate } from "@tinacms/schema-tools";
 
 export interface NewsletterSignupProps {