feat: allow multiline messages with shift+enter

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}

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 (
+  const canMessageBeSent = () => {
-    event: React.SyntheticEvent<HTMLFormElement>
+    return textMessage.trim().length > 0 && !isMessageSending
-  ) => {
+  }
-    event.preventDefault()
+
+  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 />