Fixed addcopybuttons
This commit is contained in:
@@ -385,13 +385,12 @@
|
||||
});
|
||||
|
||||
function addCopyButtons() {
|
||||
// Adds a copy button to all code tags
|
||||
document.querySelectorAll('pre').forEach(pre => {
|
||||
if (!pre.querySelector('.copy-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 = `
|
||||
<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="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>
|
||||
@@ -400,21 +399,56 @@
|
||||
pre.style.position = 'relative';
|
||||
pre.classList.add('group');
|
||||
|
||||
button.addEventListener('click', () => {
|
||||
navigator.clipboard.writeText(pre.querySelector('code').textContent);
|
||||
button.addEventListener('click', async () => {
|
||||
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 = `
|
||||
<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" />
|
||||
</svg>
|
||||
`;
|
||||
|
||||
// Reset button after 2 seconds
|
||||
setTimeout(() => {
|
||||
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="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>
|
||||
`;
|
||||
}, 2000);
|
||||
|
||||
} catch (err) {
|
||||
console.error('Copy failed:', err);
|
||||
}
|
||||
});
|
||||
|
||||
pre.appendChild(button);
|
||||
@@ -422,6 +456,7 @@
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
queryForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const query = queryInput.value.trim();
|
||||
|
Reference in New Issue
Block a user