Allow users to enter newline using shift+enter

CS3219-AY2425S1 · Oct 30, 2024 · 6eb8211 · 6eb8211
1 parent bb8c950
commit 6eb8211
Showing 1 changed file with 13 additions and 12 deletions.
diff --git a/frontend/src/components/Chat/index.tsx b/frontend/src/components/Chat/index.tsx
@@ -1,4 +1,4 @@
-import { Box, TextField, Typography } from "@mui/material";
+import { Box, styled, TextField, Typography } from "@mui/material";
 import { useEffect, useRef, useState } from "react";
 import { communicationSocket } from "../../utils/communicationSocket";
 import { useMatch } from "../../contexts/MatchContext";
@@ -34,6 +34,13 @@ type ChatProps = {
   isActive: boolean;
 };
 
+const StyledTypography = styled(Typography)(({ theme }) => ({
+  padding: theme.spacing(1, 2),
+  borderRadius: theme.spacing(2),
+  maxWidth: "80%",
+  whiteSpace: "pre-line",
+}));
+
 const Chat: React.FC<ChatProps> = ({ isActive }) => {
   const [messages, setMessages] = useState<Message[]>([]);
   const [inputValue, setInputValue] = useState("");
@@ -143,16 +150,13 @@ const Chat: React.FC<ChatProps> = ({ isActive }) => {
                 marginTop: theme.spacing(1),
               })}
             >
-              <Typography
+              <StyledTypography
                 sx={(theme) => ({
                   background: theme.palette.primary.main,
-                  padding: theme.spacing(1, 2),
-                  borderRadius: theme.spacing(2),
-                  maxWidth: "80%",
                 })}
               >
                 {msg.message}
-              </Typography>
+              </StyledTypography>
             </Box>
           ) : (
             <Box
@@ -163,16 +167,13 @@ const Chat: React.FC<ChatProps> = ({ isActive }) => {
                 marginTop: theme.spacing(1),
               })}
             >
-              <Typography
+              <StyledTypography
                 sx={(theme) => ({
                   background: theme.palette.secondary.main,
-                  padding: theme.spacing(1, 2),
-                  borderRadius: theme.spacing(2),
-                  maxWidth: "80%",
                 })}
               >
                 {msg.message}
-              </Typography>
+              </StyledTypography>
             </Box>
           )
         )}
@@ -186,7 +187,7 @@ const Chat: React.FC<ChatProps> = ({ isActive }) => {
         onChange={(e) => setInputValue(e.target.value)}
         onKeyDown={(e) => {
           const trimmedValue = inputValue.trim();
-          if (e.key === "Enter" && trimmedValue !== "") {
+          if (e.key === "Enter" && !e.shiftKey && trimmedValue !== "") {
             e.preventDefault();
             communicationSocket.emit(CommunicationEvents.SEND_TEXT_MESSAGE, {
               roomId: getMatchId(),