Markdown parser phase 2

Makefile

@@ -36,7 +36,10 @@ deps-dev:
 deps-test:
 	pip-compile --upgrade requirements_test.in
 
-tests-data: tests-data-md
+tests-data: tests-data-markdown
 
-tests-data-md:
-	pytest -m update_markdown_data
+tests-data-markdown:
+	pytest -v -m update_markdown_data
+
+debug-markdown-tests:
+	pytest -v -m debug_markdown_output

funnel/assets/js/project_header.js

@@ -3,7 +3,7 @@ import Video from './utils/embedvideo';
 import Analytics from './utils/analytics';
 import Spa from './utils/spahelper';
 import Form from './utils/formhelper';
-import TypeformEmbed from './utils/typeform_embed';
+import initEmbed from './utils/initembed';
 
 const Ticketing = {
   init(tickets) {
@@ -173,6 +173,7 @@ $(() => {
       event.preventDefault();
       $(this).addClass('mui--hide');
       $(this).next('.js-htmltruncate-full').removeClass('mui--hide');
+      initEmbed($(this).next('.js-htmltruncate-full'));
     });
 
     // Adding the embed video player
@@ -224,6 +225,6 @@ $(() => {
     });
 
     // Include parent container
-    TypeformEmbed.init('#about .markdown');
+    initEmbed('#about .markdown');
   };
 });

funnel/assets/js/submission_form.js

@@ -32,7 +32,7 @@ $(() => {
           'Content-Type': 'application/x-www-form-urlencoded',
         },
         body: new URLSearchParams({
-          type: 'submission',
+          profile: 'document',
           text: view.state.doc.toString(),
         }).toString(),
       });

funnel/assets/js/utils/initembed.js

@@ -2,10 +2,12 @@ import addVegaSupport from './vegaembed';
 import TypeformEmbed from './typeform_embed';
 import MarkmapEmbed from './markmap';
 import MermaidEmbed from './mermaid';
+import PrismEmbed from './prism';
 
-export default function initEmbed(markdownElem = '') {
+export default function initEmbed(parentContainer = '') {
   addVegaSupport();
-  if (markdownElem) TypeformEmbed.init(markdownElem);
-  MarkmapEmbed.init();
-  MermaidEmbed.init();
+  if (parentContainer) TypeformEmbed.init(parentContainer);
+  MarkmapEmbed.init(parentContainer);
+  MermaidEmbed.init(parentContainer);
+  PrismEmbed.init(parentContainer);
 }

funnel/assets/js/utils/markmap.js

@@ -1,10 +1,34 @@
 const MarkmapEmbed = {
   addMarkmap() {
-    $('.language-markmap').each(function embedMarkmap() {
-      $(this).addClass('embed-added');
-      $(this).find('code').addClass('markmap');
-    });
-    window.markmap.autoLoader.renderAll();
+    const self = this;
+    self.container
+      .find('.md-embed-markmap:not(.activating):not(.activated)')
+      .each(function embedMarkmap() {
+        $(this).find('.embed-loading').html('Loading mindmap…');
+        $(this).addClass('activating');
+        const current = $(this).find('.embed-container');
+        current
+          .addClass('markmap')
+          .append(
+            `<script type="text/template">${$(this)
+              .find('.embed-content')
+              .text()}</script>`
+          );
+        window.markmap.autoLoader.renderAllUnder(this);
+        $(this).addClass('activated').removeClass('activating');
+      });
+  },
+  resizeTimer: null,
+  resizeMarkmapContainers() {
+    if (this.resizeTimer) clearTimeout(this.resizeTimer);
+    this.resizeTimer = setTimeout(() => {
+      $('.md-embed-markmap.activated svg').each(function mmresized() {
+        const circles = $(this).find('circle');
+        const firstNode = circles[circles.length - 1];
+        firstNode.dispatchEvent(new Event('click'));
+        firstNode.dispatchEvent(new Event('click'));
+      });
+    }, 500);
   },
   loadMarkmap() {
     const self = this;
@@ -41,6 +65,7 @@ const MarkmapEmbed = {
           loadMarkmapScript();
         } else {
           self.addMarkmap();
+          window.addEventListener('resize', this.resizeMarkmapContainers);
         }
       });
     };
@@ -50,9 +75,12 @@ const MarkmapEmbed = {
       self.addMarkmap();
     }
   },
