Started doing an Image component for inline text

components/blocks/content.tsx

@@ -10,11 +10,9 @@ import inlineComponents, { richTextTemplates } from "../inline/inline-definition
 
 export const Content: PageBlockFunction<PageBlocksContent> = ({ data }) => {
     return (
-        <Section color={ data.color }>
+        <Section>
             <Container
-                className={ `prose prose-lg ${
+                className={ "prose prose-lg" }
-                    data.color === "primary" ? "prose-primary" : "dark:prose-dark"
-                }` }
                 data-tina-field={ tinaField(data, "body") }
                 size="large"
                 width="medium"
@@ -42,16 +40,6 @@ export const contentBlockSchema: Template = {
             name: "body",
             templates: richTextTemplates,
             isBody: true
-        },
-        {
-            type: "string",
-            label: "Color",
-            name: "color",
-            options: [
-                { label: "Default", value: "default" },
-                { label: "Tint", value: "tint" },
-                { label: "Primary", value: "primary" }
-            ]
         }
     ]
 };

components/inline/image.tsx

@@ -1,14 +1,29 @@
-import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
+import { TinaMarkdownContent } from "tinacms/dist/rich-text";
-import { Template } from "tinacms";
-import { anchoringSchema } from "../util/anchoring";
 import { RichTextTemplate } from "@tinacms/schema-tools";
 
+enum imageSize {
+    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: "small" | "medium" | "large";
+    size: imageSize;
     imageUrl: string,
-    decorations: string,
+    decorations: imageDecorations,
-    position: "left" | "middle" | "right"
+    position: imagePosition
 }
 
 const Image = (props: ImageProps) => (
@@ -17,21 +32,27 @@ const Image = (props: ImageProps) => (
     </div>);
 
 export const imageSchema: RichTextTemplate = {
-    name: "image",
+    name: "Image",
     label: "Image",
     inline: true,
+    ui: {
+        defaultItem: {
+            size: Object.values(imageSize)[0],
+            decorations: Object.values(imageDecorations)[0]
+        }
+    },
     fields: [
         {
             name: "size",
             label: "Size",
             type: "string",
-            options: ["small", "medium", "large"]
+            options: Object.values(imageSize)
         },
         {
             name: "position",
             label: "Position",
             type: "string",
-            options: ["left", "middle", "right"]
+            options: Object.values(imagePosition)
         },
         {
             name: "imageUrl",
@@ -41,7 +62,8 @@ export const imageSchema: RichTextTemplate = {
         {
             name: "decorations",
             label: "Decorations",
-            type: "string"
+            type: "string",
+            options: Object.values(imageDecorations)
         }
     ] };
 

content/pages/home.mdx

@@ -9,8 +9,9 @@ blocks:
       text: Découvrez-en plus !
       linkTo: main-page
     _template: carousel
-  - body: |
+  - body: >
-      aezaeaezae<DateTime format="iso" />dzds
+      aezaeaezae<DateTime format="iso" />dzd <Image size="small" position="left"
+      imageUrl="/uploads/etoile.jpg" decorations="default" />
     _template: content
   - headline: Welcome to the Tina Starter
     text: >
@@ -85,6 +86,10 @@ url: home
 
 
 
+
+
+
+