src/shared/ui/ContentEditable/ContentEditable.svelte

@@ -0,0 +1,44 @@
+<!--
+    Component: ContentEditable
+    Provides a contenteditable div with custom font and text properties.
+-->
+<script lang="ts">
+interface Props {
+    /**
+     * Visible text
+     */
+    text?: string;
+    /**
+     * Font settings
+     */
+    fontSize?: number;
+    lineHeight?: number;
+    letterSpacing?: number;
+}
+
+let {
+    text = 'The quick brown fox jumps over the lazy dog',
+    fontSize = 48,
+    lineHeight = 1.2,
+    letterSpacing = 0,
+}: Props = $props();
+</script>
+
+<div
+    contenteditable="plaintext-only"
+    spellcheck="false"
+    role="textbox"
+    tabindex="0"
+    data-placeholder="Type something to test..."
+    class="
+        w-full min-h-[1.2em] outline-none transition-all duration-200
+        empty:before:content-[attr(data-placeholder)] empty:before:text-slate-400
+        selection:bg-indigo-100 selection:text-indigo-900
+        caret-indigo-500
+    "
+    style:font-size="{fontSize}px"
+    style:line-height={lineHeight}
+    style:letter-spacing="{letterSpacing}em"
+>
+    {text}
+</div>