Revert "Fixes formatted description in email " (#7917)

apps/web/components/eventtype/EventTypeDescriptionSafeHTML.tsx

@@ -1,11 +1,11 @@
 export type EventTypeDescriptionSafeProps = {
-  eventType: { description: string | null; descriptionAsSafeHTML: string | null };
+  eventType: { description: string | null };
 };
 
 export const EventTypeDescriptionSafeHTML = ({ eventType }: EventTypeDescriptionSafeProps) => {
   const props: JSX.IntrinsicElements["div"] = { suppressHydrationWarning: true };
-  if (eventType.description)
-    props.dangerouslySetInnerHTML = { __html: eventType.descriptionAsSafeHTML || "" };
+  // @ts-expect-error: @see packages/prisma/middleware/eventTypeDescriptionParseAndSanitize.ts
+  if (eventType.description) props.dangerouslySetInnerHTML = { __html: eventType.descriptionAsSafeHTML };
   return <div {...props} />;
 };
 

apps/web/components/team/screens/Team.tsx

@@ -2,14 +2,13 @@ import Link from "next/link";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { md } from "@calcom/lib/markdownIt";
 import type { TeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { Avatar } from "@calcom/ui";
 
 type TeamType = NonNullable<TeamWithMembers>;
 type MembersType = TeamType["members"];
-type MemberType = MembersType[number] & { safeBio: string | null };
-
-type TeamTypeWithSafeHtml = Omit<TeamType, "members"> & { members: MemberType[] };
+type MemberType = MembersType[number];
 
 const Member = ({ member, teamName }: { member: MemberType; teamName: string | null }) => {
   const { t } = useLocale();
@@ -31,7 +30,7 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
               <>
                 <div
                   className="dark:text-darkgray-600 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
-                  dangerouslySetInnerHTML={{ __html: member.safeBio || "" }}
+                  dangerouslySetInnerHTML={{ __html: md.render(member.bio || "") }}
                 />
               </>
             ) : (
@@ -44,7 +43,7 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
   );
 };
 
-const Members = ({ members, teamName }: { members: MemberType[]; teamName: string | null }) => {
+const Members = ({ members, teamName }: { members: MembersType; teamName: string | null }) => {
   if (!members || members.length === 0) {
     return null;
   }
@@ -58,7 +57,7 @@ const Members = ({ members, teamName }: { members: MemberType[]; teamName: strin
   );
 };
 
-const Team = ({ team }: { team: TeamTypeWithSafeHtml }) => {
+const Team = ({ team }: { team: TeamType }) => {
   return (
     <div>
       <Members members={team.members} teamName={team.name} />

apps/web/package.json

@@ -67,7 +67,6 @@
     "accept-language-parser": "^1.5.0",
     "async": "^3.2.4",
     "bcryptjs": "^2.4.3",
-    "canvas": "^2.11.0",
     "classnames": "^2.3.1",
     "dotenv-cli": "^6.0.0",
     "entities": "^4.4.0",
@@ -78,7 +77,6 @@
     "ical.js": "^1.4.0",
     "ics": "^2.37.0",
     "jose": "^4.13.1",
-    "jsdom": "^21.1.1",
     "kbar": "^0.1.0-beta.36",
     "libphonenumber-js": "^1.10.12",
     "lodash": "^4.17.21",

apps/web/pages/[user].tsx

@@ -24,7 +24,7 @@ import defaultEvents, {
 } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
-import { markdownAndSanitize } from "@calcom/lib/markdownAndSanitize";
+import { md } from "@calcom/lib/markdownIt";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import prisma from "@calcom/prisma";
 import { baseEventTypeSelect } from "@calcom/prisma/selects";
@@ -147,7 +147,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
                 <>
                   <div
                     className=" dark:text-darkgray-600 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
-                    dangerouslySetInnerHTML={{ __html: props.safeBio }}
+                    dangerouslySetInnerHTML={{ __html: md.render(user.bio || "") }}
                   />
                 </>
               )}
@@ -343,7 +343,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   const eventTypes = eventTypesRaw.map((eventType) => ({
     ...eventType,
     metadata: EventTypeMetaDataSchema.parse(eventType.metadata || {}),
-    descriptionAsSafeHTML: markdownAndSanitize(eventType.description),
   }));
 
   const isSingleUser = users.length === 1;
@@ -353,12 +352,9 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       })
     : [];
 
-  const safeBio = markdownAndSanitize(user.bio) || "";
-
   return {
     props: {
       users,
-      safeBio,
       profile,
       user: {
         emailMd5: crypto.createHash("md5").update(user.email).digest("hex"),

apps/web/pages/[user]/[type].tsx

@@ -5,7 +5,7 @@ import type { LocationObject } from "@calcom/app-store/locations";
 import { IS_TEAM_BILLING_ENABLED, WEBAPP_URL } from "@calcom/lib/constants";
 import hasKeyInMetadata from "@calcom/lib/hasKeyInMetadata";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { markdownAndSanitize } from "@calcom/lib/markdownAndSanitize";
+import { addListFormatting } from "@calcom/lib/markdownIt";
 import type { User } from "@calcom/prisma/client";
 
 import { isBrandingHidden } from "@lib/isBrandingHidden";
@@ -59,6 +59,7 @@ Type.isThemeSupported = true;
 const paramsSchema = z.object({ type: z.string(), user: z.string() });
 async function getUserPageProps(context: GetStaticPropsContext) {
   // load server side dependencies
+  const MarkdownIt = await import("markdown-it").then((mod) => mod.default);
   const prisma = await import("@calcom/prisma").then((mod) => mod.default);
   const { privacyFilteredLocations } = await import("@calcom/app-store/locations");
   const { parseRecurringEvent } = await import("@calcom/lib/isRecurringEvent");
@@ -124,6 +125,8 @@ async function getUserPageProps(context: GetStaticPropsContext) {
     },
   });
 
+  const md = new MarkdownIt("default", { html: true, breaks: true, linkify: true });
+
   if (!user || !user.eventTypes.length) return { notFound: true };
 
   const [eventType]: ((typeof user.eventTypes)[number] & {
@@ -150,7 +153,7 @@ async function getUserPageProps(context: GetStaticPropsContext) {
     metadata: EventTypeMetaDataSchema.parse(eventType.metadata || {}),
     recurringEvent: parseRecurringEvent(eventType.recurringEvent),
     locations: privacyFilteredLocations(locations),
-    descriptionAsSafeHTML: markdownAndSanitize(eventType.description),
+    descriptionAsSafeHTML: eventType.description ? addListFormatting(md.render(eventType.description)) : null,
   });
   // Check if the user you are logging into has any active teams or premium user name
   const hasActiveTeam =

apps/web/pages/[user]/book.tsx

@@ -14,7 +14,6 @@ import {
   getUsernameList,
 } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { markdownAndSanitize } from "@calcom/lib/markdownAndSanitize";
 import prisma, { bookEventTypeSelect } from "@calcom/prisma";
 import {
   customInputSchema,
@@ -190,7 +189,6 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
         slug: u.username,
         theme: u.theme,
       })),
-      descriptionAsSafeHTML: markdownAndSanitize(eventType.description),
     };
   })[0];
 

