From 6eba4dbed9ded2999677630e1801b50ed1898481 Mon Sep 17 00:00:00 2001
From: chris <christoph.hohnerlein@digitalservice.bund.de>
Date: Thu, 21 Nov 2024 22:27:22 +0100
Subject: [PATCH] refactor(RichText): update getRichTextProps, stricter types

---
 app/components/Header.tsx                    |  5 +----
 app/components/RichText.tsx                  | 10 ++++------
 app/components/__test__/RichText.test.tsx    |  7 +------
 app/components/cookieBanner/CookieBanner.tsx |  5 ++++-
 app/components/inputs/Textarea.tsx           |  2 +-
 app/services/cms/models/StrapiParagraph.ts   | 10 ++++------
 6 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 70bc68155..c64f68ebc 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -16,10 +16,7 @@ export default function Header({ heading, content }: HeaderProps) {
     <div className="ds-stack-16">
       <Heading {...heading} />
       {content && (
-        <RichText
-          className={`ds-heading-03-reg ${content.className ?? ""}`}
-          markdown={content.markdown}
-        />
+        <RichText className="ds-heading-03-reg" markdown={content.markdown} />
       )}
     </div>
   );
diff --git a/app/components/RichText.tsx b/app/components/RichText.tsx
index d76aea8d3..42f22dc9c 100644
--- a/app/components/RichText.tsx
+++ b/app/components/RichText.tsx
@@ -5,9 +5,7 @@ import { sanatize } from "~/services/security/sanatizeHtml";
 import { StandaloneLink } from "./StandaloneLink";
 
 export const RichTextPropsSchema = z.object({
-  id: z.number().optional(),
   markdown: z.string(),
-  className: z.string().optional(),
 });
 
 const CSS_HEADING_CLASSES = [
@@ -35,11 +33,12 @@ const defaultRenderer: Partial<Renderer> = {
 const RichText = ({
   markdown,
   renderer,
-  className,
-  id,
+  className = "",
   ...props
 }: RichTextProps & {
   renderer?: Partial<Renderer>;
+  id?: string;
+  className?: string;
 }) => {
   const marked = new Marked({
     renderer: renderer ?? defaultRenderer,
@@ -52,8 +51,7 @@ const RichText = ({
   return (
     <div
       {...props}
-      id={id?.toString()}
-      className={`rich-text ds-stack-8 ${className ?? ""}`}
+      className={`rich-text ds-stack-8 ${className}`}
       dangerouslySetInnerHTML={{ __html: sanatize(html) }}
     />
   );
diff --git a/app/components/__test__/RichText.test.tsx b/app/components/__test__/RichText.test.tsx
index e0e21be4f..3f92c1949 100644
--- a/app/components/__test__/RichText.test.tsx
+++ b/app/components/__test__/RichText.test.tsx
@@ -52,12 +52,7 @@ describe("RichText component", () => {
   });
 
   it("should handle empty markdown", () => {
-    const markdown = "";
-    const className = "custom-class";
-    const { container } = render(
-      <RichText markdown={markdown} className={className} />,
-    );
-
+    const { container } = render(<RichText markdown={""} />);
     expect(container).toBeEmptyDOMElement();
   });
 
diff --git a/app/components/cookieBanner/CookieBanner.tsx b/app/components/cookieBanner/CookieBanner.tsx
index cde216223..922f6d7cc 100644
--- a/app/components/cookieBanner/CookieBanner.tsx
+++ b/app/components/cookieBanner/CookieBanner.tsx
@@ -96,7 +96,10 @@ export function CookieBanner({
             <div>
               <div className="ds-stack-8">
                 {content.paragraphs.map((paragraph) => (
-                  <RichText key={paragraph.id} markdown={paragraph.markdown} />
+                  <RichText
+                    key={paragraph.markdown}
+                    markdown={paragraph.markdown}
+                  />
                 ))}
               </div>
             </div>
diff --git a/app/components/inputs/Textarea.tsx b/app/components/inputs/Textarea.tsx
index 977883c1f..2efde4ab9 100644
--- a/app/components/inputs/Textarea.tsx
+++ b/app/components/inputs/Textarea.tsx
@@ -53,7 +53,7 @@ const Textarea = ({
         </InputLabel>
       )}
       {description && (
-        <RichText className={"ds-body-01-reg"} markdown={description} />
+        <RichText className="ds-body-01-reg" markdown={description} />
       )}
       {details && <DetailsSummary {...details} />}
       <textarea
diff --git a/app/services/cms/models/StrapiParagraph.ts b/app/services/cms/models/StrapiParagraph.ts
index c5211ccff..d59b331db 100644
--- a/app/services/cms/models/StrapiParagraph.ts
+++ b/app/services/cms/models/StrapiParagraph.ts
@@ -1,6 +1,5 @@
 import { z } from "zod";
-import { RichTextPropsSchema } from "~/components/RichText";
-import { omitNull } from "~/util/omitNull";
+import { type RichTextProps } from "~/components/RichText";
 import { HasOptionalStrapiIdSchema } from "./HasStrapiId";
 
 export const StrapiParagraphSchema = z
@@ -13,7 +12,6 @@ export const StrapiParagraphComponentSchema = StrapiParagraphSchema.extend({
 
 export type StrapiParagraph = z.infer<typeof StrapiParagraphSchema>;
 
-export const getRichTextProps = (cmsData: StrapiParagraph) => {
-  const markdown = cmsData.text;
-  return RichTextPropsSchema.parse(omitNull({ ...cmsData, markdown }));
-};
+export const getRichTextProps = (cmsData: StrapiParagraph): RichTextProps => ({
+  markdown: cmsData.text,
+});