Add example image to Sentry iOS user feedback page (#14503)

<!-- CURSOR_SUMMARY -->
> [!NOTE]
> Adds alt-text-based image sizing via a new remark plugin, updates
image components to prefer manual dimensions, and inserts an example
widget image in iOS user feedback docs.
> 
> - **Images/rendering**:
> - **Manual sizing precedence**: `src/components/docImage` now prefers
explicit `width`/`height` props over URL hash dimensions and passes
`isManualDimensions` to the lightbox.
> - **Lightbox styling**: `src/components/imageLightbox` respects
`isManualDimensions`, applying only provided dimensions (other axis
auto) for inline images.
> - **MDX pipeline**:
> - Add `remark-image-resize.js` and wire it in `src/mdx.ts` to parse
size hints from image ALT text (e.g., `=300x200`) and set
`width`/`height` attributes.
> - **Docs**:
> - Add example User Feedback Widget image to
`docs/platforms/apple/common/user-feedback/index.mdx`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
3e50084. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Cursor Agent <[email protected]>
Co-authored-by: Roman Zavarnitsyn <[email protected]>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

Author: 4 people

docs/platforms/apple/common/user-feedback/img/user-feedback-apple-widget.png

@@ -19,6 +19,8 @@ The User Feedback feature allows you to collect user feedback from anywhere insi
 
 The User Feedback widget allows users to submit feedback from anywhere inside your application.
 
+![An example of the User Feedback Widget on iOS =350x](./img/user-feedback-apple-widget.png)
+
 ### Pre-requisites
 
 Ensure that your project is set up with Sentry and that you have added the Sentry Cocoa SDK to your project.

docs/platforms/apple/common/user-feedback/index.mdx

@@ -99,21 +99,30 @@ export default function DocImage({
     imgPath = finalSrc;
   }
 
-  // Parse dimensions from URL hash (works for both internal and external)
-  const hashDimensions = parseDimensionsFromHash(src);
+  // Prefer explicit props (coming from MDX attributes) over hash-based dimensions.
+  // If either width or height prop is provided, treat as manual sizing.
+  const manualWidth = parseDimension(propsWidth);
+  const manualHeight = 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);
+  // If either width or height is specified manually, ignore any hash dimensions entirely
+  const hasDimensionOverrides = manualWidth != null || manualHeight != null;
+  const hashDimensions = hasDimensionOverrides ? [] : parseDimensionsFromHash(src);
+
+  const inferredWidth = hashDimensions[0] > 0 ? hashDimensions[0] : undefined;
+  const width = hasDimensionOverrides ? manualWidth : inferredWidth;
+
+  const inferredHeight = hashDimensions[1] > 0 ? hashDimensions[1] : undefined;
+  const height = hasDimensionOverrides ? manualHeight : inferredHeight;
 
   return (
     <ImageLightbox
+      {...props}
       src={finalSrc}
       imgPath={imgPath}
       width={width}
       height={height}
+      hasDimensionOverrides={hasDimensionOverrides}
       alt={props.alt ?? ''}
-      {...props}
     />
   );
 }

src/components/docImage/index.tsx

@@ -14,6 +14,7 @@ interface ImageLightboxProps
   alt: string;
   imgPath: string;
   src: string;
+  hasDimensionOverrides?: boolean;
   height?: number;
   width?: number;
 }
@@ -54,6 +55,7 @@ export function ImageLightbox({
   width,
   height,
   imgPath,
+  hasDimensionOverrides: hasDimensionOverrides = false,
   style,
   className,
   ...props
@@ -97,8 +99,19 @@ export function ImageLightbox({
     const imageClassName = isInline
       ? className
       : 'max-h-[90vh] max-w-[90vw] object-contain';
+
+    // Apply sizing:
+    // - If manual: set only provided dimension(s); missing one becomes 'auto'
+    // - Else: default responsive
+    // TODO: support other units for overrides
     const imageStyle = isInline
-      ? {width: '100%', height: 'auto', ...style}
+      ? hasDimensionOverrides
+        ? {
+            width: width != null ? `${width}px` : 'auto',
+            height: height != null ? `${height}px` : 'auto',
+            ...style,
+          }
+        : {width: '100%', height: 'auto', ...style}
       : {width: 'auto', height: 'auto'};
 
     if (shouldUseNextImage && dimensions) {

src/components/imageLightbox/index.tsx

@@ -35,6 +35,7 @@ import remarkCodeTitles from './remark-code-title';
 import remarkComponentSpacing from './remark-component-spacing';
 import remarkExtractFrontmatter from './remark-extract-frontmatter';
 import remarkFormatCodeBlocks from './remark-format-code';
+import remarkImageResize from './remark-image-resize';
 import remarkImageSize from './remark-image-size';
 import remarkTocHeadings, {TocNode} from './remark-toc-headings';
 import remarkVariables from './remark-variables';
@@ -583,6 +584,7 @@ export async function getFileBySlug(slug: string): Promise<SlugFile> {
         remarkFormatCodeBlocks,
         [remarkImageSize, {sourceFolder: cwd, publicFolder: path.join(root, 'public')}],
         remarkMdxImages,
+        remarkImageResize,
         remarkCodeTitles,
         remarkCodeTabs,
         remarkComponentSpacing,

src/mdx.ts

@@ -0,0 +1,50 @@
+import {visit} from 'unist-util-visit';
+
+const SIZE_FROM_ALT_RE = /\s*=\s*(?:(\d+)\s*x\s*(\d+)|(\d+)\s*x|x\s*(\d+))\s*$/;
+/**
+ * remark plugin to parse width/height hints from the image ALT text.
+ *
+ * This plugin is intended to run AFTER `remark-mdx-images`, so it processes
+ * mdxJsxTextElement nodes named `img` (i.e., <img /> in MDX).
+ *
+ * Supported ALT suffixes (trailing in ALT text):
+ *   ![Alt text =300x200](./image.png)
+ *   ![Alt text =300x](./image.png)
+ *   ![Alt text =x200](./image.png)
+ *
+ * Behavior:
+ * - Extracts the trailing "=WxH" (width-only/height-only also supported).
+ * - Cleans the ALT text by removing the size suffix.
+ * - Adds numeric `width`/`height` attributes to the <img> element.
+ */
+export default function remarkImageResize() {
+  return tree =>
+    visit(tree, {type: 'mdxJsxTextElement', name: 'img'}, node => {
+      // Handle MDX JSX <img> produced by remark-mdx-images
+      const altIndex = node.attributes.findIndex(a => a && a.name === 'alt');
+      const altValue =
+        altIndex !== -1 && typeof node.attributes[altIndex].value === 'string'
+          ? node.attributes[altIndex].value
+          : null;
+      if (altValue) {
+        const sizeMatch = altValue.match(SIZE_FROM_ALT_RE);
+        if (sizeMatch) {
+          const [, wBoth, hBoth, wOnlyWithX, hOnlyWithX] = sizeMatch;
+          const wStr = wBoth || wOnlyWithX || undefined;
+          const hStr = hBoth || hOnlyWithX || undefined;
+          const cleanedAlt = altValue.replace(SIZE_FROM_ALT_RE, '').trim();
+          // set cleaned alt
+          node.attributes[altIndex] = {
+            type: 'mdxJsxAttribute',
+            name: 'alt',
+            value: cleanedAlt,
+          };
+
+          if (wStr)
+            node.attributes.push({type: 'mdxJsxAttribute', name: 'width', value: wStr});
+          if (hStr)
+            node.attributes.push({type: 'mdxJsxAttribute', name: 'height', value: hStr});
+        }
+      }
+    });
+}