diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index e4d79fe18d..d4d1dca257 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -10,10 +10,10 @@ import { z } from "zod";
import { AppStoreLocationType, LocationObject, LocationType } from "@calcom/app-store/locations";
import dayjs, { Dayjs } from "@calcom/dayjs";
import {
- useIsEmbed,
- useEmbedStyles,
useEmbedNonStylesConfig,
+ useEmbedStyles,
useIsBackgroundTransparent,
+ useIsEmbed,
} from "@calcom/embed-core/embed-iframe";
import { useContracts } from "@calcom/features/ee/web3/contexts/contractsContext";
import CustomBranding from "@calcom/lib/CustomBranding";
@@ -36,6 +36,7 @@ import { isBrandingHidden } from "@lib/isBrandingHidden";
import AvailableTimes from "@components/booking/AvailableTimes";
import TimeOptions from "@components/booking/TimeOptions";
+import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML";
import { HeadSeo } from "@components/seo/head-seo";
import AvatarGroup from "@components/ui/AvatarGroup";
import PoweredByCal from "@components/ui/PoweredByCal";
@@ -431,10 +432,12 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
{eventType?.description && (
-
-
- {eventType.description}
-
+
)}
{eventType?.requiresConfirmation && (
@@ -574,7 +577,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
-
{eventType.description}
+
)}
{eventType?.requiresConfirmation && (
diff --git a/apps/web/components/eventtype/EventTypeDescriptionSafeHTML.tsx b/apps/web/components/eventtype/EventTypeDescriptionSafeHTML.tsx
new file mode 100644
index 0000000000..d60a64019c
--- /dev/null
+++ b/apps/web/components/eventtype/EventTypeDescriptionSafeHTML.tsx
@@ -0,0 +1,12 @@
+export type EventTypeDescriptionSafeProps = {
+ eventType: { description: string | null };
+};
+
+export const EventTypeDescriptionSafeHTML = ({ eventType }: EventTypeDescriptionSafeProps) => {
+ const props: JSX.IntrinsicElements["div"] = { suppressHydrationWarning: true };
+ // @ts-expect-error: @see packages/prisma/middleware/eventTypeDescriptionParseAndSanitize.ts
+ if (eventType.description) props.dangerouslySetInnerHTML = { __html: eventType.descriptionAsSafeHTML };
+ return ;
+};
+
+export default EventTypeDescriptionSafeHTML;
diff --git a/apps/web/package.json b/apps/web/package.json
index 1e9d74e124..59b25182cc 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -76,6 +76,7 @@
"kbar": "^0.1.0-beta.36",
"libphonenumber-js": "^1.9.53",
"lodash": "^4.17.21",
+ "markdown-it": "^13.0.1",
"memory-cache": "^0.2.0",
"micro": "^9.3.4",
"mime-types": "^2.1.35",
@@ -131,6 +132,7 @@
"@types/glidejs__glide": "^3.4.2",
"@types/jest": "^27.5.1",
"@types/lodash": "^4.14.182",
+ "@types/markdown-it": "^12.2.3",
"@types/memory-cache": "^0.2.2",
"@types/micro": "7.3.6",
"@types/mime-types": "^2.1.1",
diff --git a/apps/web/pages/event-types/[type].tsx b/apps/web/pages/event-types/[type].tsx
index 537527e8a4..008a3c4940 100644
--- a/apps/web/pages/event-types/[type].tsx
+++ b/apps/web/pages/event-types/[type].tsx
@@ -1469,7 +1469,7 @@ const EventTypePage = (props: inferSSRProps) => {
/>