chore: run prettier --write .

components/JsonToHtml/index.tsx

@@ -2,7 +2,11 @@ import { nodesToHtml } from "./utils"
 
 import type { JsonToHtmlProps } from "@/types/components/jsontohtml"
 
-export default function JsonToHtml({ embeds, nodes, renderOptions = {} }: JsonToHtmlProps) {
+export default function JsonToHtml({
+  embeds,
+  nodes,
+  renderOptions = {},
+}: JsonToHtmlProps) {
   if (!Array.isArray(nodes) || !nodes.length) {
     return null
   }

components/JsonToHtml/jsontohtml.module.css

@@ -3,4 +3,4 @@
   margin-bottom: 16px;
   max-width: 100%;
   object-fit: cover;
-}
+}

components/JsonToHtml/renderOptions.tsx

@@ -9,7 +9,12 @@ import styles from "./jsontohtml.module.css"
 
 import type { Attributes } from "@/types/rte/attrs"
 import type { EmbedByUid } from "@/types/components/jsontohtml"
-import type { RTENext, RTEDefaultNode, RTENode, RTERegularNode } from "@/types/rte/node"
+import type {
+  RTENext,
+  RTEDefaultNode,
+  RTENode,
+  RTERegularNode,
+} from "@/types/rte/node"
 import type { RenderOptions } from "@/types/rte/option"
 
 function extractPossibleAttributes(attrs: Attributes) {
@@ -30,7 +35,12 @@ function extractPossibleAttributes(attrs: Attributes) {
 }
 
 export const renderOptions: RenderOptions = {
-  [RTETypeEnum.a]: (node: RTERegularNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+  [RTETypeEnum.a]: (
+    node: RTERegularNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     if (node.attrs.url) {
       const props = extractPossibleAttributes(node.attrs)
       return (
@@ -47,7 +57,12 @@ export const renderOptions: RenderOptions = {
     return null
   },
 
-  [RTETypeEnum.blockquote]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+  [RTETypeEnum.blockquote]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
       <blockquote key={node.uid} {...props}>
@@ -56,7 +71,12 @@ export const renderOptions: RenderOptions = {
     )
   },
 
-  [RTETypeEnum.code]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+  [RTETypeEnum.code]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
       <code key={node.uid} {...props}>
@@ -65,7 +85,12 @@ export const renderOptions: RenderOptions = {
     )
   },
 
-  [RTETypeEnum.embed]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+  [RTETypeEnum.embed]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     const props = extractPossibleAttributes(node.attrs)
     if (node.attrs.src) {
       props.src = node.attrs.src
@@ -83,7 +108,12 @@ export const renderOptions: RenderOptions = {
     )
   },
 
-  [RTETypeEnum.h1]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+  [RTETypeEnum.h1]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
       <h1 key={node.uid} {...props}>
@@ -92,7 +122,12 @@ export const renderOptions: RenderOptions = {
     )
   },
 
-  [RTETypeEnum.h2]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+  [RTETypeEnum.h2]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
       <h2 key={node.uid} {...props}>
@@ -101,7 +136,12 @@ export const renderOptions: RenderOptions = {
     )
   },
 
-  [RTETypeEnum.h3]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+  [RTETypeEnum.h3]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
       <h3 key={node.uid} {...props}>
@@ -110,7 +150,12 @@ export const renderOptions: RenderOptions = {
     )
   },
 
-  [RTETypeEnum.h4]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+  [RTETypeEnum.h4]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
       <h4 key={node.uid} {...props}>
@@ -119,7 +164,12 @@ export const renderOptions: RenderOptions = {
     )
   },
 
-  [RTETypeEnum.h5]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+  [RTETypeEnum.h5]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
       <h5 key={node.uid} {...props}>
@@ -128,7 +178,12 @@ export const renderOptions: RenderOptions = {
     )
   },
 
-  [RTETypeEnum.h6]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+  [RTETypeEnum.h6]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
       <h6 key={node.uid} {...props}>
@@ -141,7 +196,12 @@ export const renderOptions: RenderOptions = {
     return <hr />
   },
 
-  [RTETypeEnum.li]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+  [RTETypeEnum.li]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
       <li key={node.uid} {...props}>
@@ -150,7 +210,12 @@ export const renderOptions: RenderOptions = {
     )
   },
 
-  [RTETypeEnum.ol]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+  [RTETypeEnum.ol]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
       <ol key={node.uid} {...props}>
