[lexical-html][lexical-table] Feature: Inline CSS from <style> tags#8326
Merged
etrepum merged 4 commits intofacebook:mainfrom Apr 12, 2026
Merged
Conversation
Fixes facebook#8318 Apps like Excel and Outlook generate HTML where styles live in <style> class rules (e.g. `.xl65 { background: #FFFF00; color: blue; }`) rather than inline styles. Lexical's import converters only read inline styles, so all class-based formatting was silently lost on paste. Add `inlineStylesFromStyleSheets()` as a preprocessing step in `$generateNodesFromDOM` that resolves CSS rules from `<style>` tags into inline styles on matching elements before any converters run. This is generic — all existing converters automatically benefit for any CSS property (background-color, color, font-weight, font-size, margins, etc.). Also extend the table cell import converter's `after` callback to propagate `color` from `<td>` elements to child TextNodes, matching the existing pattern for bold/italic/underline/strikethrough. This is needed because CSS color on a <td> is inherited by child text, but Lexical models text color on TextNode, not on the cell — so the converter must bridge this gap explicitly.
tomsarduy
requested review from
acywatson,
etrepum,
fantactuka,
ivailop7,
potatowagon,
takuyakanbr and
zurfyx
as code owners
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
meta-cla
bot
added
the
CLA Signed
tomsarduy
commented
Apr 10, 2026
| } | ||
| if (color) { | ||
| const existingStyle = child.getStyle(); | ||
| if (!existingStyle.includes('color:')) { |
Contributor
Author
There was a problem hiding this comment.
Propagate color from <td> to child TextNodes
tomsarduy
changed the title
etrepum
reviewed
Apr 12, 2026
etrepum
reviewed
Apr 12, 2026
Collaborator
etrepum
left a comment
etrepum
left a comment
There was a problem hiding this comment.
Overall I think this looks good and is a worthwhile approach for the current importDOM API, but it doesn't appear to test the functionality it's adding. I only see tests that check to make sure it doesn't crash, not that the styles are actually propagated in a way that lexical imports correctly.
etrepum
approved these changes
Apr 12, 2026
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
2 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.
Address #8318
Apps like Excel and Outlook generate HTML where styles live in <style> class rules (e.g.
.xl65 { background: #FFFF00; color: blue; }) rather than inline styles. Lexical's import converters only read inline styles, so all class-based formatting was silently lost on paste.Add
inlineStylesFromStyleSheets()as a preprocessing step in$generateNodesFromDOMthat resolves CSS rules from<style>tags into inline styles on matching elements before any converters run. This is generic — all existing converters automatically benefit for any CSS property (background-color, color, font-weight, font-size, margins, etc.).Also extend the table cell import converter's
aftercallback to propagatecolorfrom<td>elements to child TextNodes, matching the existing pattern for bold/italic/underline/strikethrough. This is needed because CSS color on a is inherited by child text, but Lexical models text color on TextNode, not on the cell — so the converter must bridge this gap explicitly.Pasted table from Excel
Note: This just parse
<style>definitions, and I agree with the comment from @etrepum, to support MS Word for example, need a normalise step (something the outlook client does very well btw) but that's a big task.