From 818b5a8007198afe52dec279427fb70a7c500118 Mon Sep 17 00:00:00 2001
From: yann <yann.faussette@mytulip.io>
Date: Fri, 30 Jun 2023 15:40:23 +0200
Subject: [PATCH 1/2] Adding MerMaid Support

---
 packages/react-notion-x/package.json          |  1 +
 .../react-notion-x/src/third-party/code.tsx   | 28 +++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/packages/react-notion-x/package.json b/packages/react-notion-x/package.json
index 915abf031..94b2cd4c0 100644
--- a/packages/react-notion-x/package.json
+++ b/packages/react-notion-x/package.json
@@ -25,6 +25,7 @@
     "@fisch0920/medium-zoom": "^1.0.7",
     "@matejmazur/react-katex": "^3.1.3",
     "katex": "^0.15.3",
+    "mermaid": "^10.2.3",
     "notion-types": "^6.16.0",
     "notion-utils": "^6.16.0",
     "prismjs": "^1.27.0",
diff --git a/packages/react-notion-x/src/third-party/code.tsx b/packages/react-notion-x/src/third-party/code.tsx
index baec68cb6..25e069b64 100644
--- a/packages/react-notion-x/src/third-party/code.tsx
+++ b/packages/react-notion-x/src/third-party/code.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import copyToClipboard from 'clipboard-copy'
+import mermaid from 'mermaid'
 import { CodeBlock } from 'notion-types'
 import { getBlockTitle } from 'notion-utils'
 import { highlightElement } from 'prismjs'
@@ -44,6 +45,33 @@ export const Code: React.FC<{
     }
   }, [codeRef])
 
+  React.useEffect(() => {
+    const renderMermaid = async () => {
+      try {
+        if (language === 'mermaid') {
+          mermaid.initialize({
+            startOnLoad: true,
+            theme: 'dark',
+            flowchart: {
+              useMaxWidth: false,
+              htmlLabels: true,
+              curve: 'linear'
+            }
+          })
+          await mermaid.run({ querySelector: 'code.language-mermaid' })
+          document.querySelectorAll('code.language-mermaid').forEach((el) => {
+            el.parentElement.style.display = 'flex'
+            el.parentElement.style.justifyContent = 'center'
+          })
+        }
+      } catch (err) {
+        console.warn('mermaid highlight error', err)
+      }
+    }
+
+    renderMermaid()
+  }, [language])
+
   const onClickCopyToClipboard = React.useCallback(() => {
     copyToClipboard(content)
     setIsCopied(true)

From 659e2eb17e0124402ea073c0f0de309655557c0e Mon Sep 17 00:00:00 2001
From: yann <yann.faussette@mytulip.io>
Date: Fri, 30 Jun 2023 16:03:12 +0200
Subject: [PATCH 2/2] Removing center due to bug with specific flowchart

---
 packages/react-notion-x/src/third-party/code.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/react-notion-x/src/third-party/code.tsx b/packages/react-notion-x/src/third-party/code.tsx
index 25e069b64..1c6803326 100644
--- a/packages/react-notion-x/src/third-party/code.tsx
+++ b/packages/react-notion-x/src/third-party/code.tsx
@@ -59,10 +59,6 @@ export const Code: React.FC<{
             }
           })
           await mermaid.run({ querySelector: 'code.language-mermaid' })
-          document.querySelectorAll('code.language-mermaid').forEach((el) => {
-            el.parentElement.style.display = 'flex'
-            el.parentElement.style.justifyContent = 'center'
-          })
         }
       } catch (err) {
         console.warn('mermaid highlight error', err)