fix: org bio (#17971)

* fix: org bio

* chore: use in bookings

apps/web/modules/apps/[slug]/slug-view.tsx

@@ -6,6 +6,7 @@ import Link from "next/link";
 
 import { IS_PRODUCTION } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import { showToast } from "@calcom/ui";
 
 import type { getStaticProps } from "@lib/apps/[slug]/getStaticProps";
@@ -71,7 +72,7 @@ function SingleAppPage(props: PageProps) {
       //   privacy="https://zoom.us/privacy"
       body={
         <>
-          <div dangerouslySetInnerHTML={{ __html: md.render(source.content) }} />
+          <div dangerouslySetInnerHTML={{ __html: markdownToSafeHTML(source.content) }} />
         </>
       }
     />

packages/features/bookings/Booker/components/EventMeta.tsx

@@ -11,6 +11,7 @@ import { EventMetaBlock } from "@calcom/features/bookings/components/event-meta/
 import { useTimePreferences } from "@calcom/features/bookings/lib";
 import type { BookerEvent } from "@calcom/features/bookings/types";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import { EventTypeAutoTranslatedField } from "@calcom/prisma/enums";
 
 import i18nConfigration from "../../../../../i18n.json";
@@ -137,7 +138,11 @@ export const EventMeta = ({
           <EventTitle className={`${classNames?.eventMetaTitle} my-2`}>{event?.title}</EventTitle>
           {(event.description || translatedDescription) && (
             <EventMetaBlock contentClassName="mb-8 break-words max-w-full max-h-[180px] scroll-bar pr-4">
-              <div dangerouslySetInnerHTML={{ __html: translatedDescription ?? event.description }} />
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: markdownToSafeHTML(translatedDescription ?? event.description),
+                }}
+              />
             </EventMetaBlock>
           )}
           <div className="space-y-4 font-medium rtl:-mr-2">

packages/features/ee/organizations/pages/settings/profile.tsx

@@ -14,6 +14,7 @@ import SectionBottomActions from "@calcom/features/settings/SectionBottomActions
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { md } from "@calcom/lib/markdownIt";
+import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import turndown from "@calcom/lib/turndownService";
 import { MembershipRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
@@ -144,7 +145,9 @@ const OrgProfileView = () => {
                   <Label className="text-emphasis mt-5">{t("about")}</Label>
                   <div
                     className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
-                    dangerouslySetInnerHTML={{ __html: md.render(currentOrganisation.bio || "") }}
+                    dangerouslySetInnerHTML={{
+                      __html: markdownToSafeHTML(currentOrganisation.bio || ""),
+                    }}
                   />
                 </>
               )}

packages/features/eventtypes/components/EventTypeDescription.tsx

@@ -7,6 +7,7 @@ import { PriceIcon } from "@calcom/features/bookings/components/event-meta/Price
 import { classNames, parseRecurringEvent } from "@calcom/lib";
 import getPaymentAppData from "@calcom/lib/getPaymentAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import type { baseEventTypeSelect } from "@calcom/prisma";
 import { SchedulingType } from "@calcom/prisma/enums";
 import type { EventTypeModel } from "@calcom/prisma/zod";
@@ -50,7 +51,7 @@ export const EventTypeDescription = ({
               shortenDescription ? "line-clamp-4 [&>*:not(:first-child)]:hidden" : ""
             )}
             dangerouslySetInnerHTML={{
-              __html: eventType.descriptionAsSafeHTML || "",
+              __html: markdownToSafeHTML(eventType.descriptionAsSafeHTML || ""),
             }}
           />
         )}

packages/ui/components/form/checkbox/Checkbox.tsx

@@ -4,6 +4,7 @@ import type { InputHTMLAttributes } from "react";
 import React, { forwardRef } from "react";
 
 import classNames from "@calcom/lib/classNames";
+import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 
 import { Icon } from "../../icon";
 
@@ -95,7 +96,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
                   <span
                     className={classNames("text-sm", rest.descriptionClassName)}
                     dangerouslySetInnerHTML={{
-                      __html: descriptionAsSafeHtml,
+                      __html: markdownToSafeHTML(descriptionAsSafeHtml),
                     }}
                   />
                 ) : (