fix: add stylings for list

components/JsonToHtml/renderOptions.tsx

@@ -10,7 +10,7 @@ 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 { hasAvailableFormat } from "./utils"
+import { hasAvailableParagraphFormat, hasAvailableULFormat } from "./utils"
 
 import styles from "./jsontohtml.module.css"
 
@@ -18,7 +18,7 @@ import type { EmbedByUid } from "@/types/components/jsontohtml"
 import { EmbedEnum } from "@/types/requests/utils/embeds"
 import type { Attributes, RTEImageVaultAttrs } from "@/types/rte/attrs"
 import {
-  AvailableFormatEnum,
+  AvailableParagraphFormatEnum,
   RTEItemTypeEnum,
   RTETypeEnum,
 } from "@/types/rte/enums"
@@ -201,20 +201,6 @@ export const renderOptions: RenderOptions = {
     )
   },
 
-  [RTETypeEnum.h6]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    const props = extractPossibleAttributes(node.attrs)
-    return (
-      <Subtitle asChild key={node.uid} {...props}>
-        <h6>{next(node.children, embeds, fullRenderOptions)}</h6>
-      </Subtitle>
-    )
-  },
-
   [RTETypeEnum.hr]: () => {
     return <Divider />
   },
@@ -240,8 +226,26 @@ export const renderOptions: RenderOptions = {
     fullRenderOptions: RenderOptions
   ) => {
     const props = extractPossibleAttributes(node.attrs)
+
+    // 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.
+    let numberOfRows: number | undefined
+    if (node.children.length > 4) {
+      const half = node.children.length / 2
+      numberOfRows = Math.ceil(half)
+    }
+
     return (
-      <ol key={node.uid} {...props}>
+      <ol
+        key={node.uid}
+        {...props}
+        className={styles.ol}
+        style={
+          numberOfRows
+            ? { gridTemplateRows: `repeat(${numberOfRows}, auto)` }
+            : {}
+        }
+      >
         {next(node.children, embeds, fullRenderOptions)}
       </ol>
     )
@@ -256,17 +260,13 @@ export const renderOptions: RenderOptions = {
     const props = extractPossibleAttributes(node.attrs)
 
     const hasFormat = node.children.some((item) =>
-      hasAvailableFormat((item as RTETextNode).classname)
+      hasAvailableParagraphFormat((item as RTETextNode)?.classname)
     )
 
     // If a child node has an available format as className, we wrap it in a
     // span and render the children with the correct component
     if (hasFormat) {
-      return (
-        <span {...props} key={node.uid}>
-          {next(node.children, embeds, fullRenderOptions)}
-        </span>
-      )
+      return next(node.children, embeds, fullRenderOptions)
     }
 
     return (
@@ -423,6 +423,15 @@ export const renderOptions: RenderOptions = {
     )
   },
 
+  [RTETypeEnum.fragment]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    return <>{next(node.children, embeds, fullRenderOptions)}</>
+  },
+
   [RTETypeEnum.tr]: (
     node: RTEDefaultNode,
     embeds: EmbedByUid,
@@ -472,8 +481,26 @@ export const renderOptions: RenderOptions = {
     fullRenderOptions: RenderOptions
   ) => {
     const props = extractPossibleAttributes(node.attrs)
+
+    // 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.
+    let numberOfRows: number | undefined
+    if (node.children.length > 4) {
+      const half = node.children.length / 2
+      numberOfRows = Math.ceil(half)
+    }
+
     return (
-      <ul key={node.uid} {...props}>
+      <ul
+        key={node.uid}
+        {...props}
+        className={styles.ul}
+        style={
+          numberOfRows
+            ? { gridTemplateRows: `repeat(${numberOfRows}, auto)` }
+            : {}
+        }
+      >
         {next(node.children, embeds, fullRenderOptions)}
       </ul>
     )
@@ -533,7 +560,16 @@ export const renderOptions: RenderOptions = {
       delete props.id
     }
 
-    if (className === AvailableFormatEnum.footnote) {
+    if (className) {
+      if (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
+        props.className = styles[className]
+      }
+    }
+
+    if (className === AvailableParagraphFormatEnum.footnote) {
       return (
         <Footnote key={id} {...props}>
           {children}
@@ -541,7 +577,7 @@ export const renderOptions: RenderOptions = {
       )
     }
 
-    if (className === AvailableFormatEnum.caption) {
+    if (className === AvailableParagraphFormatEnum.caption) {
       return (
         <Caption key={id} {...props}>
           {children}
@@ -549,7 +585,7 @@ export const renderOptions: RenderOptions = {
       )
     }
 
-    if (className === AvailableFormatEnum["script-1"]) {
+    if (className === AvailableParagraphFormatEnum["script-1"]) {
       return (
         <BiroScript key={id} type="one" {...props}>
           {children}
@@ -557,7 +593,7 @@ export const renderOptions: RenderOptions = {
       )
     }
 
-    if (className === AvailableFormatEnum["script-2"]) {
+    if (className === AvailableParagraphFormatEnum["script-2"]) {
       return (
         <BiroScript key={id} type="two" {...props}>
           {children}
@@ -565,14 +601,14 @@ export const renderOptions: RenderOptions = {
       )
     }
 
-    if (className === AvailableFormatEnum["subtitle-1"]) {
+    if (className === AvailableParagraphFormatEnum["subtitle-1"]) {
       return (
         <Subtitle key={id} {...props}>
           {children}
         </Subtitle>
       )
     }
-    if (className === AvailableFormatEnum["subtitle-2"]) {
+    if (className === AvailableParagraphFormatEnum["subtitle-2"]) {
       return (
         <Subtitle key={id} {...props}>
           {children}