From e77afd6b70813141d67ba524068a59fcac68ec6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Fri, 9 Jun 2023 21:45:57 +0200
Subject: [PATCH] mermaid: allow for YAML frontmatter inside of graph #564

---
 exampleSite/content/shortcodes/mermaid.en.md | 14 +++++---
 static/js/theme.js                           | 35 ++++++++------------
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/exampleSite/content/shortcodes/mermaid.en.md b/exampleSite/content/shortcodes/mermaid.en.md
index 63c8c289da..2156b636bc 100644
--- a/exampleSite/content/shortcodes/mermaid.en.md
+++ b/exampleSite/content/shortcodes/mermaid.en.md
@@ -117,11 +117,13 @@ mermaidZoom = true
 
 ## Examples
 
-### Flowchart with Non-Default Mermaid Theme
+### Flowchart with YAML-Title
 
 ````go
 {{</* mermaid */>}}
-%%{init:{"theme":"forest"}}%%
+---
+title: Example Diagram
+---
 graph LR;
     A[Hard edge] -->|Link text| B(Round edge)
     B --> C{<strong>Decision</strong>}
@@ -131,7 +133,9 @@ graph LR;
 ````
 
 {{< mermaid >}}
-%%{init:{"theme":"forest"}}%%
+---
+title: Example Diagram
+---
 graph LR;
     A[Hard edge] -->|Link text| B(Round edge)
     B --> C{<strong>Decision</strong>}
@@ -247,10 +251,11 @@ stateDiagram-v2
   closed --> open: Open
 {{< /mermaid >}}
 
-### Entity Relationship Model
+### Entity Relationship Model with Non-Default Mermaid Theme
 
 ````go
 {{</* mermaid */>}}
+%%{init:{"theme":"forest"}}%%
 erDiagram
     CUSTOMER }|..|{ DELIVERY-ADDRESS : has
     CUSTOMER ||--o{ ORDER : places
@@ -264,6 +269,7 @@ erDiagram
 ````
 
 {{< mermaid >}}
+%%{init:{"theme":"forest"}}%%
 erDiagram
     CUSTOMER }|..|{ DELIVERY-ADDRESS : has
     CUSTOMER ||--o{ ORDER : places
diff --git a/static/js/theme.js b/static/js/theme.js
index c0278c9cc0..3e2cf010ad 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -158,35 +158,28 @@ function initMermaid( update, attrs ) {
     };
 
     var parseGraph = function( graph ){
-        var d = /^\s*(%%\s*\{\s*\w+\s*:([^%]*?)%%\s*\n?)/g;
+        // See https://github.com/mermaid-js/mermaid/blob/9a080bb975b03b2b1d4ef6b7927d09e6b6b62760/packages/mermaid/src/diagram-api/frontmatter.ts#L10
+        // for reference on the regex originally taken from jekyll
+        var YAML=1;
+        var INIT=2;
+        var GRAPH=3;
+        var d = /^(?:\s*[\n\r])*(-{3}\s*[\n\r](?:.*?)[\n\r]-{3}(?:\s*[\n\r]+)+)?(?:\s*(?:%%\s*\{\s*\w+\s*:([^%]*?)%%\s*[\n\r]?))?(.*)$/s
         var m = d.exec( graph );
+        var yaml = '';
         var dir = {};
         var content = graph;
-        if( m && m.length == 3 ){
-            dir = JSON.parse( '{ "dummy": ' + m[2] ).dummy;
-            content = graph.substring( d.lastIndex );
+        if( m && m.length == 4 ){
+            yaml = m[YAML] ? m[YAML] : yaml;
+            dir = m[INIT] ? JSON.parse( '{ "init": ' + m[INIT] ).init : dir;
+            content = m[GRAPH] ? m[GRAPH] : content;
         }
-        content = content.trim();
-        return { dir: dir, content: content };
+        var ret = { yaml: yaml, dir: dir, content: content.trim() }
+        return ret;
     };
 
     var serializeGraph = function( graph ){
-      // See https://github.com/mermaid-js/mermaid/blob/9a080bb975b03b2b1d4ef6b7927d09e6b6b62760/packages/mermaid/src/diagram-api/frontmatter.ts#L10
-      // for reference on the regex originally taken from jekyll
-      const frontMatterRegex = /^-{3}\s*[\n\r](.*?)[\n\r]-{3}\s*[\n\r]+/s;
-      const matches = graph.content.match(frontMatterRegex);
-      // if we find front matter, we need to put this before the `%%{init` directive.
-      if (matches) {
-        const ymlFrontMatter = graph.content.substring(0, matches[0].length);
-        const graphContent = graph.content.slice(matches[0].length);
-        var s = ymlFrontMatter + '\n%%{init: ' + JSON.stringify( graph.dir ) + '}%%\n';
-        s += graphContent;
+        var s = graph.yaml + '%%{init: ' + JSON.stringify( graph.dir ) + '}%%\n' + graph.content;
         return s;
-      } else {
-        var s = '%%{init: ' + JSON.stringify( graph.dir ) + '}%%\n';
-        s += graph.content;
-        return s;
-      }
     };
 
     var init_func = function( attrs ){