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

@@ -3,26 +3,25 @@
     Displays a sample text with a given font in a contenteditable element.
 -->
 <script lang="ts">
-import { appliedFontsManager } from '$entities/Font';
+import {
+    FontApplicator,
+    type UnifiedFont,
+} from '$entities/Font';
 import { ContentEditable } from '$shared/ui';
 
 interface Props {
-    fontId: string;
-    text?: string;
+    font: UnifiedFont;
+    text: string;
     fontSize?: number;
     lineHeight?: number;
     letterSpacing?: number;
 }
 
 let {
-    fontId,
+    font,
+    text = $bindable(),
     ...restProps
 }: Props = $props();
-
-// Ensure the font is registered as soon as this sampler appears
-$effect(() => {
-    appliedFontsManager.registerFonts([fontId]);
-});
 </script>
 
 <div
@@ -31,7 +30,8 @@ $effect(() => {
         bg-white p-6 border border-slate-200
         shadow-sm dark:border-slate-800 dark:bg-slate-950
     "
-    style:font-family={fontId}
 >
-    <ContentEditable {...restProps} />
+    <FontApplicator id={font.id} name={font.name}>
+        <ContentEditable bind:text={text} {...restProps} />
+    </FontApplicator>
 </div>