45 lines
1019 B
Svelte
45 lines
1019 B
Svelte
|
<!--
|
||
|
|
Component: ContentEditable
|
||
|
|
Provides a contenteditable div with custom font and text properties.
|
||
|
|
-->
|
||
|
|
<script lang="ts">
|
||
|
|
interface Props {
|
||
|
|
/**
|
||
|
|
* Visible text
|
||
|
|
*/
|
||
|
|
text?: string;
|
||
|
|
/**
|
||
|
|
* Font settings
|
||
|
|
*/
|
||
|
|
fontSize?: number;
|
||
|
|
lineHeight?: number;
|
||
|
|
letterSpacing?: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
let {
|
||
|
|
text = 'The quick brown fox jumps over the lazy dog',
|
||
|
|
fontSize = 48,
|
||
|
|
lineHeight = 1.2,
|
||
|
|
letterSpacing = 0,
|
||
|
|
}: Props = $props();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div
|
||
|
|
contenteditable="plaintext-only"
|
||
|
|
spellcheck="false"
|
||
|
|
role="textbox"
|
||
|
|
tabindex="0"
|
||
|
|
data-placeholder="Type something to test..."
|
||
|
|
class="
|
||
|
|
w-full min-h-[1.2em] outline-none transition-all duration-200
|
||
|
|
empty:before:content-[attr(data-placeholder)] empty:before:text-slate-400
|
||
|
|
selection:bg-indigo-100 selection:text-indigo-900
|
||
|
|
caret-indigo-500
|
||
|
|
"
|
||
|
|
style:font-size="{fontSize}px"
|
||
|
|
style:line-height={lineHeight}
|
||
|
|
style:letter-spacing="{letterSpacing}em"
|
||
|
|
>
|
||
|
|
{text}
|
||
|
|
</div>
|