Separated inline components from post.tsx

components/inline/image.tsx

@@ -0,0 +1,48 @@
+import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
+import { Template } from "tinacms";
+import { anchoringSchema } from "../util/anchoring";
+import { RichTextTemplate } from "@tinacms/schema-tools";
+
+export interface ImageProps {
+    children: TinaMarkdownContent;
+    size: "small" | "medium" | "large";
+    imageUrl: string,
+    decorations: string,
+    position: "left" | "middle" | "right"
+}
+
+const Image = (props: ImageProps) => (
+    <div>
+        <img src={ props.imageUrl }/>
+    </div>);
+
+export const imageSchema: RichTextTemplate = {
+    name: "image",
+    label: "Image",
+    inline: true,
+    fields: [
+        {
+            name: "size",
+            label: "Size",
+            type: "string",
+            options: ["small", "medium", "large"]
+        },
+        {
+            name: "position",
+            label: "Position",
+            type: "string",
+            options: ["left", "middle", "right"]
+        },
+        {
+            name: "imageUrl",
+            label: "Image",
+            type: "image"
+        },
+        {
+            name: "decorations",
+            label: "Decorations",
+            type: "string"
+        }
+    ] };
+
+export default Image;