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 +++++++++++-
 ui/styles/forms.css                   |  3 ++-
 2 files changed, 13 insertions(+), 2 deletions(-)

(limited to 'ui')

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>
diff --git a/ui/styles/forms.css b/ui/styles/forms.css
index 1c1ae5c..a8789b1 100644
--- a/ui/styles/forms.css
+++ b/ui/styles/forms.css
@@ -23,7 +23,8 @@ form.form > button {
   margin: 0.25rem;
 }
 
-[contenteditable]:empty {
+[data-placeholder]:empty:before {
+  content: attr(data-placeholder);
   color: var(--light-text);
 }
 
-- 
cgit v1.2.3