Spaces:
Paused
Paused
File size: 997 Bytes
d61fb4a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<script lang="ts">
export let code: string;
export let onRun: (code: string) => void;
let editMode: boolean = false;
let codeElement: HTMLElement;
</script>
<div class="divider" />
<div>
<h3 class="text-lg inline-block">Check the code</h3>
<button
class="btn btn-ghost inline-block w-min"
on:click={() => (editMode = !editMode)}
on:keypress={() => (editMode = !editMode)}
>
{editMode ? "done" : "edit"}
</button>
</div>
<div
class="mockup-code text-sm focus:outline-none"
class:bg-base-200={editMode}
on:dblclick={() => (editMode = true)}
>
<pre
class="ml-4"
on:click={() => codeElement && codeElement.focus()}
on:keypress={() => codeElement && codeElement.focus()}>
{#if editMode}
<code contenteditable bind:textContent={code} bind:this={codeElement} />
{:else}
<code>{code}</code>
{/if}
</pre>
</div>
<button
class="btn btn-primary w-fit mx-auto"
on:click={() => {
onRun(code);
}}
>
run code
</button>
|