Merge pull request #2018 from Charlytoc/main

Add Mermaid renderer

Author: tommygonzaleza

package.json

@@ -86,6 +86,7 @@
     "js-md5": "^0.8.3",
     "katex": "^0.16.8",
     "markdown-to-jsx": "7.2.0",
+    "mermaid": "^11.6.0",
     "next": "^13.4.1",
     "next-redux-wrapper": "8.1.0",
     "next-remove-imports": "^1.0.11",

src/components/MarkDownParser/MDComponents/index.jsx

@@ -13,6 +13,7 @@ import tomorrow from '../syntaxHighlighter/tomorrow';
 import { slugify } from '../../../utils';
 import Text from '../../Text';
 import Image from '../../Image';
+import MermaidRenderer from '../MermaidRenderer';
 
 export function generateId(children) {
   const text = children ? children
@@ -87,6 +88,13 @@ export function MDLink({ children, href }) {
 export function Code({ inline, showLineNumbers, showInlineLineNumbers, className, children }) {
   const match = /language-(\w+)/.exec(className || '');
 
+  console.log('LENGUAGE ', match);
+
+  if (match && match.includes('mermaid')) {
+    console.log(children, 'Children');
+    return <MermaidRenderer code={children[0]} />;
+  }
+
   return !inline && match ? (
     <SyntaxHighlighter
       showLineNumbers={showLineNumbers}

src/components/MarkDownParser/MermaidRenderer.jsx

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import mermaid from 'mermaid';
+import PropTypes from 'prop-types';
+
+function MermaidRenderer({ code }) {
+  useEffect(() => {
+    mermaid.initialize({ startOnLoad: true });
+    mermaid.contentLoaded();
+  }, []);
+
+  return <div className="mermaid">{code}</div>;
+}
+
+MermaidRenderer.propTypes = {
+  code: PropTypes.string.isRequired,
+};
+export default MermaidRenderer;