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

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)}</>
+}

components/JsonToHtml/jsontohtml.module.css

@@ -0,0 +1,6 @@
+.image {
+  height: auto;
+  margin-bottom: 16px;
+  max-width: 100%;
+  object-fit: cover;
+}

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>
+  }
+}

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))
+}