apps/web/pages/d/[link]/[slug].tsx

@@ -5,7 +5,6 @@ import type { LocationObject } from "@calcom/core/location";
 import { privacyFilteredLocations } from "@calcom/core/location";
 import { parseRecurringEvent } from "@calcom/lib";
 import { getWorkingHours } from "@calcom/lib/availability";
-import { markdownAndSanitize } from "@calcom/lib/markdownAndSanitize";
 import { availiblityPageEventTypeSelect } from "@calcom/prisma";
 import prisma from "@calcom/prisma";
 import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
@@ -120,7 +119,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       hideBranding: u.hideBranding,
       timeZone: u.timeZone,
     })),
-    descriptionAsSafeHTML: markdownAndSanitize(hashedLink.eventType.description),
   });
 
   const [user] = users;

apps/web/pages/d/[link]/book.tsx

@@ -1,7 +1,6 @@
 import type { GetServerSidePropsContext } from "next";
 
 import { parseRecurringEvent } from "@calcom/lib";
-import { markdownAndSanitize } from "@calcom/lib/markdownAndSanitize";
 import prisma from "@calcom/prisma";
 import { bookEventTypeSelect } from "@calcom/prisma/selects";
 import { customInputSchema, eventTypeBookingFields, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
@@ -94,7 +93,6 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
         brandColor: u.brandColor,
         darkBrandColor: u.darkBrandColor,
       })),
