Merge pull request #27 from ThisIs-Developer/copilot/fix-copy-button-toolbar-order

Mermaid UI: fix Copy button visibility, toolbar order, modal size, and modal Copy action

Author: ThisIs-Developer

index.html

@@ -243,6 +243,9 @@ <h5>Menu</h5>
                 <button class="mermaid-toolbar-btn" id="mermaid-modal-zoom-reset" title="Reset zoom">
                     <i class="bi bi-arrows-angle-contract"></i> Reset
                 </button>
+                <button class="mermaid-toolbar-btn" id="mermaid-modal-copy" title="Copy image">
+                    <i class="bi bi-clipboard-image"></i> Copy
+                </button>
                 <button class="mermaid-toolbar-btn" id="mermaid-modal-download-png" title="Download PNG">
                     <i class="bi bi-file-image"></i> PNG
                 </button>

script.js

@@ -1843,6 +1843,31 @@ This is a fully client-side application. Your content never leaves your browser
     }
   });
 
+  document.getElementById('mermaid-modal-copy').addEventListener('click', async function() {
+    if (!modalCurrentSvgEl) return;
+    const btn = this;
+    const original = btn.innerHTML;
+    btn.innerHTML = '<i class="bi bi-hourglass-split"></i>';
+    try {
+      const canvas = await svgToCanvas(modalCurrentSvgEl);
+      canvas.toBlob(async blob => {
+        try {
+          await navigator.clipboard.write([
+            new ClipboardItem({ 'image/png': blob })
+          ]);
+          btn.innerHTML = '<i class="bi bi-check-lg"></i> Copied!';
+        } catch (clipErr) {
+          console.error('Clipboard write failed:', clipErr);
+          btn.innerHTML = '<i class="bi bi-x-lg"></i>';
+        }
+        setTimeout(() => { btn.innerHTML = original; }, 1800);
+      }, 'image/png');
+    } catch (e) {
+      console.error('Modal copy failed:', e);
+      btn.innerHTML = original;
+    }
+  });
+
   document.getElementById('mermaid-modal-download-svg').addEventListener('click', function() {
     if (!modalCurrentSvgEl) return;
     const serialized = new XMLSerializer().serializeToString(modalCurrentSvgEl);
@@ -1885,7 +1910,7 @@ This is a fully client-side application. Your content never leaves your browser
       btnCopy.className = 'mermaid-toolbar-btn';
       btnCopy.title = 'Copy image to clipboard';
       btnCopy.setAttribute('aria-label', 'Copy image to clipboard');
-      btnCopy.innerHTML = '<i class="bi bi-clipboard-image"></i>';
+      btnCopy.innerHTML = '<i class="bi bi-clipboard-image"></i> Copy';
       btnCopy.addEventListener('click', () => copyMermaidImage(container, btnCopy));
 
       const btnSvg = document.createElement('button');
@@ -1896,8 +1921,8 @@ This is a fully client-side application. Your content never leaves your browser
       btnSvg.addEventListener('click', () => downloadMermaidSvg(container, btnSvg));
 
       toolbar.appendChild(btnZoom);
-      toolbar.appendChild(btnPng);
       toolbar.appendChild(btnCopy);
+      toolbar.appendChild(btnPng);
       toolbar.appendChild(btnSvg);
       container.appendChild(toolbar);
     });

styles.css

@@ -1027,13 +1027,25 @@ a:focus {
   border: 1px solid var(--border-color);
   border-radius: 8px;
   padding: 16px;
-  max-width: 92vw;
-  max-height: 92vh;
+  width: 85vw;
+  height: 85vh;
+  max-width: 85vw;
+  max-height: 85vh;
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 
+@media (max-width: 576px) {
+  .mermaid-modal-content {
+    width: 95vw;
+    height: 90vh;
+    max-width: 95vw;
+    max-height: 90vh;
+    padding: 10px;
+  }
+}
+
 .mermaid-modal-header {
   display: flex;
   justify-content: space-between;