diff options
| -rw-r--r-- | ui/lib/components/MessageInput.svelte | 12 | ||||
| -rw-r--r-- | ui/styles/forms.css | 3 |
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">»</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); } |