Merge pull request #4099 from regmsif/fix/image-preview

fix: prevent block menu on image preivew mask

Author: zbeyens

src/components/plate-ui/image-preview.tsx

@@ -48,9 +48,10 @@ export const ImagePreview = () => {
   return (
     <div
       className={cn(
-        'fixed top-0 left-0 z-50 h-screen w-screen',
+        'fixed top-0 left-0 z-50 h-screen w-screen select-none',
         !isOpen && 'hidden'
       )}
+      onContextMenu={(e) => e.stopPropagation()}
       {...maskLayerProps}
     >
       <div className="absolute inset-0 size-full bg-black opacity-30"></div>

src/components/plate-ui/media-popover.tsx

@@ -8,8 +8,10 @@ import {
   FloatingMedia as FloatingMediaPrimitive,
   FloatingMediaStore,
   useFloatingMediaValue,
+  useImagePreviewValue,
 } from '@udecode/plate-media/react';
 import {
+  useEditorRef,
   useEditorSelector,
   useElement,
   useReadOnly,
@@ -30,14 +32,17 @@ export interface MediaPopoverProps {
 }
 
 export function MediaPopover({ children, plugin }: MediaPopoverProps) {
+  const editor = useEditorRef();
   const readOnly = useReadOnly();
   const selected = useSelected();
 
   const selectionCollapsed = useEditorSelector(
     (editor) => !editor.api.isExpanded(),
     []
   );
-  const isOpen = !readOnly && selected && selectionCollapsed;
+  const isImagePreviewOpen = useImagePreviewValue('isOpen', editor.id);
+  const isOpen =
+    !readOnly && selected && selectionCollapsed && !isImagePreviewOpen;
   const isEditing = useFloatingMediaValue('isEditing');
 
   useEffect(() => {