refactor to fix event handling & propagation issues

Author: jaffrepaul

src/components/docImageClient.tsx

@@ -21,32 +21,13 @@ export function DocImageClient({
   className,
   ...props
 }: DocImageClientProps) {
-  const handleContextMenu = (e: React.MouseEvent) => {
-    e.preventDefault(); // Prevent default context menu
-    // Allow right-click to open in new tab
-    const link = document.createElement('a');
-    link.href = imgPath;
-    link.target = '_blank';
-    link.rel = 'noreferrer';
-    link.click();
-  };
-
-  const handleClick = (e: React.MouseEvent) => {
-    // If Ctrl/Cmd+click, open in new tab instead of lightbox
-    if (e.ctrlKey || e.metaKey) {
-      e.preventDefault();
-      e.stopPropagation();
-      window.open(imgPath, '_blank', 'noreferrer');
-    }
-  };
-
   // Check if dimensions are valid (not NaN) for Next.js Image
   const isValidDimensions = !isNaN(width) && !isNaN(height) && width > 0 && height > 0;
 
   // For external images or invalid dimensions, fall back to regular img tag
   if (src.startsWith('http') || !isValidDimensions) {
     return (
-      <div onContextMenu={handleContextMenu} onClick={handleClick}>
+      <a href={imgPath} target="_blank" rel="noreferrer">
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           src={src}
@@ -59,27 +40,25 @@ export function DocImageClient({
           className={className}
           {...props}
         />
-      </div>
+      </a>
     );
   }
 
   return (
-    <div onContextMenu={handleContextMenu} onClick={handleClick}>
-      <ImageLightbox src={src} alt={alt ?? ''} width={width} height={height}>
-        <Image
-          src={src}
-          width={width}
-          height={height}
-          style={{
-            width: '100%',
-            height: 'auto',
-            ...style,
-          }}
-          className={className}
-          alt={alt ?? ''}
-          {...props}
-        />
-      </ImageLightbox>
-    </div>
+    <ImageLightbox src={src} alt={alt ?? ''} width={width} height={height} imgPath={imgPath}>
+      <Image
+        src={src}
+        width={width}
+        height={height}
+        style={{
+          width: '100%',
+          height: 'auto',
+          ...style,
+        }}
+        className={className}
+        alt={alt ?? ''}
+        {...props}
+      />
+    </ImageLightbox>
   );
 }

src/components/imageLightbox.tsx

@@ -9,20 +9,37 @@ interface ImageLightboxProps {
   alt: string;
   children: React.ReactNode;
   height: number;
+  imgPath: string;
   src: string;
   width: number;
 }
 
-export function ImageLightbox({src, alt, width, height, children}: ImageLightboxProps) {
+export function ImageLightbox({src, alt, width, height, imgPath, children}: ImageLightboxProps) {
   const [open, setOpen] = useState(false);
 
+  const handleClick = (e: React.MouseEvent) => {
+    // If Ctrl/Cmd+click, let the link handle it naturally (opens in new tab)
+    if (e.ctrlKey || e.metaKey) {
+      // Allow default link behavior
+      return;
+    }
+    // Normal click - prevent link navigation and open lightbox
+    e.preventDefault();
+    setOpen(true);
+  };
+
   return (
     <Dialog.Root open={open} onOpenChange={setOpen}>
-      <Dialog.Trigger asChild>
-        <button className="cursor-pointer border-none bg-transparent p-0 block w-full">
-          {children}
-        </button>
-      </Dialog.Trigger>
+      {/* Custom trigger that handles modifier keys properly */}
+      <a
+        href={imgPath}
+        target="_blank"
+        rel="noreferrer"
+        className="cursor-pointer border-none bg-transparent p-0 block w-full no-underline"
+        onClick={handleClick}
+      >
+        {children}
+      </a>
 
       <Dialog.Portal>
         <Dialog.Overlay className="image-lightbox-overlay fixed inset-0 bg-black/80 backdrop-blur-sm z-50" />