Better art therapie page

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