refactor(RichText): update getRichTextProps, stricter types

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>
   );

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) }}
     />
   );

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();
   });
 

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>

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

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,
+});