@@ -159,7 +224,12 @@ export const renderOptions: RenderOptions = {
     )
   },
 
-  [RTETypeEnum.p]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+  [RTETypeEnum.p]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
       <p {...props} key={node.uid}>
@@ -168,7 +238,12 @@ export const renderOptions: RenderOptions = {
     )
   },
 
-  [RTETypeEnum.reference]: (node: RTENode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+  [RTETypeEnum.reference]: (
+    node: RTENode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     if ("attrs" in node) {
       const type = node.attrs.type
       if (type === RTEItemTypeEnum.asset) {
@@ -199,7 +274,12 @@ export const renderOptions: RenderOptions = {
     return null
   },
 
-  [RTETypeEnum.table]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+  [RTETypeEnum.table]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
       <table key={node.uid} {...props}>
@@ -208,7 +288,12 @@ export const renderOptions: RenderOptions = {
     )
   },
 
-  [RTETypeEnum.thead]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+  [RTETypeEnum.thead]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
       <thead key={node.uid} {...props}>
@@ -217,7 +302,12 @@ export const renderOptions: RenderOptions = {
     )
   },
 
-  [RTETypeEnum.tbody]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+  [RTETypeEnum.tbody]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
       <tbody key={node.uid} {...props}>
@@ -226,7 +316,12 @@ export const renderOptions: RenderOptions = {
     )
   },
 
-  [RTETypeEnum.tfoot]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+  [RTETypeEnum.tfoot]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
       <tfoot key={node.uid} {...props}>
@@ -235,7 +330,12 @@ export const renderOptions: RenderOptions = {
     )
   },
 
-  [RTETypeEnum.tr]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+  [RTETypeEnum.tr]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
       <tr key={node.uid} {...props}>
@@ -244,7 +344,12 @@ export const renderOptions: RenderOptions = {
     )
   },
 
-  [RTETypeEnum.th]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+  [RTETypeEnum.th]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
       <th key={node.uid} {...props}>
@@ -253,7 +358,12 @@ export const renderOptions: RenderOptions = {
     )
   },
 
-  [RTETypeEnum.td]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+  [RTETypeEnum.td]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
       <td key={node.uid} {...props}>
@@ -262,7 +372,12 @@ export const renderOptions: RenderOptions = {
     )
   },
 
-  [RTETypeEnum.ul]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+  [RTETypeEnum.ul]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
       <ul key={node.uid} {...props}>
@@ -309,7 +424,11 @@ export const renderOptions: RenderOptions = {
     )
   },
 
-  [RTEMarkType.classnameOrId]: (children: React.ReactNode, className?: string, id?: string) => {
+  [RTEMarkType.classnameOrId]: (
+    children: React.ReactNode,
+    className?: string,
+    id?: string
+  ) => {
     let props = {
       className,
       id,
@@ -331,7 +450,12 @@ export const renderOptions: RenderOptions = {
    * 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) => {
+  default: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
     return next(node.children, embeds, fullRenderOptions)
   },
 }

components/JsonToHtml/utils.tsx

@@ -6,22 +6,24 @@ import { RTETypeEnum } from "@/types/rte/enums"
 import type { EmbedByUid } from "@/types/components/jsontohtml"
 import type { Node } from "@/types/requests/utils/edges"
 import type { RenderOptions } from "@/types/rte/option"
-import type { RTENode, RTETextNode, RTERenderOptionComponent } from "@/types/rte/node"
+import type {
+  RTENode,
+  RTETextNode,
+  RTERenderOptionComponent,
+} from "@/types/rte/node"
 import type { Embeds } from "@/types/requests/embeds"
 
 export function groupEmbedsByUid(embedsArray: Node<Embeds>[]) {
-  const embedsByUid = embedsArray
-    .reduce<EmbedByUid>((acc, embed) => {
-      if (embed.node.system.uid) {
-        acc[embed.node.system.uid] = embed
-      }
-      return acc
-    }, {})
+  const embedsByUid = embedsArray.reduce<EmbedByUid>((acc, embed) => {
+    if (embed.node.system.uid) {
+      acc[embed.node.system.uid] = embed
+    }
+    return acc
+  }, {})
 
   return embedsByUid
 }
 
-
 export function nodeChildrenToHtml(
   nodes: RTENode[],
   embeds: EmbedByUid,