From 61b3e3cba8a11a53947ce0e7c8a6980fb20ef914 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 13 May 2025 20:40:23 -0400
Subject: Restore the placeholder when the editable input is emptied out after
 modification.

This also avoids using `placeholder` on elements where it's nonstandard, like `<div>`s.
---
 ui/lib/components/MessageInput.svelte | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

(limited to 'ui/lib')

diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index b230939..cdb855e 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -4,6 +4,16 @@
   let value = $state('');
   let disabled = $state(false);
 
+  // Entering and removing text from the input area leaves a stray line break behind. This effect
+  // looks for that scenario and removes it, restoring the "empty" state (and bringing the
+  // placeholder back again in the process).
+  $effect(() => {
+    const trimmed = value.trim();
+    if (trimmed !== value && trimmed === '') {
+      value = trimmed;
+    }
+  });
+
   async function onsubmit(event) {
     event.preventDefault();
     disabled = true;
@@ -48,7 +58,7 @@
     bind:innerText={value}
     {onkeydown}
     {onpaste}
-    placeholder="Say something..."
+    data-placeholder="Say something..."
   ></div>
   <button type="submit">&raquo;</button>
 </form>
-- 
cgit v1.2.3