feat: add imagevault images to RTE

components/JsonToHtml/index.tsx

@@ -10,5 +10,10 @@ export default function JsonToHtml({
   if (!Array.isArray(nodes) || !nodes.length) {
     return null
   }
-  return <>{nodesToHtml(nodes, embeds, renderOptions).filter(Boolean)}</>
+  console.log({ nodes })
+  return (
+    <section style={{ display: "grid", gap: "var(--Spacing-x3" }}>
+      {nodesToHtml(nodes, embeds, renderOptions).filter(Boolean)}
+    </section>
+  )
 }

components/JsonToHtml/jsontohtml.module.css

@@ -1,6 +1,8 @@
 .image {
-  height: auto;
-  margin-bottom: var(--Spacing-x2);
   max-width: 100%;
+  width: 100%;
+  height: 365px;
   object-fit: cover;
+  border-radius: var(--Corner-radius-Medium);
+  padding: var(--Spacing-x1) var(--Spacing-x0);
 }

components/JsonToHtml/renderOptions.tsx

@@ -1,14 +1,23 @@
 import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
+import { insertResponseToImageVaultAsset } from "@/utils/imageVault"
+
+import Divider from "../TempDesignSystem/Divider"
+import BiroScript from "../TempDesignSystem/Text/BiroScript"
+import Body from "../TempDesignSystem/Text/Body"
+import Caption from "../TempDesignSystem/Text/Caption"
+import Subtitle from "../TempDesignSystem/Text/Subtitle"
+import Title from "../TempDesignSystem/Text/Title"
 
 import styles from "./jsontohtml.module.css"
 
 import type { EmbedByUid } from "@/types/components/jsontohtml"
 import { EmbedEnum } from "@/types/requests/utils/embeds"
-import type { Attributes } from "@/types/rte/attrs"
+import type { Attributes, RTEImageVaultAttrs } from "@/types/rte/attrs"
 import { RTEItemTypeEnum, RTETypeEnum } from "@/types/rte/enums"
 import type {
   RTEDefaultNode,
+  RTEImageNode,
   RTENext,
   RTENode,
   RTERegularNode,
@@ -69,9 +78,9 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <blockquote key={node.uid} {...props}>
+      <BiroScript key={node.uid} {...props}>
         {next(node.children, embeds, fullRenderOptions)}
-      </blockquote>
+      </BiroScript>
     )
   },
 
@@ -120,9 +129,9 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <h1 key={node.uid} {...props}>
+      <Title key={node.uid} {...props} level="h1">
         {next(node.children, embeds, fullRenderOptions)}
-      </h1>
+      </Title>
     )
   },
 
@@ -134,9 +143,9 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <h2 key={node.uid} {...props}>
+      <Title key={node.uid} {...props} level="h2">
         {next(node.children, embeds, fullRenderOptions)}
-      </h2>
+      </Title>
     )
   },
 
@@ -148,9 +157,9 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <h3 key={node.uid} {...props}>
+      <Title key={node.uid} {...props} level="h3">
         {next(node.children, embeds, fullRenderOptions)}
-      </h3>
+      </Title>
     )
   },
 
@@ -162,9 +171,9 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <h4 key={node.uid} {...props}>
+      <Title key={node.uid} {...props} level="h4">
         {next(node.children, embeds, fullRenderOptions)}
-      </h4>
+      </Title>
     )
   },
 
@@ -176,9 +185,9 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <h5 key={node.uid} {...props}>
+      <Title key={node.uid} {...props} level="h5">
         {next(node.children, embeds, fullRenderOptions)}
-      </h5>
+      </Title>
     )
   },
 
@@ -190,14 +199,14 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <h6 key={node.uid} {...props}>
-        {next(node.children, embeds, fullRenderOptions)}
-      </h6>
+      <Subtitle asChild key={node.uid} {...props}>
+        <h6>{next(node.children, embeds, fullRenderOptions)}</h6>
+      </Subtitle>
     )
   },
 
   [RTETypeEnum.hr]: () => {
-    return <hr />
+    return <Divider />
   },
 
   [RTETypeEnum.li]: (
@@ -236,9 +245,9 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <p {...props} key={node.uid}>
+      <Body {...props} key={node.uid}>
         {next(node.children, embeds, fullRenderOptions)}
-      </p>
+      </Body>
     )
   },
 
@@ -254,11 +263,7 @@ export const renderOptions: RenderOptions = {
         const image = embeds?.[node?.attrs?.["asset-uid"]]
         if (image?.node.__typename === EmbedEnum.SysAsset) {
           const alt = image?.node?.title ?? node.attrs.alt
-          const alignment = node.attrs?.style?.["text-align"]
-            ? {
-                alignSelf: node.attrs?.style?.["text-align"],
-              }
-            : {}
+          const props = extractPossibleAttributes(node.attrs)
           return (
             <Image
               key={node.uid}
@@ -267,7 +272,7 @@ export const renderOptions: RenderOptions = {
               height={image.node.dimension.height}
               src={image?.node?.url}
               width={image.node.dimension.width}
-              style={alignment}
+              {...props}
             />
           )
         }
@@ -287,6 +292,36 @@ export const renderOptions: RenderOptions = {
     return null
   },
 
+  [RTETypeEnum.ImageVault]: (node: RTEImageNode) => {
+    if ("attrs" in node) {
+      const type = node.type
+      if (type === RTETypeEnum.ImageVault) {
+        const attrs = node.attrs as RTEImageVaultAttrs
+        const image = insertResponseToImageVaultAsset(attrs)
+        const alt = image.meta.alt ?? image.title
+
+        const height = parseInt(attrs.height.replaceAll("px", ""))
+        const width = parseInt(attrs.width.replaceAll("px", ""))
+        const props = extractPossibleAttributes(attrs)
+        return (
+          <section key={node.uid}>
+            <Image
+              alt={alt}
+              className={styles.image}
+              height={height}
+              src={image.url}
+              width={width}
+              {...props}
+            />
+            <Caption>{image.meta.caption}</Caption>
+          </section>
+        )
+      }
+    }
+
+    return null
+  },
+
   [RTETypeEnum.table]: (
     node: RTEDefaultNode,
     embeds: EmbedByUid,