Add live input handling for episode search (#135)

Author: chhoumann

src/ui/PodcastView/EpisodeList.svelte

@@ -39,7 +39,7 @@
 			<div class="episode-list-search">
 				<Text
 					bind:value={searchInputQuery}
-					on:change={forwardSearchInput}
+					on:input={forwardSearchInput}
 					placeholder="Search episodes"
 					style={{
 						width: "100%",

src/ui/obsidian/Text.svelte

@@ -17,30 +17,47 @@
 
     let text: TextComponent;
     let styles: CSSObject = {};
-    let textChangeHandler: ((event: Event) => void) | null = null;
+    let inputHandler: ((event: Event) => void) | null = null;
+    let changeHandler: ((value: string) => void) | null = null;
 
     onMount(() => {
         text = new TextComponent(textRef);
-
-        textChangeHandler = (event: Event) => {
-            const newValue = (event.target as HTMLInputElement).value;
-            value = newValue;
-            dispatch("change", { value: newValue });
-        };
-
-        text.inputEl.addEventListener("input", textChangeHandler);
     });
 
     onDestroy(() => {
-        if (text?.inputEl && textChangeHandler) {
-            text.inputEl.removeEventListener("input", textChangeHandler);
+        if (text?.inputEl && inputHandler) {
+            text.inputEl.removeEventListener("input", inputHandler);
         }
     });
 
     $: if (text) {
+        attachEventListeners(text);
         updateTextComponentAttributes(text, value, disabled, placeholder, type, styles);
     }
 
+    function handleInput(event: Event) {
+        const input = event.target as HTMLInputElement | null;
+        const newValue = input?.value ?? "";
+
+        value = newValue;
+        dispatch("input", { value: newValue });
+    }
+
+    function handleChange(newValue: string) {
+        value = newValue;
+        dispatch("change", { value: newValue });
+    }
+
+    function attachEventListeners(component: TextComponent) {
+        if (!component?.inputEl || inputHandler) return;
+
+        changeHandler = handleChange;
+        component.onChange(changeHandler);
+
+        inputHandler = handleInput;
+        component.inputEl.addEventListener("input", inputHandler);
+    }
+
     function updateTextComponentAttributes(
         component: TextComponent,
         currentValue: string,