diff --git a/app/components/Detail/components/MDX/components/Description/common/constants.ts b/app/components/Detail/components/MDX/components/Description/common/constants.ts index 24d0b9d97..c82a4372f 100644 --- a/app/components/Detail/components/MDX/components/Description/common/constants.ts +++ b/app/components/Detail/components/MDX/components/Description/common/constants.ts @@ -1,6 +1,6 @@ import { Link } from "../../../../../../Layout/components/Content/components/Link/link"; import { Table } from "../../Table/table"; -import { H1, H2, H3, H4, P } from "./../description.styles"; +import { H1, H2, H3, H4, Image, P } from "../description.styles"; /** * Components used when rendering MDX content in Description. Note when @@ -12,6 +12,7 @@ export const MDX_COMPONENTS = { h2: H2, h3: H3, h4: H4, + img: Image, p: P, table: Table, }; diff --git a/app/components/Detail/components/MDX/components/Description/description.styles.ts b/app/components/Detail/components/MDX/components/Description/description.styles.ts index fd0528872..d30086d0c 100644 --- a/app/components/Detail/components/MDX/components/Description/description.styles.ts +++ b/app/components/Detail/components/MDX/components/Description/description.styles.ts @@ -44,6 +44,13 @@ export const H4 = styled.h4` margin: 16px 0; /* Matching margin-bottom of H4 in docs */ `; +/* + * Image styled component. + */ +export const Image = styled.img` + max-width: 100%; +`; + /** * P styled component. */ diff --git a/app/components/Detail/components/MDX/components/Description/description.tsx b/app/components/Detail/components/MDX/components/Description/description.tsx index 447960562..24aa418d2 100644 --- a/app/components/Detail/components/MDX/components/Description/description.tsx +++ b/app/components/Detail/components/MDX/components/Description/description.tsx @@ -7,6 +7,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime"; import remarkGfm from "remark-gfm"; import { MDX_COMPONENTS } from "./common/constants"; import { DescriptionProps } from "./types"; +import DOMPurify from "isomorphic-dompurify"; type ReactMDXContent = (props: MDXProps) => ReactNode; type Runtime = Pick; @@ -19,8 +20,14 @@ export const Description = ({ content }: DescriptionProps): JSX.Element => { ); useEffect(() => { - evaluate(content, { ...runtime, remarkPlugins: [remarkGfm] }).then((r) => - setMdxContent(() => r.default) + const sanitizedContent = DOMPurify.sanitize(content) + // escape curly braces + .replace(/{/g, "{") + .replace(/}/g, "}") + // escape backticks + .replace(/`/g, "`"); + evaluate(sanitizedContent, { ...runtime, remarkPlugins: [remarkGfm] }).then( + (r) => setMdxContent(() => r.default) ); }, [content]);