Rework mermaid integration to support off-DOM rendering

Gruntfile.js

@@ -151,7 +151,6 @@ module.exports = function(grunt) {
                     "packages/node_modules/@node-red/editor-client/src/js/font-awesome.js",
                     "packages/node_modules/@node-red/editor-client/src/js/history.js",
                     "packages/node_modules/@node-red/editor-client/src/js/validators.js",
-                    "packages/node_modules/@node-red/editor-client/src/js/ui/mermaid.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/utils.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js",

package.json

@@ -109,7 +109,7 @@
         "jquery-i18next": "1.2.1",
         "jsdoc-nr-template": "github:node-red/jsdoc-nr-template",
         "marked": "4.3.0",
-        "mermaid": "^9.4.3",
+        "mermaid": "^10.4.0",
         "minami": "1.2.3",
         "mocha": "9.2.2",
         "node-red-node-test-helper": "^0.3.2",

packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js

@@ -169,7 +169,7 @@
                             var currentScrollTop = $(".red-ui-editor-type-markdown-panel-preview").scrollTop();
                             $(".red-ui-editor-type-markdown-panel-preview").html(RED.utils.renderMarkdown(expressionEditor.getValue()));
                             $(".red-ui-editor-type-markdown-panel-preview").scrollTop(currentScrollTop);
-                            mermaid.init();
+                            RED.editor.mermaid.render()
                         },200);
                     })
                     if (options.header) {
@@ -178,7 +178,7 @@
 
                     if (value) {
                         $(".red-ui-editor-type-markdown-panel-preview").html(RED.utils.renderMarkdown(expressionEditor.getValue()));
-                        mermaid.init();
+                        RED.editor.mermaid.render()
                     }
                     panels = RED.panels.create({
                         id:"red-ui-editor-type-markdown-panels",

packages/node_modules/@node-red/editor-client/src/js/ui/editors/mermaid.js

@@ -0,0 +1,53 @@
+RED.editor.mermaid = (function () {
+    let initializing = false
+    let loaded = false
+    let pendingEvals = []
+    let diagramIds = 0
+
+    function render(selector = '.mermaid') {
+        // $(selector).hide()
+        if (!loaded) {
+            pendingEvals.push(selector)
+
+            if (!initializing) {
+                initializing = true
+                $.getScript(
+                    'vendor/mermaid/mermaid.min.js',
+                    function (data, stat, jqxhr) {
+                        mermaid.initialize({
+                            startOnLoad: false
+                        })
+                        loaded = true
+                        while(pendingEvals.length > 0) {
+                            const pending = pendingEvals.shift()
+                            render(pending)
+                        }
+                    }
+                )
+            }
+        } else {
+            const nodes = document.querySelectorAll(selector)
+
+            nodes.forEach(async node => {
+                if (!node.getAttribute('mermaid-processed')) {
+                    const mermaidContent = node.innerText
+                    node.setAttribute('mermaid-processed', true)
+                    try {
+                        const { svg } = await mermaid.render('mermaid-render-'+Date.now()+'-'+(diagramIds++), mermaidContent);
+                        node.innerHTML = svg
+                    } catch (err) {
+                        $('<div>').css({
+                            fontSize: '0.8em',
+                            border: '1px solid var(--red-ui-border-color-error)',
+                            padding: '5px',
+                            marginBottom: '10px',
+                        }).text(err.toString()).prependTo(node)
+                    }
+                }
+            })
+        }
+    }  
+    return {
+        render: render,
+    };
+})();

packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js

@@ -166,7 +166,7 @@ RED.projects.settings = (function() {
         var description = addTargetToExternalLinks($('<span class="red-ui-text-bidi-aware" dir=\"'+RED.text.bidi.resolveBaseTextDir(desc)+'">'+desc+'</span>')).appendTo(container);
         description.find(".red-ui-text-bidi-aware").contents().filter(function() { return this.nodeType === 3 && this.textContent.trim() !== "" }).wrap( "<span></span>" );
         setTimeout(function () {
-            mermaid.init();
+            RED.editor.mermaid.render()
         }, 200);
     }
 

packages/node_modules/@node-red/editor-client/src/js/ui/tab-help.js

@@ -383,6 +383,7 @@ RED.sidebar.help = (function() {
                 $(this).toggleClass('expanded',!isExpanded);
             })
         helpSection.parent().scrollTop(0);
+        RED.editor.mermaid.render()
     }
 
     function set(html,title) {

packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js

@@ -464,7 +464,7 @@ RED.sidebar.info = (function() {
                 }
                 $(this).toggleClass('expanded',!isExpanded);
             });
-        mermaid.init();
+        RED.editor.mermaid.render()
     }
 
     var tips = (function() {

packages/node_modules/@node-red/editor-client/src/js/ui/utils.js

@@ -101,28 +101,8 @@ RED.utils = (function() {
 
     renderer.code = function (code, lang) {
         if(lang === "mermaid") {
-            // mermaid diagram rendering 
-            if (mermaidIsEnabled === undefined) {
-                if (RED.settings.markdownEditor &&
-                    RED.settings.markdownEditor.mermaid) {
-                    mermaidIsEnabled = RED.settings.markdownEditor.mermaid.enabled;
-                }
-                else {
-                    mermaidIsEnabled = true;
-                }
-            }
-            if (mermaidIsEnabled) {
-                if (!mermaidIsInitialized) {
-                    mermaidIsInitialized = true;
-                    mermaid.initialize({startOnLoad:false});
-                }
-                return `<pre class='mermaid'>${code}</pre>`;
-            }
-            else {
-                return `<details><summary>${RED._("markdownEditor.mermaid.summary")}</summary><pre><code>${code}</code></pre></details>`;
-            }
-        }
-        else {
+            return `<pre class='mermaid'>${code}</pre>`;
+        } else {
             return "<pre><code>" +code +"</code></pre>";
         }
     };