feat: render images in RichText via a custom Lexical image node - #3448
Open
carolvalenca wants to merge 4 commits into
Open
feat: render images in RichText via a custom Lexical image node#3448carolvalenca wants to merge 4 commits into
carolvalenca wants to merge 4 commits into
Conversation
carolvalenca
requested review from
eduardoformiga and
renatomaurovtex
and removed request for
a team
August 12, 2026 17:59
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
WalkthroughRichText now processes Lexical image nodes. The new node validates and serializes image metadata, transforms supported VTEX URLs, exports responsive HTML, and supports alignment styling. Browser tests cover valid, invalid, legacy, and image-free content. ChangesRich-text image support
Estimated code review effort: 3 (Moderate) | ~20 minutes Mergeability Score: 🟡 Moderate · up to The change adds image rendering to RichText, but the associated test suite may fail to load because its mock references an uninitialized variable. This should be fixed before merging. Suggested reviewers: Sequence Diagram(s)sequenceDiagram
participant RichText
participant HeadlessLexicalEditor
participant RichTextImageNode
participant BrowserDOM
RichText->>HeadlessLexicalEditor: register RichTextImageNode
HeadlessLexicalEditor->>RichTextImageNode: process serialized image data
RichTextImageNode->>RichTextImageNode: validate metadata and transform supported VTEX URL
RichTextImageNode-->>RichText: export responsive image HTML
RichText->>BrowserDOM: render HTML with alignment wrapper
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/core/src/components/ui/RichText/RichTextImageNode.ts`:
- Around line 37-40: Update resolveWidthPercent so it accepts only finite,
positive numeric width values; reject Infinity, -Infinity, and NaN before
returning the value, while preserving DEFAULT_WIDTH_PERCENT for invalid inputs.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 1db129b2-2d82-4b71-a422-0b302abe1cb1
📒 Files selected for processing (3)
packages/core/src/components/ui/RichText/RichText.tsxpackages/core/src/components/ui/RichText/RichTextImageNode.tspackages/ui/src/components/atoms/RichText/styles.scss
…g in RichTextImageNode
@faststore/api
@faststore/cli
@faststore/components
@faststore/core
@faststore/diagnostics
@faststore/lighthouse
@faststore/sdk
@faststore/ui
commit: |
…line image attribute handling
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/core/test/components/ui/RichText/RichText.test.tsx`:
- Around line 8-12: Hoist isContentPlatformSourceMock with vi.hoisted before the
vi.mock factory uses it, preserving the existing mock behavior. Rename the test
file from RichText.test.tsx to RichText.browser.test.tsx so it is collected by
the browser project instead of the node project.
Apply the same fix in
`@packages/core/test/components/ui/RichText/RichText.test.tsx` around lines 1 - 3.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: acf386cc-3ea9-4d43-86b5-e06088ccdc2f
📒 Files selected for processing (2)
packages/core/src/components/ui/RichText/RichTextImageNode.tspackages/core/test/components/ui/RichText/RichText.test.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/core/src/components/ui/RichText/RichTextImageNode.ts
…ing and image handling
|
0 New Issues
0 Fixed Issues
0 Accepted Issues
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
1 participant
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.
What's the purpose of this pull request?
This pull request introduces support for custom image nodes in the rich text editor, allowing images with alignment and width options to be rendered and styled consistently. The main changes include the implementation of a new
RichTextImageNodefor image handling, its integration into the editor pipeline, and corresponding styling updates.Rich Text Image Node Implementation and Integration:
RichTextImageNodeclass toRichTextImageNode.ts, supporting image source, alt text, alignment (left,center,right), and width percentage, with logic for exporting to and importing from JSON and DOM, and automatic image resizing for VTEX assets.RichTextImageNodein thelexicalToHtmlfunction, enabling the rich text editor to recognize and handle image nodes.RichTextImageNodeintoRichText.tsxto ensure it is available for use in the editor.Styling Enhancements:
styles.scssto add styles for[data-fs-rich-text-image-wrapper], ensuring images are displayed with correct alignment and responsive sizing according to their alignment and width settings.How it works?
An image inserted via Content Platform's RichTextWidget gets serialized as a Lexical image node (src, altText, alignment, widthPercent) inside the rich text field's content. RichText's headless Lexical editor didn't recognize that node type, so images were dropped or broke parsing.
Added RichTextImageNode, registered in lexicalToHtml(), to close that gap: it parses the node (sanitizing alignment/widthPercent, capping width at 100%) and renders it to
<div data-fs-rich-text-image-wrapper>+<img data-fs-rich-text-image loading="lazy">. VTEX file-manager URLs get resized via query params (same convention as faststoreLoader). A missing/invalid src makes the node skip itself instead of breaking the block. Styling was added to @faststore/ui's RichText/styles.scss.(Check this PR to get more context)
How to test it?
This should be tested using Content Platform as content source. It can be tested using the Newsletter component. Simply set up a store that uses the code from this PR on CP and create a new entry with the Newsletter component. The preview feature can then be used to test the rendering of the Newsletter rich text.
Checklist
PR Title and Commit Messages
feat,fix,chore,docs,style,refactor,ciandtestPR Description
breaking change,bug,contributing,performance,documentation..Dependencies
pnpm-lock.yamlfile when there were changes to the packagesDocumentation
@Mariana-Caetanoto review and update (Or submit a doc request)Summary by CodeRabbit
New Features
Bug Fixes