fix(#2263): remove markdown from slider card

CHANGELOG.md

@@ -16,7 +16,7 @@ changes.
 
 ### Fixed
 
--
+- Fix wronly displayed markdown on slider card [Issue 2263](https://github.com/IntersectMBO/govtool/issues/2316)
 
 ### Changed
 

govtool/frontend/src/components/molecules/GovernanceActionCardElement.tsx

@@ -3,6 +3,7 @@ import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import Markdown from "react-markdown";
 
 import { Typography, Tooltip, CopyButton, TooltipProps } from "@atoms";
+import { removeMarkdown } from "@/utils";
 
 type BaseProps = {
   label: string;
@@ -115,7 +116,7 @@ export const GovernanceActionCardElement = ({
               fontFamily: "Poppins, Arial",
             }}
           >
-            {isMarkdown ? (
+            {!isSliderCard && isMarkdown ? (
               <Markdown
                 components={{
                   // eslint-disable-next-line
@@ -162,7 +163,7 @@ export const GovernanceActionCardElement = ({
                   }),
                 }}
               >
-                {text}
+                {isMarkdown ? removeMarkdown(text) : text}
               </Typography>
             )}
             {isCopyButton && (

govtool/frontend/src/utils/index.ts

@@ -6,6 +6,7 @@ export * from "./callAll";
 export * from "./canonizeJSON";
 export * from "./checkIsMaintenanceOn";
 export * from "./checkIsWalletConnected";
+export * from "./cip129identifier";
 export * from "./dRep";
 export * from "./ellipsizeText";
 export * from "./filterOutNullParams";
@@ -16,6 +17,7 @@ export * from "./generateJsonld";
 export * from "./generateMetadataBody";
 export * from "./getDRepID";
 export * from "./getGovActionId";
+export * from "./getGovActionVotingThresholdKey";
 export * from "./getLengthInBytes";
 export * from "./getMetadataDataMissingStatusTranslation";
 export * from "./getProposalTypeLabel";
@@ -28,8 +30,7 @@ export * from "./mapDtoToProposal";
 export * from "./numberValidation";
 export * from "./openInNewTab";
 export * from "./removeDuplicatedProposals";
+export * from "./removeMarkdown";
 export * from "./setProtocolParameterUpdate";
 export * from "./testIdFromLabel";
 export * from "./wait";
-export * from "./cip129identifier";
-export * from "./getGovActionVotingThresholdKey";

govtool/frontend/src/utils/removeMarkdown.ts

@@ -0,0 +1,19 @@
+export const removeMarkdown = (markdown?: string | number) => {
+  if (!markdown) return "";
+
+  return String(markdown)
+    .replace(/(\*\*|__)(.*?)\1/g, "$2")
+    .replace(/(\*|_)(.*?)\1/g, "$2")
+    .replace(/~~(.*?)~~/g, "$1")
+    .replace(/!\[.*?\]\(.*?\)/g, "")
+    .replace(/\[(.*?)\]\(.*?\)/g, "$1")
+    .replace(/`{1,2}([^`]+)`{1,2}/g, "$1")
+    .replace(/^\s{0,3}>\s?/g, "")
+    .replace(/^\s{1,3}([-*+]|\d+\.)\s+/g, "")
+    .replace(
+      /^(\n)?\s{0,}#{1,6}\s*( (.+))? +#+$|^(\n)?\s{0,}#{1,6}\s*( (.+))?$/gm,
+      "$1$3$4$6",
+    )
+    .replace(/\n{2,}/g, "\n")
+    .replace(/([\\`*{}[\]()#+\-.!_>])/g, "$1");
+};

govtool/frontend/src/utils/tests/removeMarkdown.test.ts

@@ -0,0 +1,66 @@
+import { removeMarkdown } from "../removeMarkdown";
+
+describe("removeMarkdown", () => {
+  it("should remove bold markdown", () => {
+    const markdown = "**Hello** World";
+    const expected = "Hello World";
+    const result = removeMarkdown(markdown);
+    expect(result).toEqual(expected);
+  });
+
+  it("should remove italic markdown", () => {
+    const markdown = "*Hello* World";
+    const expected = "Hello World";
+    const result = removeMarkdown(markdown);
+    expect(result).toEqual(expected);
+  });
+
+  it("should remove strikethrough markdown", () => {
+    const markdown = "~~Hello~~ World";
+    const expected = "Hello World";
+    const result = removeMarkdown(markdown);
+    expect(result).toEqual(expected);
+  });
+
+  it("should remove image markdown", () => {
+    const markdown = "![Alt Text](image.jpg)";
+    const expected = "";
+    const result = removeMarkdown(markdown);
+    expect(result).toEqual(expected);
+  });
+
+  it("should remove link markdown", () => {
+    const markdown = "[Link Text](https://example.com)";
+    const expected = "Link Text";
+    const result = removeMarkdown(markdown);
+    expect(result).toEqual(expected);
+  });
+
+  it("should remove inline code markdown", () => {
+    const markdown = "`code`";
+    const expected = "code";
+    const result = removeMarkdown(markdown);
+    expect(result).toEqual(expected);
+  });
+
+  it("should remove blockquote markdown", () => {
+    const markdown = "> Blockquote";
+    const expected = "Blockquote";
+    const result = removeMarkdown(markdown);
+    expect(result).toEqual(expected);
+  });
+
+  it("should remove heading markdown", () => {
+    const markdown = "# Heading";
+    const expected = "Heading";
+    const result = removeMarkdown(markdown);
+    expect(result).toEqual(expected);
+  });
+
+  it("should remove multiple newlines", () => {
+    const markdown = "Hello\n\n\nWorld";
+    const expected = "Hello\nWorld";
+    const result = removeMarkdown(markdown);
+    expect(result).toEqual(expected);
+  });
+});