feat: add 'Copy code Mermaid' button alongside 'Copy SVG' in header + fullscreen

frontend/js/mermaid-viewer.js

@@ -105,6 +105,7 @@ export async function renderMermaidBlocks(container) {
       // Build container with header + body
       var containerDiv = document.createElement('div');
       containerDiv.className = 'mermaid-container';
+      containerDiv.setAttribute('data-mermaid-code', originalCode);
 
       // Header bar
       var header = document.createElement('div');
@@ -115,7 +116,8 @@ export async function renderMermaidBlocks(container) {
           '<button class="mermaid-btn mermaid-zoom-in" title="Zoom +"><i data-lucide="zoom-in" style="width:14px;height:14px"></i></button>' +
           '<button class="mermaid-btn mermaid-zoom-out" title="Zoom -"><i data-lucide="zoom-out" style="width:14px;height:14px"></i></button>' +
           '<button class="mermaid-btn mermaid-fullscreen" title="Plein ecran"><i data-lucide="expand" style="width:14px;height:14px"></i></button>' +
-          '<button class="mermaid-btn mermaid-copy" title="Copier SVG"><i data-lucide="copy" style="width:14px;height:14px"></i></button>' +
+          '<button class="mermaid-btn mermaid-copy-svg" title="Copier SVG"><i data-lucide="copy" style="width:14px;height:14px"></i></button>' +
+          '<button class="mermaid-btn mermaid-copy-code" title="Copier le code Mermaid"><i data-lucide="file-code-2" style="width:14px;height:14px"></i></button>' +
           '<button class="mermaid-btn mermaid-download" title="Telecharger PNG"><i data-lucide="download" style="width:14px;height:14px"></i></button>' +
           '<div class="mermaid-toggle">' +
             '<button class="mermaid-toggle-btn active" data-mode="preview">Preview</button>' +
@@ -155,13 +157,21 @@ export async function renderMermaidBlocks(container) {
 
 function wireHeaderButtons(container, originalCode) {
   // Copy SVG
-  var copyBtn = container.querySelector('.mermaid-copy');
+  var copySvgBtn = container.querySelector('.mermaid-copy-svg');
-  if (copyBtn) {
+  if (copySvgBtn) {
-    copyBtn.addEventListener('click', function() {
+    copySvgBtn.addEventListener('click', function() {
       copySvgToClipboard(container);
     });
   }
 
+  // Copy code
+  var copyCodeBtn = container.querySelector('.mermaid-copy-code');
+  if (copyCodeBtn) {
+    copyCodeBtn.addEventListener('click', function() {
+      copyToClipboard(originalCode);
+    });
+  }
+
   // Download PNG
   var downloadBtn = container.querySelector('.mermaid-download');
   if (downloadBtn) {
@@ -310,7 +320,8 @@ function openFullscreen(container) {
       '<div class="mermaid-header-actions">' +
         '<button class="mermaid-btn mermaid-fs-zoom-in" title="Zoom +"><i data-lucide="zoom-in" style="width:14px;height:14px"></i></button>' +
         '<button class="mermaid-btn mermaid-fs-zoom-out" title="Zoom -"><i data-lucide="zoom-out" style="width:14px;height:14px"></i></button>' +
-        '<button class="mermaid-btn mermaid-fs-copy" title="Copier SVG"><i data-lucide="copy" style="width:14px;height:14px"></i></button>' +
+        '<button class="mermaid-btn mermaid-fs-copy-svg" title="Copier SVG"><i data-lucide="copy" style="width:14px;height:14px"></i></button>' +
+        '<button class="mermaid-btn mermaid-fs-copy-code" title="Copier le code Mermaid"><i data-lucide="file-code-2" style="width:14px;height:14px"></i></button>' +
         '<button class="mermaid-btn mermaid-fs-download" title="Telecharger PNG"><i data-lucide="download" style="width:14px;height:14px"></i></button>' +
         '<button class="mermaid-btn mermaid-fs-close" title="Fermer (Echap)"><i data-lucide="x" style="width:14px;height:14px"></i></button>' +
       '</div>' +
@@ -368,13 +379,22 @@ function openFullscreen(container) {
   }
 
   // Copy SVG in fullscreen
-  var fsCopy = overlay.querySelector('.mermaid-fs-copy');
+  var fsCopySvg = overlay.querySelector('.mermaid-fs-copy-svg');
-  if (fsCopy) {
+  if (fsCopySvg) {
-    fsCopy.addEventListener('click', function() {
+    fsCopySvg.addEventListener('click', function() {
       copySvgFromElement(content);
     });
   }
 
+  // Copy code in fullscreen
+  var fsCopyCode = overlay.querySelector('.mermaid-fs-copy-code');
+  if (fsCopyCode) {
+    fsCopyCode.addEventListener('click', function() {
+      var code = container.getAttribute('data-mermaid-code') || '';
+      copyToClipboard(code);
+    });
+  }
+
   // Download PNG in fullscreen
   var fsDownload = overlay.querySelector('.mermaid-fs-download');
   if (fsDownload) {
@@ -414,15 +434,7 @@ function copySvgFromElement(el) {
   var svg = el.querySelector('svg');
   if (!svg) return;
   var data = new XMLSerializer().serializeToString(svg);
-  if (navigator.clipboard && navigator.clipboard.writeText) {
+  copyToClipboard(data);
-    navigator.clipboard.writeText(data).then(function() {
-      /* copied */
-    }).catch(function() {
-      fallbackCopy(data);
-    });
-  } else {
-    fallbackCopy(data);
-  }
 }
 
 function fallbackCopy(text) {
@@ -483,6 +495,20 @@ function downloadBlob(blob, filename) {
   URL.revokeObjectURL(a.href);
 }
 
+// ---------------------------------------------------------------------------
+// Copy text to clipboard
+// ---------------------------------------------------------------------------
+
+function copyToClipboard(text) {
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard.writeText(text).catch(function() {
+      fallbackCopy(text);
+    });
+  } else {
+    fallbackCopy(text);
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Focus mode (#29) — click diagram to enlarge in a side panel
 // ---------------------------------------------------------------------------