From 78282f71d8542b4e321b206e9478e45eca852675 Mon Sep 17 00:00:00 2001
From: Jesse Leung <jessetleung@gmail.com>
Date: Thu, 9 Jan 2025 20:35:26 -0500
Subject: [PATCH 1/2] feat: confirm comment edits using enter.

fix: when removing all content from comment, show delete comment ux
---
 src/features/loupe/Comment.jsx | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/features/loupe/Comment.jsx b/src/features/loupe/Comment.jsx
index 8244932..e42f9b3 100644
--- a/src/features/loupe/Comment.jsx
+++ b/src/features/loupe/Comment.jsx
@@ -167,6 +167,12 @@ export const Comment = ({ comment, imageId, onChangeOpen, scrollRef }) => {
   };
 
   const onEditConfirm = () => {
+    // If all the comment's content is removed
+    // show the delete comment flow
+    if (editCommentText === "") {
+      setIsDeleteConfirm(true);
+      return;
+    }
     const editCommentDto = {
       id: comment._id,
       imageId: imageId,
@@ -176,6 +182,25 @@ export const Comment = ({ comment, imageId, onChangeOpen, scrollRef }) => {
     setIsEdit(false);
   };
 
+  // Confirm edit comment using enter
+  // Shift + Enter makes a new line
+  const [isShiftDown, setIsShiftDown] = useState(false);
+  const handleKeyDown = (event) => {
+    event.stopPropagation();
+    if (event.key === 'Shift') {
+      setIsShiftDown(true);
+    }
+    if (event.key === 'Enter' && !isShiftDown) {
+      onEditConfirm();
+      event.preventDefault();
+    }
+  };
+  const handleKeyUp = (event) => {
+    if (event.key === 'Shift') {
+      setIsShiftDown(false);
+    }
+  };
+
   return (
     <>
       <DeleteCommentAlert
@@ -220,8 +245,8 @@ export const Comment = ({ comment, imageId, onChangeOpen, scrollRef }) => {
             <StyledTextArea
               value={editCommentText}
               onChange={(e) => setEditCommentText(e.target.value)}
-              onKeyDown={(e) => e.stopPropagation()}
-              onKeyDownCapture={(e) => e.stopPropagation()}
+              onKeyDown={(e) => handleKeyDown(e)}
+              onKeyUp={(e) => handleKeyUp(e)}
             />
             <StyledButtonContainer>
               <Button size="small" onClick={() => setIsEdit(false)}>

From c14b47a1086bc223a0ddb769354799917306a7f8 Mon Sep 17 00:00:00 2001
From: Jesse Leung <jessetleung@gmail.com>
Date: Thu, 9 Jan 2025 20:44:47 -0500
Subject: [PATCH 2/2] fix: close comments popover when changing image with
 keyboard

---
 src/features/loupe/CommentsPopover.jsx    | 1 +
 src/features/loupe/ImageReviewToolbar.jsx | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/src/features/loupe/CommentsPopover.jsx b/src/features/loupe/CommentsPopover.jsx
index b80e0c5..56d360d 100644
--- a/src/features/loupe/CommentsPopover.jsx
+++ b/src/features/loupe/CommentsPopover.jsx
@@ -109,6 +109,7 @@ export const CommentsPopover = ({ onClose, comments, imageId, onChangeActionMenu
     dispatch(editComment('create', addCommentDto));
     setAddCommentText('');
   };
+
   // Add comment using enter
   // Shift + Enter makes a new line
   const [isShiftDown, setIsShiftDown] = useState(false);
diff --git a/src/features/loupe/ImageReviewToolbar.jsx b/src/features/loupe/ImageReviewToolbar.jsx
index f6daa6a..e2d9be2 100644
--- a/src/features/loupe/ImageReviewToolbar.jsx
+++ b/src/features/loupe/ImageReviewToolbar.jsx
@@ -189,6 +189,11 @@ const ImageReviewToolbar = ({
     }
   };
 
+  // Close popover when changing images using keyboard
+  useEffect(() => {
+    setIsCommentsPopoverOpen(false);
+  }, [image._id]);
+
   return (
     <Toolbar>
       {hasRole(userRoles, WRITE_OBJECTS_ROLES) && (