<!--
    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>
