fix: allow chinese words

package.json

@@ -1,59 +1,59 @@
 {
-	"name": "logseq-mermaid-plugin",
-	"author": "benjypng",
-	"description": "Create mermaid diagrams in image or PDF using mermaid.ink or your own local mermaid.ink server.",
-	"license": "MIT",
-	"logseq": {
-		"id": "logseq-mermaid-plugin",
-		"title": "logseq-mermaid-plugin",
-		"icon": "./icon.svg",
-		"main": "dist/index.html"
-	},
-	"scripts": {
-		"dev": "npx vite",
-		"build": "npx tsc && npx vite build",
-		"preview": "npx vite preview"
-	},
-	"release": {
-		"branches": [
-			"main"
-		],
-		"plugins": [
-			[
-				"@semantic-release/github",
-				{
-					"assets": [
-						"logseq-mermaid-plugin.zip"
-					]
-				}
-			]
-		]
-	},
-	"dependencies": {
-		"@logseq/libs": "^0.0.17",
-		"js-base64": "^3.7.7",
-		"react": "^18.3.1",
-		"react-dom": "^18.3.1"
-	},
-	"devDependencies": {
-		"@eslint/js": "^9.8.0",
-		"@types/eslint": "^8.56.11",
-		"@types/eslint-config-prettier": "^6.11.3",
-		"@types/eslint__js": "^8.42.3",
-		"@types/node": "^20.14.14",
-		"@types/react": "^18.3.3",
-		"@types/react-dom": "^18.3.0",
-		"@typescript-eslint/eslint-plugin": "^7.18.0",
-		"@typescript-eslint/parser": "^7.18.0",
-		"eslint": "^9.8.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-prettier": "^5.2.1",
-		"eslint-plugin-simple-import-sort": "^12.1.1",
-		"prettier": "^3.3.3",
-		"typescript": "^5.5.4",
-		"typescript-eslint": "^7.18.0",
-		"vite": "^5.3.5",
-		"vite-plugin-logseq": "^1.1.2",
-		"vite-tsconfig-paths": "^4.3.2"
-	}
+  "name": "logseq-mermaid-plugin",
+  "author": "benjypng",
+  "description": "Create mermaid diagrams in image or PDF using mermaid.ink or your own local mermaid.ink server.",
+  "license": "MIT",
+  "logseq": {
+    "id": "logseq-mermaid-plugin",
+    "title": "logseq-mermaid-plugin",
+    "icon": "./icon.svg",
+    "main": "dist/index.html"
+  },
+  "scripts": {
+    "dev": "npx vite",
+    "build": "npx tsc && npx vite build",
+    "preview": "npx vite preview"
+  },
+  "release": {
+    "branches": [
+      "main"
+    ],
+    "plugins": [
+      [
+        "@semantic-release/github",
+        {
+          "assets": [
+            "logseq-mermaid-plugin.zip"
+          ]
+        }
+      ]
+    ]
+  },
+  "dependencies": {
+    "@logseq/libs": "^0.0.17",
+    "js-base64": "^3.7.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.8.0",
+    "@types/eslint": "^8.56.11",
+    "@types/eslint-config-prettier": "^6.11.3",
+    "@types/eslint__js": "^8.42.3",
+    "@types/node": "^20.14.14",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "eslint": "^9.8.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "prettier": "^3.3.3",
+    "typescript": "^5.5.4",
+    "typescript-eslint": "^7.18.0",
+    "vite": "^5.3.5",
+    "vite-plugin-logseq": "^1.1.2",
+    "vite-tsconfig-paths": "^4.3.2"
+  }
 }

src/index.tsx

@@ -43,14 +43,26 @@ const main = async () => {
 
       const mermaidString = await getMermaidString(uuid)
       if (!mermaidString || mermaidString.length < 2) return
-      const { svg } = await host.mermaid.render(
-        'mermaid-diagram',
-        mermaidString,
-      )
-
-      setTimeout(async () => {
-        getImgFromSvg(svg, mermaidId, scale)
-      }, 100)
+
+      try {
+        const { svg } = await host.mermaid.render(
+          'mermaid-diagram',
+          mermaidString,
+        )
+
+        setTimeout(async () => {
+          getImgFromSvg(svg, mermaidId, scale)
+        }, 100)
+      } catch (error) {
+        console.log(error)
+        await logseq.UI.showMsg(
+          'Unable to generate mermaid diagram. There may be a typo somewhere.',
+          'error',
+        )
+        throw new Error(
+          'Unable to generate mermaid diagram. There may be a typo somewhere.',
+        )
+      }
     },
   )
 }

src/services/get-img-from-svg.ts

@@ -1,3 +1,5 @@
+import { Base64 } from 'js-base64'
+
 export const getImgFromSvg = (
   svg: string,
   mermaidId: string,
@@ -36,5 +38,5 @@ export const getImgFromSvg = (
     throw new Error('Unable to load SVG')
   }
 
-  img.src = 'data:image/svg+xml;base64,' + btoa(svg)
+  img.src = 'data:image/svg+xml;base64,' + Base64.encode(svg)
 }