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

components/rich-text/rich-text-definitions.tsx

@@ -0,0 +1,48 @@
+import { Components } from "tinacms/dist/rich-text";
+import BlockQuote, { BlockQuoteProps, blockQuoteSchema } from "./block-quote";
+import DateTime, { DateTimeProps, dateTimeSchema } from "./date-time";
+import { Prism } from "tinacms/dist/rich-text/prism";
+import React from "react";
+import Image, { ImageProps, imageSchema } from "./image";
+import { RichTextTemplate } from "@tinacms/schema-tools";
+import sanitizeHtml from "sanitize-html";
+
+const HTMLInline = (props: { value: string }) => {
+    const createSanitizedMarkup = (text: string) => {
+        return { __html: sanitizeHtml(text, {
+            allowedAttributes: {
+                div: [ "class" ]
+            }
+        }) };
+    };
+
+    return <span dangerouslySetInnerHTML={ createSanitizedMarkup(props.value) } />;
+};
+
+const richTextComponents: Components<{
+    BlockQuote: BlockQuoteProps;
+    DateTime: DateTimeProps;
+    Image: ImageProps;
+}> = {
+    code_block: (props) => <Prism { ...props } />,
+    html: HTMLInline,
+    img: (props) => (
+        <span className="flex items-center justify-center">
+            <img src={ props.url } alt={ props.alt } />
+        </span>
+    ),
+    li: (props) => (
+        <li>{ props.children }</li>
+    ),
+    BlockQuote,
+    DateTime,
+    Image
+};
+
+export const richTextTemplates: RichTextTemplate[] = [
+    dateTimeSchema,
+    blockQuoteSchema,
+    imageSchema
+];
+
+export default richTextComponents;