fixing cors issue

README.md

@@ -1,4 +1,4 @@
-[:heart: Sponsor this project on Github](https://github.com/sponsors/hkgnp)
+[[:gift_heart: Sponsor this project on Github](https://github.com/sponsors/hkgnp) or [:coffee: Get me a coffee](https://www.buymeacoffee.com/hkgnp.dev) if you like this plugin!
 
 # Overview
 

package.json

@@ -5,7 +5,7 @@
     "icon": "./icon.svg"
   },
   "name": "logseq-mermaid-plugin",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "",
   "main": "dist/index.html",
   "targets": {

src/convert.ts

@@ -1,7 +1,9 @@
-export const convert = async (data: string, colour: string) => {
-  const matchData = data.match(/```mermaid(.|\n)*?```/gm);
+export const renderMermaid = async (type, payload, colour, mermaidUUID) => {
+  await logseq.Editor.editBlock(payload.uuid);
+  await logseq.Editor.exitEditingMode();
 
-  console.log(colour);
+  const mermaidBlock = await logseq.Editor.getBlock(mermaidUUID);
+  const matchData = mermaidBlock.content.match(/```mermaid(.|\n)*?```/gm);
 
   let toDecode = matchData[0];
   toDecode = toDecode.replace('```mermaid', '').replace('```', '');
@@ -9,28 +11,40 @@ export const convert = async (data: string, colour: string) => {
 
   const jsonString = btoa(toDecode);
 
-  let status = '';
-  await fetch(`https://mermaid.ink/img/${jsonString}`, { method: 'GET' })
-    .then((res) => {
-      if (res.ok) {
-        if (colour === undefined) {
-          status = `<img src="https://mermaid.ink/img/${jsonString}" />`;
-        } else if (colour.startsWith('#')) {
-          status = `<img src="https://mermaid.ink/img/${jsonString}?bgColor=${colour.substring(
-            1
-          )}" />`;
-        } else if (!colour.startsWith('#')) {
-          status = `<img src="https://mermaid.ink/img/${jsonString}?bgColor=!${colour}" />`;
-        } else {
-          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;
+  const renderBlock = async (str: string) => {
+    await logseq.Editor.updateBlock(
+      payload.uuid,
+      `${str}
+{{renderer ${type}}}`
+    );
+  };
+
+  const handleEvent = async (e) => {
+    if (e.currentTarget.response !== 'invalid encoded code') {
+      if (colour === undefined) {
+        renderBlock(`<img src="https://mermaid.ink/img/${jsonString}" />`);
+      } else if (colour.startsWith('#')) {
+        renderBlock(
+          `<img src="https://mermaid.ink/img/${jsonString}?bgColor=${colour.substring(
+            1
+          )}" />`
+        );
+      } else if (!colour.startsWith('#')) {
+        renderBlock(
+          `<img src="https://mermaid.ink/img/${jsonString}?bgColor=!${colour}" />`
+        );
+      } else {
+        renderBlock(`<img src="https://mermaid.ink/img/${jsonString}" />`);
+      }
+    } else {
+      renderBlock(
+        '<p>There is an error with your mermaid syntax. Please rectify and render again.</p>'
+      );
+    }
+  };
+
+  let req = new XMLHttpRequest();
+  req.open('GET', `https://mermaid.ink/img/${jsonString}`, true);
+  req.send();
+  req.onload = handleEvent;
 };

src/index.ts

@@ -1,5 +1,5 @@
 import '@logseq/libs';
-import { convert } from './convert';
+import { renderMermaid } from './convert';
 
 const uniqueIdentifier = () =>
   Math.random()
@@ -42,18 +42,7 @@ const main = () => {
 
     logseq.provideModel({
       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, colour);
-
-        await logseq.Editor.updateBlock(
-          payload.uuid,
-          `${outcomeStr}
-{{renderer ${type}}}`
-        );
+        renderMermaid(type, payload, colour, mermaidUUID);
       },
     });