Event description now supports markdown formatting (#3688)

* yarn

* yarn update

* added Mardown style formatting with sanitized inputs

* Revert "yarn"

This reverts commit 46eb3595cf687504c6783315749b3124936080b9.

* Revert "yarn"

This reverts commit 46eb3595cf687504c6783315749b3124936080b9.

* Revert "yarn update"

This reverts commit f4600d83a67b930c6dd72e292827578856ca5428.

* Revert "yarn"

This reverts commit 46eb3595cf687504c6783315749b3124936080b9.

* Revert "yarn update"

This reverts commit f4600d83a67b930c6dd72e292827578856ca5428.

* Revert "Revert "yarn update""

This reverts commit 8ccab5ee237fb228115229f3c89cf4b848bc9449.

* Revert "Revert "yarn""

This reverts commit 78a755eb39cb518eb0526272a3c11882c48004de.

* yarn.lock removed

* Parses using prisma middleware

* Reverting changes

* Fixes hydration warning

* Fixes Dom warnings

* Update yarn.lock

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: zomars <zomars@me.com>

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) => {
                     </h1>
                     <div className="flex flex-col space-y-2">
                       {eventType?.description && (
-                        <p className="text-gray-600 dark:text-white">
-                          <Icon.FiInfo className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-500" />
-                          {eventType.description}
-                        </p>
+                        <div className="flex py-1 text-sm font-medium text-gray-600 dark:text-white">
+                          <div>
+                            <Icon.FiInfo className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                          </div>
+                          <EventTypeDescriptionSafeHTML eventType={eventType} />
+                        </div>
                       )}
                       {eventType?.requiresConfirmation && (
                         <p className="text-gray-600 dark:text-white">
@@ -574,7 +577,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                       <div>
                         <Icon.FiInfo className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-500" />
                       </div>
-                      <p>{eventType.description}</p>
+                      <EventTypeDescriptionSafeHTML eventType={eventType} />
                     </div>
                   )}
                   {eventType?.requiresConfirmation && (

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 <div {...props} />;
+};
+
+export default EventTypeDescriptionSafeHTML;

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",

apps/web/pages/event-types/[type].tsx

@@ -1469,7 +1469,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                           />
                                           <select
                                             id=""
-                                            className="block w-full rounded-sm border-gray-300 py-2 pl-3 pr-10 text-base text-sm focus:outline-none"
+                                            className="block w-full rounded-sm border-gray-300 py-2 pl-3 pr-10 text-sm focus:outline-none"
                                             {...formMethods.register("periodCountCalendarDays")}
                                             defaultValue={eventType.periodCountCalendarDays ? "1" : "0"}>
                                             <option value="1">{t("calendar_days")}</option>