diff options
| -rw-r--r-- | assets/style.scss | 3 | ||||
| -rw-r--r-- | src/lib.rs | 58 |
2 files changed, 42 insertions, 19 deletions
diff --git a/assets/style.scss b/assets/style.scss index 96291ed..deccd7c 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -244,6 +244,7 @@ p { } .new-message-composer .text-box { + white-space: pre-wrap; color: black; background-color: #dcdcdc; max-height: 32em; @@ -936,4 +937,4 @@ p { font-weight: normal; font-style: italic; font-display: block; -}
\ No newline at end of file +} @@ -18,7 +18,7 @@ use futures::stream::StreamExt; use indexmap::IndexMap; use jid::JID; use leptos::{ - html::{self, Div, Input, Textarea}, prelude::*, tachys::dom::document, task::{spawn, spawn_local} + ev::{Event, KeyboardEvent, SubmitEvent}, html::{self, Div, Input, Pre, Textarea}, prelude::*, tachys::{dom::document, reactive_graph::bind::GetValue}, task::{spawn, spawn_local} }; use leptos_meta::Stylesheet; use leptos_use::{use_textarea_autosize, UseTextareaAutosizeReturn}; @@ -570,18 +570,18 @@ pub fn ChatViewMessageComposer(chat: JID) -> impl IntoView { let new_message = RwSignal::new("".to_string()); let client: Client = use_context().expect("no client in context"); let client = RwSignal::new(client); + let (shift_pressed, set_shift_pressed) = signal(false); - let send_message = Action::new(move |_| { + let send_message = move || { let value = chat.clone(); - async move { - spawn_local(async move { match client.read_untracked().send_message(value, Body { body: new_message.get_untracked() }).await { - Ok(_) => { - new_message.set("".to_string()); - }, - Err(e) => tracing::error!("message send error: {}", e), - }}) - } - }); + spawn_local(async move { match client.read_untracked().send_message(value, Body { body: new_message.get_untracked() }).await { + Ok(_) => { + new_message.set("".to_string()); + message_input.write_untracked().as_ref().expect("message input div not mounted").set_text_content(Some("")); + }, + Err(e) => tracing::error!("message send error: {}", e), + }}) + }; let _focus = Effect::new(move |_| { if let Some(input) = message_input.get() { @@ -592,23 +592,45 @@ pub fn ChatViewMessageComposer(chat: JID) -> impl IntoView { } }); + // let on_input = move |ev: Event| { + // // let keyboard_event: KeyboardEvent = ev.try_into().unwrap(); + // debug!("got input event"); + // let key= event_target_value(&ev); + // new_message.set(key); + // debug!("set new message"); + // }; + // + // TODO: placeholder view! { <form class="new-message-composer panel" - on:submit=move |ev| { - ev.prevent_default(); - send_message.dispatch(()); - } > <div class="text-box" - prop:value=new_message - on:input=move |ev| new_message.set(event_target_value(&ev)) + on:input:target=move |ev| new_message.set(ev.target().text_content().unwrap_or_default()) node_ref=message_input contenteditable + on:keydown=move |ev| { + match ev.key_code() { + 16 => set_shift_pressed.set(true), + 13 => if !shift_pressed.get_untracked() { + ev.prevent_default(); + send_message(); + } + _ => {} + // debug!("shift pressed down"); + } + } + on:keyup=move |ev| { + match ev.key_code() { + 16 => set_shift_pressed.set(false), + _ => {} + // debug!("shift released"); + } + } ></div> - <input hidden type="submit" /> + // <input hidden type="submit" /> </form> } } |