Redraw mermaid on preview

www/common/diffMarked.js

@@ -313,6 +313,15 @@ define([
         // finally, find all 'clickable' items and remove the class
         $el.find('.clickable').removeClass('clickable');
     };
+    var renderMermaid = function ($el) {
+        Mermaid.init(undefined, $el);
+        // clickable elements in mermaid don't work well with our sandboxing setup
+        // the function below strips clickable elements but still leaves behind some artifacts
+        // tippy tooltips might still be useful, so they're not removed. It would be
+        // preferable to just support links, but this covers up a rough edge in the meantime
+        removeMermaidClickables($el);
+    };
+
 
     DiffMd.apply = function (newHtml, $content, common) {
         var contextMenu = common.importMediaTagMenu();
@@ -387,8 +396,15 @@ define([
                 var mts = [];
                 $content.find('media-tag, pre.mermaid').each(function (i, el) {
                     if (el.nodeName.toLowerCase() === "pre") {
+                        var clone = el.cloneNode();
                         return void mts.push({
-                            svg: el.cloneNode(true)
+                            svg: clone,
+                            render: function () {
+                                var $el = $(clone);
+                                $el.text(clone.getAttribute('mermaid-source'));
+                                $el.attr('data-processed', '');
+                                renderMermaid($el);
+                            }
                         });
                     }
                     var $el = $(el);
@@ -401,7 +417,7 @@ define([
                 // Find initial position
                 var idx = -1;
                 mts.some(function (obj, i) {
-                    if (isSvg && $mt.find('svg').attr('id') === $(obj.svg).find('svg').attr('id')) {
+                    if (isSvg && $mt.attr('mermaid-source') === $(obj.svg).attr('mermaid-source')) {
                         idx = i;
                         return true;
                     }
@@ -412,8 +428,15 @@ define([
                 });
                 if (idx === -1) {
                     if (isSvg) {
+                        var clone = $mt[0].cloneNode();
                         mts.unshift({
-                            svg: $mt[0].cloneNode(true)
+                            svg: clone,
+                            render: function () {
+                                var $el = $(clone);
+                                $el.text(clone.getAttribute('mermaid-source'));
+                                $el.attr('data-processed', '');
+                                renderMermaid($el);
+                            }
                         });
                     } else {
                         mts.unshift({
@@ -511,12 +534,7 @@ define([
                 // check if you had cached a pre-rendered instance of the supplied source
                 if (typeof(cached) !== 'object') {
                     try {
-                        Mermaid.init(undefined, $el);
+                        renderMermaid($el);
-                        // clickable elements in mermaid don't work well with our sandboxing setup
-                        // the function below strips clickable elements but still leaves behind some artifacts
-                        // tippy tooltips might still be useful, so they're not removed. It would be
-                        // preferable to just support links, but this covers up a rough edge in the meantime
-                        removeMermaidClickables($el);
                     } catch (e) { console.error(e); }
                     return;
                 }

www/common/inner/common-mediatag.js

@@ -250,36 +250,47 @@ define([
 
             // Check src and cryptkey
             var cfg = tags[i];
+            var tag;
 
             if (cfg.svg) {
-                $spinner.hide();
                 $inner.append(cfg.svg);
-                locked = false;
+                if (!cfg.render) {
-                return;
+                    $spinner.hide();
+                    console.error('here');
+                    locked = false;
+                    return;
+                }
+                console.error('there');
+                setTimeout(cfg.render);
+                tag = cfg.svg;
+            } else {
+                var src = cfg.src;
+                var key = cfg.key;
+                if (cfg.href) {
+                    var parsed = Hash.parsePadUrl(cfg.href);
+                    var secret = Hash.getSecrets(parsed.type, parsed.hash, cfg.password);
+                    var host = priv.fileHost || priv.origin || '';
+                    src = host + Hash.getBlobPathFromHex(secret.channel);
+                    var _key = secret.keys && secret.keys.cryptKey;
+                    if (_key) { key = 'cryptpad:' + Nacl.util.encodeBase64(_key); }
+                }
+                if (!src || !key) {
+                    locked = false;
+                    $spinner.hide();
+                    return void UI.log(Messages.error);
+                }
+                tag = h('media-tag', {
+                    src: src,
+                    'data-crypto-key': key
+                });
+                $inner.append(tag);
+                MediaTag(tag).on('error', function () {
+                    locked = false;
+                    $spinner.hide();
+                    UI.log(Messages.error);
+                });
             }
 
-            var src = cfg.src;
-            var key = cfg.key;
-            if (cfg.href) {
-                var parsed = Hash.parsePadUrl(cfg.href);
-                var secret = Hash.getSecrets(parsed.type, parsed.hash, cfg.password);
-                var host = priv.fileHost || priv.origin || '';
-                src = host + Hash.getBlobPathFromHex(secret.channel);
-                var _key = secret.keys && secret.keys.cryptKey;
-                if (_key) { key = 'cryptpad:' + Nacl.util.encodeBase64(_key); }
-            }
-            if (!src || !key) {
-                locked = false;
-                $spinner.hide();
-                return void UI.log(Messages.error);
-            }
-
-            var tag = h('media-tag', {
-                src: src,
-                'data-crypto-key': key
-            });
-            $inner.append(tag);
-
             var observer = new MutationObserver(function(mutations) {
                 mutations.forEach(function() {
                     locked = false;
@@ -291,11 +302,6 @@ define([
                 childList: true,
                 characterData: false
             });
-            MediaTag(tag).on('error', function () {
-                locked = false;
-                $spinner.hide();
-                UI.log(Messages.error);
-            });
         };
 
         show(i);