fix image edgecase bug

Author: jaffrepaul

src/components/docImage.tsx

@@ -4,6 +4,54 @@ import {serverContext} from 'sentry-docs/serverContext';
 
 import {ImageLightbox} from './imageLightbox';
 
+// Helper function to safely parse dimension values
+const parseDimension = (value: string | number | undefined): number | undefined => {
+  if (typeof value === 'number' && value > 0 && value <= 10000) return value;
+  if (typeof value === 'string') {
+    const parsed = parseInt(value, 10);
+    return parsed > 0 && parsed <= 10000 ? parsed : undefined;
+  }
+  return undefined;
+};
+
+// Helper function to parse dimensions from URL hash
+const parseDimensionsFromHash = (url: string): number[] => {
+  try {
+    const urlObj = new URL(url, 'https://example.com');
+    const hash = urlObj.hash.slice(1);
+
+    // Only parse hash if it looks like dimensions (e.g., "800x600", "100x200")
+    // Must be exactly two positive integers separated by 'x'
+    const dimensionPattern = /^(\d+)x(\d+)$/;
+    const match = hash.match(dimensionPattern);
+
+    if (match) {
+      const width = parseInt(match[1], 10);
+      const height = parseInt(match[2], 10);
+      return width > 0 && width <= 10000 && height > 0 && height <= 10000
+        ? [width, height]
+        : [];
+    }
+
+    return [];
+  } catch (_error) {
+    return [];
+  }
+};
+
+// Helper function to clean URL by removing hash
+const cleanUrl = (url: string): string => {
+  try {
+    const urlObj = new URL(url);
+    // For external URLs, reconstruct without hash
+    urlObj.hash = '';
+    return urlObj.toString();
+  } catch (_error) {
+    // If URL parsing fails, just remove hash manually
+    return url.split('#')[0];
+  }
+};
+
 export default function DocImage({
   src,
   width: propsWidth,
@@ -16,83 +64,41 @@ export default function DocImage({
     return null;
   }
 
-  // Handle external images early - pass through without processing
-  if (src.startsWith('http')) {
-    // For external images, let ImageLightbox decide whether to use Next.js Image or regular img
-    // Parse dimensions if provided
-    const width =
-      typeof propsWidth === 'number'
-        ? propsWidth
-        : typeof propsWidth === 'string'
-          ? parseInt(propsWidth, 10) || undefined
-          : undefined;
-    const height =
-      typeof propsHeight === 'number'
-        ? propsHeight
-        : typeof propsHeight === 'string'
-          ? parseInt(propsHeight, 10) || undefined
-          : undefined;
-
-    return (
-      <ImageLightbox
-        src={src}
-        imgPath={src} // For external images, imgPath should be the same as src
-        width={width}
-        height={height}
-        alt={props.alt ?? ''}
-        {...props}
-      />
-    );
-  }
-
-  // If the image src is not an absolute URL, we assume it's a relative path
-  // and we prepend /mdx-images/ to it.
-  if (src.startsWith('./')) {
-    src = path.join('/mdx-images', src);
-  }
-  // account for the old way of doing things where the public folder structure mirrored the docs folder
-  else if (!src?.startsWith('/') && !src?.includes('://')) {
-    src = `/${pagePath.join('/')}/${src}`;
-  }
+  const isExternalImage = src.startsWith('http') || src.startsWith('//');
+  let finalSrc = src;
+  let imgPath = src;
 
-  // parse the size from the URL hash (set by remark-image-size.js)
-  let srcURL: URL;
-  let imgPath: string;
-  let dimensions: number[] = [];
+  // For internal images, process the path
+  if (!isExternalImage) {
+    if (src.startsWith('./')) {
+      finalSrc = path.join('/mdx-images', src);
+    } else if (!src?.startsWith('/') && !src?.includes('://')) {
+      finalSrc = `/${pagePath.join('/')}/${src}`;
+    }
 
-  try {
-    srcURL = new URL(src, 'https://example.com');
-    imgPath = srcURL.pathname;
-    dimensions = srcURL.hash // #wxh
-      .slice(1)
-      .split('x')
-      .map(s => {
-        const parsed = parseInt(s, 10);
-        return isNaN(parsed) ? 0 : parsed;
-      });
-  } catch (_error) {
-    // Failed to parse URL, fallback to using src directly
-    imgPath = src;
-    dimensions = [];
+    // For internal images, imgPath should be the pathname only
+    try {
+      const srcURL = new URL(finalSrc, 'https://example.com');
+      imgPath = srcURL.pathname;
+    } catch (_error) {
+      imgPath = finalSrc;
+    }
+  } else {
+    // For external images, strip hash from both src and imgPath
+    finalSrc = cleanUrl(src);
+    imgPath = finalSrc;
   }
 
-  // Helper function to safely parse dimension values - only return valid numbers or undefined
-  const parseDimension = (value: string | number | undefined): number | undefined => {
-    if (typeof value === 'number' && value > 0) return value;
-    if (typeof value === 'string') {
-      const parsed = parseInt(value, 10);
-      return parsed > 0 ? parsed : undefined;
-    }
-    return undefined;
-  };
+  // Parse dimensions from URL hash (works for both internal and external)
+  const hashDimensions = parseDimensionsFromHash(src);
 
-  // Use parsed dimensions, fallback to props - let ImageLightbox decide on defaults
-  const width = dimensions[0] > 0 ? dimensions[0] : parseDimension(propsWidth);
-  const height = dimensions[1] > 0 ? dimensions[1] : parseDimension(propsHeight);
+  // Use hash dimensions first, fallback to props
+  const width = hashDimensions[0] > 0 ? hashDimensions[0] : parseDimension(propsWidth);
+  const height = hashDimensions[1] > 0 ? hashDimensions[1] : parseDimension(propsHeight);
 
   return (
     <ImageLightbox
-      src={src}
+      src={finalSrc}
       imgPath={imgPath}
       width={width}
       height={height}

src/components/imageLightbox/index.tsx

@@ -22,7 +22,8 @@ interface ImageLightboxProps
 }
 
 // Helper functions
-const isExternalImage = (src: string): boolean => src.startsWith('http');
+const isExternalImage = (src: string): boolean =>
+  src.startsWith('http') || src.startsWith('//');
 
 const getImageUrl = (src: string, imgPath: string): string =>
   isExternalImage(src) ? src : imgPath;