From 7e62acce49c245c02374c1da53d6fd536272def8 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 18 Jan 2026 14:35:35 +0300
Subject: [PATCH] fix(ContentEditable): change logic to support controlled
 state

---
 .../ui/FontSampler/FontSampler.svelte         | 37 +++++++++++++++++++
 .../ui/ContentEditable/ContentEditable.svelte | 24 ++++++++++--
 2 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 src/features/DisplayFont/ui/FontSampler/FontSampler.svelte

diff --git a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
new file mode 100644
index 0000000..68705fb
--- /dev/null
+++ b/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>
diff --git a/src/shared/ui/ContentEditable/ContentEditable.svelte b/src/shared/ui/ContentEditable/ContentEditable.svelte
index 15508ef..0c9bc0b 100644
--- a/src/shared/ui/ContentEditable/ContentEditable.svelte
+++ b/src/shared/ui/ContentEditable/ContentEditable.svelte
@@ -7,7 +7,7 @@ interface Props {
     /**
      * Visible text
      */
-    text?: string;
+    text: string;
     /**
      * Font settings
      */
@@ -17,19 +17,38 @@ interface Props {
 }
 
 let {
-    text = 'The quick brown fox jumps over the lazy dog',
+    text = $bindable('The quick brown fox jumps over the lazy dog.'),
     fontSize = 48,
     lineHeight = 1.2,
     letterSpacing = 0,
 }: Props = $props();
+
+let element: HTMLDivElement | undefined = $state();
+
+// Initial Sync: Set the text ONLY ONCE when the element is created.
+// This prevents Svelte from "owning" the innerHTML/innerText.
+$effect(() => {
+    if (element && element.innerText !== text) {
+        element.innerText = text;
+    }
+});
+
+// Handle changes: Update the outer state without re-rendering the div.
+function handleInput(e: Event) {
+    const target = e.target as HTMLDivElement;
+    // Update the bindable prop directly
+    text = target.innerText;
+}
 </script>
 
 <div
+    bind:this={element}
     contenteditable="plaintext-only"
     spellcheck="false"
     role="textbox"
     tabindex="0"
     data-placeholder="Type something to test..."
+    oninput={handleInput}
     class="
         w-full min-h-[1.2em] outline-none transition-all duration-200
         empty:before:content-[attr(data-placeholder)] empty:before:text-slate-400
@@ -40,5 +59,4 @@ let {
     style:line-height={lineHeight}
     style:letter-spacing="{letterSpacing}em"
 >
-    {text}
 </div>