fix(#2712): preserve new lines in markdown text

CHANGELOG.md

@@ -15,6 +15,7 @@ changes.
 ### Fixed
 
 - Fix app crash on unhandled wallet error [Issue 3123](https://github.com/IntersectMBO/govtool/issues/3123)
+- Preserve new lines in markdown text [Issue 2712](https://github.com/IntersectMBO/govtool/issues/2712)
 
 ### Changed
 

govtool/frontend/package.json

@@ -57,7 +57,6 @@
     "react-query": "^3.39.3",
     "react-router-dom": "^6.13.0",
     "rehype-katex": "^7.0.1",
-    "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
     "storybook-addon-manual-mocks": "^1.0.3",

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

@@ -5,7 +5,6 @@ import Markdown from "react-markdown";
 import remarkMath from "remark-math";
 import remarkGfm from "remark-gfm";
 import rehypeKatex from "rehype-katex";
-import remarkBreaks from "remark-breaks";
 import "katex/dist/katex.min.css";
 import "./tableMarkdown.css";
 
@@ -120,29 +119,42 @@ export const GovernanceActionCardElement = ({
         fontWeight: 400,
         lineHeight: "24px",
         maxWidth: "auto",
-        whiteSpace: "pre-wrap",
       }}
     >
       {children}
     </Typography>
   );
 
   const markdownComponents = {
-    p: (props: PropsWithChildren) => {
-      const { children } = props;
-      return renderMarkdownText({ children });
-    },
+    p: ({ children }: PropsWithChildren) => renderMarkdownText({ children }),
+    br: () => <br />,
   };
 
-  const renderMarkdown = () => (
-    <Markdown
-      components={markdownComponents}
-      remarkPlugins={[remarkMath, remarkBreaks, remarkGfm]}
-      rehypePlugins={[rehypeKatex]}
-    >
-      {text.toString()}
-    </Markdown>
-  );
+  const renderMarkdown = () => {
+    const formattedText = text
+      .toString()
+      .replace(/\r\n|\r/g, "\n")
+      .replace(
+        /\n\n+/g,
+        (match) =>
+          `\n\n${Array(match.length - 1)
+            .fill("&nbsp;  \n")
+            .join("")}\n`,
+      )
+      .split("\n")
+      .map((line) => `${line}  `)
+      .join("\n");
+
+    return (
+      <Markdown
+        components={markdownComponents}
+        remarkPlugins={[remarkMath, remarkGfm]}
+        rehypePlugins={[rehypeKatex]}
+      >
+        {formattedText}
+      </Markdown>
+    );
+  };
 
   const renderCopyButton = () =>
     isCopyButton && (