Cap rich description image width#366
Conversation
There was a problem hiding this comment.
Pull request overview
This PR enhances the RichDescription component to cap markdown image widths for better rendering. It adds both CSS constraints (maxWidth: 100%, height: auto) and ImageKit CDN transforms to optimize image delivery at appropriate sizes.
Changes:
- Added ImageKit URL transformation to inject width constraints (max 1200px) for ImageKit-hosted images
- Implemented custom img renderer in ReactMarkdown with responsive CSS styling
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| function addImagekitTransform(src: string): string { | ||
| if (!src.includes("ik.imagekit.io")) return src | ||
| if (src.includes("/tr:") || /[?&]tr=/.test(src)) return src | ||
|
|
||
| const match = src.match(/^(https?:\/\/ik\.imagekit\.io\/[^/]+\/)(.+)$/) | ||
| if (!match) return src | ||
|
|
||
| const [, base, path] = match | ||
| return `${base}${IMAGEKIT_TRANSFORM}/${path}` | ||
| } |
There was a problem hiding this comment.
Consider adding documentation for this function similar to other helper functions in this file (e.g., capitalizeEntityType at line 36). The documentation should explain the transform parameters and the URL structure expected.
| img: ({ src, alt }) => { | ||
| if (!src) return null | ||
| return ( | ||
| <Box | ||
| component="img" | ||
| src={addImagekitTransform(src)} | ||
| alt={alt || ""} | ||
| sx={{ maxWidth: "100%", height: "auto" }} | ||
| /> | ||
| ) | ||
| }, |
There was a problem hiding this comment.
The new image rendering functionality and the addImagekitTransform function lack test coverage. Similar UI components in this directory (Autocomplete, ColorPickerField, EntityLink) have comprehensive tests in the tests directory. Consider adding tests for the image transform logic, especially for edge cases like URLs with existing transforms, query parameters, and non-ImageKit URLs.
| return entityType.charAt(0).toUpperCase() + entityType.slice(1) | ||
| } | ||
|
|
||
| function addImagekitTransform(src: string): string { |
There was a problem hiding this comment.
The function name uses lowercase "imagekit" but the codebase consistently uses "ImageKit" with a capital K in comments and documentation (see src/lib/marketingImages.ts:4, src/types/media.ts:22, src/lib/client/mediaLibraryClient.ts:69). Consider renaming to "addImageKitTransform" for consistency.
Summary
Testing