feat(setting): Avatar Clip Modal support closed by esc keydown

web/src/components/AvatarPicker.tsx

@@ -40,6 +40,9 @@ export const AvatarPicker: React.FC<AvatarPickerProps> = React.memo((props) => {
             const key = openModal(
               <ModalAvatarCropper
                 imageUrl={reader.result.toString()}
+                onCancel={() => {
+                  closeModal(key);
+                }}
                 onConfirm={(croppedImageBlobUrl) => {
                   closeModal(key);
                   updateAvatar(croppedImageBlobUrl);

web/src/components/modals/AvatarCropper.tsx

@@ -6,7 +6,7 @@ import React, { useState } from 'react';
 import { Button } from 'antd';
 import { ModalWrapper } from '../Modal';
 import { useGlobalKeyDown } from '@/hooks/useGlobalKeyDown';
-import { isEnterHotkey } from '@/utils/hot-key';
+import { isEnterHotkey, isEscHotkey } from '@/utils/hot-key';
 
 const createImage = (url: string): Promise<HTMLImageElement> =>
   new Promise((resolve, reject) => {
@@ -102,6 +102,7 @@ function getCroppedImg(
 export const ModalAvatarCropper: React.FC<{
   imageUrl: string;
   onConfirm: (croppedImageBlobUrl: string) => void;
+  onCancel: () => void;
 }> = React.memo((props) => {
   const [crop, setCrop] = useState({ x: 0, y: 0 });
   const [zoom, setZoom] = useState(1);
@@ -110,6 +111,9 @@ export const ModalAvatarCropper: React.FC<{
   useGlobalKeyDown((e) => {
     if (isEnterHotkey(e)) {
       handleConfirm();
+    } else if (isEscHotkey(e)) {
+      e.stopPropagation();
+      props.onCancel();
     }
   });