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
// ---------------------------------------------------------------------------