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