From cd3f1b0fd7991ec522e31601f5a9cc564ad79128 Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Sat, 27 Aug 2022 19:40:51 -0500
Subject: [PATCH] feat: allow multiline messages with shift+enter

---
 src/components/Message/Message.tsx |  1 +
 src/components/Room/Room.tsx       | 40 ++++++++++++++++++++++++------
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx
index 96c172e..fdb1f67 100644
--- a/src/components/Message/Message.tsx
+++ b/src/components/Message/Message.tsx
@@ -29,6 +29,7 @@ export const Message = ({ message, userId }: MessageProps) => {
           borderRadius: 6,
           float: message.authorId === userId ? 'right' : 'left',
           transition: 'background-color 1s',
+          wordBreak: 'break-all',
         }}
       >
         {message.text}
diff --git a/src/components/Room/Room.tsx b/src/components/Room/Room.tsx
index 7a6d3ad..1c507d6 100644
--- a/src/components/Room/Room.tsx
+++ b/src/components/Room/Room.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import React, { useState } from 'react'
 import { v4 as uuid } from 'uuid'
 import FormControl from '@mui/material/FormControl'
 import Typography from '@mui/material/Typography'
@@ -48,10 +48,12 @@ export function Room({
     setTextMessage(value)
   }
 
-  const handleMessageSubmit = async (
-    event: React.SyntheticEvent<HTMLFormElement>
-  ) => {
-    event.preventDefault()
+  const canMessageBeSent = () => {
+    return textMessage.trim().length > 0 && !isMessageSending
+  }
+
+  const performMessageSend = async () => {
+    if (!canMessageBeSent()) return
 
     const unsentMessage: UnsentMessage = {
       authorId: userId,
@@ -72,6 +74,24 @@ export function Room({
     setIsMessageSending(false)
   }
 
+  const handleMessageKeyPress = async (
+    event: React.KeyboardEvent<HTMLInputElement>
+  ) => {
+    const { key, shiftKey } = event
+
+    if (key === 'Enter' && shiftKey === false) {
+      event.preventDefault()
+      await performMessageSend()
+    }
+  }
+
+  const handleMessageSubmit = async (
+    event: React.SyntheticEvent<HTMLFormElement>
+  ) => {
+    event.preventDefault()
+    await performMessageSend()
+  }
+
   receiveMessage(message => {
     setMessageLog([...messageLog, { ...message, timeReceived: Date.now() }])
   })
@@ -91,15 +111,21 @@ export function Room({
               variant="outlined"
               value={textMessage}
               onChange={handleMessageChange}
+              onKeyPress={handleMessageKeyPress}
               size="medium"
               placeholder="Your message"
+              multiline
             />
           </FormControl>
           <Fab
-            className="shrink-0"
+            sx={{
+              flexShrink: 0,
+              // The !important is needed to override a Stack style
+              marginTop: 'auto!important',
+            }}
             aria-label="Send"
             type="submit"
-            disabled={textMessage.length === 0 || isMessageSending}
+            disabled={!canMessageBeSent()}
             color="primary"
           >
             <ArrowUpward />