feat: json rich text editor, blocks, asides, general structure

2024-02-07 11:57:36 +01:00
parent 2bd4e25403
commit 66faa41e98
53 changed files with 966 additions and 211 deletions
--- a/app/[lang]/current-content-page/page.tsx
+++ b/app/[lang]/current-content-page/page.tsx
@@ -1,4 +1,4 @@
-import { notFound } from "next/navigation";
+import { notFound } from "next/navigation"

 import { request } from "@/lib/request"
 import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphql"
@@ -7,6 +7,9 @@ import Aside from "@/components/Current/Aside"
 import Blocks from "@/components/Current/Blocks"
 import Header from "@/components/Current/Header"
 import Hero from "@/components/Current/Hero"
+import Preamble from "@/components/Current/Preamble"
+import Section from "@/components/Current/Section"
+import SubnavMobile from "@/components/Current/SubnavMobile"

 import type { PageArgs, LangParams, UriParams } from "@/types/params"
 import type { GetCurrentBlockPageData } from "@/types/requests/currentBlockPage"
@@ -34,14 +37,31 @@ export default async function CurrentContentPage({

    const page = response.data.all_current_blocks_page.items[0]
    const images = page.hero?.imagesConnection
+    const breadcrumbs = page.breadcrumbs.parentsConnection
+    const parent = breadcrumbs.edges.at(-1)

    return (
      <>
        <Header lang={params.lang} pathname={searchParams.uri} />
        {images?.totalCount ? <Hero images={images.edges} /> : null}
-        <main className="main l-sections-wrapper" id="maincontent" role="main">
-          <Blocks blocks={page.blocks} />
-          <Aside blocks={page.aside} />
+        <main
+          className="main l-sections-wrapper"
+          id="maincontent"
+          role="main"
+        >
+          <input id="lbl-personalized-areas" name="lbl-personalized-areas" type="hidden" value="" />
+          <SubnavMobile breadcrumbs={breadcrumbs} parent={parent} title={page.breadcrumbs.title} />
+          <Preamble
+            breadcrumbs={breadcrumbs}
+            breadcrumbParent={parent}
+            breadcrumbTitle={page.breadcrumbs.title}
+            preamble={page.preamble}
+            title={page.title}
+          />
+          <Section>
+            <Blocks blocks={page.blocks} />
+            <Aside blocks={page.aside} />
+          </Section>
        </main>
      </>
    )
--- a/components/Current/Aside.tsx
+++ b/components/Current/Aside.tsx
@@ -1,9 +1,34 @@
+import { Fragment } from "react"
+
+import Puff from "./Asides/Puff"
+
+import { AsideTypenameEnum } from "@/types/requests/utils/typename"
 import type { AsideProps } from "@/types/components/current/aside"

-export default function Aside({ }: AsideProps) {
-  return (
-    <>
+export default function Aside({ blocks }: AsideProps) {
+  if (!blocks?.length) {
+    return null
+  }

-    </>
+  return (
+    <aside>
+      {blocks.map((block, idx) => {
+        const type = block.__typename
+        switch (type) {
+          case AsideTypenameEnum.CurrentBlocksPageAsideContact:
+            return null
+          case AsideTypenameEnum.CurrentBlocksPageAsidePuff:
+            return (
+              <Fragment key={`puff-${idx}`}>
+                {block.puff.puffConnection.edges.map(puff => (
+                  <Puff key={puff.node.system.uid} {...puff.node} />
+                ))}
+              </Fragment>
+            )
+          default:
+            return null
+        }
+      })}
+    </aside>
  )
 }
--- a/components/Current/Asides/Puff/index.tsx
+++ b/components/Current/Asides/Puff/index.tsx
@@ -0,0 +1,60 @@
+import { renderOptions } from "./renderOptions"
+
+import Image from "next/image"
+import JsonToHtml from "@/components/JsonToHtml"
+import Link from "next/link"
+
+import styles from "./puff.module.css"
+
+import type { PuffProps } from "@/types/components/current/asides/puff"
+
+export default function Puff({ imageConnection, is_internal, link, link_text, pageConnection, system, text, title }: PuffProps) {
+  return is_internal ? (
+    <Link className={styles.link} href={link.href}>
+      <PuffContent
+        imageConnection={imageConnection}
+        text={text}
+        title={title}
+      />
+    </Link>
+  ) : (
+    <a className={styles.link} href={link.href} target="_blank">
+      <PuffContent
+        imageConnection={imageConnection}
+        text={text}
+        title={title}
+      />
+    </a>
+  )
+}
+
+
+function PuffContent({ imageConnection, text, title }: Pick<PuffProps, "imageConnection" | "text" | "title">) {
+  return (
+    <article>
+      {imageConnection.edges.map(image => (
+        <Image
+          alt={image.node.title}
+          className={styles.image}
+          height={image.node.dimension.height}
+          key={image.node.system.uid}
+          src={image.node.url}
+          unoptimized
+          width={image.node.dimension.width}
+        />
+      ))}
+      <section className={styles.content}>
+        <header className="content-teaser__body-wrapper">
+          <h3 className={styles.heading}>
+            {title}
+          </h3>
+        </header>
+        <JsonToHtml
+          embeds={text.embedded_itemsConnection.edges}
+          nodes={text.json.children}
+          renderOptions={renderOptions}
+        />
+      </section>
+    </article>
+  )
+}
--- a/components/Current/Asides/Puff/puff.module.css
+++ b/components/Current/Asides/Puff/puff.module.css
@@ -0,0 +1,47 @@
+.link {
+  display: inline-block;
+  transition: 200ms ease;
+}
+
+.link:hover {
+  text-decoration: none;
+  transform: scale(1.01);
+}
+
+.image {
+  height: auto;
+  object-fit: contain;
+  object-position: center;
+}
+
+.content {
+  padding: 20px 0px;
+}
+
+.heading {
+  color: #00838e;
+  font-family: Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: normal;
+  margin-bottom: 0;
+  text-decoration: none;
+  text-transform: none;
+}
+
+.link:hover .heading {
+  text-decoration: underline;
+}
+
+.p {
+  color: #333;
+  line-height: 1.3;
+  margin-bottom: 0;
+  padding-top: 7px;
+  text-decoration: none;
+}
+
+@media screen and (min-width: 950px) {
+  .heading {
+    font-size: 1.375rem;
+  }
+}
--- a/components/Current/Asides/Puff/renderOptions.tsx
+++ b/components/Current/Asides/Puff/renderOptions.tsx
@@ -0,0 +1,13 @@
+import styles from "./puff.module.css"
+
+import { RTETypeEnum } from "@/types/rte/enums"
+
+import type { EmbedByUid } from "@/types/components/jsontohtml"
+import type { RTENext, RTEDefaultNode } from "@/types/rte/node"
+import type { RenderOptions } from "@/types/rte/option"
+
+export const renderOptions: RenderOptions = {
+  [RTETypeEnum.p]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+    return <p className={styles.p}>{next(node.children, embeds, fullRenderOptions)}</p>
+  },
+}
--- a/components/Current/Blocks.tsx
+++ b/components/Current/Blocks.tsx
@@ -1,5 +1,4 @@
 import List from "./Blocks/List"
-import Preamble from "./Blocks/Preamble"
 import Puffs from "./Blocks/Puffs"
 import Text from "./Blocks/Text"

@@ -12,14 +11,12 @@ export default function Blocks({ blocks }: BlocksProps) {
  }

  return (
-    <>
+    <section id="mainbody_personalized">
      {blocks.map(block => {
        const type = block.__typename
        switch (type) {
          case BlocksTypenameEnum.CurrentBlocksPageBlocksList:
            return <List key={block.__typename} {...block} />
-          case BlocksTypenameEnum.CurrentBlocksPageBlocksPreamble:
-            return <Preamble key={block.__typename} {...block} />
          case BlocksTypenameEnum.CurrentBlocksPageBlocksPuffs:
            return <Puffs key={block.__typename} {...block} />
          case BlocksTypenameEnum.CurrentBlocksPageBlocksText:
@@ -29,6 +26,7 @@ export default function Blocks({ blocks }: BlocksProps) {
            return null
        }
      })}
-    </>
+      <div id="mainarea_personalized"></div>
+    </section>
  )
 }
--- a/components/Current/Blocks/Preamble.tsx
+++ b/components/Current/Blocks/Preamble.tsx
@@ -1,7 +0,0 @@
-export default function Preamble() {
-  return (
-    <>
-
-    </>
-  )
-}
--- a/components/Current/Blocks/Text.tsx
+++ b/components/Current/Blocks/Text.tsx
@@ -1,32 +1,12 @@
-import { rteType } from "@/types/rte";
-
-import Image from "next/image";
+import JsonToHtml from "@/components/JsonToHtml";

 import type { TextProps } from "@/types/components/current/blocks/text"

 export default function Text({ text }: TextProps) {
-
  return (
-    <>
-      <pre>{JSON.stringify(text.content.json, null, 2)}</pre>
-      {text.content.json.children.map(block => {
-        switch (block.type) {
-          case rteType.reference: {
-            if (block.attrs.type === rteType.asset) {
-              // return (
-              //   <Image
-              //     alt={block.attrs.alt}
-              //     src={block.attrs["asset-link"]}
-              //   />
-              // )
-            }
-
-            return null
-          }
-          default:
-            break;
-        }
-      })}
-    </>
+    <JsonToHtml
+      embeds={text.content.embedded_itemsConnection.edges}
+      nodes={text.content.json.children}
+    />
  )
 }
--- a/components/Current/Footer/index.tsx
+++ b/components/Current/Footer/index.tsx
@@ -18,12 +18,13 @@ export default async function Footer({ lang }: LangParams) {
      <div className="global-footer__content">
        <h2 className="global-footer__content__heading">
          <Image
-            src={footerData.logoConnection.edges[0].node.url}
-            data-js="scandiclogoimg"
            alt={footerData.logoConnection.edges[0].node.title}
-            height="22"
-            width="102"
+            data-js="scandiclogoimg"
            data-nosvgsrc="/Static/img/scandic-logotype-white.png" // what here?
+            height="22"
+            src={footerData.logoConnection.edges[0].node.url}
+            unoptimized
+            width="102"
          />
          <span className="hidden--accessible">Scandic</span>
        </h2>
@@ -72,12 +73,13 @@ export default async function Footer({ lang }: LangParams) {
                        rel="noopener"
                      >
                        <Image
-                          height={45}
-                          width={135}
-                          src={footerData.app_downloads.app_store.imageConnection.edges[0].node.url}
                          alt={
                            footerData.app_downloads.app_store.imageConnection.edges[0].node.title
                          }
+                          height={45}
+                          src={footerData.app_downloads.app_store.imageConnection.edges[0].node.url}
+                          unoptimized
+                          width={135}
                        />
                      </a>
                    </td>
@@ -95,14 +97,15 @@ export default async function Footer({ lang }: LangParams) {
                        rel="noopener"
                      >
                        <Image
-                          height={45}
-                          width={135}
-                          src={
-                            footerData.app_downloads.google_play.imageConnection.edges[0].node.url
-                          }
                          alt={
                            footerData.app_downloads.google_play.imageConnection.edges[0].node.title
                          }
+                          height={45}
+                          src={
+                            footerData.app_downloads.google_play.imageConnection.edges[0].node.url
+                          }
+                          unoptimized
+                          width={135}
                        />
                      </a>
                    </td>
@@ -215,10 +218,11 @@ display: none;
          <div className="global-footer__trip-advisor">
            <h3 className="heading-5 u-uppercase">{footerData.trip_advisor.title}</h3>
            <Image
-              width={160}
+              alt="Trip Advisor logotype"
              height={24}
              src={footerData.trip_advisor.logoConnection.edges[0].node.url}
-              alt="Trip Advisor logotype"
+              unoptimized
+              width={160}
            />
          </div>
        </div>
--- a/components/Current/Preamble/Breadcrumbs/breadcrumbs.module.css
+++ b/components/Current/Preamble/Breadcrumbs/breadcrumbs.module.css
@@ -0,0 +1,32 @@
+.nav {
+  padding-bottom: 8px;
+}
+
+.list {
+  align-items: center;
+  display: grid;
+  gap: 7px;
+  grid-auto-flow: column;
+  justify-content: flex-start;
+}
+
+.link {
+  color: #333;
+}
+
+.currentPage {
+  color: #7f7369;
+  margin-bottom: 0px;
+}
+
+.currentPage,
+.li {
+  font-size: .875rem;
+  line-height: 1.4em;
+}
+
+.li::before,
+.currentPage::before {
+  content: "›";
+  margin-right: 4px;
+}
--- a/components/Current/Preamble/Breadcrumbs/index.tsx
+++ b/components/Current/Preamble/Breadcrumbs/index.tsx
@@ -0,0 +1,31 @@
+import Link from "next/link"
+
+import styles from "./breadcrumbs.module.css"
+
+import type { BreadcrumbsProps } from "@/types/components/current/breadcrumbs"
+
+export default function Breadcrumbs({ breadcrumbs, parent, title }: BreadcrumbsProps) {
+  return (
+    <nav className={styles.nav}>
+      <ul className={styles.list}>
+        {parent ? (
+          <li className="breadcrumb-list__parent hidden-medium hidden-large">
+            <Link href={parent.node.url}>
+              {parent.node.breadcrumbs?.title ?? parent.node.title}
+            </Link>
+          </li>
+        ) : null}
+        {breadcrumbs.edges.map(breadcrumb => (
+          <li className={styles.li} itemProp="breadcrumb" key={breadcrumb.node.title}>
+            <Link className={styles.link} href={breadcrumb.node.url}>
+              {breadcrumb.node.breadcrumbs?.title ?? breadcrumb.node.title}
+            </Link>
+          </li>
+        ))}
+        <li className={styles.currentPage}>
+          <span>{title}</span>
+        </li>
+      </ul>
+    </nav>
+  )
+}
--- a/components/Current/Preamble/index.tsx
+++ b/components/Current/Preamble/index.tsx
@@ -0,0 +1,26 @@
+import { renderOptions } from "./renderOptions"
+
+import Breadcrumbs from "./Breadcrumbs"
+import JsonToHtml from "@/components/JsonToHtml"
+
+import styles from "./preamble.module.css"
+
+import type { PreambleProps } from "@/types/components/current/preamble"
+
+export default function Preamble({ breadcrumbs, breadcrumbParent, breadcrumbTitle, preamble, title }: PreambleProps) {
+  return (
+    <section className={styles.container}>
+      <section>
+        <Breadcrumbs breadcrumbs={breadcrumbs} parent={breadcrumbParent} title={breadcrumbTitle} />
+        <h1>{title}</h1>
+        {preamble?.text ? (
+          <JsonToHtml
+            embeds={preamble.text.embedded_itemsConnection.edges}
+            nodes={preamble.text.json.children}
+            renderOptions={renderOptions}
+          />
+        ) : null}
+      </section>
+    </section>
+  )
+}
--- a/components/Current/Preamble/preamble.module.css
+++ b/components/Current/Preamble/preamble.module.css
@@ -0,0 +1,25 @@
+.container {
+  display: grid;
+  gap: 60px;
+  grid-template-columns: 2fr 1fr;
+  margin: 0 auto;
+  max-width: 1200px;
+  padding: 30px 0px 45px;
+}
+
+.preamble {
+  color: #333;
+  font-family: Helvetica Neue, Roboto, Helvetica, Arial, sans-serif;
+  font-size: 1.25rem;
+  font-weight: 300;
+  line-height: normal;
+  margin-bottom: 0px;
+  text-transform: none;
+}
+
+@media screen and (min-width: 950px) {
+  .preamble {
+    font-size: 1.5rem;
+    line-height: 2.25rem;
+  }
+}
--- a/components/Current/Preamble/renderOptions.tsx
+++ b/components/Current/Preamble/renderOptions.tsx
@@ -0,0 +1,13 @@
+import styles from "./preamble.module.css"
+
+import { RTETypeEnum } from "@/types/rte/enums"
+
+import type { EmbedByUid } from "@/types/components/jsontohtml"
+import type { RTENext, RTEDefaultNode } from "@/types/rte/node"
+import type { RenderOptions } from "@/types/rte/option"
+
+export const renderOptions: RenderOptions = {
+  [RTETypeEnum.p]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+    return <p className={styles.preamble}>{next(node.children, embeds, fullRenderOptions)}</p>
+  },
+}
--- a/components/Current/Section/index.tsx
+++ b/components/Current/Section/index.tsx
@@ -0,0 +1,11 @@
+import styles from "./section.module.css"
+
+export default function Section({ children }: React.PropsWithChildren) {
+  return (
+    <div className={styles.wrapper}>
+      <section className={styles.section}>
+        {children}
+      </section>
+    </div>
+  )
+}
--- a/components/Current/Section/section.module.css
+++ b/components/Current/Section/section.module.css
@@ -0,0 +1,25 @@
+.wrapper {
+  background-color: #fff;
+}
+
+.section {
+  box-sizing: content-box;
+  display: grid;
+  gap: 70px;
+  grid-template-columns: 2fr 1fr;
+  margin: 0 auto;
+  max-width: 1200px;
+  padding: 20px 10px 5px;
+}
+
+@media screen and (min-width: 740px) {
+  .section {
+    padding: 30px 30px 15px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .section {
+    padding: 50px 30px 35px;
+  }
+}
--- a/components/Current/SubnavMobile.tsx
+++ b/components/Current/SubnavMobile.tsx
@@ -0,0 +1,31 @@
+import Link from "next/link"
+
+import type { SubnavMobileProps } from "@/types/components/current/subnavMobile"
+
+export default async function SubnavMobile({ breadcrumbs, parent, title }: SubnavMobileProps) {
+  return (
+    <div className="subnav-mobile hidden-small hidden-medium hidden-large">
+      <nav className="u-flex">
+        <ul className="breadcrumb-list hidden-small hidden-medium hidden-large">
+          {parent ? (
+            <li className="breadcrumb-list__parent hidden-medium hidden-large">
+              <Link href={parent.node.url}>
+                {parent.node.breadcrumbs?.title ?? parent.node.title}
+              </Link>
+            </li>
+          ) : null}
+          {breadcrumbs.edges.map(breadcrumb => (
+            <li className="breadcrumb-list__body" key={breadcrumb.node.url}>
+              <Link href={breadcrumb.node.url}>
+                {breadcrumb.node.breadcrumbs?.title ?? breadcrumb.node.title}
+              </Link>
+            </li>
+          ))}
+          <li className="breadcrumb-list__body">
+            <span>{title}</span>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  )
+}
--- a/components/JsonToHtml/index.tsx
+++ b/components/JsonToHtml/index.tsx
@@ -0,0 +1,10 @@
+import { nodesToHtml } from "./utils"
+
+import type { JsonToHtmlProps } from "@/types/components/jsontohtml"
+
+export default function JsonToHtml({ embeds, nodes, renderOptions = {} }: JsonToHtmlProps) {
+  if (!Array.isArray(nodes) || !nodes.length) {
+    return null
+  }
+  return <>{nodesToHtml(nodes, embeds, renderOptions).filter(Boolean)}</>
+}
--- a/components/JsonToHtml/jsontohtml.module.css
+++ b/components/JsonToHtml/jsontohtml.module.css
@@ -0,0 +1,6 @@
+.image {
+  height: auto;
+  margin-bottom: 16px;
+  max-width: 100%;
+  object-fit: cover;
+}
--- a/components/JsonToHtml/renderOptions.tsx
+++ b/components/JsonToHtml/renderOptions.tsx
@@ -0,0 +1,116 @@
+import Image from "next/image"
+import Link from "next/link"
+
+import { EmbedEnum } from "@/types/requests/utils/embeds"
+import { RTEItemTypeEnum, RTETypeEnum } from "@/types/rte/enums"
+import { RTEMarkType } from "@/types/rte/node"
+
+import styles from "./jsontohtml.module.css"
+
+import type { EmbedByUid } from "@/types/components/jsontohtml"
+import type { RTENext, RTEDefaultNode, RTENode, RTERegularNode } from "@/types/rte/node"
+import type { RenderOptions } from "@/types/rte/option"
+
+export const renderOptions: RenderOptions = {
+  [RTETypeEnum.a]: (node: RTERegularNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+    if (node.attrs.url) {
+      return (
+        <a href={node.attrs.url} target={node.attrs.target ?? "_blank"}>{next(node.children, embeds, fullRenderOptions)}</a>
+      )
+    }
+    return null
+  },
+  [RTETypeEnum.h1]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+    return <h1 className={node.attrs["class-name"] ?? ""}>{next(node.children, embeds, fullRenderOptions)}</h1>
+  },
+  [RTETypeEnum.h2]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+    return <h2 className={node.attrs["class-name"] ?? ""}>{next(node.children, embeds, fullRenderOptions)}</h2>
+  },
+  [RTETypeEnum.h3]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+    return <h3 className={node.attrs["class-name"] ?? ""}>{next(node.children, embeds, fullRenderOptions)}</h3>
+  },
+  [RTETypeEnum.h4]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+    return <h4 className={node.attrs["class-name"] ?? ""}>{next(node.children, embeds, fullRenderOptions)}</h4>
+  },
+  [RTETypeEnum.h5]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+    return <h5 className={node.attrs["class-name"] ?? ""}>{next(node.children, embeds, fullRenderOptions)}</h5>
+  },
+  [RTETypeEnum.h6]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+    return <h6 className={node.attrs["class-name"] ?? ""}>{next(node.children, embeds, fullRenderOptions)}</h6>
+  },
+  [RTETypeEnum.p]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+    return <p className={node.attrs["class-name"] ?? ""}>{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
+          return (
+            <Image
+              alt={alt}
+              className={styles.image}
+              height={image.node.dimension.height}
+              src={image?.node?.url}
+              unoptimized
+              width={image.node.dimension.width}
+            />
+          )
+        }
+      } else {
+        return (
+          <Link href={node.attrs.href}>
+            {next(node.children, embeds, fullRenderOptions)}
+          </Link>
+        )
+      }
+    }
+
+    return null
+  },
+
+  [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 {...props}>{children}</span>
+  }
+}
--- a/components/JsonToHtml/utils.tsx
+++ b/components/JsonToHtml/utils.tsx
@@ -0,0 +1,85 @@
+import { renderOptions } from "./renderOptions"
+
+import { RTEMarkType, RTERenderMark } from "@/types/rte/node"
+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 { 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
+    }, {})
+
+  return embedsByUid
+}
+
+export function nodeChildrenToHtml(nodes: RTENode[], embeds: EmbedByUid, fullRenderOptions: RenderOptions): any {
+  return nodes.map(node => nodeToHtml(node, embeds, fullRenderOptions))
+}
+
+export function textNodeToHtml(node: RTETextNode, fullRenderOptions: RenderOptions) {
+  let text = <>{node.text}</>;
+
+  if (node.classname || node.id) {
+    text = (fullRenderOptions[RTEMarkType.classnameOrId] as RTERenderMark)(text, node.classname, node.id);
+  }
+  if (node.break) {
+    text = (fullRenderOptions[RTEMarkType.break] as RTERenderMark)(text);
+  }
+  if (node.superscript) {
+    text = (fullRenderOptions[RTEMarkType.superscript] as RTERenderMark)(text);
+  }
+  if (node.subscript) {
+    text = (fullRenderOptions[RTEMarkType.subscript] as RTERenderMark)(text);
+  }
+  if (node.inlineCode) {
+    text = (fullRenderOptions[RTEMarkType.inlineCode] as RTERenderMark)(text);
+  }
+  if (node.strikethrough) {
+    text = (fullRenderOptions[RTEMarkType.strikethrough] as RTERenderMark)(text);
+  }
+  if (node.underline) {
+    text = (fullRenderOptions[RTEMarkType.underline] as RTERenderMark)(text);
+  }
+  if (node.italic) {
+    text = (fullRenderOptions[RTEMarkType.italic] as RTERenderMark)(text);
+  }
+  if (node.bold) {
+    text = (fullRenderOptions[RTEMarkType.bold] as RTERenderMark)(text);
+  }
+
+  return text;
+}
+
+function next(nodes: RTENode[], embeds: EmbedByUid, fullRenderOptions: RenderOptions) {
+  return nodeChildrenToHtml(nodes, embeds, fullRenderOptions)
+}
+
+export function nodeToHtml(node: RTENode, embeds: EmbedByUid, fullRenderOptions: RenderOptions) {
+  if ("type" in node === false) {
+    return textNodeToHtml(node, fullRenderOptions);
+  } else {
+    if (fullRenderOptions[node.type] !== undefined) {
+      if (node.type === RTETypeEnum.doc) {
+        return null
+      }
+      return (fullRenderOptions[node.type] as RTERenderOptionComponent)(node, embeds, next, fullRenderOptions);
+    } else {
+      return next(node.children, embeds, fullRenderOptions);
+    }
+  }
+}
+
+export function nodesToHtml(nodes: RTENode[], embedsArray: Node<Embeds>[], overrideRenderOptions: RenderOptions) {
+  const embeds = groupEmbedsByUid(embedsArray)
+  const fullRenderOptions = { ...renderOptions, ...overrideRenderOptions }
+  return nodes.map(node => nodeToHtml(node, embeds, fullRenderOptions))
+}
--- a/lib/graphql/Fragments/Blocks/List.graphql
+++ b/lib/graphql/Fragments/Blocks/List.graphql
@@ -28,6 +28,7 @@ fragment ListItemInternalLink on CurrentBlocksPageBlocksListBlockListItemsListIt
      totalCount
      edges {
        node {
+          __typename
          ...CurrentBlocksPageLink
          ...TempPageLink
        }
--- a/lib/graphql/Fragments/Blocks/Text.graphql
+++ b/lib/graphql/Fragments/Blocks/Text.graphql
@@ -1,3 +1,4 @@
+#import "../Image.graphql"
 #import "../PageLinks.graphql"

 fragment TextBlock on CurrentBlocksPageBlocksText {
@@ -7,12 +8,10 @@ fragment TextBlock on CurrentBlocksPageBlocksText {
        totalCount
        edges {
          node {
+            __typename
            ...CurrentBlocksPageLink
+            ...Image
            ...TempPageLink
-            ... on SysAsset {
-              title
-              url
-            }
          }
        }
      }
--- a/lib/graphql/Fragments/Breadcrumbs.graphql
+++ b/lib/graphql/Fragments/Breadcrumbs.graphql
@@ -0,0 +1,25 @@
+fragment Breadcrumbs on CurrentBlocksPage {
+  breadcrumbs {
+    title
+    parentsConnection {
+      edges {
+        node {
+          ... on CurrentBlocksPage {
+            breadcrumbs {
+              title
+            }
+            title
+            url
+          }
+          ... on TempPage {
+            breadcrumbs {
+              title
+            }
+            title
+            url
+          }
+        }
+      }
+    }
+  }
+}
--- a/lib/graphql/Fragments/Hero.graphql
+++ b/lib/graphql/Fragments/Hero.graphql
@@ -1,3 +1,4 @@
+#import "./Image.graphql"
 #import "./PageLinks.graphql"

 fragment Hero on Hero {
@@ -5,12 +6,7 @@ fragment Hero on Hero {
    totalCount
    edges {
      node {
-        dimension {
-          height
-          width
-        }
-        title
-        url
+        ...Image
      }
    }
  }
--- a/lib/graphql/Fragments/Image.graphql
+++ b/lib/graphql/Fragments/Image.graphql
@@ -5,9 +5,9 @@ fragment Image on SysAsset {
    width
  }
  metadata
-  title
-  url
  system {
    uid
  }
+  title
+  url
 }
--- a/lib/graphql/Fragments/PageLinks.graphql
+++ b/lib/graphql/Fragments/PageLinks.graphql
@@ -1,9 +1,15 @@
 fragment CurrentBlocksPageLink on CurrentBlocksPage {
+  system {
+    uid
+  }
  title
  url
 }

 fragment TempPageLink on TempPage {
+  system {
+    uid
+  }
  title
  url
 }
--- a/lib/graphql/Fragments/Blocks/Preamble.graphql
+++ b/lib/graphql/Fragments/Blocks/Preamble.graphql
@@ -1,18 +1,17 @@
-#import "../PageLinks.graphql"
+#import "./Image.graphql"
+#import "./PageLinks.graphql"

-fragment PreambleBlock on CurrentBlocksPageBlocksPreamble {
+fragment Preamble on CurrentBlocksPage {
  preamble {
    text {
      json
      embedded_itemsConnection(limit: 30) {
        edges {
          node {
+            __typename
            ...CurrentBlocksPageLink
+            ...Image
            ...TempPageLink
-            ... on SysAsset {
-              title
-              url
-            }
          }
        }
      }
--- a/lib/graphql/Fragments/Puff.graphql
+++ b/lib/graphql/Fragments/Puff.graphql
@@ -1,11 +1,11 @@
+#import "./Image.graphql"
 #import "./PageLinks.graphql"

 fragment Puff on Puff {
  imageConnection {
    edges {
      node {
-        title
-        url
+        ...Image
      }
    }
  }
@@ -24,6 +24,9 @@ fragment Puff on Puff {
      }
    }
  }
+  system {
+    uid
+  }
  text {
    json
    embedded_itemsConnection {
@@ -31,10 +34,7 @@ fragment Puff on Puff {
      edges {
        node {
          __typename
-          ... on SysAsset {
-            title
-            url
-          }
+          ...Image
        }
      }
    }
--- a/lib/graphql/Query/CurrentBlockPage.graphql
+++ b/lib/graphql/Query/CurrentBlockPage.graphql
@@ -1,10 +1,11 @@
 #import "../Fragments/Aside/Contact.graphql"
 #import "../Fragments/Aside/Puff.graphql"
 #import "../Fragments/Blocks/List.graphql"
-#import "../Fragments/Blocks/Preamble.graphql"
 #import "../Fragments/Blocks/Puff.graphql"
 #import "../Fragments/Blocks/Text.graphql"
+#import "../Fragments/Breadcrumbs.graphql"
 #import "../Fragments/Hero.graphql"
+#import "../Fragments/Preamble.graphql"

 query GetCurrentBlockPage($locale: String!, $url: String!) {
  all_current_blocks_page(limit: 1, locale: $locale, where: { url: $url }) {
@@ -17,13 +18,14 @@ query GetCurrentBlockPage($locale: String!, $url: String!) {
      blocks {
        __typename
        ...ListBlock
-        ...PreambleBlock
        ...PuffBlock
        ...TextBlock
      }
+      ...Breadcrumbs
      hero {
        ...Hero
      }
+      ...Preamble
      title
      url
    }
--- a/types/components/current/asides/puff.ts
+++ b/types/components/current/asides/puff.ts
@@ -0,0 +1,3 @@
+import type { Puff } from "@/types/requests/puff"
+
+export type PuffProps = Puff
--- a/types/components/current/breadcrumbs.ts
+++ b/types/components/current/breadcrumbs.ts
@@ -0,0 +1,8 @@
+import type { Breadcrumb } from "@/types/requests/currentBlockPage"
+import type { Edges, Node } from "@/types/requests/utils/edges"
+
+export type BreadcrumbsProps = {
+  breadcrumbs: Edges<Breadcrumb>
+  parent?: Node<Breadcrumb>
+  title: string
+}
--- a/types/components/current/preamble.ts
+++ b/types/components/current/preamble.ts
@@ -0,0 +1,10 @@
+import type { BreadcrumbsProps } from "./breadcrumbs"
+import type { Preamble } from "@/types/requests/preamble"
+
+export type PreambleProps = {
+  breadcrumbs: BreadcrumbsProps["breadcrumbs"]
+  breadcrumbParent: BreadcrumbsProps["parent"]
+  breadcrumbTitle: BreadcrumbsProps["title"]
+  preamble?: Preamble
+  title: string
+}
--- a/types/components/current/subnavMobile.ts
+++ b/types/components/current/subnavMobile.ts
@@ -0,0 +1,8 @@
+import type { Breadcrumb } from "@/types/requests/currentBlockPage"
+import type { Edges, Node } from "@/types/requests/utils/edges"
+
+export type SubnavMobileProps = {
+  breadcrumbs: Edges<Breadcrumb>
+  parent?: Node<Breadcrumb>
+  title: string
+}
--- a/types/components/jsontohtml.ts
+++ b/types/components/jsontohtml.ts
@@ -0,0 +1,13 @@
+import type { RTENode } from "../rte/node"
+
+import type { Node } from "@/types/requests/utils/edges";
+import type { RenderOptions } from "../rte/option";
+import type { Embeds } from "@/types/requests/embeds";
+
+export type JsonToHtmlProps = {
+  embeds: Node<Embeds>[]
+  nodes: RTENode[]
+  renderOptions?: RenderOptions
+}
+
+export type EmbedByUid = Record<string, Node<Embeds>>
--- a/types/image.ts
+++ b/types/image.ts
@@ -1,8 +1,13 @@
 export type Image = {
+  description?: string
  dimension: {
    height: number
    width: number
  }
+  metadata: JSON
+  system: {
+    uid: string
+  }
  title: string
  url: string
 }
--- a/types/requests/blocks/preamble.ts
+++ b/types/requests/blocks/preamble.ts
@@ -1,17 +0,0 @@
-import type { SysAsset } from "../utils/asset"
-import type { Edges } from "../utils/edges"
-import type { ExternalLink } from "../utils/externalLink"
-import type { PageLink } from "../utils/pageLink"
-
-export type Preamble = {
-  preamble: {
-    text: {
-      json: JSON
-      embedded_itemsConnection: Edges<
-        | ExternalLink
-        | PageLink
-        | SysAsset
-      >
-    }
-  }
-}
--- a/types/requests/blocks/text.ts
+++ b/types/requests/blocks/text.ts
@@ -1,14 +1,12 @@
-import type { RTERootObject } from "@/types/rte"
-import type { SysAsset } from "../utils/asset"
 import type { Edges } from "../utils/edges"
-import type { ExternalLink } from "../utils/externalLink"
-import type { PageLink } from "../utils/pageLink"
+import type { Embeds } from "../embeds"
+import type { RTEDocument } from "@/types/rte/node"

 export type Text = {
  text: {
    content: {
-      json: RTERootObject
-      embedded_itemsConnection: Edges<ExternalLink | PageLink | SysAsset>
+      embedded_itemsConnection: Edges<Embeds>
+      json: RTEDocument
    }
  }
 }
--- a/types/requests/currentBlockPage.ts
+++ b/types/requests/currentBlockPage.ts
@@ -5,10 +5,12 @@ import type { PuffAside } from "./asides/puff"
 import type { Hero } from "./hero"
 import type { List } from "./blocks/list"
 import type { PuffBlock } from "./blocks/puff"
-import type { Preamble } from "./blocks/preamble"
+import type { Preamble } from "./preamble"
 import type { Text } from "./blocks/text"
 import type { AllRequestResponse } from "./utils/all"
 import type { AsideTypenameEnum, Typename } from "./utils/typename"
+import type { EmbedEnum } from "./utils/embeds"
+import type { Edges } from "./utils/edges"

 export type Asides =
  | Typename<Contact, AsideTypenameEnum.CurrentBlocksPageAsideContact>
@@ -16,14 +18,38 @@ export type Asides =

 export type Blocks =
  | Typename<List, BlocksTypenameEnum.CurrentBlocksPageBlocksList>
-  | Typename<Preamble, BlocksTypenameEnum.CurrentBlocksPageBlocksPreamble>
  | Typename<PuffBlock, BlocksTypenameEnum.CurrentBlocksPageBlocksPuffs>
  | Typename<Text, BlocksTypenameEnum.CurrentBlocksPageBlocksText>

+interface SharedBreadcrumb {
+  breadcrumbs: {
+    title?: string
+  } | null
+  title: string
+  url: string
+}
+
+export interface CurrentBlocksPageBreadcrumb extends SharedBreadcrumb {
+  __typename: EmbedEnum.CurrentBlocksPage
+}
+
+export interface TempPageBreadcrumb extends SharedBreadcrumb {
+  __typename: EmbedEnum.TempPage
+}
+
+export type Breadcrumb = CurrentBlocksPageBreadcrumb | TempPageBreadcrumb
+
+export type Breadcrumbs = {
+  parentsConnection: Edges<Breadcrumb>
+  title: string
+}
+
 export type BlockPage = {
  aside: Asides[]
  blocks: Blocks[]
+  breadcrumbs: Breadcrumbs
  hero: Hero
+  preamble: Preamble
  title: string
  url: string
 }
--- a/types/requests/embeds.ts
+++ b/types/requests/embeds.ts
@@ -0,0 +1,8 @@
+import type { SysAsset } from "./utils/asset"
+import type { ExternalLinkType } from "./utils/externalLink"
+import type { PageLinkType } from "./utils/pageLink"
+
+export type Embeds =
+  | ExternalLinkType
+  | PageLinkType
+  | SysAsset
--- a/types/requests/footer.ts
+++ b/types/requests/footer.ts
@@ -1,16 +1,11 @@
 import type { AllRequestResponse } from "./utils/all"
 import type { Edges } from "./utils/edges"
-import { Asset } from "./utils/asset"
-import { PageLink } from "./utils/pageLink"
-
-type AppDownloadLink = {
-  title: string
-  url: string
-}
+import type { Image } from "../image"
+import type { PageLink } from "./utils/pageLink"

 type AppDownload = {
  href: string
-  imageConnection: Edges<Asset>
+  imageConnection: Edges<Image>
 }

 export type InternalLink = {
@@ -52,7 +47,7 @@ export type Footer = {
    app_store: AppDownload
    google_play: AppDownload
  }
-  logoConnection: Edges<Asset>
+  logoConnection: Edges<Image>
  navigation: NavigationItem[]
  social_media: {
    title: string
@@ -62,7 +57,7 @@ export type Footer = {
  }
  trip_advisor: {
    title: string
-    logoConnection: Edges<Asset>
+    logoConnection: Edges<Image>
  }
 }

--- a/types/requests/preamble.ts
+++ b/types/requests/preamble.ts
@@ -0,0 +1,10 @@
+import type { Edges } from "./utils/edges"
+import type { RTEDocument } from "../rte/node"
+import type { Embeds } from "./embeds"
+
+export type Preamble = {
+  text: {
+    embedded_itemsConnection: Edges<Embeds>
+    json: RTEDocument
+  }
+}
--- a/types/requests/puff.ts
+++ b/types/requests/puff.ts
@@ -1,13 +1,12 @@
+import type { Image } from "../image"
 import type { Edges } from "./utils/edges"
+import type { Embeds } from "./embeds"
 import type { ExternalLink } from "./utils/externalLink"
 import type { PageLink } from "./utils/pageLink"
-import type { Typename } from "./utils/typename"
+import type { RTEDocument } from "../rte/node"

 export type Puff = {
-  imageConnection: Edges<{
-    title: string
-    url: string
-  }>
+  imageConnection: Edges<Image>
  is_internal: boolean
  link: {
    href: string
@@ -15,12 +14,12 @@ export type Puff = {
  }
  link_text?: string
  pageConnection: Edges<ExternalLink | PageLink>
+  system: {
+    uid: string
+  }
  text: {
-    json: JSON
-    embedded_itemsConnection: Edges<Typename<{
-      title: string
-      url: string
-    }, "SysAsset">>
+    embedded_itemsConnection: Edges<Embeds>
+    json: RTEDocument
  }
  title: string
 }
--- a/types/requests/utils/asset.ts
+++ b/types/requests/utils/asset.ts
@@ -1,8 +1,5 @@
+import type { EmbedEnum } from "./embeds"
+import type { Image } from "@/types/image"
 import type { Typename } from "./typename"

-export type Asset = {
-  title: string
-  url: string
-}
-
-export type SysAsset = Typename<Asset, "SysAsset">
+export type SysAsset = Typename<Image, EmbedEnum.SysAsset>
--- a/types/requests/utils/embeds.ts
+++ b/types/requests/utils/embeds.ts
@@ -0,0 +1,7 @@
+export enum EmbedEnum {
+  CurrentBlocksPage = "CurrentBlocksPage",
+  SysAsset = "SysAsset",
+  TempPage = "TempPage",
+}
+
+export type Embed = keyof typeof EmbedEnum
--- a/types/requests/utils/externalLink.ts
+++ b/types/requests/utils/externalLink.ts
@@ -1,5 +1,12 @@
+import type { EmbedEnum } from "./embeds"
+import type { Typename } from "./typename"
+
 export type ExternalLink = {
-  __typename: "TempPage"
+  system: {
+    uid: string
+  }
  title: string
  url: string
 }
+
+export type ExternalLinkType = Typename<ExternalLink, EmbedEnum.TempPage>
--- a/types/requests/utils/pageLink.ts
+++ b/types/requests/utils/pageLink.ts
@@ -1,5 +1,12 @@
+import type { EmbedEnum } from "./embeds"
+import type { Typename } from "./typename"
+
 export type PageLink = {
-  __typename: "CurrentBlocksPage"
+  system: {
+    uid: string
+  }
  title: string
  url: string
-}
+}
+
+export type PageLinkType = Typename<PageLink, EmbedEnum.CurrentBlocksPage>
--- a/types/requests/utils/typename.ts
+++ b/types/requests/utils/typename.ts
@@ -1,8 +1,3 @@
-export const AsideTypenames = {
-  CurrentBlocksPageAsideContact: "CurrentBlocksPageAsideContact",
-  CurrentBlocksPageAsidePuff: "CurrentBlocksPageAsidePuff",
-}
-
 export enum AsideTypenameEnum {
  CurrentBlocksPageAsideContact = "CurrentBlocksPageAsideContact",
  CurrentBlocksPageAsidePuff = "CurrentBlocksPageAsidePuff",
@@ -10,15 +5,6 @@ export enum AsideTypenameEnum {

 export type AsideTypename = keyof typeof AsideTypenameEnum

-export const blocksTypenameEnum = {
-  CurrentBlocksPageBlocksList: "CurrentBlocksPageBlocksList",
-  CurrentBlocksPageBlocksPreamble: "CurrentBlocksPageBlocksPreamble",
-  CurrentBlocksPageBlocksPuffs: "CurrentBlocksPageBlocksPuffs",
-  CurrentBlocksPageBlocksText: "CurrentBlocksPageBlocksText",
-}
-
-export type BlocksTypename = keyof typeof blocksTypenameEnum
-
 export enum BlocksTypenameEnum {
  CurrentBlocksPageBlocksList = "CurrentBlocksPageBlocksList",
  CurrentBlocksPageBlocksPreamble = "CurrentBlocksPageBlocksPreamble",
@@ -26,6 +12,8 @@ export enum BlocksTypenameEnum {
  CurrentBlocksPageBlocksText = "CurrentBlocksPageBlocksText",
 }

+export type BlocksTypename = keyof typeof BlocksTypenameEnum
+
 export type Typename<T, K> = T & {
  __typename: K
 }
--- a/types/rte.ts
+++ b/types/rte.ts
@@ -1,58 +0,0 @@
-export const rteType = {
-  asset: "asset",
-  p: "p",
-  reference: "reference",
-}
-
-export enum RTETypeEnum {
-  asset = "asset",
-  p = "p",
-  reference = "reference",
-}
-
-export type RTEType = keyof typeof rteType
-
-export type RTEText = {
-  text: string
-}
-
-export type RTEAssetAttrs = {
-  "alt": string
-  "asset-alt": string
-  "asset-link": string
-  "asset-name": string
-  "asset-type": "image/png" | "image/jpg" | "image/jpeg"
-  "asset-uid": string
-  "display-type": "display"
-  "class-name": string
-  "content-type-uid": "sys_assets"
-  "inline": false
-  "type": RTETypeEnum.asset
-}
-
-type RTEBaseObject<T> = {
-  type: T
-  uid: string
-}
-
-type AssetReferenceObject = RTEBaseObject<RTETypeEnum.reference> & {
-  attrs: RTEAssetAttrs
-  children: RTEText[]
-}
-
-export type RTEObject =
-  | AssetReferenceObject
-  | {
-    attrs: Record<string, any>
-    children: (RTEObject | RTEText)[]
-    type: RTEType
-    uid: string
-  }
-
-export type RTERootObject = {
-  attrs: RTEAssetAttrs | Record<string, any>
-  children: RTEObject[]
-  uid: string
-  type: "doc"
-  _version: number
-}
--- a/types/rte/attrs.ts
+++ b/types/rte/attrs.ts
@@ -0,0 +1,38 @@
+import { RTEItemTypeEnum } from "./enums"
+import type { EmbedTypesEnum, RTEItemType } from "./enums"
+import type { Lang } from "../lang"
+
+export interface Attributes {
+  [key: string]: any
+  "class-name"?: string
+  type: RTEItemType
+}
+
+export interface RTEAssetAttrs extends Attributes {
+  "alt": string
+  "asset-alt": string
+  "asset-link": string
+  "asset-name": string
+  "asset-type": "image/png" | "image/jpg" | "image/jpeg"
+  "asset-uid": string
+  "display-type": EmbedTypesEnum.display
+  "content-type-uid": "sys_assets"
+  "inline": false
+  "type": RTEItemTypeEnum.asset
+}
+
+export interface RTEAnchorAttrs extends Attributes {
+  target: string
+  url: string
+}
+
+export interface RTELinkAttrs extends Attributes {
+  'display-type': EmbedTypesEnum.link
+  'class-name': string
+  'content-type-uid': string
+  'entry-uid': string
+  locale: Lang
+  href: string
+  target: HTMLAnchorElement["target"]
+  type: RTEItemTypeEnum.entry
+}
--- a/types/rte/enums.ts
+++ b/types/rte/enums.ts
@@ -0,0 +1,48 @@
+export enum EmbedTypesEnum {
+  block = 'block',
+  display = 'display',
+  download = 'download',
+  inline = 'inline',
+  link = 'link',
+}
+
+export type EmbedTypes = keyof typeof EmbedTypesEnum
+
+/** Copied from https://github.com/contentstack/contentstack-utils-javascript/blob/master/src/nodes/node-type.ts */
+export enum RTETypeEnum {
+  a = "a",
+  blockquote = "blockquote",
+  code = "code",
+  doc = "doc",
+  embed = "embed",
+  h1 = "h1",
+  h2 = "h2",
+  h3 = "h3",
+  h4 = "h4",
+  h5 = "h5",
+  h6 = "h6",
+  hr = "hr",
+  img = "img",
+  li = "li",
+  ol = "ol",
+  p = "p",
+  reference = "reference",
+  table = "table",
+  tbody = "tbody",
+  td = "td",
+  text = "text",
+  tfoot = "tfoot",
+  th = "th",
+  thead = "thead",
+  tr = "tr",
+  ul = "ul",
+}
+
+export type RTEType = keyof typeof RTETypeEnum
+
+export enum RTEItemTypeEnum {
+  asset = "asset",
+  entry = "entry",
+}
+
+export type RTEItemType = keyof typeof RTEItemTypeEnum
--- a/types/rte/node.ts
+++ b/types/rte/node.ts
@@ -0,0 +1,71 @@
+import { RTETypeEnum } from "./enums"
+import type { Attributes, RTEAnchorAttrs, RTEAssetAttrs, RTELinkAttrs } from "./attrs"
+import type { EmbedByUid } from "../components/jsontohtml"
+import type { RenderOptions } from "./option"
+
+export interface RTEDefaultNode {
+  attrs: Attributes
+  children: RTENode[]
+  type: RTETypeEnum
+  uid: string
+}
+
+export interface RTELinkNode {
+  attrs: Attributes
+  children: RTENode[]
+  type: RTETypeEnum
+  uid: string
+}
+
+export interface RTEReferenceAssetNode extends RTEDefaultNode {
+  attrs: RTEAssetAttrs
+}
+
+export interface RTEAnchorNode extends RTEDefaultNode {
+  attrs: RTEAnchorAttrs
+  type: RTETypeEnum.a
+}
+
+export interface RTEReferenceLinkNode extends RTEDefaultNode {
+  attrs: RTELinkAttrs
+}
+
+export enum RTEMarkType {
+  bold = "bold",
+  break = "break",
+  classnameOrId = "classnameOrId",
+  inlineCode = "inlineCode",
+  italic = "italic",
+  strikethrough = "strikethrough",
+  subscript = "subscript",
+  superscript = "superscript",
+  underline = "underline",
+}
+
+type RTETextNodeOptionalKeys = {
+  [key in RTEMarkType]?: boolean
+}
+
+export type RTETextNode = RTETextNodeOptionalKeys & {
+  classname?: string
+  id?: string
+  text: string
+}
+
+export type RTERegularNode = RTEDefaultNode | RTEAnchorNode
+
+export type RTEReferenceNode = RTEDefaultNode | RTEAnchorNode
+
+export type RTENode = RTERegularNode | RTEReferenceNode | RTETextNode
+
+export type RTERenderMark = (children: React.ReactNode, classname?: string, id?: string) => JSX.Element
+
+export interface RTEDocument extends RTEDefaultNode {
+  type: RTETypeEnum.doc
+  _version: number
+}
+
+export type RTERenderOptionComponent = (node: RTERegularNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => React.ReactNode
+
+export type RTENext = (nodes: RTENode[], embeds: EmbedByUid, fullRenderOptions: RenderOptions) => string
+
--- a/types/rte/option.ts
+++ b/types/rte/option.ts
@@ -0,0 +1,5 @@
+import type { RTERenderMark, RTERenderOptionComponent } from "./node"
+
+export type RenderOptions = {
+  [type: string]: RTERenderOptionComponent | RTERenderMark
+}