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.

2 files changed, 13 insertions, 2 deletions

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);
 }