Markmap, Mermaid and Vega integration handled with new Markdown #1496

hasgeek · Oct 27, 2022 · 289dda2 · 289dda2
1 parent 6f0c9da
commit 289dda2
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 51 deletions.
diff --git a/funnel/assets/js/utils/markmap.js b/funnel/assets/js/utils/markmap.js
@@ -1,10 +1,12 @@
 const MarkmapEmbed = {
   addMarkmap() {
-    $('.language-markmap').each(function embedMarkmap() {
-      $(this).addClass('embed-added');
-      $(this).find('code').addClass('markmap');
+    $('.md-embed-markmap').each(function embedMarkmap() {
+      $(this).find('.embed-content').addClass('markmap');
     });
     window.markmap.autoLoader.renderAll();
+    $('.md-embed-markmap').each(function embedMarkmap() {
+      $(this).addClass('activated');
+    });
   },
   loadMarkmap() {
     const self = this;
@@ -52,7 +54,7 @@ const MarkmapEmbed = {
   },
   init(containerDiv) {
     this.containerDiv = containerDiv;
-    if ($('.language-markmap').length > 0) {
+    if ($('.md-embed-markmap:not(.activated)').length > 0) {
       this.loadMarkmap();
     }
   },

diff --git a/funnel/assets/js/utils/mermaid.js b/funnel/assets/js/utils/mermaid.js
@@ -1,10 +1,26 @@
 const MermaidEmbed = {
   addMermaid() {
-    $('.language-mermaid').each(function embedMarkmap() {
-      $(this).addClass('embed-added');
-      $(this).find('code').addClass('mermaid');
+    const instances = $('.md-embed-mermaid:not(.activating):not(.activated)');
+    let idCount = $('.md-embed-mermaid.activating, .md-embed-mermaid.activated').length;
+    const idMarker = 'mermaid_elem_';
+    instances.each(function embedMarkmap() {
+      const root = $(this);
+      root.addClass('activating');
+      const elem = root.find('.embed-content');
+      const definition = elem.text();
+      let elemId = elem.attr('id');
+      if (!elemId) {
+        elemId = `${idMarker}${idCount}`;
+        do {
+          idCount += 1;
+        } while ($(`#${idMarker}${idCount}`).length > 0);
+      }
+      window.mermaid.render(elemId, definition, (svg) => {
+        elem.html(svg);
+        root.addClass('activated');
+        root.removeClass('activating');
+      });
     });
-    window.mermaid.initialize({ startOnLoad: true });
   },
   loadMermaid() {
     const self = this;
@@ -14,14 +30,15 @@ const MermaidEmbed = {
         dataType: 'script',
         cache: true,
       }).done(() => {
+        window.mermaid.initialize({ startOnLoad: false });
         self.addMermaid();
       });
     } else {
       self.addMermaid();
     }
   },
   init() {
-    if ($('.language-mermaid').length > 0) {
+    if ($('.md-embed-mermaid:not(.activated)').length > 0) {
       this.loadMermaid();
     }
   },

diff --git a/funnel/assets/js/utils/vegaembed.js b/funnel/assets/js/utils/vegaembed.js
@@ -1,20 +1,28 @@
 /* global vegaEmbed */
 
 function addVegaChart() {
-  $('.language-vega-lite').each(function embedVegaChart() {
-    vegaEmbed(this, JSON.parse($(this).find('code').text()), {
-      renderer: 'svg',
-      actions: {
-        source: false,
-        editor: false,
-        compiled: false,
-      },
+  $('.md-embed-vega-lite:not(.activated)').each(async function embedVegaChart() {
+    const root = $(this);
+    const embedded = await vegaEmbed(
+      this,
+      JSON.parse($(this).find('.embed-content').text()),
+      {
+        renderer: 'svg',
+        actions: {
+          source: false,
+          editor: false,
+          compiled: false,
+        },
+      }
+    );
+    embedded.view.runAfter(() => {
+      root.addClass('activated');
     });
   });
 }
 
 function addVegaSupport() {
-  if ($('.language-vega-lite').length > 0) {
+  if ($('.md-embed-vega-lite:not(.activated)').length > 0) {
     const vegaliteCDN = [
       'https://cdn.jsdelivr.net/npm/vega@5',
       'https://cdn.jsdelivr.net/npm/vega-lite@5',
@@ -32,7 +40,7 @@ function addVegaSupport() {
             vegaliteUrl += 1;
             loadVegaScript();
           }
-          // Once all vega js is loaded, initialize vega visualization on all pre tags with class 'language-vega-lite'
+          // Once all vega js is loaded, initialize vega visualization on all pre tags with class 'md-embed-vega-lite'
           if (vegaliteUrl === vegaliteCDN.length) {
             addVegaChart();
           }

diff --git a/funnel/assets/sass/_layout.scss b/funnel/assets/sass/_layout.scss
@@ -860,44 +860,59 @@
   cursor: pointer;
 }
 
-.language-placeholder {
-  display: none;
-}
-
-.language-placeholder.embed-added {
-  display: block;
-  &.language-markmap {
-    margin-bottom: 0px;
-  }
+.md-embed {
+  visibility: hidden;
+  border: 1px solid black;
+  background: linear-gradient(45deg, #bbb, #eee);
   canvas,
   svg {
     width: 100% !important;
-    height: 80vh;
-    border: 1px solid black;
-    background: linear-gradient(45deg, #bbb, #eee);
+    max-width: 100% !important;
+    background-color: transparent !important;
   }
-  canvas {
-    min-height: 150px;
+  .embed-content {
+    white-space: pre;
   }
-}
-
-@media (max-aspect-ratio: 1/1) {
-  .language-placeholder.embed-added svg {
-    height: 40vh;
+  &.activated {
+    visibility: visible;
   }
-}
-
-@media (max-aspect-ratio: 1/2) {
-  .language-placeholder.embed-added svg {
-    height: 30vh;
+  &.md-embed-markmap {
+    margin-bottom: 0px;
+    .embed-content {
+      width: 100%;
+      aspect-ratio: 4 / 3;
+      svg {
+        height: 100%;
+      }
+    }
   }
-}
-
-.language-placeholder.language-vega-lite.vega-embed {
-  display: block;
-  canvas,
-  svg {
-    max-width: 100% !important;
+  &.md-embed-vega-lite.vega-embed {
+    padding: 2.5%;
+    display: block !important;
+    svg.marks {
+      height: auto;
+    }
+    summary {
+      top: 2px;
+      right: 15px;
+    }
+    .vega-actions {
+      right: 6px;
+      top: 37px;
+    }
+    &.has-actions {
+      padding-top: 40px;
+    }
+  }
+  &.md-embed-mermaid {
+    text-align: left;
+    &.activated {
+      text-align: center;
+    }
+  }
+  &.md-embed-vega-lite.vega-embed,
+  &.md-embed-mermaid {
+    padding: 2.5%;
   }
 }
 

diff --git a/funnel/utils/markdown/mdit_plugins/embeds.py b/funnel/utils/markdown/mdit_plugins/embeds.py
@@ -28,7 +28,7 @@ def render(self, tokens, idx, _options, env):
 
         return (
             '<div'
-            + (f' class="md-embed-{name}" ')
+            + (f' class="md-embed md-embed-{name}" ')
             + '><div class="embed-content">'
             + content
             + '</div></div>\n'

diff --git a/funnel/utils/markdown/profiles.py b/funnel/utils/markdown/profiles.py
@@ -15,6 +15,8 @@
     'heading_anchors': anchors.anchors_plugin,
     'tasklists': tasklists.tasklists_plugin,
     'markmap': embeds_plugin,
+    'vega-lite': embeds_plugin,
+    'mermaid': embeds_plugin,
 }
 
 plugin_configs: Dict[str, Dict[str, Any]] = {
@@ -26,6 +28,8 @@
     },
     'tasklists': {'enabled': True, 'label': True, 'label_after': False},
     'markmap': {'name': 'markmap'},
+    'vega-lite': {'name': 'vega-lite'},
+    'mermaid': {'name': 'mermaid'},
 }
 
 default_markdown_options = {
@@ -64,6 +68,8 @@
             'heading_anchors',
             'tasklists',
             'markmap',
+            'vega-lite',
+            'mermaid',
         ],
     },
     'text-field': {