Renamed inlineComponents to richTextComponents as this is closer to what they are

components/rich-text/image.tsx

@@ -0,0 +1,135 @@
+import { TinaMarkdownContent } from "tinacms/dist/rich-text";
+import { RichTextTemplate } from "@tinacms/schema-tools";
+import { tinaField } from "tinacms/dist/react";
+
+enum imageSize {
+    extraSmall = "extra-small",
+    small = "small",
+    medium = "medium",
+    large = "large"
+}
+
+enum imageDecorations {
+    default = "default",
+    noStyle = "no-style"
+}
+
+enum imagePosition {
+    left = "left",
+    middle = "middle",
+    right = "right"
+}
+
+export interface ImageProps {
+    children: TinaMarkdownContent;
+    size: imageSize;
+    imageUrl: string,
+    decorations: imageDecorations,
+    position: imagePosition,
+    inline: boolean,
+    alt: string
+}
+
+
+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.extraSmall:
+                return "xs-size";
+            case imageSize.small:
+                return "sm-size";
+            case imageSize.medium:
+                return "md-size";
+            case imageSize.large:
+                return "lg-size";
+            default:
+                return undefined;
+        }
+    };
+
+    const getPositionTypeClass = (): string | undefined => {
+        switch (props.position) {
+            case imagePosition.left:
+                return (props.inline) ? "float-left mr-2" : "flex justify-start";
+            case imagePosition.middle:
+                return "flex justify-center";
+            case imagePosition.right:
+                return (props.inline) ? "float-right ml-2" : "flex justify-end";
+            default:
+                return undefined;
+        }
+    };
+
+    const getClassNameWithSpace = (className: string): string => `${ className ? ` ${ className }` : "" }`;
+
+    const decorationTypeClass = getDecorationTypeClass();
+
+    const sizeTypeClass = getSizeTypeClass();
+
+    const positionTypeClass = getPositionTypeClass();
+
+    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>);
+};
+
+export const imageSchema: RichTextTemplate = {
+    name: "Image",
+    label: "Advanced Image",
+    ui: {
+        defaultItem: {
+            size: Object.values(imageSize)[0],
+            decorations: Object.values(imageDecorations)[0]
+        }
+    },
+    fields: [
+        {
+            name: "size",
+            label: "Size",
+            type: "string",
+            options: Object.values(imageSize)
+        },
+        {
+            name: "position",
+            label: "Position",
+            type: "string",
+            options: Object.values(imagePosition)
+        },
+        {
+            name: "imageUrl",
+            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"
+        }
+    ] };
+
+export default Image;