From 6b4e0dbbd00f71199783822ca965b2522d68ac3b Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 18 Jan 2026 12:51:55 +0300
Subject: [PATCH] feat(ContentEditable): create ContentEditable shared
 component that displays text and allows editing

---
 .../ui/ContentEditable/ContentEditable.svelte | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/shared/ui/ContentEditable/ContentEditable.svelte

diff --git a/src/shared/ui/ContentEditable/ContentEditable.svelte b/src/shared/ui/ContentEditable/ContentEditable.svelte
new file mode 100644
index 0000000..15508ef
--- /dev/null
+++ b/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>