From 73eddcf4b723a2a60424e1373503b15b72595077 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Tue, 1 Oct 2024 13:07:59 +0200
Subject: [PATCH] refactor: reusable css modula compatible logic

---
 components/JsonToHtml/renderOptions.tsx | 33 ++++++++++++++-----------
 components/JsonToHtml/utils.tsx         | 18 ++++++++++++++
 2 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/components/JsonToHtml/renderOptions.tsx b/components/JsonToHtml/renderOptions.tsx
index 5b4eda0d7..ce7a325b5 100644
--- a/components/JsonToHtml/renderOptions.tsx
+++ b/components/JsonToHtml/renderOptions.tsx
@@ -12,7 +12,11 @@ import Caption from "../TempDesignSystem/Text/Caption"
 import Footnote from "../TempDesignSystem/Text/Footnote"
 import Subtitle from "../TempDesignSystem/Text/Subtitle"
 import Title from "../TempDesignSystem/Text/Title"
-import { hasAvailableParagraphFormat, hasAvailableULFormat } from "./utils"
+import {
+  hasAvailableParagraphFormat,
+  hasAvailableULFormat,
+  makeCssModuleCompatibleClassName,
+} from "./utils"
 
 import styles from "./jsontohtml.module.css"
 
@@ -217,8 +221,16 @@ export const renderOptions: RenderOptions = {
     fullRenderOptions: RenderOptions
   ) => {
     const props = extractPossibleAttributes(node.attrs)
+    const compatibleClassName = makeCssModuleCompatibleClassName(
+      props.className,
+      "ul"
+    )
     return (
-      <li key={node.uid} {...props} className={styles.li}>
+      <li
+        key={node.uid}
+        {...props}
+        className={`${styles.li} ${compatibleClassName}`}
+      >
         {next(node.children, embeds, fullRenderOptions)}
       </li>
     )
@@ -525,17 +537,10 @@ export const renderOptions: RenderOptions = {
     fullRenderOptions: RenderOptions
   ) => {
     const props = extractPossibleAttributes(node.attrs)
-
-    props.className = props.className || ""
-
-    if (props.className) {
-      if (hasAvailableULFormat(props.className)) {
-        // @ts-ignore:  We want to set css modules classNames even if it does not correspond
-        // to an existing class in the module style sheet. Due to our css modules plugin for
-        // typescript, we cannot do this without the ts-ignore
-        props.className = styles[props.className]
-      }
-    }
+    const compatibleClassName = makeCssModuleCompatibleClassName(
+      props.className,
+      "ul"
+    )
 
     // Set the number of rows dynamically to create even rows for each column. We want the li:s
     // to flow with the column, so therefore this is needed.
@@ -549,7 +554,7 @@ export const renderOptions: RenderOptions = {
       <ul
         key={node.uid}
         {...props}
-        className={`${styles.ul} ${props.className}`}
+        className={`${styles.ul} ${compatibleClassName}`}
         style={
           numberOfRows
             ? {
diff --git a/components/JsonToHtml/utils.tsx b/components/JsonToHtml/utils.tsx
index f09f5216f..b2a8d838e 100644
--- a/components/JsonToHtml/utils.tsx
+++ b/components/JsonToHtml/utils.tsx
@@ -1,5 +1,7 @@
 import { renderOptions } from "./renderOptions"
 
+import styles from "./jsontohtml.module.css"
+
 import type { Node } from "@/types/requests/utils/edges"
 import type { EmbedByUid } from "@/types/transitionTypes/jsontohtml"
 import {
@@ -136,3 +138,19 @@ export function nodesToHtml(
   const fullRenderOptions = { ...renderOptions, ...overrideRenderOptions }
   return nodes.map((node) => nodeToHtml(node, embeds, fullRenderOptions))
 }
+
+export function makeCssModuleCompatibleClassName(
+  className: string | undefined,
+  formatType: "ul"
+): string {
+  if (!className) return ""
+
+  if (formatType === "ul" && hasAvailableULFormat(className)) {
+    // @ts-ignore: We want to set css modules classNames even if it does not correspond
+    // to an existing class in the module style sheet. Due to our css modules plugin for
+    // typescript, we cannot do this without the ts-ignore
+    return styles[className] || className
+  }
+
+  return className
+}