feat: upgrade mermaid version (#289)

support mindmap and timeline

Author: iamroylim

packages/plugin-mermaid/locales/en.json

@@ -7,5 +7,7 @@
   "pie": "Pie chart",
   "sequence": "Sequence diagram",
   "state": "State diagram",
-  "uj": "User journey diagram"
+  "uj": "User journey diagram",
+  "mindmap": "Mindmaps",
+  "timeline": "Timeline"
 }

packages/plugin-mermaid/locales/zh_Hans.json

@@ -7,5 +7,7 @@
   "pie": "饼状图",
   "sequence": "时序图",
   "state": "状态图",
-  "uj": "旅程图"
+  "uj": "旅程图",
+  "mindmap": "思维导图",
+  "timeline": "时间轴"
 }

packages/plugin-mermaid/package.json

@@ -28,7 +28,7 @@
     "locales"
   ],
   "dependencies": {
-    "mermaid": "^9.3.0"
+    "mermaid": "^10.0.2"
   },
   "devDependencies": {
     "bytemd": "workspace:*"

packages/plugin-mermaid/src/index.ts

@@ -13,6 +13,8 @@ type Locale = {
   uj: string
   gantt: string
   pie: string
+  mindmap: string
+  timeline: string
 }
 
 export interface BytemdPluginMermaidOptions extends MermaidConfig {
@@ -112,6 +114,26 @@ another task      : 24d`,
 "Cats" : 85
 "Rats" : 15`,
     },
+    {
+      title: locale.mindmap,
+      code: `mindmap
+      Root
+          A
+            B
+            C
+    `,
+    },
+    {
+      title: locale.timeline,
+      code: `timeline
+      title History of Social Media Platform
+      2002 : LinkedIn
+      2004 : Facebook
+           : Google
+      2005 : Youtube
+      2006 : Twitter
+      `,
+    },
   ]
 
   return {
@@ -138,19 +160,19 @@ another task      : 24d`,
           container.style.lineHeight = 'initial' // reset line-height
           pre.replaceWith(container)
 
-          try {
-            m.render(
-              `bytemd-mermaid-${Date.now()}-${i}`,
-              source,
-              (svgCode) => {
-                container.innerHTML = svgCode
-              },
+          m.render(
+            `bytemd-mermaid-${Date.now()}-${i}`,
+            source,
+            // @ts-ignore
+            container
+          )
+            .then((svgCode) => {
               // @ts-ignore
-              container
-            )
-          } catch (err) {
-            // console.error(err);
-          }
+              container.innerHTML = svgCode.svg
+            })
+            .catch((err) => {
+              // console.error(err);
+            })
         })
       })()
     },