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 ( <> { setEditCommentText(e.target.value)} - onKeyDown={(e) => e.stopPropagation()} - onKeyDownCapture={(e) => e.stopPropagation()} + onKeyDown={(e) => handleKeyDown(e)} + onKeyUp={(e) => handleKeyUp(e)} />