diff --git a/frontend/js/mermaid-viewer.js b/frontend/js/mermaid-viewer.js index 37726e6..6032665 100644 --- a/frontend/js/mermaid-viewer.js +++ b/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) { '' + '' + '' + - '' + + '' + + '' + '' + '
' + '' + @@ -155,13 +157,21 @@ export async function renderMermaidBlocks(container) { function wireHeaderButtons(container, originalCode) { // Copy SVG - var copyBtn = container.querySelector('.mermaid-copy'); - if (copyBtn) { - copyBtn.addEventListener('click', function() { + var copySvgBtn = container.querySelector('.mermaid-copy-svg'); + if (copySvgBtn) { + 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) { '
' + '' + '' + - '' + + '' + + '' + '' + '' + '
' + @@ -368,13 +379,22 @@ function openFullscreen(container) { } // Copy SVG in fullscreen - var fsCopy = overlay.querySelector('.mermaid-fs-copy'); - if (fsCopy) { - fsCopy.addEventListener('click', function() { + var fsCopySvg = overlay.querySelector('.mermaid-fs-copy-svg'); + if (fsCopySvg) { + 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) { - navigator.clipboard.writeText(data).then(function() { - /* copied */ - }).catch(function() { - fallbackCopy(data); - }); - } else { - fallbackCopy(data); - } + copyToClipboard(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 // ---------------------------------------------------------------------------