-      descriptionAsSafeHTML: markdownAndSanitize(eventType.description),
     };
   })[0];
 

apps/web/pages/event-types/index.tsx

@@ -13,7 +13,6 @@ import { APP_NAME, CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
-import { markdownAndSanitize } from "@calcom/lib/markdownAndSanitizeClientSide";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc, TRPCClientError } from "@calcom/trpc/react";
 import {
@@ -142,7 +141,7 @@ const Item = ({ type, group, readOnly }: { type: EventType; group: EventTypeGrou
       </div>
       <EventTypeDescription
         // @ts-expect-error FIXME: We have a type mismatch here @hariombalhara @sean-brydon
-        eventType={{ ...type, descriptionAsSafeHTML: markdownAndSanitize(type.description) }}
+        eventType={type}
         shortenDescription
       />
     </Link>

apps/web/pages/team/[slug].tsx

@@ -10,7 +10,7 @@ import { CAL_URL } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
-import { markdownAndSanitize } from "@calcom/lib/markdownAndSanitize";
+import { md } from "@calcom/lib/markdownIt";
 import { getTeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import prisma from "@calcom/prisma";
@@ -113,7 +113,7 @@ function TeamPage({ team, isUnpublished }: TeamPageProps) {
             <>
               <div
                 className="dark:text-darkgray-600 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
-                dangerouslySetInnerHTML={{ __html: team.safeBio }}
+                dangerouslySetInnerHTML={{ __html: md.render(team.bio || "") }}
               />
             </>
           )}
@@ -187,18 +187,11 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       ...user,
       avatar: CAL_URL + "/" + user.username + "/avatar.png",
     })),
-    descriptionAsSafeHTML: markdownAndSanitize(type.description),
   }));
 
-  const safeBio = markdownAndSanitize(team.bio) || "";
-
-  const members = team.members.map((member) => {
-    return { ...member, safeBio: markdownAndSanitize(member.bio || "") };
-  });
-
   return {
     props: {
-      team: { ...team, safeBio, members },
+      team,
       trpcState: ssr.dehydrate(),
     },
   } as const;

apps/web/pages/team/[slug]/[type].tsx

@@ -5,7 +5,6 @@ import { privacyFilteredLocations } from "@calcom/core/location";
 import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields";
 import { parseRecurringEvent } from "@calcom/lib";
 import { getWorkingHours } from "@calcom/lib/availability";
-import { markdownAndSanitize } from "@calcom/lib/markdownAndSanitize";
 import prisma from "@calcom/prisma";
 import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 
@@ -172,7 +171,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       hideBranding,
       timeZone,
     })),
-    descriptionAsSafeHTML: markdownAndSanitize(eventType.description),
   });
 
   eventTypeObject.availability = [];

apps/web/pages/team/[slug]/book.tsx

@@ -5,7 +5,6 @@ import type { LocationObject } from "@calcom/app-store/locations";
 import { privacyFilteredLocations } from "@calcom/app-store/locations";
 import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields";
 import { parseRecurringEvent } from "@calcom/lib";
-import { markdownAndSanitize } from "@calcom/lib/markdownAndSanitize";
 import prisma from "@calcom/prisma";
 import { customInputSchema, eventTypeBookingFields, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 
@@ -122,7 +121,6 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
         image: u.avatar,
         slug: u.username,
       })),
-      descriptionAsSafeHTML: markdownAndSanitize(eventType.description),
     };
   })[0];
 

packages/emails/src/components/Info.tsx

