romein/rolens
1
0
Fork 0
mirror of https://github.com/garraflavatra/rolens.git synced 2024-12-01 13:20:54 +00:00
Code Issues Releases Activity

Show nice checkmark when code is copied

Browse Source
This commit is contained in:
Romein van Buren 2023-01-18 16:30:57 +01:00
parent 82c30f7772
commit f5a89cf019
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
2 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/.editorconfig
View File

@ -1,4 +0,0 @@
[*]
tab_width = 2
insert_final_newline = true
indent_style = space

15
frontend/src/components/codeviewer.svelte
View File

@ -5,6 +5,7 @@
import Icon from './icon.svelte'; import Icon from './icon.svelte';
import Modal from './modal.svelte'; import Modal from './modal.svelte';
import 'highlight.js/styles/atom-one-dark.css'; import 'highlight.js/styles/atom-one-dark.css';
import { onDestroy } from 'svelte';
export let code = ''; export let code = '';
export let language = 'json'; export let language = 'json';
@ -17,11 +18,17 @@
hljs.registerLanguage('json', hljsJSON); hljs.registerLanguage('json', hljsJSON);
hljs.registerLanguage('js', hljsJavaScript); hljs.registerLanguage('js', hljsJavaScript);
$: highlighted = code ? hljs.highlight(language, code).value : ''; let copySucceeded = false;
let timeout;
$: highlighted = code ? hljs.highlight(code, { language }).value : '';
function copy() { async function copy() {
navigator.clipboard.writeText(code); await navigator.clipboard.writeText(code);
copySucceeded = true;
timeout = setTimeout(() => copySucceeded = false, 1500);
} }
onDestroy(() => clearTimeout(timeout));
</script> </script>
{#if code} {#if code}
@ -29,7 +36,7 @@
<div class="codeblock"> <div class="codeblock">
<div class="buttons"> <div class="buttons">
<button class="btn" on:click={copy}> <button class="btn" on:click={copy}>
<Icon name="clipboard" /> <Icon name={copySucceeded ? 'check' : 'clipboard'} />
</button> </button>
</div> </div>
<pre><code class="hljs">{@html highlighted}</code></pre> <pre><code class="hljs">{@html highlighted}</code></pre>