morgan
/
chatgpt-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make the copy function more svelte-like

This commit is contained in:
littlemoonstones 2023-03-12 17:07:43 +08:00
parent 9b68ec3f45
commit 257cddd769
2 changed files with 40 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/app.scss
View File

@ -84,14 +84,3 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
.modal-card-body { // remove this once https: //github.com/jloh/bulma-prefers-dark/pull/90 is merged and released .modal-card-body { // remove this once https: //github.com/jloh/bulma-prefers-dark/pull/90 is merged and released
background-color: $background-dark; background-color: $background-dark;
} }
/* for copy button */
pre[data-language] {
position: relative;
}
div.copy-prompt {
padding: .5rem;
position: absolute;
top: .5rem;
right: .5rem;
}

61
src/lib/Code.svelte
View File

@ -75,35 +75,50 @@
// For copying code // For copying code
// reference: https://vyacheslavbasharov.com/blog/adding-click-to-copy-code-markdown-blog // reference: https://vyacheslavbasharov.com/blog/adding-click-to-copy-code-markdown-blog
const copyFunction = () => { const copyFunction = (event) => {
const codeBlocks = document.querySelectorAll("pre"); // Get the button the user click
const showCopyMessage = "Copy"; const clickedElement = event.target as HTMLElement;
codeBlocks.forEach((block) => {
const copyPrompt = document.createElement("div"); // Get the next element
copyPrompt.className = "copy-prompt"; const nextElement = clickedElement.nextElementSibling;
const copyPromptText = document.createElement("button");
copyPromptText.classList.add("button", "is-light", "is-outlined", "is-small", "is-responsive"); // Modify the appearance of the button
copyPromptText.innerHTML = showCopyMessage; const originalButtonContent = clickedElement.innerHTML
copyPrompt.appendChild(copyPromptText); clickedElement.classList.add("is-success")
block.appendChild(copyPrompt); clickedElement.innerHTML = "Copied!"
block.querySelector(".copy-prompt > button").addEventListener("click", (evt) => {
copy(block.querySelector("code").textContent); // Retrieve the code in the code block
block.querySelector(".copy-prompt > button").innerHTML = "Copied!"; let codeBlock = nextElement.querySelector("pre > code").innerHTML;
copy(codeBlock);
// Restored the button after copying the text in 1 second.
setTimeout(() => { setTimeout(() => {
block.querySelector(".copy-prompt > button").innerHTML = showCopyMessage; clickedElement.innerHTML = originalButtonContent;
clickedElement.classList.remove("is-success")
}, 1000); }, 1000);
});
});
}; };
afterUpdate(() => {
copyFunction();
})
</script> </script>
<svelte:head> <svelte:head>
{@html style} {@html style}
</svelte:head> </svelte:head>
<Highlight code={text} {language} /> <div class="code-block">
<button class="button is-light is-outlined is-small" on:click={copyFunction}>Copy</button>
<Highlight code={text} {language} />
</div>
<style>
/* for copy button */
.code-block{
position: relative;
}
.code-block > button{
padding: .5rem;
position: absolute;
top: .5rem;
right: .5rem;
z-index: 10;
}
</style>