From 20a5775f313e0b78cb7598baf3e202a5e2c7892f Mon Sep 17 00:00:00 2001
From: Anwar Sadath <37188392+asadath1395@users.noreply.github.com>
Date: Wed, 8 Jan 2025 20:33:34 +0530
Subject: [PATCH] fix: Description not rendered as html in select event types
 screen when installing an app (#18354)

---
 .../apps/installation/EventTypesStepCard.tsx          | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/apps/installation/EventTypesStepCard.tsx b/apps/web/components/apps/installation/EventTypesStepCard.tsx
index ccd1b0d16a..123e3104c2 100644
--- a/apps/web/components/apps/installation/EventTypesStepCard.tsx
+++ b/apps/web/components/apps/installation/EventTypesStepCard.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import { useFieldArray, useFormContext } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import { ScrollableArea, Badge, Button, Avatar } from "@calcom/ui";
 
@@ -58,9 +59,13 @@ const EventTypeCard: FC<EventTypeCardProps> = ({
             </small>
           </div>
           {Boolean(description) && (
-            <div className="text-subtle line-clamp-4 break-words  text-sm sm:max-w-[650px] [&>*:not(:first-child)]:hidden [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600">
-              {description}
-            </div>
+            <div
+              className="text-subtle line-clamp-4 break-words text-sm sm:max-w-[650px] [&>*:not(:first-child)]:hidden [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{
+                __html: markdownToSafeHTML(description),
+              }}
+            />
           )}
           <div className="mt-2 flex flex-row flex-wrap gap-2">
             {Boolean(durations.length) &&