adding support for directives

README.md

@@ -16,6 +16,8 @@ To start, simply trigger it using `/Draw mermaid diagram`. Then add your mermaid
 
 ## Changing background colour
 
+### Option 1
+
 Same steps as above, but before clicking `Render`, include the colour inside the renderer, e.g.
 
 ```
@@ -26,6 +28,17 @@ or
 {{renderer :mermaid_abc123, #000000}}
 ```
 
+### Option 2
+
+Define in your plugin settings file. This will apply to **all** mermaid diagrams that you render.
+
+```
+{
+    "theme": '',
+    "colour": ''
+}
+```
+
 # Credits
 
 [mermaid.ink](https://github.com/jihchi/mermaid.ink)

package.json

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

src/convert.ts

@@ -6,7 +6,14 @@ export const renderMermaid = async (type, payload, colour, mermaidUUID) => {
   const matchData = mermaidBlock.content.match(/```mermaid(.|\n)*?```/gm);
 
   let toDecode = matchData[0];
+  if (logseq.settings) {
+    toDecode = toDecode.replace(
+      '```mermaid',
+      `%%{init: { 'theme': ${logseq.settings.theme} } }%%`
+    );
+  } else {
     toDecode = toDecode.replace('```mermaid', '').replace('```', '');
+  }
   toDecode = toDecode.replace('\n', ' ');
 
   const jsonString = btoa(toDecode);
@@ -20,7 +27,19 @@ export const renderMermaid = async (type, payload, colour, mermaidUUID) => {
   };
 
   const handleEvent = async () => {
-    if (colour === undefined) {
+    if (logseq.settings) {
+      if (logseq.settings.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 if (colour === undefined) {
       renderBlock(`<img src="https://mermaid.ink/img/${jsonString}" />`);
     } else if (colour.startsWith('#')) {
       renderBlock(