diff --git a/apps/web/package.json b/apps/web/package.json index b7d741c5b5..e286977802 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -115,12 +115,11 @@ "react-select": "^5.7.0", "react-timezone-select": "^1.4.0", "react-use-intercom": "1.5.1", - "remark": "^14.0.2", + "remove-markdown": "^0.5.0", "rrule": "^2.7.1", "sanitize-html": "^2.10.0", "schema-dts": "^1.1.0", "short-uuid": "^4.2.0", - "strip-markdown": "^5.0.0", "stripe": "^9.16.0", "superjson": "1.9.1", "tailwindcss-radix": "^2.6.0", @@ -153,6 +152,7 @@ "@types/qrcode": "^1.4.3", "@types/react": "18.0.26", "@types/react-phone-number-input": "^3.0.14", + "@types/remove-markdown": "^0.3.1", "@types/sanitize-html": "^2.9.0", "@types/stripe": "^8.0.417", "@types/uuid": "8.3.1", diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx index 2ec25163fd..574963a5c3 100644 --- a/apps/web/pages/[user].tsx +++ b/apps/web/pages/[user].tsx @@ -23,6 +23,7 @@ import defaultEvents, { import { useLocale } from "@calcom/lib/hooks/useLocale"; import useTheme from "@calcom/lib/hooks/useTheme"; import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML"; +import { stripMarkdown } from "@calcom/lib/stripMarkdown"; import prisma from "@calcom/prisma"; import { baseEventTypeSelect } from "@calcom/prisma/selects"; import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils"; @@ -37,7 +38,16 @@ import PageWrapper from "@components/PageWrapper"; import { ssrInit } from "@server/lib/ssr"; export default function User(props: inferSSRProps & EmbedProps) { - const { users, profile, eventTypes, isDynamicGroup, dynamicNames, dynamicUsernames, isSingleUser } = props; + const { + users, + profile, + eventTypes, + isDynamicGroup, + dynamicNames, + dynamicUsernames, + isSingleUser, + markdownStrippedBio, + } = props; const [user] = users; //To be used when we only have a single user, not dynamic group useTheme(user.theme); const { t } = useLocale(); @@ -107,11 +117,9 @@ export default function User(props: inferSSRProps & E <> ({ username, name: dynamicNames[index] })) @@ -342,6 +350,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) => const safeBio = markdownToSafeHTML(user.bio) || ""; + const markdownStrippedBio = stripMarkdown(user?.bio || ""); return { props: { users, @@ -361,6 +370,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) => dynamicNames, dynamicUsernames, isSingleUser, + markdownStrippedBio, }, }; }; diff --git a/apps/web/pages/api/social/og/image.tsx b/apps/web/pages/api/social/og/image.tsx index 39bb80e722..b3078fcb8b 100644 --- a/apps/web/pages/api/social/og/image.tsx +++ b/apps/web/pages/api/social/og/image.tsx @@ -4,7 +4,6 @@ import type { SatoriOptions } from "satori"; import { z } from "zod"; import { Meeting, App, Generic } from "@calcom/lib/OgImages"; -import { md } from "@calcom/lib/markdownIt"; const calFont = fetch(new URL("../../../../public/fonts/cal.ttf", import.meta.url)).then((res) => res.arrayBuffer() @@ -75,12 +74,10 @@ export default async function handler(req: NextApiRequest) { imageType, }); - const title_ = md.render(title).replace(/(<([^>]+)>)/gi, ""); - const img = new ImageResponse( ( ({ name, username: usernames[index] }))} /> diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx index 57447e0f90..9f7532ded7 100644 --- a/apps/web/pages/team/[slug].tsx +++ b/apps/web/pages/team/[slug].tsx @@ -12,6 +12,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale"; import useTheme from "@calcom/lib/hooks/useTheme"; import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML"; import { getTeamWithMembers } from "@calcom/lib/server/queries/teams"; +import { stripMarkdown } from "@calcom/lib/stripMarkdown"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry"; import prisma from "@calcom/prisma"; import { Avatar, AvatarGroup, Button, EmptyScreen, HeadSeo } from "@calcom/ui"; @@ -26,7 +27,7 @@ import Team from "@components/team/screens/Team"; import { ssrInit } from "@server/lib/ssr"; export type TeamPageProps = inferSSRProps; -function TeamPage({ team, isUnpublished }: TeamPageProps) { +function TeamPage({ team, isUnpublished, markdownStrippedBio }: TeamPageProps) { useTheme(team.theme); const showMembers = useToggleQuery("members"); const { t } = useLocale(); @@ -105,7 +106,7 @@ function TeamPage({ team, isUnpublished }: TeamPageProps) { title={teamName} description={teamName} meeting={{ - title: team?.bio || "", + title: markdownStrippedBio, profile: { name: `${team.name}`, image: getPlaceholderAvatar(team.logo, team.name) }, }} /> @@ -201,10 +202,13 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) => return { ...member, safeBio: markdownToSafeHTML(member.bio || "") }; }); + const markdownStrippedBio = stripMarkdown(team?.bio || ""); + return { props: { team: { ...team, safeBio, members }, trpcState: ssr.dehydrate(), + markdownStrippedBio, }, } as const; }; diff --git a/packages/lib/stripMarkdown.ts b/packages/lib/stripMarkdown.ts new file mode 100644 index 0000000000..49ec6509cf --- /dev/null +++ b/packages/lib/stripMarkdown.ts @@ -0,0 +1,5 @@ +import removeMd from "remove-markdown"; + +export function stripMarkdown(md: string) { + return removeMd(md); +}