bugbot smash

Author: jaffrepaul

src/components/imageLightbox/index.tsx

@@ -18,8 +18,13 @@ interface ImageLightboxProps
   width?: number;
 }
 
-const getImageUrl = (src: string, imgPath: string): string =>
-  isExternalImage(src) ? src : imgPath;
+const getImageUrl = (src: string, imgPath: string): string => {
+  if (isExternalImage(src)) {
+    // Normalize protocol-relative URLs to use https:
+    return src.startsWith('//') ? `https:${src}` : src;
+  }
+  return imgPath;
+};
 
 type ValidDimensions = {
   height: number;
@@ -57,25 +62,32 @@ export function ImageLightbox({
     !!dimensions && (!isExternalImage(src) || isAllowedRemoteImage(src));
 
   const openInNewTab = () => {
-    window.open(getImageUrl(src, imgPath), '_blank');
+    window.open(getImageUrl(src, imgPath), '_blank', 'noopener,noreferrer');
   };
 
   const handleClick = (e: React.MouseEvent) => {
     // Middle-click or Ctrl/Cmd+click opens in new tab
     if (e.button === 1 || e.ctrlKey || e.metaKey) {
       e.preventDefault();
+      e.stopPropagation();
       openInNewTab();
       return;
     }
-    // Regular click falls through to Dialog.Trigger
+    // Regular click opens lightbox - let it bubble to Dialog.Trigger
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if ((e.key === 'Enter' || e.key === ' ') && (e.ctrlKey || e.metaKey)) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      if (e.ctrlKey || e.metaKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        openInNewTab();
+        return;
+      }
+      // Regular Enter/Space should open lightbox
       e.preventDefault();
-      openInNewTab();
+      setOpen(true);
     }
-    // Regular Enter/Space falls through to Dialog.Trigger
   };
 
   // Filter out props that are incompatible with Next.js Image component

src/components/lightbox/index.tsx

@@ -1,14 +1,17 @@
 /**
- * Reusable Lightbox component built on top of Radix UI Dialog
+ * Reusable Lightbox component built on top of Radix UI Dialog.
+ * Provides a modal overlay for displaying images or other content.
  *
  * @example
- * // Simple usage with children as trigger
+ * // Basic usage - you must provide Lightbox.Trigger as children
  * <Lightbox.Root content={<img src="large.jpg" />}>
- *   <img src="thumbnail.jpg" alt="Click to expand" />
+ *   <Lightbox.Trigger asChild>
+ *     <img src="thumbnail.jpg" alt="Click to expand" />
+ *   </Lightbox.Trigger>
  * </Lightbox.Root>
  *
  * @example
- * // Advanced usage with Lightbox.Trigger and controlled state
+ * // Controlled state with custom trigger
  * const [open, setOpen] = useState(false);
  *
  * <Lightbox.Root open={open} onOpenChange={setOpen} content={<MyLargeContent />}>
@@ -34,7 +37,6 @@ interface LightboxProps {
   closeButton?: boolean;
   onOpenChange?: (open: boolean) => void;
   open?: boolean;
-  trigger?: React.ReactNode;
 }
 
 interface LightboxTriggerProps {
@@ -51,7 +53,6 @@ interface LightboxCloseProps {
 function LightboxRoot({
   children,
   content,
-  trigger,
   onOpenChange,
   open: controlledOpen,
   closeButton = true,
@@ -63,7 +64,7 @@ function LightboxRoot({
 
   return (
     <Dialog.Root open={open} onOpenChange={setOpen}>
-      {trigger || (children && <Dialog.Trigger asChild>{children}</Dialog.Trigger>)}
+      {children}
 
       <Dialog.Portal>
         <Dialog.Overlay className={styles.lightboxOverlay} />