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

Merge pull request #57 from ollama-webui/dev

Browse source 
feat: copy code block enhancement
This commit is contained in:
Timothy Jaeryang Baek 2023-11-04 21:22:07 -05:00 committed by GitHub
commit e36e83697b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 37 additions and 7 deletions
Show stats 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);
}
};