FIX: Replace 'markdown-to-jsx' with 'remarkable' for Better Large Mar…

…kdown String Support (#903)

* Added new package to render markdown: remarkable

* Refactor the component to use 'remarkable' library to render markdown

* Uninstall 'markdown-to-jsx' library

frontend/package.json

@@ -29,7 +29,6 @@
     "js-cookie": "^3.0.5",
     "js-yaml": "^4.1.0",
     "json-2-csv": "^5.5.1",
-    "markdown-to-jsx": "^7.2.1",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.45",
     "pdfjs-dist": "^3.4.120",
@@ -47,6 +46,7 @@
     "react-scripts": "5.0.1",
     "react-social-login-buttons": "^3.9.1",
     "remark-gfm": "^3.0.1",
+    "remarkable": "^2.0.1",
     "socket.io-client": "^4.7.2",
     "uuid": "^9.0.1",
     "zustand": "^4.3.8"

frontend/src/components/agency/markdown-renderer/MarkdownRenderer.jsx

@@ -1,32 +1,22 @@
 import PropTypes from "prop-types";
-import ReactMarkdown from "markdown-to-jsx";
+import { memo, useMemo } from "react";
+import { Remarkable } from "remarkable";
 
-function MarkdownRenderer({ markdownText }) {
-  return (
-    <ReactMarkdown
-      options={{
-        overrides: {
-          pre: {
-            component: MyParagraph,
-          },
-        },
-      }}
-    >
-      {markdownText}
-    </ReactMarkdown>
-  );
-}
+const md = new Remarkable();
 
-MarkdownRenderer.propTypes = {
-  markdownText: PropTypes.string,
-};
+const MarkdownRenderer = memo(({ markdownText }) => {
+  const htmlContent = useMemo(() => {
+    if (!markdownText) return "";
+    return md.render(markdownText);
+  }, [markdownText]);
 
-const MyParagraph = ({ children, ...props }) => (
-  <div {...props}>{children}</div>
-);
+  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
+});
 
-MyParagraph.propTypes = {
-  children: PropTypes.any,
+MarkdownRenderer.displayName = "MarkdownRenderer";
+
+MarkdownRenderer.propTypes = {
+  markdownText: PropTypes.string,
 };
 
 export { MarkdownRenderer };