fix: poorly formatted markdown can cause an error rendering (#4415)

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,
 };

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.
  */

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<EvaluateOptions, "jsx" | "jsxs" | "Fragment">;
@@ -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, "&lcub;")
+      .replace(/}/g, "&rcub;")
+      // escape backticks
+      .replace(/`/g, "&#96;");
+    evaluate(sanitizedContent, { ...runtime, remarkPlugins: [remarkGfm] }).then(
+      (r) => setMdxContent(() => r.default)
     );
   }, [content]);