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

Small fixes, make use of Bulma classes

This commit is contained in:
Niek van der Maas 2023-03-13 09:13:32 +01:00
parent 6da77ed236
commit 6909b3afa7
1 changed files with 18 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/lib/Code.svelte
View File

@ -9,7 +9,6 @@
// Copy function for the code block // Copy function for the code block
import copy from "copy-to-clipboard"; import copy from "copy-to-clipboard";
import { afterUpdate } from "svelte";
// Import all supported languages // Import all supported languages
import { import {
@ -73,30 +72,29 @@
language = plaintext; language = plaintext;
} }
// 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 = (event) => { const copyFunction = (event) => {
// Get the button the user click // Get the button the user clicked on
const clickedElement = event.target as HTMLElement; const clickedElement = event.target as HTMLButtonElement;
// Get the next element // Get the next element
const nextElement = clickedElement.nextElementSibling; const nextElement = clickedElement.nextElementSibling;
// Modify the appearance of the button // Modify the appearance of the button
const originalButtonContent = clickedElement.innerHTML const originalButtonContent = clickedElement.innerHTML;
clickedElement.classList.add("is-success") clickedElement.classList.add("is-success");
clickedElement.innerHTML = "Copied!" clickedElement.innerHTML = "Copied!";
// Retrieve the code in the code block // Retrieve the code in the code block
let codeBlock = nextElement.querySelector("pre > code").innerHTML; const codeBlock = (nextElement.querySelector("pre > code") as HTMLPreElement).innerText;
copy(codeBlock); copy(codeBlock);
// Restored the button after copying the text in 1 second. // Restored the button after copying the text in 1 second.
setTimeout(() => { setTimeout(() => {
clickedElement.innerHTML = originalButtonContent; clickedElement.innerHTML = originalButtonContent;
clickedElement.classList.remove("is-success") clickedElement.classList.remove("is-success");
clickedElement.blur();
}, 1000); }, 1000);
}; };
</script> </script>
@ -104,21 +102,16 @@
{@html style} {@html style}
</svelte:head> </svelte:head>
<div class="code-block"> <div class="code-block is-relative">
<button class="button is-light is-outlined is-small" on:click={copyFunction}>Copy</button> <button class="button is-light is-outlined is-small p-2" on:click={copyFunction}>Copy</button>
<Highlight code={text} {language} /> <Highlight code={text} {language} />
</div> </div>
<style> <style>
/* for copy button */ /* for copy button */
.code-block{
position: relative;
}
.code-block > button { .code-block > button {
padding: .5rem;
position: absolute; position: absolute;
top: .5rem; top: 0.5rem;
right: .5rem; right: 0.5rem;
z-index: 10;
} }
</style> </style>