Add resize-image plugin

Author: romtsn

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

@@ -19,9 +19,7 @@ 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.
 
-import widget from './img/user-feedback-apple-widget.png'
-
-<img src={widget} width={300} alt="User Feedback Widget" />
+![An example of the User Feedback Widget on iOS =300x](./img/user-feedback-apple-widget.png)
 
 ### Pre-requisites
 

src/components/docImage/index.tsx

@@ -99,19 +99,32 @@ export default function DocImage({
     imgPath = finalSrc;
   }
 
-  // Parse dimensions from URL hash (works for both internal and external)
-  const hashDimensions = parseDimensionsFromHash(src);
-
-  // 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);
+  // 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);
+
+  // If either width or height is specified manually, ignore any hash dimensions entirely
+  const isManual = manualWidth != null || manualHeight != null;
+  const hashDimensions = isManual ? [] : parseDimensionsFromHash(src);
+  const width = isManual
+    ? manualWidth
+    : hashDimensions[0] > 0
+    ? hashDimensions[0]
+    : undefined;
+  const height = isManual
+    ? manualHeight
+    : hashDimensions[1] > 0
+    ? hashDimensions[1]
+    : undefined;
 
   return (
     <ImageLightbox
       src={finalSrc}
       imgPath={imgPath}
       width={width}
       height={height}
+      isManualDimensions={isManual}
       alt={props.alt ?? ''}
       {...props}
     />

src/components/imageLightbox/index.tsx

@@ -15,6 +15,7 @@ interface ImageLightboxProps
   imgPath: string;
   src: string;
   height?: number;
+  isManualDimensions?: boolean;
   width?: number;
 }
 
@@ -54,6 +55,7 @@ export function ImageLightbox({
   width,
   height,
   imgPath,
+  isManualDimensions = false,
   style,
   className,
   ...props
@@ -97,8 +99,18 @@ 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
     const imageStyle = isInline
-      ? {width: '100%', height: 'auto', ...style}
+      ? isManualDimensions
+        ? {
+            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/mdx.ts

@@ -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,
@@ -655,11 +657,6 @@ export async function getFileBySlug(slug: string): Promise<SlugFile> {
       // for this specific slug easily
       options.outdir = assetsCacheDir || outdir;
 
-      // Ensure file-loader URLs are absolute from the public folder so
-      // imported image paths do not end up page-relative (which breaks <img src={imported}>).
-      // With this, imports will resolve like "/mdx-images/<name>-<hash>.<ext>".
-      options.publicPath = '/mdx-images';
-
       // Set write to true so that esbuild will output the files.
       options.write = true;
 

src/remark-image-resize.js

@@ -0,0 +1,44 @@
+import {visit} from 'unist-util-visit';
+
+const SIZE_FROM_ALT_RE = /\s*=\s*(\d+)?x?(\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)
+ *   ![Alt text =300](./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 m = altValue.match(SIZE_FROM_ALT_RE);
+      if (m) {
+        const [, wStr, hStr] = m;
+        const cleanedAlt = altValue.replace(SIZE_FROM_ALT_RE, '').trim();
+        // set cleaned alt
+        node.attributes[altIndex] = {type: 'mdxJsxAttribute', name: 'alt', value: cleanedAlt};
+        // remove any pre-existing width/height attributes to avoid duplicates
+        node.attributes = node.attributes.filter(a => !(a && (a.name === 'width' || a.name === 'height')));
+        if (wStr) node.attributes.push({type: 'mdxJsxAttribute', name: 'width', value: wStr});
+        if (hStr) node.attributes.push({type: 'mdxJsxAttribute', name: 'height', value: hStr});
+      }
+    }
+    });
+}