support soft-breaks in messages (detect shift/alt when pressing Enter…

… key and respect line breaks when rendering
guardian · Oct 20, 2023 · 537e496 · 537e496
1 parent f560d5c
commit 537e496
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/client/src/itemDisplay.tsx b/client/src/itemDisplay.tsx
@@ -270,7 +270,13 @@ export const ItemDisplay = ({
                       userLookup,
                     ]
                   )}
-                {formattedMessage}
+                <span
+                  css={css`
+                    white-space: pre-line;
+                  `}
+                >
+                  {formattedMessage}
+                </span>
               </>
             )}
           </div>

diff --git a/client/src/itemInputBox.tsx b/client/src/itemInputBox.tsx
@@ -100,8 +100,10 @@ const Suggestion = ({
   </div>
 );
 
-const isEnterKey = (event: React.KeyboardEvent<HTMLElement>) =>
-  event.key === "Enter" || event.keyCode === 13;
+const isHardReturn = (event: React.KeyboardEvent<HTMLElement>) =>
+  (event.key === "Enter" || event.keyCode === 13) &&
+  !event.shiftKey &&
+  !event.altKey;
 
 const hostname = window?.location.hostname || ".test.";
 const gridDomain =
@@ -292,7 +294,7 @@ export const ItemInputBox = ({
           sendItem &&
           ((event) => {
             event.stopPropagation();
-            if (isEnterKey(event)) {
+            if (isHardReturn(event)) {
               if (!isAsGridPayloadLoading && (message || payloadToBeSent)) {
                 sendItem();
               }