Fixed addcopybuttons

This commit is contained in:
Saifeddine ALOUI
2025-01-24 17:29:06 +01:00
committed by GitHub
parent cc3cd0b6dd
commit 1266fe263a

View File

@@ -385,13 +385,12 @@
}); });
function addCopyButtons() { function addCopyButtons() {
// Adds a copy button to all code tags
document.querySelectorAll('pre').forEach(pre => { document.querySelectorAll('pre').forEach(pre => {
if (!pre.querySelector('.copy-button')) { if (!pre.querySelector('.copy-button')) {
const button = document.createElement('button'); const button = document.createElement('button');
button.className = 'copy-button absolute top-2 right-2 p-2 bg-slate-700 text-white rounded-md opacity-0 group-hover:opacity-100 transition-opacity'; button.className = 'copy-button absolute top-1 right-1 p-1 bg-slate-700/80 hover:bg-slate-700 text-white rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity';
button.innerHTML = ` button.innerHTML = `
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /> d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg> </svg>
@@ -400,21 +399,56 @@
pre.style.position = 'relative'; pre.style.position = 'relative';
pre.classList.add('group'); pre.classList.add('group');
button.addEventListener('click', () => { button.addEventListener('click', async () => {
navigator.clipboard.writeText(pre.querySelector('code').textContent); const codeElement = pre.querySelector('code');
if (!codeElement) return;
const text = codeElement.textContent;
try {
// First try using the Clipboard API
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(text);
} else {
// Fallback for older browsers
const textArea = document.createElement('textarea');
textArea.value = text;
textArea.style.position = 'fixed';
textArea.style.left = '-999999px';
textArea.style.top = '-999999px';
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
document.execCommand('copy');
textArea.remove();
} catch (error) {
console.error('Copy failed:', error);
textArea.remove();
return;
}
}
// Show success feedback
button.innerHTML = ` button.innerHTML = `
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg> </svg>
`; `;
// Reset button after 2 seconds
setTimeout(() => { setTimeout(() => {
button.innerHTML = ` button.innerHTML = `
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /> d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg> </svg>
`; `;
}, 2000); }, 2000);
} catch (err) {
console.error('Copy failed:', err);
}
}); });
pre.appendChild(button); pre.appendChild(button);
@@ -422,6 +456,7 @@
}); });
} }
queryForm.addEventListener('submit', async (e) => { queryForm.addEventListener('submit', async (e) => {
e.preventDefault(); e.preventDefault();
const query = queryInput.value.trim(); const query = queryInput.value.trim();