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.
This commit is contained in:
pengx17 2024-06-28 06:21:36 +00:00
parent eca484dc28
commit 34b6a3bf1f
No known key found for this signature in database
GPG Key ID: 23F23D9E8B3971ED

View File

@ -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 =