Updated containers and the image inline to be closer to the original site

components/inline/image.tsx

@@ -1,5 +1,6 @@
 import { TinaMarkdownContent } from "tinacms/dist/rich-text";
 import { RichTextTemplate } from "@tinacms/schema-tools";
+import { tinaField } from "tinacms/dist/react";
 
 enum imageSize {
     small = "small",
@@ -52,12 +53,30 @@ const Image = (props: ImageProps) => {
         }
     };
 
+    const getPositionTypeClass = (): string | undefined => {
+        switch (props.position) {
+            case imagePosition.left:
+                return "float-left";
+            case imagePosition.middle:
+                return "flex justify-center";
+            case imagePosition.right:
+                return "float-right";
+            default:
+                return undefined;
+        }
+    };
+
+    const getClassNameWithSpace = (className: string): string => `${ className ? ` ${ className }` : "" }`;
+
     const decorationTypeClass = getDecorationTypeClass();
 
     const sizeTypeClass = getSizeTypeClass();
 
-    return (<div className={ "inline-image" }>
-        <img className={ `${ decorationTypeClass ? `${ decorationTypeClass }` : "" }${ sizeTypeClass ? ` ${ sizeTypeClass }` : "" }` }
+    const positionTypeClass = getPositionTypeClass();
+
+    return (<div className={ `not-prose inline-image${ getClassNameWithSpace(positionTypeClass) }` }>
+        <img className={ `${ decorationTypeClass ? `${ decorationTypeClass }` : "" }${ getClassNameWithSpace(sizeTypeClass) }` }
+            data-tina-field={ tinaField(props, "imageUrl") }
             src={ props.imageUrl }/>
     </div>);
 };