add html

Author: Alex Patterson

components/html-embed.tsx

@@ -0,0 +1,7 @@
+export default function HTMLEmbed(props: any) {
+  const { html } = props;
+  if (!html) {
+    return <div>Hello World!</div>;
+  }
+  return <div dangerouslySetInnerHTML={{ __html: html }} />
+}

components/portable-text.tsx

@@ -20,6 +20,8 @@ import BlockCode from "@/components/block-code";
 import TwitterEmbed from "@/components/twitter-embed";
 import CodePenEmbed from "@/components/codepen-embed";
 import CodeSandboxEmbed from "./codesandbox-embed";
+import HTMLEmbed from "@/components/html-embed";
+
 
 export default function CustomPortableText({
   className,
@@ -36,6 +38,7 @@ export default function CustomPortableText({
       codepen: ({ value }) => <CodePenEmbed {...value} />,
       codesandbox: ({ value }) => <CodeSandboxEmbed {...value} />,
       twitter: ({ value }) => <TwitterEmbed {...value} />,
+      htmlBlock: ({ value }) => <HTMLEmbed {...value} />,
     },
     block: {
       h5: ({ children }) => (

sanity/components/HTMLPreview.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+// TODO: Add stronger typing
+const HTMLPreview = (props: any) => {
+  const { html } = props;
+  if (!html) {
+    return <div>Add some HTML</div>;
+  }
+  return <div dangerouslySetInnerHTML={{ __html: html }} />
+};
+
+const preview = (props: any) => <HTMLPreview {...props} />;
+
+export default preview;

sanity/schemas/custom/html.ts

@@ -0,0 +1,27 @@
+import { defineType } from "sanity";
+import { FaHtml5 } from "react-icons/fa6";
+import preview from "../../components/HTMLPreview";
+
+export default defineType({
+  name: "htmlBlock",
+  type: "object",
+  icon: FaHtml5,
+  components: {
+    preview,
+  },
+  preview: {
+    select: {
+      html: "html",
+    },
+  },
+  fields: [
+    {
+      name: "html",
+      type: "text",
+      title: "Raw HTML",
+    },
+  ],
+  initialValue: {
+    html: "<div>Hello World</div>",
+  },
+});

sanity/schemas/partials/base.ts

@@ -12,6 +12,7 @@ import internalLink from "../custom/internalLink";
 // Custom schemas (need imported in sanity.config.ts)
 import codepen from "../custom/codepen";
 import codesandbox from "../custom/codesandbox";
+import html from "../custom/html";
 import twitter from "../custom/twitter-embed";
 
 const baseType = defineType({
@@ -94,6 +95,7 @@ const baseType = defineType({
         defineArrayMember(codepen),
         defineArrayMember(codesandbox),
         defineArrayMember(twitter),
+        defineArrayMember(html),
       ],
     }),
   ],