POC for using markdown-it-diagrams

dmayle · dmayle · commit a3e4d33ae476 · 2020-07-08T15:41:32.000+02:00
This is a hacky POC showing the use of markdown-it-diagrams for mermaid
and svgbob.  Notable changes:

  * Adds svgbob support for ascii diagrams
  * CDN config isn't tested because svgbob wasm isn't available via CDN
  * Mermaid doesn't show errors.  Error code didn't work before removal.
diff --git a/package.json b/package.json
@@ -160,6 +160,7 @@
     "markdown-it-ruby": "^0.1.1",
     "markdown-it-sub": "~1.0.0",
     "markdown-it-sup": "~1.0.0",
+    "markdown-it-diagrams": "~0.1.2",
     "markdownlint": "^0.17.0",
     "mathjax": "~2.7.5",
     "mermaid": "~8.4.8",
diff --git a/public/js/extra.js b/public/js/extra.js
@@ -23,6 +23,10 @@ import markdownitContainer from 'markdown-it-container'
 /* Defined regex markdown it plugins */
 import Plugin from 'markdown-it-regexp'
 
+/* Diagram suport for markdown */
+import {awaitRenderAvailable} from "markdown-it-diagrams"
+import {diagramPlugin} from "markdown-it-diagrams"
+
 require('prismjs/themes/prism.css')
 require('prismjs/components/prism-wiki')
 require('prismjs/components/prism-haskell')
@@ -243,8 +247,6 @@ function replaceExtraTags (html) {
   return html
 }
 
-if (typeof window.mermaid !== 'undefined' && window.mermaid) window.mermaid.startOnLoad = false
-
 // dynamic event or object binding here
 export function finishView (view) {
   // todo list
@@ -379,23 +381,6 @@ export function finishView (view) {
       console.warn(err)
     }
   })
