feat: add imagevault images to RTE

components/Current/Aside/Puff/index.tsx

@@ -6,6 +6,7 @@ import { Button } from "@scandic-hotels/design-system/current"
 import Image from "@/components/Image"
 import JsonToHtml from "@/components/JsonToHtml"
 
+import { renderOptions as currentRenderOption } from "./../../currentRenderOptions"
 import { renderOptions } from "./renderOptions"
 
 import styles from "./puff.module.css"
@@ -44,7 +45,7 @@ export default function Puff({
             <JsonToHtml
               embeds={[]}
               nodes={text.json.children}
-              renderOptions={renderOptions}
+              renderOptions={{ ...currentRenderOption, ...renderOptions }}
             />
             <div>
               <Button onPress={onClick}>{link.title || title}</Button>

components/Current/Blocks/Text.tsx

@@ -1,5 +1,7 @@
 import JsonToHtml from "@/components/JsonToHtml"
 
+import { renderOptions } from "./../currentRenderOptions"
+
 import type { TextProps } from "@/types/components/current/blocks/text"
 
 export default function Text({ text }: TextProps) {
@@ -7,6 +9,7 @@ export default function Text({ text }: TextProps) {
     <JsonToHtml
       embeds={text.content.embedded_itemsConnection.edges}
       nodes={text.content.json.children}
+      renderOptions={renderOptions}
     />
   )
 }

components/Current/Preamble/index.tsx

@@ -1,5 +1,6 @@
 import JsonToHtml from "@/components/JsonToHtml"
 
+import { renderOptions as currentRenderOption } from "./../currentRenderOptions"
 import Breadcrumbs from "./Breadcrumbs"
 import { renderOptions } from "./renderOptions"
 
@@ -27,7 +28,7 @@ export default function Preamble({
           <JsonToHtml
             embeds={preamble.text.embedded_itemsConnection.edges}
             nodes={preamble.text.json.children}
-            renderOptions={renderOptions}
+            renderOptions={{ ...currentRenderOption, ...renderOptions }}
           />
         ) : null}
       </section>

components/Current/currentRenderOptions.module.css

@@ -0,0 +1,6 @@
+.image {
+  height: auto;
+  margin-bottom: var(--Spacing-x2);
+  max-width: 100%;
+  object-fit: cover;
+}

components/Current/currentRenderOptions.tsx

@@ -0,0 +1,474 @@
+import Image from "@/components/Image"
+import Link from "@/components/TempDesignSystem/Link"
+
+import styles from "./currentRenderOptions.module.css"
+
+import type { EmbedByUid } from "@/types/components/jsontohtml"
+import { EmbedEnum } from "@/types/requests/utils/embeds"
+import type { Attributes } from "@/types/rte/attrs"
+import { RTEItemTypeEnum, RTETypeEnum } from "@/types/rte/enums"
+import type {
+  RTEDefaultNode,
+  RTENext,
+  RTENode,
+  RTERegularNode,
+} from "@/types/rte/node"
+import { RTEMarkType } from "@/types/rte/node"
+import type { RenderOptions } from "@/types/rte/option"
+
+function extractPossibleAttributes(attrs: Attributes | undefined) {
+  if (!attrs) return {}
+  const props: Record<string, any> = {}
+  if (attrs.id) {
+    props.id = attrs.id
+  }
+
+  if (attrs.class) {
+    props.className = attrs.class
+  } else if (attrs["class-name"]) {
+    props.className = attrs["class-name"]
+  } else if (attrs.classname) {
+    props.className = attrs.classname
+  } else if (attrs?.style?.["text-align"]) {
+    props.style = {
+      textAlign: attrs?.style?.["text-align"],
+    }
+  }
+
+  return props
+}
+
+export const renderOptions: RenderOptions = {
+  [RTETypeEnum.a]: (
+    node: RTERegularNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    if (node.attrs.url) {
+      const props = extractPossibleAttributes(node.attrs)
+      return (
+        <a
+          {...props}
+          href={node.attrs.url}
+          target={node.attrs.target ?? "_blank"}
+          key={node.uid}
+        >
+          {next(node.children, embeds, fullRenderOptions)}
+        </a>
+      )
+    }
+    return null
+  },
+
+  [RTETypeEnum.blockquote]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <blockquote key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </blockquote>
+    )
+  },
+
+  [RTETypeEnum.code]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <code key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </code>
+    )
+  },
+
+  [RTETypeEnum.embed]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    if (node.attrs.src) {
+      props.src = node.attrs.src
+    }
+    if (node.attrs.url) {
+      props.src = node.attrs.url
+    }
+    if (!props.src) {
+      return null
+    }
+    return (
+      <iframe key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </iframe>
+    )
+  },
+
+  [RTETypeEnum.h1]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <h1 key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </h1>
+    )
+  },
+
+  [RTETypeEnum.h2]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <h2 key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </h2>
+    )
+  },
+
+  [RTETypeEnum.h3]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <h3 key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </h3>
+    )
+  },
+
+  [RTETypeEnum.h4]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <h4 key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </h4>
+    )
+  },
+
+  [RTETypeEnum.h5]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <h5 key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </h5>
+    )
+  },
+
+  [RTETypeEnum.h6]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <h6 key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </h6>
+    )
+  },
+
+  [RTETypeEnum.hr]: () => {
+    return <hr />
+  },
+
+  [RTETypeEnum.li]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <li key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </li>
+    )
+  },
+
+  [RTETypeEnum.ol]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <ol key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </ol>
+    )
+  },
+
+  [RTETypeEnum.p]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <p {...props} key={node.uid}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </p>
+    )
+  },
+
+  [RTETypeEnum.reference]: (
+    node: RTENode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    if ("attrs" in node) {
+      const type = node.attrs.type
+      if (type === RTEItemTypeEnum.asset) {
+        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"],
+              }
+            : {}
+          return (
+            <Image
+              key={node.uid}
+              alt={alt}
+              className={styles.image}
+              height={image.node.dimension.height}
+              src={image?.node?.url}
+              width={image.node.dimension.width}
+              style={alignment}
+            />
+          )
+        }
+      } else {
+        const props = extractPossibleAttributes(node.attrs)
+        const href = node.attrs?.locale
+          ? `/${node.attrs.locale}${node.attrs.href}`
+          : node.attrs.href
+        return (
+          <Link {...props} href={href} key={node.uid}>
+            {next(node.children, embeds, fullRenderOptions)}
+          </Link>
+        )
+      }
+    }
+
+    return null
+  },
+
+  [RTETypeEnum.table]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <table key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </table>
+    )
+  },
+
+  [RTETypeEnum.thead]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <thead key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </thead>
+    )
+  },
+
+  [RTETypeEnum.tbody]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <tbody key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </tbody>
+    )
+  },
+
+  [RTETypeEnum.tfoot]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <tfoot key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </tfoot>
+    )
+  },
+
+  [RTETypeEnum.tr]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <tr key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </tr>
+    )
+  },
+
+  [RTETypeEnum.th]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <th key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </th>
+    )
+  },
+
+  [RTETypeEnum.td]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <td key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </td>
+    )
+  },
+
+  [RTETypeEnum.ul]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <ul key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </ul>
+    )
+  },
+
+  /** TextNode wrappers */
+  [RTEMarkType.bold]: (children: React.ReactNode) => {
+    return <strong>{children}</strong>
+  },
+
+  [RTEMarkType.italic]: (children: React.ReactNode) => {
+    return <em>{children}</em>
+  },
+
+  [RTEMarkType.underline]: (children: React.ReactNode) => {
+    return <u>{children}</u>
+  },
+
+  [RTEMarkType.strikethrough]: (children: React.ReactNode) => {
+    return <s>{children}</s>
+  },
+
+  [RTEMarkType.inlineCode]: (children: React.ReactNode) => {
+    return <span>{children}</span>
+  },
+
+  [RTEMarkType.subscript]: (children: React.ReactNode) => {
+    return <sub>{children}</sub>
+  },
+
+  [RTEMarkType.superscript]: (children: React.ReactNode) => {
+    return <sup>{children}</sup>
+  },
+
+  [RTEMarkType.break]: (children: React.ReactNode) => {
+    return (
+      <>
+        <br />
+        {children}
+      </>
+    )
+  },
+
+  [RTEMarkType.classnameOrId]: (
+    children: React.ReactNode,
+    className?: string,
+    id?: string
+  ) => {
+    let props = {
+      className,
+      id,
+    }
+    if (!className) {
+      delete props.className
+    }
+    if (!id) {
+      delete props.id
+    }
+    return (
+      <span key={id} {...props}>
+        {children}
+      </span>
+    )
+  },
+
+  /**
+   * Contentstack can return something called `default` as seen here in their
+   * own SDK (https://github.com/contentstack/contentstack-utils-javascript/blob/master/src/options/default-node-options.ts#L89)
+   */
+  default: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    return next(node.children, embeds, fullRenderOptions)
+  },
+}

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,