WIP: message composer

2 files changed, 29 insertions, 24 deletions

diff --git a/assets/style.scss b/assets/style.scss
index d4b4e91..96291ed 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -192,10 +192,17 @@ p {
 
 .open-chat-views {
   flex: 1 1 100%;
+  display: flex;
+  flex-direction: column;
+  max-height: auto;
 }
 
 .open-chat-view {
   height: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  max-height: auto;
 }
 
 .chat-view-header .avatar {
@@ -219,6 +226,7 @@ p {
   border-width: 2px 0 0 0;
   width: auto;
   padding: 16px;
+  max-height: auto;
 }
 
 .new-message-composer textarea {
@@ -235,6 +243,18 @@ p {
   /* display: block; */
 }
 
+.new-message-composer .text-box {
+  color: black;
+  background-color: #dcdcdc;
+  max-height: 32em;
+  overflow: scroll;
+  font-size: 16px;
+  border: 2px solid black;
+  padding: 8px;
+  margin: 0;
+  height: fit-content;
+}
+
 .grow-wrap {
   /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
   display: grid;
diff --git a/src/lib.rs b/src/lib.rs
index f2c6e97..52d64e4 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -564,7 +564,7 @@ pub fn Message(message: MacawMessage, major: bool, r#final: bool) -> impl IntoVi
 
 #[component]
 pub fn ChatViewMessageComposer(chat: JID) -> impl IntoView {
-    let message_input: NodeRef<Textarea> = NodeRef::new();
+    let message_input: NodeRef<Div> = NodeRef::new();
 
     // TODO: load last message draft
     let new_message = RwSignal::new("".to_string());
@@ -592,37 +592,22 @@ pub fn ChatViewMessageComposer(chat: JID) -> impl IntoView {
         }
     });
 
+    // TODO: placeholder
     view! {
-        <script>
-            const growers = document.querySelectorAll(".grow-wrap");
-            
-            growers.forEach((grower) => {
-              const textarea = grower.querySelector("textarea");
-              textarea.addEventListener("input", () => {
-                grower.dataset.replicatedValue = textarea.value;
-              });
-            });
-
-        </script>
         <form
             class="new-message-composer panel"
-            // on:input=resize
-            // on:input=|_| "this.parentNode.dataset.replicatedValue = this.value"
             on:submit=move |ev| {
                 ev.prevent_default();
                 send_message.dispatch(());
             }
         >
-            <div class="grow-wrap">
-                <textarea
-                    placeholder="New Message"
-                    prop:value=new_message
-                    on:input=move |ev| new_message.set(event_target_value(&ev))
-                    name="new_message"
-                    node_ref=message_input
-                    autofocus="true"
-                />
-            </div>
+            <div
+                class="text-box"
+                prop:value=new_message
+                on:input=move |ev| new_message.set(event_target_value(&ev))
+                node_ref=message_input
+                contenteditable
+            ></div>
             <input hidden type="submit" />
         </form>
     }