refactor: reusable css modula compatible logic

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
             ? {

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