38 lines
800 B
Svelte
38 lines
800 B
Svelte
|
<!--
|
||
|
|
Component: FontSampler
|
||
|
|
Displays a sample text with a given font in a contenteditable element.
|
||
|
|
-->
|
||
|
|
<script lang="ts">
|
||
|
|
import { appliedFontsManager } from '$entities/Font';
|
||
|
|
import { ContentEditable } from '$shared/ui';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
fontId: string;
|
||
|
|
text?: string;
|
||
|
|
fontSize?: number;
|
||
|
|
lineHeight?: number;
|
||
|
|
letterSpacing?: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
let {
|
||
|
|
fontId,
|
||
|
|
...restProps
|
||
|
|
}: Props = $props();
|
||
|
|
|
||
|
|
// Ensure the font is registered as soon as this sampler appears
|
||
|
|
$effect(() => {
|
||
|
|
appliedFontsManager.registerFonts([fontId]);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="
|
||
|
|
w-full rounded-xl
|
||
|
|
bg-white p-6 border border-slate-200
|
||
|
|
shadow-sm dark:border-slate-800 dark:bg-slate-950
|
||
|
|
"
|
||
|
|
style:font-family={fontId}
|
||
|
|
>
|
||
|
|
<ContentEditable {...restProps} />
|
||
|
|
</div>
|