From 97d155667d0a981f90b1b7cbc5fe671f4cba0ef9 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Sat, 7 May 2022 16:50:04 +0300
Subject: [PATCH] frontend: initial multi-line support

---
 frontend/src/components/Message.svelte      |  1 +
 frontend/src/components/MessageInput.svelte | 16 ++++++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Message.svelte b/frontend/src/components/Message.svelte
index 20450b8..e4d8aee 100644
--- a/frontend/src/components/Message.svelte
+++ b/frontend/src/components/Message.svelte
@@ -28,6 +28,7 @@
 
     .message-content {
         color: var(--foreground-color-2);
+        white-space: pre-wrap;
     }
 
     .pending {
diff --git a/frontend/src/components/MessageInput.svelte b/frontend/src/components/MessageInput.svelte
index b27ef33..9809d47 100644
--- a/frontend/src/components/MessageInput.svelte
+++ b/frontend/src/components/MessageInput.svelte
@@ -44,10 +44,14 @@
     };
 
     const onKeydown = async (e) => {
-        if (e.code !== "Enter")
-            return;
-
-        await sendMessage();
+        if (e.code === "Enter") {
+            if (e.shiftKey) {
+                return;
+            } else {
+                e.preventDefault();
+                await sendMessage();
+            }
+        }
     };
 </script>
 
@@ -82,13 +86,13 @@
 </style>
 
 <div class="message-input-container">
-    <input
+    <textarea
         placeholder={`Send something interesting to #${channel.name}`}
         type="text"
         class="message-input"
         on:keydown={ onKeydown }
         bind:value={ messageInput }
-    >
+    />
     {#if $smallViewport}
         <button class="icon-button send-button" on:click="{ sendMessage }">
             <SendIcon />