adding support for directives

README.md

@@ -32,10 +32,39 @@ or
 
 Define in your plugin settings file. This will apply to **all** mermaid diagrams that you render.
 
+```
+%%{init: {'theme': 'dark'}}%%
+flowchart LR
+A[Hard] -->|Text| B(Round)
+B --> C{Decision}
+C -->|One| D[Result 1]
+C -->|Three| E[Result 2]
+```
+
+```
+%%{init: {'theme': 'dark'}}%%
+flowchart LR
+A[Hard] -->|Text| B(Round)
+B --> C{Decision}
+C -->|One| D[Result 1]
+C -->|Three| E[Result 2]
+```
+
 ```
 {
-    "theme": '',
+    "config": {
-    "colour": ''
+        "theme": "dark",
+        "colour": "#2f3437"
+    }
+}
+
+or
+
+{
+    "config": {
+        "theme": "dark",
+        "colour": "gray"
+    }
 }
 ```
 

package.json

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

src/convert.ts

@@ -6,14 +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(
+  if (logseq.settings.config) {
-      '```mermaid',
+    const initStr = `\n%%{init: {'theme': '${logseq.settings.config.theme}'}}%%`;
-      `%%{init: { 'theme': ${logseq.settings.theme} } }%%`
+    toDecode = toDecode.slice(0, 10) + initStr + toDecode.slice(10);
-    );
-  } else {
-    toDecode = toDecode.replace('```mermaid', '').replace('```', '');
   }
+
+  toDecode = toDecode.replace('```mermaid', '').replace('```', '');
+
   toDecode = toDecode.replace('\n', ' ');
 
   const jsonString = btoa(toDecode);
@@ -27,14 +27,16 @@ export const renderMermaid = async (type, payload, colour, mermaidUUID) => {
   };
 
   const handleEvent = async () => {
-    if (logseq.settings) {
+    if (logseq.settings.config) {
-      if (logseq.settings.colour.startsWith('#')) {
+      const { colour } = logseq.settings.config;
+
+      if (colour.startsWith('#')) {
         renderBlock(
           `<img src="https://mermaid.ink/img/${jsonString}?bgColor=${colour.substring(
             1
           )}" />`
         );
-      } else if (!colour.startsWith('#')) {
+      } else if (!logseq.settings.colour.startsWith('#')) {
         renderBlock(
           `<img src="https://mermaid.ink/img/${jsonString}?bgColor=!${colour}" />`
         );