-  init(containerDiv) {
-    this.containerDiv = containerDiv;
-    if ($('.language-markmap').length > 0) {
+  init(container) {
+    this.container = $(container || 'body');
+    if (
+      this.container.find('.md-embed-markmap:not(.activated):not(.activated)').length >
+      0
+    ) {
       this.loadMarkmap();
     }
   },

funnel/assets/js/utils/mermaid.js

@@ -1,10 +1,30 @@
 const MermaidEmbed = {
   addMermaid() {
-    $('.language-mermaid').each(function embedMarkmap() {
-      $(this).addClass('embed-added');
-      $(this).find('code').addClass('mermaid');
+    const self = this;
+    let idCount = $('.md-embed-mermaid.activating, .md-embed-mermaid.activated').length;
+    const idMarker = 'mermaid_elem_';
+    const instances = self.container.find(
+      '.md-embed-mermaid:not(.activating):not(.activated)'
+    );
+    instances.each(function embedMermaid() {
+      const root = $(this);
+      $(this).find('.embed-loading').html('Loading visualisation…');
+      root.addClass('activating');
+      const contentElem = root.find('.embed-content');
+      const containerElem = root.find('.embed-container');
+      const definition = contentElem.text();
+      let elemId = containerElem.attr('id');
+      if (!elemId) {
+        elemId = `${idMarker}${idCount}`;
+        do {
+          idCount += 1;
+        } while ($(`#${idMarker}${idCount}`).length > 0);
+      }
+      window.mermaid.render(elemId, definition, (svg) => {
+        containerElem.html(svg);
+        root.addClass('activated').removeClass('activating');
+      });
     });
-    window.mermaid.initialize({ startOnLoad: true });
   },
   loadMermaid() {
     const self = this;
@@ -14,14 +34,19 @@ const MermaidEmbed = {
         dataType: 'script',
         cache: true,
       }).done(() => {
+        window.mermaid.initialize({ startOnLoad: false });
         self.addMermaid();
       });
     } else {
       self.addMermaid();
     }
   },
-  init() {
-    if ($('.language-mermaid').length > 0) {
+  init(container) {
+    this.container = $(container || 'body');
+    if (
+      this.container.find('.md-embed-mermaid:not(.activating):not(.activated)').length >
+      0
+    ) {
       this.loadMermaid();
     }
   },

funnel/assets/js/utils/prism.js

@@ -0,0 +1,57 @@
+const PrismEmbed = {
+  activatePrism() {
+    $('code[class*=language-]:not(.activated):not(.activating)').each(
+      function activate() {
+        window.Prism.highlightElement(this);
+      }
+    );
+  },
+  hooked: false,
+  loadPrism() {
+    const CDN_CSS = 'https://unpkg.com/prismjs/themes/prism.min.css';
+    const CDN = [
+      'https://unpkg.com/prismjs/components/prism-core.min.js',
+      'https://unpkg.com/prismjs/plugins/autoloader/prism-autoloader.min.js',
+    ];
+    let asset = 0;
+    const loadPrismStyle = () => {
+      $('head').append($(`<link href="${CDN_CSS}" rel="stylesheet"></link>`));
+    };
+    const loadPrismScript = () => {
+      $.ajax({
+        url: CDN[asset],
+        dataType: 'script',
+        cache: true,
+      }).done(() => {
+        if (asset < CDN.length - 1) {
+          asset += 1;
+          loadPrismScript();
+        } else {
+          if (!this.hooked) {
+            window.Prism.hooks.add('before-sanity-check', (env) => {
+              if (env.element) $(env.element).addClass('activating');
+            });
+            window.Prism.hooks.add('complete', (env) => {
+              if (env.element)
+                $(env.element).addClass('activated').removeClass('activating');
+            });
+            this.hooked = true;
+          }
+          this.activatePrism();
+        }
+      });
+    };
+    if (!window.Prism) {
+      loadPrismStyle();
+      loadPrismScript();
+    } else this.activatePrism();
+  },
+  init(containerDiv) {
+    this.containerDiv = containerDiv;
+    if ($('code[class*=language-]:not(.activated):not(.activating)').length > 0) {
+      this.loadPrism();
+    }
+  },
+};
+
+export default PrismEmbed;

funnel/assets/js/utils/vegaembed.js

@@ -1,20 +1,36 @@
 /* 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,
-      },
+function addVegaChart(parentElement) {
+  parentElement
+    .find('.md-embed-vega-lite:not(.activating):not(.activated)')
+    .each(async function embedVegaChart() {
+      const root = $(this);
+      root.find('.embed-loading').html('Loading visualisation…');
+      root.addClass('activating');
+      const embedded = await vegaEmbed(
+        root.find('.embed-container')[0],
+        JSON.parse(root.find('.embed-content').text()),
+        {
+          renderer: 'svg',
+          actions: {
+            source: false,
+            editor: false,
+            compiled: false,
+          },
+        }
+      );
+      embedded.view.runAfter(() => {
+        root.addClass('activated').removeClass('activating');
+      });
     });
-  });
 }
 
-function addVegaSupport() {
-  if ($('.language-vega-lite').length > 0) {
+function addVegaSupport(container) {
+  const parentElement = $(container || 'body');
+  if (
+    parentElement.find('.md-embed-vega-lite:not(.activating):not(.activated)').length >
+    0
+  ) {
     const vegaliteCDN = [
       'https://cdn.jsdelivr.net/npm/vega@5',
       'https://cdn.jsdelivr.net/npm/vega-lite@5',
@@ -32,15 +48,15 @@ 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();
+            addVegaChart(parentElement);
           }
         });
       };
       loadVegaScript();
     } else {
-      addVegaChart();
+      addVegaChart(parentElement);
     }
   }
 }