Added error handling for wrong mermaid syntax

package.json

@@ -5,7 +5,7 @@
     "icon": "./icon.svg"
   },
   "name": "logseq-mermaid-plugin",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "",
   "main": "dist/index.html",
   "targets": {
@@ -19,8 +19,7 @@
   "author": "hkgnp",
   "license": "MIT",
   "dependencies": {
-    "@logseq/libs": "^0.0.1-alpha.34",
-    "mermaid": "^8.14.0"
+    "@logseq/libs": "^0.0.1-alpha.34"
   },
   "devDependencies": {
     "parcel": "^2.2.0"

src/convert.ts

@@ -1,4 +1,4 @@
-export const convert = (data: string) => {
+export const convert = async (data: string) => {
   const matchData = data.match(/```mermaid(.|\n)*?```/gm);
 
   let toDecode = matchData[0];
@@ -6,5 +6,19 @@ export const convert = (data: string) => {
   toDecode = toDecode.replace('\n', ' ');
 
   const jsonString = btoa(toDecode);
-  return `<img src="https://mermaid.ink/img/${jsonString}" />`;
+
+  let status = '';
+  await fetch(`https://mermaid.ink/img/${jsonString}`, { method: 'HEAD' })
+    .then((res) => {
+      if (res.ok) {
+        status = `<img src="https://mermaid.ink/img/${jsonString}" />`;
+      } else {
+        status = `<p>There is an error with your mermaid syntax. Please rectify and render again.</p>`;
+      }
+    })
+    .catch((err) => console.log('Error:', err));
+
+  const outcome = status;
+
+  return outcome;
 };

src/index.ts

@@ -43,10 +43,14 @@ const main = () => {
       async show() {
         await logseq.Editor.editBlock(payload.uuid);
         await logseq.Editor.exitEditingMode();
+
         const mermaidBlock = await logseq.Editor.getBlock(mermaidUUID);
+
+        const outcomeStr = await convert(mermaidBlock.content);
+
         await logseq.Editor.updateBlock(
           payload.uuid,
-          `${convert(mermaidBlock.content)}
+          `${outcomeStr}
 {{renderer ${type}}}`
         );
       },