Merge branch 'dm-copy-mermaid-as-gfm' into 'master'

Copy Mermaid graphs as GFM

Closes #41211

See merge request gitlab-org/gitlab-ce!16046

2 files changed, 31 insertions, 1 deletions

diff --git a/app/assets/javascripts/behaviors/copy_as_gfm.js b/app/assets/javascripts/behaviors/copy_as_gfm.js
index e7dc4ef8304..c6eca72c51b 100644
--- a/app/assets/javascripts/behaviors/copy_as_gfm.js
+++ b/app/assets/javascripts/behaviors/copy_as_gfm.js
@@ -74,6 +74,18 @@ const gfmRules = {
       return `![${el.dataset.title}](${el.getAttribute('src')})`;
     },
   },
+  MermaidFilter: {
+    'svg.mermaid'(el, text) {
+      const sourceEl = el.querySelector('text.source');
+      if (!sourceEl) return false;
+
+      return `\`\`\`mermaid\n${CopyAsGFM.nodeToGFM(sourceEl)}\n\`\`\``;
+    },
+    'svg.mermaid style, svg.mermaid g'(el, text) {
+      // We don't want to include the content of these elements in the copied text.
+      return '';
+    },
+  },
   MathFilter: {
     'pre.code.math[data-math-style=display]'(el, text) {
       return `\`\`\`math\n${text.trim()}\n\`\`\``;
diff --git a/app/assets/javascripts/render_mermaid.js b/app/assets/javascripts/render_mermaid.js
index 41942c04a4e..b7cde6fb092 100644
--- a/app/assets/javascripts/render_mermaid.js
+++ b/app/assets/javascripts/render_mermaid.js
@@ -24,7 +24,25 @@ export default function renderMermaid($els) {
     });
 
     $els.each((i, el) => {
-      mermaid.init(undefined, el);
+      const source = el.textContent;
+
+      mermaid.init(undefined, el, (id) => {
+        const svg = document.getElementById(id);
+
+        svg.classList.add('mermaid');
+
+        // pre > code > svg
+        svg.closest('pre').replaceWith(svg);
+
+        // We need to add the original source into the DOM to allow Copy-as-GFM
+        // to access it.
+        const sourceEl = document.createElement('text');
+        sourceEl.classList.add('source');
+        sourceEl.setAttribute('display', 'none');
+        sourceEl.textContent = source;
+
+        svg.appendChild(sourceEl);
+      });
     });
   }).catch((err) => {
     Flash(`Can't load mermaid module: ${err}`);