feat: switch to reactmarkdown, remark gfm, rehype raw and rehype sanitize

Author: kemuru

web/package.json

@@ -100,7 +100,6 @@
     "@solana/wallet-adapter-react": "^0.15.36",
     "@solana/web3.js": "^1.98.0",
     "@tanstack/react-query": "^5.69.0",
-    "@types/dompurify": "^3.2.0",
     "@types/react-modal": "^3.16.3",
     "@wagmi/connectors": "^5.7.11",
     "@wagmi/core": "^2.16.7",
@@ -109,7 +108,6 @@
     "chartjs-adapter-moment": "^1.0.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "core-js": "^3.39.0",
-    "dompurify": "^3.2.6",
     "ethers": "^5.8.0",
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.2",
@@ -130,6 +128,9 @@
     "react-scripts": "^5.0.1",
     "react-toastify": "^9.1.3",
     "react-use": "^17.5.1",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^3.0.1",
     "styled-components": "^5.3.3",
     "subgraph-status": "^1.2.4",
     "viem": "^2.24.1",

web/src/components/DisputePreview/DisputeContext.tsx

@@ -1,26 +1,27 @@
 import React, { useMemo } from "react";
 import styled from "styled-components";
 
-import { DisputeDetails } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsTypes";
 import { useAccount } from "wagmi";
 
+import { DisputeDetails } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsTypes";
+
 import { INVALID_DISPUTE_DATA_ERROR, RPC_ERROR } from "consts/index";
 import { Answer as IAnswer } from "context/NewDisputeContext";
 import { isUndefined } from "utils/index";
 
-import { responsiveSize } from "styles/responsiveSize";
-
 import { DisputeDetailsQuery, VotingHistoryQuery } from "src/graphql/graphql";
 
-import ReactMarkdown from "components/ReactMarkdown";
+import { responsiveSize } from "styles/responsiveSize";
+
+import MarkdownRenderer from "components/MarkdownRenderer";
 import { StyledSkeleton } from "components/StyledSkeleton";
 
+import CardLabel from "../DisputeView/CardLabels";
 import { Divider } from "../Divider";
 import { ExternalLink } from "../ExternalLink";
+import RulingAndRewardsIndicators from "../Verdict/RulingAndRewardsIndicators";
 
 import AliasDisplay from "./Alias";
-import RulingAndRewardsIndicators from "../Verdict/RulingAndRewardsIndicators";
-import CardLabel from "../DisputeView/CardLabels";
 
 const StyledH1 = styled.h1`
   margin: 0;
@@ -134,12 +135,12 @@ export const DisputeContext: React.FC<IDisputeContext> = ({
         <div>
           {disputeDetails?.question?.trim() ? (
             <ReactMarkdownWrapper dir="auto">
-              <ReactMarkdown>{disputeDetails.question}</ReactMarkdown>
+              <MarkdownRenderer content={disputeDetails.question} />
             </ReactMarkdownWrapper>
           ) : null}
           {disputeDetails?.description?.trim() ? (
             <ReactMarkdownWrapper dir="auto">
-              <ReactMarkdown>{disputeDetails.description}</ReactMarkdown>
+              <MarkdownRenderer content={disputeDetails.description} />
             </ReactMarkdownWrapper>
           ) : null}
         </div>

web/src/components/MarkdownEditor.tsx

@@ -13,20 +13,21 @@ import {
   linkPlugin,
   linkDialogPlugin,
   tablePlugin,
+  codeBlockPlugin,
+  codeMirrorPlugin,
   toolbarPlugin,
   UndoRedo,
   BoldItalicUnderlineToggles,
-  CodeToggle,
   ListsToggle,
   CreateLink,
   InsertTable,
+  InsertCodeBlock,
   BlockTypeSelect,
   Separator,
 } from "@mdxeditor/editor";
 
 import InfoIcon from "svgs/icons/info-circle.svg";
 
-import { sanitizeMarkdown } from "utils/markdownSanitization";
 import { isValidUrl } from "utils/urlValidation";
 
 import { MDXEditorContainer, MDXEditorGlobalStyles } from "styles/mdxEditorTheme";
@@ -82,9 +83,13 @@ const MarkdownEditor: React.FC<IMarkdownEditor> = ({
   const editorRef = useRef<MDXEditorMethods>(null);
 
   const handleChange = (markdown: string) => {
-    const cleanedMarkdown = markdown === "\u200B" ? "" : markdown.replace(/^\u200B/, "");
-    const sanitizedMarkdown = sanitizeMarkdown(cleanedMarkdown);
-    onChange(sanitizedMarkdown);
+    let cleanedMarkdown = markdown === "\u200B" ? "" : markdown.replace(/^\u200B/, "");
+    // Remove ALL escape characters - no exceptions
+    cleanedMarkdown = cleanedMarkdown.replace(/\\([`[]*_#|>-+=~^{}()!&<$%\\])/g, "$1");
+    // Also handle multiple consecutive backslashes that might accumulate
+    cleanedMarkdown = cleanedMarkdown.replace(/\\+/g, "");
+
+    onChange(cleanedMarkdown);
   };
 
   const handleContainerClick = () => {
@@ -116,13 +121,19 @@ const MarkdownEditor: React.FC<IMarkdownEditor> = ({
       }),
       linkDialogPlugin(),
       tablePlugin(),
+      codeBlockPlugin({ defaultCodeBlockLanguage: "text" }),
+      codeMirrorPlugin({
+        codeBlockLanguages: {
+          text: "Code",
+        },
+      }),
       toolbarPlugin({
         toolbarContents: () => (
           <>
             <UndoRedo />
             <Separator />
             <BoldItalicUnderlineToggles />
-            <CodeToggle />
+            <InsertCodeBlock />
             <Separator />
             <BlockTypeSelect />
             <Separator />