[lexical-playground] Bug Fix: Use natural dimensions for inherited image size#7388
Merged
etrepum merged 3 commits intofacebook:mainfrom Mar 27, 2025
Merged
Conversation
- Use image's natural dimensions when width/height is 'inherit' - Add fallback dimensions (200x200) while image loads - Scale proportionally if exceeds maxWidth/maxHeight constraints - Handle dimensions on both initial mount and image load - Maintain aspect ratio during scaling Fixes facebook#7376
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
- Add proper dimension calculation for SVG images - Ensure SVG images maintain aspect ratio while respecting maxWidth - Add comprehensive test case for both SVG and JPG image handling Fixes facebook#7376
- Skip test in collab mode where dimensions are handled differently Fixes facebook#7376
etrepum
approved these changes
Mar 27, 2025
Collaborator
etrepum
left a comment
There was a problem hiding this comment.
Looks great! I notice that the tests depend on a particular URL on the website which could make things fail unexpectedly in the future but it doesn't seem to be the only test that's doing it so we can worry about that another time
lilshady
pushed a commit
that referenced
this pull request
Mar 29, 2025
Merged
fantactuka
pushed a commit
that referenced
this pull request
Aug 11, 2025
23 tasks
GermanJablo
added a commit
to payloadcms/payload
that referenced
this pull request
Sep 3, 2025
Fixes #13386 Below I write a clarification to copy and paste into the release note, based on our latest upgrade of Lexical [in v3.29.0](https://github.com/payloadcms/payload/releases/tag/v3.29.0). ## Important This release upgrades the lexical dependency from 0.28.0 to 0.34.0. If you installed lexical manually, update it to 0.34.0. Installing lexical manually is not recommended, as it may break between updates, and our re-exported versions should be used. See the [yellow banner box](https://payloadcms.com/docs/rich-text/custom-features) for details. If you still encounter richtext-lexical errors, do the following, in this order: - Delete node_modules - Delete your lockfile (e.g. pnpm-lock.json) - Reinstall your dependencies (e.g. pnpm install) ### Lexical Breaking Changes The following Lexical releases describe breaking changes. We recommend reading them if you're using Lexical APIs directly (`@payloadcms/richtext-lexical/lexical/*`). - [v.0.33.0](https://github.com/facebook/lexical/releases/tag/v0.33.0) - [v.0.30.0](https://github.com/facebook/lexical/releases/tag/v0.30.0) - [v.0.29.0](https://github.com/facebook/lexical/releases/tag/v0.29.0) ___ TODO: - [x] facebook/lexical#7719 - [x] facebook/lexical#7362 - [x] facebook/lexical#7707 - [x] facebook/lexical#7388 - [x] facebook/lexical#7357 - [x] facebook/lexical#7352 - [x] facebook/lexical#7472 - [x] facebook/lexical#7556 - [x] facebook/lexical#7417 - [x] facebook/lexical#1036 - [x] facebook/lexical#7509 - [x] facebook/lexical#7693 - [x] facebook/lexical#7408 - [x] facebook/lexical#7450 - [x] facebook/lexical#7415 - [x] facebook/lexical#7368 - [x] facebook/lexical#7372 - [x] facebook/lexical#7572 - [x] facebook/lexical#7558 - [x] facebook/lexical#7613 - [x] facebook/lexical#7405 - [x] facebook/lexical#7420 - [x] facebook/lexical#7662 --- - To see the specific tasks where the Asana app for GitHub is being used, see below: - https://app.asana.com/0/0/1211202581885926
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Current Behavior
Currently, when an image is inserted with 'inherit' dimensions in the Lexical playground, it defaults to arbitrary 200x200 dimensions without considering the image's natural size. This causes visual inconsistency and incorrect image rendering on initial load.
Changes in this PR
Closes #7376
Test plan
Before
After