From 09752f46c612718477b24d1a4724738b28cd7bfa Mon Sep 17 00:00:00 2001
From: Antoan Angelov <antoan.angelov@gmail.com>
Date: Wed, 27 Dec 2023 00:45:16 +0200
Subject: [PATCH] Resize text as user is typing

---
 src/View.ts | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/View.ts b/src/View.ts
index f3e3718..240651d 100644
--- a/src/View.ts
+++ b/src/View.ts
@@ -173,7 +173,7 @@ export class View {
           "beforeend",
           `
           <div class="text draggable focused" tabindex="0">
-            <input type="text" class="text" value="" />
+            <input type="text" class="text" value="" size="20" />
             <div class="text-options focused">
               <div class="img-container drag-handle">
                 <img src="img/icon_drag.png" draggable="false" />
@@ -200,6 +200,11 @@ export class View {
         const newDraggable = draggables[draggables.length - 1] as HTMLElement;
         that.setupDraggable(newDraggable, draggables.length);
 
+        (
+          newDraggable.querySelector("input[type=text].text") as HTMLElement
+        ).addEventListener("input", function (event: Event) {
+          that.handleTextInputChange(event);
+        });
         (
           newDraggable.querySelector(
             "input[type=number].fontSize"
@@ -584,6 +589,16 @@ export class View {
     return [x, y];
   }
 
+  private handleTextInputChange(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const inputValue = input.value;
+    if (inputValue.length * 1.25 > input.size) {
+      input.size = Math.max(inputValue.length * 1.25, 20);
+    } else if (inputValue.length * 0.75 < input.size) {
+      input.size = Math.max(inputValue.length * 1.25, 20);
+    }
+  }
+
   private handleFontColorInputChange(event: Event, newDraggable: HTMLElement) {
     const inputValue = (event.target as HTMLInputElement).value;
     if (inputValue) {