fix: enter to send

This commit is contained in:
Shibo Lyu 2024-09-03 15:28:39 +08:00
parent 72b962fb77
commit 431f14b35d
7 changed files with 101 additions and 42 deletions

View file

@ -9,7 +9,7 @@
</script>
<div
class="relative box-border flex min-h-[calc(3rem+1px)] w-full items-center gap-2 border-b border-ss-secondary bg-sb-primary p-2 shadow-sm"
class="relative z-10 box-border flex min-h-[calc(3rem+1px)] w-full items-center gap-2 border-b border-ss-secondary bg-sb-primary p-2 shadow-sm"
>
<Button href="/" class="rounded-full sm:hidden">
<svg

View file

@ -4,27 +4,24 @@
import Button from '$lib/components/Button.svelte';
import RichTextInput from '$lib/components/RichTextInput.svelte';
import { deltaToBlahRichText } from '$lib/richText';
import type { Delta } from 'typewriter-editor';
import type { Delta, Editor } from 'typewriter-editor';
export let roomId: string;
export let server: BlahChatServerConnection | undefined;
let editor: Editor | undefined;
let delta: Delta;
let plainText: string = '';
let form: HTMLFormElement | null = null;
let sendDisabled = false;
function onInputKeydown(event: KeyboardEvent) {
console.log(event.key, event.shiftKey, event.isComposing, plainText);
if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) {
event.preventDefault();
form?.requestSubmit();
}
function onKeyboardSubmit() {
editor?.select(null);
form?.requestSubmit();
}
async function submit() {
if (!server || plainText.trim() === '') return;
console.log('submit');
const brt = deltaToBlahRichText(delta);
sendDisabled = true;
@ -44,7 +41,7 @@
plainText = '';
}
$: sendDisabled = !!server;
$: sendDisabled = !server;
</script>
<form
@ -70,11 +67,13 @@
<span class="sr-only">Attach</span>
</Button>
<RichTextInput
bind:editor
bind:delta
bind:plainText
placeholder="Message"
class="max-h-40 flex-1"
on:keydown={onInputKeydown}
keyboardSubmitMethod="enter"
on:keyboardSubmit={onKeyboardSubmit}
/>
<Button class="p-1.5" variant="primary" type="submit" disabled={sendDisabled}>
<svg