fix(web): Load image with 800px width when embedded in rich text #16355
Conversation
RunarVestmann
added
the
deprecated:automerge
WalkthroughThe changes in this pull request focus on enhancing the Changes
Possibly related PRs
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #16355 +/- ##
==========================================
- Coverage 36.74% 36.73% -0.01%
==========================================
Files 6804 6804
Lines 140856 140883 +27
Branches 40115 40124 +9
==========================================
+ Hits 51752 51758 +6
- Misses 89104 89125 +21 Flags with carried forward coverage won't be shown. Click here to find out more.
... and 2 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
apps/web/utils/richText.tsx (1)
284-288: LGTM: Image rendering function added correctly with room for improvement.The new
Imagerendering function is implemented correctly and follows NextJS best practices. Good use of TypeScript for type safety. Consider the following suggestions for improvement:
- Extract the URL construction logic into a utility function for better maintainability.
- Use environment variables or constants for the width parameters (50 and 800) to make them easily configurable.
- Consider adding error handling or a fallback image for cases where
slice.urlis undefined.Example refactor:
const constructImageUrl = (baseUrl: string, width: number) => baseUrl ? `${baseUrl}?w=${width}` : ''; Image: (slice: ImageProps) => { const thumbnailUrl = constructImageUrl(slice?.url, 50); const fullSizeUrl = constructImageUrl(slice?.url, 800); return <Image {...slice} thumbnail={thumbnailUrl} url={fullSizeUrl} />; },
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (1)
- apps/web/utils/richText.tsx (2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
apps/web/utils/richText.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
🔇 Additional comments (1)
apps/web/utils/richText.tsx (1)
7-8: LGTM: New imports added correctly.The new imports for
ImageandImagePropsare added correctly and follow the existing naming conventions and TypeScript best practices.
Datadog ReportAll test runs ✅ 33 Total Test Services: 0 Failed, 33 Passed Test ServicesThis report shows up to 10 services
|
Load image with 800px width when embedded in rich text
To save bandwidth (look at before and after below)
Screenshots / Gifs
Before
After
Checklist:
Summary by CodeRabbit
Imagecomponent for enhanced rendering of image slices within the rich text utility.These updates enhance the overall functionality and user experience by allowing for better integration of images in the content.