@@ -1,5 +1,3 @@
-import { markdownAndSanitize } from "@calcom/lib/markdownAndSanitize";
-
 const Spacer = () => <p style={{ height: 6 }} />;
 
 export const Info = (props: {
@@ -8,14 +6,8 @@ export const Info = (props: {
   extraInfo?: React.ReactNode;
   withSpacer?: boolean;
   lineThrough?: boolean;
-  formatted?: boolean;
 }) => {
   if (!props.description || props.description === "") return null;
-
-  const descriptionCSS = "color: '#101010'; font-weight: 400; line-height: 24px; margin: 0;";
-
-  const safeDescription = markdownAndSanitize(props.description.toString()) || "";
-
   return (
     <>
       {props.withSpacer && <Spacer />}
@@ -29,18 +21,7 @@ export const Info = (props: {
             whiteSpace: "pre-wrap",
             textDecoration: props.lineThrough ? "line-through" : undefined,
           }}>
-          {props.formatted ? (
-            <p
-              className="dark:text-darkgray-600 mt-2 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
-              dangerouslySetInnerHTML={{
-                __html: safeDescription
-                  .replaceAll("<p>", `<p style="${descriptionCSS}">`)
-                  .replaceAll("<li>", `<li style="${descriptionCSS}">`),
-              }}
-            />
-          ) : (
-            props.description
-          )}
+          {props.description}
         </p>
         {props.extraInfo}
       </div>

packages/emails/src/templates/BaseScheduledEmail.tsx

@@ -76,7 +76,7 @@ export const BaseScheduledEmail = (
       <WhenInfo calEvent={props.calEvent} t={t} timeZone={timeZone} />
       <WhoInfo calEvent={props.calEvent} t={t} />
       <LocationInfo calEvent={props.calEvent} t={t} />
-      <Info label={t("description")} description={props.calEvent.description} withSpacer formatted />
+      <Info label={t("description")} description={props.calEvent.description} withSpacer />
       <Info label={t("additional_notes")} description={props.calEvent.additionalNotes} withSpacer />
       {props.includeAppsStatus && <AppsStatus calEvent={props.calEvent} t={t} />}
       <UserFieldsResponses calEvent={props.calEvent} />

packages/embeds/embed-core/src/embed-iframe.ts

@@ -344,15 +344,13 @@ function keepParentInformedAboutDimensionChanges() {
     // Use, .height as that gives more accurate value in floating point. Also, do a ceil on the total sum so that whatever happens there is enough iframe size to avoid scroll.
     const contentHeight = Math.ceil(
       parseFloat(mainElementStyles.height) +
-        parseFloat(mainElementStyles.marginTop) +
-        parseFloat(mainElementStyles.marginBottom)
-    );
+      parseFloat(mainElementStyles.marginTop) +
+      parseFloat(mainElementStyles.marginBottom));
     const contentWidth = Math.ceil(
       parseFloat(mainElementStyles.width) +
-        parseFloat(mainElementStyles.marginLeft) +
-        parseFloat(mainElementStyles.marginRight)
-    );
-
+      parseFloat(mainElementStyles.marginLeft) +
+      parseFloat(mainElementStyles.marginRight));
+    
     // During first render let iframe tell parent that how much is the expected height to avoid scroll.
     // Parent would set the same value as the height of iframe which would prevent scroll.
     // On subsequent renders, consider html height as the height of the iframe. If we don't do this, then if iframe get's bigger in height, it would never shrink

packages/features/ee/teams/pages/team-profile-view.tsx

@@ -10,7 +10,6 @@ import { z } from "zod";
 import { IS_TEAM_BILLING_ENABLED, WEBAPP_URL } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { markdownAndSanitize } from "@calcom/lib/markdownAndSanitizeClientSide";
 import { md } from "@calcom/lib/markdownIt";
 import objectKeys from "@calcom/lib/objectKeys";
 import turndown from "@calcom/lib/turndownService";
@@ -257,7 +256,7 @@ const ProfileView = () => {
                     <Label className="mt-5 text-black">{t("about")}</Label>
                     <div
                       className="dark:text-darkgray-600 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
-                      dangerouslySetInnerHTML={{ __html: markdownAndSanitize(team.bio) }}
+                      dangerouslySetInnerHTML={{ __html: md.render(team.bio || "") }}
                     />
                   </>
                 )}

packages/features/eventtypes/components/EventTypeDescription.tsx

@@ -7,6 +7,7 @@ import type { z } from "zod";
 import { classNames, parseRecurringEvent } from "@calcom/lib";
 import getPaymentAppData from "@calcom/lib/getPaymentAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { addListFormatting, md } from "@calcom/lib/markdownIt";
 import type { baseEventTypeSelect } from "@calcom/prisma";
 import type { EventTypeModel } from "@calcom/prisma/zod";
 import { Badge } from "@calcom/ui";
@@ -25,9 +26,8 @@ export type EventTypeDescriptionProps = {
     z.infer<typeof EventTypeModel>,
     Exclude<keyof typeof baseEventTypeSelect, "recurringEvent"> | "metadata"
   > & {
-    descriptionAsSafeHTML?: string | null;
     recurringEvent: Prisma.JsonValue;
-    seatsPerTimeSlot?: number | null;
+    seatsPerTimeSlot?: number;
   };
   className?: string;
   shortenDescription?: boolean;
@@ -57,7 +57,7 @@ export const EventTypeDescription = ({
               shortenDescription ? "line-clamp-4" : ""
             )}
             dangerouslySetInnerHTML={{
-              __html: eventType.descriptionAsSafeHTML || "",
+              __html: addListFormatting(md.render(eventType.description)),
             }}
           />
         )}

packages/lib/markdownAndSanitize.ts

@@ -1,25 +0,0 @@
-import DOMPurify from "dompurify";
-import { JSDOM } from "jsdom";
-
-import { md } from "@calcom/lib/markdownIt";
-
-export function markdownAndSanitize(markdown: string | null) {
-  if (!markdown) return null;
-
-  const window = new JSDOM("").window;
-  // @ts-expect-error as suggested here: https://github.com/cure53/DOMPurify/issues/437#issuecomment-632021941
-  const purify = DOMPurify(window);
-
-  const html = md
-    .render(markdown)
-    .replaceAll(
-      "<ul>",
-      "<ul style='list-style-type: disc; list-style-position: inside; margin-left: 12px; margin-bottom: 4px'>"
-    )
-    .replaceAll(
-      "<ol>",
-      "<ol style='list-style-type: decimal; list-style-position: inside; margin-left: 12px; margin-bottom: 4px'>"
-    );
-  const safeHtml = purify.sanitize(html);
-  return safeHtml;
-}

packages/lib/markdownAndSanitizeClientSide.ts

@@ -1,21 +0,0 @@
-import DOMPurify from "dompurify";
-
-import { md } from "./markdownIt";
-
-export function markdownAndSanitize(markdown: string | null) {
-  if (!markdown) return "";
-
-  const html = md
-    .render(markdown)
-    .replaceAll(
-      "<ul>",
-      "<ul style='list-style-type: disc; list-style-position: inside; margin-left: 12px; margin-bottom: 4px'>"
-    )
-    .replaceAll(
-      "<ol>",
-      "<ol style='list-style-type: decimal; list-style-position: inside; margin-left: 12px; margin-bottom: 4px'>"
-    );
-
-  const safeHtml = DOMPurify.sanitize(html);
-  return safeHtml;
-}

packages/lib/markdownIt.ts

@@ -1,3 +1,12 @@
 import MarkdownIt from "markdown-it";
 
 export const md = new MarkdownIt("default", { html: true, breaks: true, linkify: true });
+
+export function addListFormatting(html: string) {
+  return html
+    .replaceAll("<ul>", "<ul style='list-style-type: disc; list-style-position: inside; margin-left: 12px'>")
+    .replaceAll(
+      "<ol>",
+      "<ol style='list-style-type: decimal; list-style-position: inside; margin-left: 12px'>"
+    );
+}

packages/prisma/seed-app-store.config.json

@@ -203,8 +203,7 @@
     "categories": ["video"],
     "slug": "facetime",
     "type": "facetime_video",
-    "isTemplate": false
-  },
+    "isTemplate": false},
   {
     "dirName": "zohocrm",
     "categories": ["other"],

packages/ui/components/editor/plugins/ToolbarPlugin.tsx

@@ -12,7 +12,6 @@ import { $createHeadingNode, $isHeadingNode } from "@lexical/rich-text";
 import { $isAtNodeEnd, $wrapNodes } from "@lexical/selection";
 import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
 import classNames from "classnames";
-import DOMPurify from "dompurify";
 import type { EditorState, GridSelection, LexicalEditor, NodeSelection, RangeSelection } from "lexical";
 import {
   $createParagraphNode,
@@ -352,8 +351,8 @@ export default function ToolbarPlugin(props: TextEditorProps) {
 
       editor.registerUpdateListener(({ editorState, prevEditorState }) => {
         editorState.read(() => {
-          const textInHtml = $generateHtmlFromNodes(editor).replace(/&lt;/g, "<").replace(/&gt;/g, ">");
-          props.setText(DOMPurify.sanitize(textInHtml));
+          const textInHtml = $generateHtmlFromNodes(editor);
+          props.setText(textInHtml);
         });
         if (!prevEditorState._selection) editor.blur();
       });