tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Projects 1 Releases 2 Packages 1 Activity Actions

feat: copy code block enhancement

Browse source
This commit is contained in:
Timothy J. Baek 2023-11-04 19:20:20 -07:00
parent 7f203c3b40
commit 322661dbcb
1 changed files with 37 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/routes/+page.svelte
View file

@ -108,14 +108,44 @@
// only add button if browser supports Clipboard API
if (navigator.clipboard && block.childNodes.length < 2) {
let code = block.querySelector('code');
code.style.borderTopRightRadius = 0;
code.style.borderTopLeftRadius = 0;
let topBarDiv = document.createElement('div');
topBarDiv.style.backgroundColor = '#343541';
topBarDiv.style.overflowX = 'auto';
topBarDiv.style.display = 'flex';
topBarDiv.style.justifyContent = 'space-between';
topBarDiv.style.padding = '0 1rem';
topBarDiv.style.paddingTop = '4px';
topBarDiv.style.borderTopRightRadius = '8px';
topBarDiv.style.borderTopLeftRadius = '8px';
let langDiv = document.createElement('div');
langDiv.textContent = code?.className.split(' ')[0].slice(9);
langDiv.style.color = 'white';
langDiv.style.margin = '4px';
langDiv.style.fontSize = '0.75rem';
let button = document.createElement('button');
button.textContent = 'Copy Code';
button.style.background = 'none';
button.style.fontSize = '0.75rem';
button.style.border = 'none';
button.style.margin = '4px';
button.style.cursor = 'pointer';
button.style.color = '#ddd';
button.addEventListener('click', () => copyCode(block, button));
button.innerText = 'Copy Code';
block.appendChild(button);
topBarDiv.appendChild(langDiv);
topBarDiv.appendChild(button);
button.addEventListener('click', async () => {
await copyCode(block, button);
});
block.prepend(topBarDiv);
// button.addEventListener('click', async () => {
// await copyCode(block, button);
// });
}
});
@ -126,11 +156,11 @@
await navigator.clipboard.writeText(text);
// visual feedback that task is completed
button.innerText = 'Code Copied';
button.innerText = 'Copied!';
setTimeout(() => {
button.innerText = 'Copy Code';
}, 700);
}, 1000);
}
};