-  // mermaid
-  const mermaids = view.find('div.mermaid.raw').removeClass('raw')
-  mermaids.each((key, value) => {
-    try {
-      var $value = $(value)
-      const $ele = $(value).closest('pre')
-
-      window.mermaid.parse($value.text())
-      $ele.addClass('mermaid')
-      $ele.html($value.text())
-      window.mermaid.init(undefined, $ele)
-    } catch (err) {
-      $value.unwrap()
-      $value.parent().append(`<div class="alert alert-warning">${escapeHTML(err.str)}</div>`)
-      console.warn(err)
-    }
-  })
   // abc.js
   const abcs = view.find('div.abc.raw').removeClass('raw')
   abcs.each((key, value) => {
@@ -1033,7 +1018,6 @@ const fenceCodeAlias = {
   sequence: 'sequence-diagram',
   flow: 'flow-chart',
   graphviz: 'graphviz',
-  mermaid: 'mermaid',
   abc: 'abc',
   vega: 'vega',
   geo: 'geo'
@@ -1083,6 +1067,10 @@ export const md = markdownit('default', {
 })
 window.md = md
 
+md.awaitRenderAvailable = awaitRenderAvailable;
+// Doesn't work when we use the plugin from here, so store it for later use.
+// md.use(diagramPlugin)
+md.diagramPlugin = diagramPlugin
 md.use(require('markdown-it-abbr'))
 md.use(require('markdown-it-footnote'))
 md.use(require('markdown-it-deflist'))
diff --git a/public/js/index.js b/public/js/index.js
@@ -102,7 +102,7 @@ var cursorActivityDebounce = 50
 var cursorAnimatePeriod = 100
 var supportContainers = ['success', 'info', 'warning', 'danger', 'spoiler']
 var supportCodeModes = ['javascript', 'typescript', 'jsx', 'htmlmixed', 'htmlembedded', 'css', 'xml', 'clike', 'clojure', 'ruby', 'python', 'shell', 'php', 'sql', 'haskell', 'coffeescript', 'yaml', 'pug', 'lua', 'cmake', 'nginx', 'perl', 'sass', 'r', 'dockerfile', 'tiddlywiki', 'mediawiki', 'go', 'gherkin'].concat(hljs.listLanguages())
-var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml', 'vega', 'geo']
+var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml', 'vega', 'geo', 'bob']
 var supportHeaders = [
   {
     text: '# h1',
@@ -2782,10 +2782,14 @@ var postUpdateEvent = null
 
 function updateViewInner () {
   if (appState.currentMode === modeType.edit || !isDirty) return
+  (async function() {
+  // Didn't work when we used it from extra.js, so we use it here instead
+  md.use(md.diagramPlugin)
   var value = editor.getValue()
   var lastMeta = md.meta
   md.meta = {}
   delete md.metaError
+  await md.awaitRenderAvailable();
   var rendered = md.render(value)
   if (md.meta.type && md.meta.type === 'slide') {
     var slideOptions = {
@@ -2819,6 +2823,7 @@ function updateViewInner () {
     if (result && lastResult && result.length !== lastResult.length) { updateDataAttrs(result, ui.area.markdown.children().toArray()) }
     lastResult = $(result).clone()
   }
+  })();
   removeDOMEvents(ui.area.markdown)
   finishView(ui.area.markdown)
   autoLinkify(ui.area.markdown)
diff --git a/public/js/pretty.js b/public/js/pretty.js
@@ -25,10 +25,14 @@ require('../css/site.css')
 require('highlight.js/styles/github-gist.css')
 
 const markdown = $('#doc.markdown-body')
+(async function() {
+// Didn't work when we used it from extra.js, so we use it here instead
+md.use(md.diagramPlugin)
 const text = markdown.text()
 const lastMeta = md.meta
 md.meta = {}
 delete md.metaError
+await md.awaitRenderAvailable();
 let rendered = md.render(text)
 if (md.meta.type && md.meta.type === 'slide') {
   const slideOptions = {
@@ -69,6 +73,7 @@ smoothHashScroll()
 window.createtime = window.lastchangeui.time.attr('data-createtime')
 window.lastchangetime = window.lastchangeui.time.attr('data-updatetime')
 updateLastChange()
+})();
 
 const url = window.location.pathname
 $('.ui-edit').attr('href', `${url}/edit`)
diff --git a/public/views/codimd/foot.ejs b/public/views/codimd/foot.ejs
@@ -10,7 +10,6 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-immzXfCGLhnx3Zfi9F/dUcqxEM8K3o3oTFy9Bh6HCwg=" crossorigin="anonymous" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/config/Safe.js" integrity="sha256-0ygBUDksNDXZS4vm5HMNH1a33KUu6QT1cdNTN+ZLF+4=" crossorigin="anonymous" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js" integrity="sha256-AdQN98MVZs44Eq2yTwtoKufhnU+uZ7v2kXnD5vqzZVo=" crossorigin="anonymous" defer></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.4.8/mermaid.min.js" integrity="sha256-lyWCDMnMeZiXRi7Zl54sZGKYmgQs4izcT7+tKc+KUBk=" crossorigin="anonymous" defer></script>
 <script src="https://cdn.jsdelivr.net/npm/@hackmd/emojify.js@2.1.0/dist/js/emojify-browser.min.js" integrity="sha256-swgfXtqk2bC98KzPoE8tXRz5tmrzpjJWhhXlhYo/wRA=" crossorigin="anonymous" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js" integrity="sha256-Cv5v4i4SuYvwRYzIONifZjoc99CkwfncROMSWat1cVA=" crossorigin="anonymous" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js" integrity="sha256-ji09tECORKvr8xB9iCl8DJ8iNMLriDchC1+p+yt1hSs=" crossorigin="anonymous"></script>
diff --git a/public/views/pretty.ejs b/public/views/pretty.ejs
@@ -83,7 +83,6 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-immzXfCGLhnx3Zfi9F/dUcqxEM8K3o3oTFy9Bh6HCwg=" crossorigin="anonymous" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/config/Safe.js" integrity="sha256-0ygBUDksNDXZS4vm5HMNH1a33KUu6QT1cdNTN+ZLF+4=" crossorigin="anonymous" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js" integrity="sha256-AdQN98MVZs44Eq2yTwtoKufhnU+uZ7v2kXnD5vqzZVo=" crossorigin="anonymous" defer></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.4.8/mermaid.min.js" integrity="sha256-lyWCDMnMeZiXRi7Zl54sZGKYmgQs4izcT7+tKc+KUBk=" crossorigin="anonymous" defer></script>
 <script src="https://cdn.jsdelivr.net/npm/@hackmd/emojify.js@2.1.0/dist/js/emojify-browser.min.js" integrity="sha256-swgfXtqk2bC98KzPoE8tXRz5tmrzpjJWhhXlhYo/wRA=" crossorigin="anonymous" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js" integrity="sha256-ngJY93C4H39YbmrWhnLzSyiepRuQDVKDNCWO2iyMzFw=" crossorigin="anonymous" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js" integrity="sha256-1zu+3BnLYV9LdiY85uXMzii3bdrkelyp37e0ZyTAQh0=" crossorigin="anonymous" defer></script>
diff --git a/public/views/slide.ejs b/public/views/slide.ejs
@@ -98,7 +98,6 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-immzXfCGLhnx3Zfi9F/dUcqxEM8K3o3oTFy9Bh6HCwg=" crossorigin="anonymous" defer></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/config/Safe.js" integrity="sha256-0ygBUDksNDXZS4vm5HMNH1a33KUu6QT1cdNTN+ZLF+4=" crossorigin="anonymous" defer></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js" integrity="sha256-AdQN98MVZs44Eq2yTwtoKufhnU+uZ7v2kXnD5vqzZVo=" crossorigin="anonymous" defer></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.4.8/mermaid.min.js" integrity="sha256-lyWCDMnMeZiXRi7Zl54sZGKYmgQs4izcT7+tKc+KUBk=" crossorigin="anonymous" defer></script>
         <script src="https://cdn.jsdelivr.net/npm/@hackmd/emojify.js@2.1.0/dist/js/emojify-browser.min.js" integrity="sha256-swgfXtqk2bC98KzPoE8tXRz5tmrzpjJWhhXlhYo/wRA=" crossorigin="anonymous" defer></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js" integrity="sha256-ngJY93C4H39YbmrWhnLzSyiepRuQDVKDNCWO2iyMzFw=" crossorigin="anonymous" defer></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js" integrity="sha256-1zu+3BnLYV9LdiY85uXMzii3bdrkelyp37e0ZyTAQh0=" crossorigin="anonymous" defer></script>
