Mirror of my GitHub Pages site
www.spenser.black/
Add copy to clipboard for Steam markup (#14)
authored by
Spenser Black
and committed by
GitHub
(Jul 17, 2026, 8:06 PM EDT)
46d8657d
ee966eb0
+40
+30
src/components/Steamdown.svelte
+30
src/components/Steamdown.svelte
···
1
1
<script lang="ts">
2
2
import { parse, render } from "@steamdown/core";
3
3
import { render as renderHTML } from "@steamdown/html";
4
+
import { write as writeClipboard } from "../scripts/clipboard";
4
5
5
6
type Output = "markup" | "preview";
6
7
let output = $state<Output>("markup");
···
19
20
20
21
const onSubmit = (e: SubmitEvent) => {
21
22
e.preventDefault();
23
+
};
24
+
25
+
let copied = $state(false);
26
+
let copyTimeout: number | null = null;
27
+
const onCopyClick = async () => {
28
+
if (copyTimeout != null) {
29
+
clearTimeout(copyTimeout);
30
+
}
31
+
await writeClipboard(markup);
32
+
copied = true;
33
+
copyTimeout = setTimeout(() => {
34
+
copied = false;
35
+
}, 750);
22
36
};
23
37
</script>
24
38
···
62
76
<h3>Output</h3>
63
77
<div id="outputs">
64
78
{#if output === "markup"}
79
+
<button
80
+
type="button"
81
+
id="button-copy-markup"
82
+
class="primary"
83
+
title="Copy markup to clipboard"
84
+
onclick={onCopyClick}
85
+
>Cop{#if copied}ied{:else}y{/if}</button
86
+
>
65
87
<output id="output-markup" for="steamdown-source radio-markup">
66
88
<pre id="output-markup-content">{#each markup.split("\n") as line}<code
67
89
>{line}</code
···
113
135
width: 100%;
114
136
margin: auto;
115
137
}
138
+
#outputs {
139
+
position: relative;
140
+
}
116
141
#output-markup-content {
117
142
overflow-x: auto;
143
+
}
144
+
#button-copy-markup {
145
+
position: absolute;
146
+
right: 0;
147
+
top: 0;
118
148
}
119
149
</style>