frontend-svelte/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte

<!--
    Component: FontSampler
    Displays a sample text with a given font in a contenteditable element.
-->
<script lang="ts">
import {
    FontApplicator,
    type UnifiedFont,
} from '$entities/Font';
import { controlManager } from '$features/SetupFont';
import { ContentEditable } from '$shared/ui';

interface Props {
    /**
     * Font info
     */
    font: UnifiedFont;
    /**
     * Text to display
     */
    text: string;
    /**
     * Font settings
     */
    fontSize?: number;
    lineHeight?: number;
    letterSpacing?: number;
}

let {
    font,
    text = $bindable(),
    ...restProps
}: Props = $props();

const weight = $derived(controlManager.weight ?? 400);
</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-weight={weight}
>
    <FontApplicator id={font.id} name={font.name}>
        <ContentEditable bind:text={text} {...restProps} />
    </FontApplicator>
</div>