From 34b6a3bf1f3a52883da3417100a9af040155d66c Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Fri, 28 Jun 2024 06:21:36 +0000
Subject: [PATCH] fix: escape key handling compatibility issue with blocksuite
 (#7365)

fix PD-1347

See
https://github.com/radix-ui/primitives/blob/main/packages/react/use-escape-keydown/src/useEscapeKeydown.tsx#L19-L20

This behavior in radix-ui is not possible to be prevented since escape keydown is bound to document with capturing, unless dialogs in blocksuite is also implemented with radix-ui.
---
 .../modules/peek-view/view/modal-container.tsx  | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx b/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx
index 72b865bb70..d8d4b063a8 100644
--- a/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx
+++ b/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx
@@ -22,6 +22,11 @@ const contentOptions: Dialog.DialogContentProps = {
       e.preventDefault();
     }
   },
+  onEscapeKeyDown: e => {
+    // prevent closing the modal when pressing escape key by default
+    // this is because radix-ui register the escape key event on the document using capture, which is not possible to prevent in blocksuite
+    e.preventDefault();
+  },
   style: {
     padding: 0,
     backgroundColor: 'transparent',
@@ -105,6 +110,18 @@ export const PeekViewModalContainer = forwardRef<
     });
   }, [open]);
 
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onOpenChange(false);
+      }
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [onOpenChange]);
+
   useEffect(() => {
     const bondingBox = target ? getElementScreenPositionCenter(target) : null;
     const offsetLeft =