alex/daichendt.one
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: improve copy code function

Browse source
This commit is contained in:
Alexander Daichendt 2022-07-29 23:55:11 +02:00
parent 751b84c119
commit 2d7ffaff20
1 changed files with 11 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/Code.svelte
View file

@ -5,8 +5,13 @@
// @ts-ignore // @ts-ignore
const target = event.target?.innerText.split('\n')[0]; const target = event.target?.innerText.split('\n')[0];
navigator.clipboard.writeText(target); navigator.clipboard.writeText(target);
// select the double clicked node
let sel = document.getSelection(); let sel = document.getSelection();
let range = new Range();
range.selectNode(event.target?.firstChild);
sel?.removeAllRanges(); sel?.removeAllRanges();
sel?.addRange(range);
if (!copied) { if (!copied) {
copied = true; copied = true;
@ -16,7 +21,9 @@
</script> </script>
<code on:dblclick={copyToClipboard}> <code on:dblclick={copyToClipboard}>
<slot /> <span class="text">
<slot />
</span>
<div class:copied class="copyWrapper"> <div class:copied class="copyWrapper">
{#if copied} {#if copied}
Copied Copied
@ -29,13 +36,16 @@
<style> <style>
.copied { .copied {
background-color: yellowgreen !important; background-color: yellowgreen !important;
min-width: 3rem !important;
} }
.copyWrapper { .copyWrapper {
background-color: var(--special-color); background-color: var(--special-color);
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
padding: 0.2rem; padding: 0.2rem;
border-radius: 3px; border-radius: 3px;
position: absolute; position: absolute;
min-width: 10rem;
visibility: hidden; visibility: hidden;
z-index: 1; z-index: 1;
bottom: 100%; bottom: 100%;