feat(SW-213): Added renderOptions for text cols

components/Content/Blocks/TextCols/index.tsx

@@ -1,6 +1,8 @@
 import JsonToHtml from "@/components/JsonToHtml"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
+import { renderOptions } from "./renderOptions"
+
 import styles from "./textcols.module.css"
 
 import type { TextColsProps } from "@/types/components/content/blocks"
@@ -16,6 +18,7 @@ export default function TextCols({ text_cols }: TextColsProps) {
               <JsonToHtml
                 nodes={col.text.json.children}
                 embeds={col.text.embedded_itemsConnection.edges}
+                renderOptions={renderOptions}
               />
             </div>
           </div>

components/Content/Blocks/TextCols/renderOptions.tsx

@@ -0,0 +1,70 @@
+import Link from "@/components/TempDesignSystem/Link"
+
+import styles from "./textcols.module.css"
+
+import type { EmbedByUid } from "@/types/components/jsontohtml"
+import { RTEItemTypeEnum, RTETypeEnum } from "@/types/rte/enums"
+import type {
+  RTEDefaultNode,
+  RTENext,
+  RTENode,
+  RTERegularNode,
+} 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 key={node.uid} className={styles.p}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </p>
+    )
+  },
+  [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"}
+          key={node.uid}
+          className={styles.a}
+        >
+          {next(node.children, embeds, fullRenderOptions)}
+        </a>
+      )
+    }
+    return null
+  },
+  [RTETypeEnum.reference]: (
+    node: RTENode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    if ("attrs" in node) {
+      const type = node.attrs.type
+      if (type !== RTEItemTypeEnum.asset) {
+        const href = node.attrs?.locale
+          ? `/${node.attrs.locale}${node.attrs.href}`
+          : node.attrs.href
+        return (
+          <Link href={href} key={node.uid} className={styles.a}>
+            {next(node.children, embeds, fullRenderOptions)}
+          </Link>
+        )
+      }
+
+      return null
+    }
+  },
+}

components/Content/Blocks/TextCols/textcols.module.css

@@ -14,9 +14,14 @@
   flex-direction: column;
 }
 
-.text p {
+.p {
   color: var(--UI-Text-High-contrast);
   line-height: var(--Spacing-x3);
+  margin: 0;
+}
+
+.a {
+  color: var(--Base-Text-High-contrast);
 }
 
 .text section {