feat: add RTE Table

2024-08-05 15:56:26 +02:00
parent a5dbd38654
commit 4005701c79
3 changed files with 81 additions and 13 deletions
@@ -4,6 +4,7 @@ import { insertResponseToImageVaultAsset } from "@/utils/imageVault"

 import ImageContainer from "../ImageContainer"
 import Divider from "../TempDesignSystem/Divider"
+import Table, { TBody, TD, TH, THead, TR } from "../TempDesignSystem/Table"
 import BiroScript from "../TempDesignSystem/Text/BiroScript"
 import Body from "../TempDesignSystem/Text/Body"
 import Caption from "../TempDesignSystem/Text/Caption"
@@ -375,9 +376,9 @@ export const renderOptions: RenderOptions = {
  ) => {
    const props = extractPossibleAttributes(node.attrs)
    return (
-      <table key={node.uid} {...props}>
+      <Table key={node.uid} {...props}>
        {next(node.children, embeds, fullRenderOptions)}
-      </table>
+      </Table>
    )
  },

@@ -387,11 +388,25 @@ export const renderOptions: RenderOptions = {
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
+    // Override the styling of p tags inside the thead tag
+    const theadChildPRenderOptions = {
+      ...fullRenderOptions,
+      [RTETypeEnum.p]: (
+        node: RTEDefaultNode,
+        embeds: EmbedByUid,
+        next: RTENext,
+        fullRenderOptions: RenderOptions
+      ) => (
+        <Body color={"burgundy"} textTransform={"bold"}>
+          {next(node.children, embeds, fullRenderOptions)}
+        </Body>
+      ),
+    }
    const props = extractPossibleAttributes(node.attrs)
    return (
-      <thead key={node.uid} {...props}>
-        {next(node.children, embeds, fullRenderOptions)}
-      </thead>
+      <THead key={node.uid} {...props}>
+        {next(node.children, embeds, theadChildPRenderOptions)}
+      </THead>
    )
  },

@@ -403,9 +418,9 @@ export const renderOptions: RenderOptions = {
  ) => {
    const props = extractPossibleAttributes(node.attrs)
    return (
-      <tbody key={node.uid} {...props}>
+      <TBody key={node.uid} {...props}>
        {next(node.children, embeds, fullRenderOptions)}
-      </tbody>
+      </TBody>
    )
  },

@@ -440,9 +455,9 @@ export const renderOptions: RenderOptions = {
  ) => {
    const props = extractPossibleAttributes(node.attrs)
    return (
-      <tr key={node.uid} {...props}>
+      <TR key={node.uid} {...props}>
        {next(node.children, embeds, fullRenderOptions)}
-      </tr>
+      </TR>
    )
  },

@@ -454,9 +469,9 @@ export const renderOptions: RenderOptions = {
  ) => {
    const props = extractPossibleAttributes(node.attrs)
    return (
-      <th key={node.uid} {...props}>
+      <TH key={node.uid} {...props}>
        {next(node.children, embeds, fullRenderOptions)}
-      </th>
+      </TH>
    )
  },

@@ -468,9 +483,9 @@ export const renderOptions: RenderOptions = {
  ) => {
    const props = extractPossibleAttributes(node.attrs)
    return (
-      <td key={node.uid} {...props}>
+      <TD key={node.uid} {...props}>
        {next(node.children, embeds, fullRenderOptions)}
-      </td>
+      </TD>
    )
  },