fix(ContentEditable): change logic to support controlled state

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

@@ -0,0 +1,37 @@
+<!--
+    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>