Fixed addcopybuttons
This commit is contained in:
@@ -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');
|
||||||
button.innerHTML = `
|
if (!codeElement) return;
|
||||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
const text = codeElement.textContent;
|
||||||
</svg>
|
|
||||||
`;
|
try {
|
||||||
setTimeout(() => {
|
// 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"
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||||
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);
|
|
||||||
|
// Reset button after 2 seconds
|
||||||
|
setTimeout(() => {
|
||||||
|
button.innerHTML = `
|
||||||
|
<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);
|
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();
|
||||||
|
Reference in New Issue
Block a user