Repository navigation
fix(text-editor): scale paragraph content font with the size prop - #8147
Conversation
There was a problem hiding this comment.
Pull request overview
Updates Carbon’s TextEditor typography so paragraph content (including links and mention pill text) scales with the size prop by relying on inherited paragraph font tokens, while retaining bold/italic formatting behavior.
Changes:
- Apply size-based paragraph
fonttokens on the editor container viaStyledTextEditor. - Update
StyledSpanNodeto avoid writing inlinefontSize/lineHeightfor paragraph preset spans so they inherit from the editor. - Update mention pill styling to inherit font, and add unit tests covering the new paragraph inline-style behavior.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/text-editor/text-editor.style.ts | Adds size→paragraph font token mapping and applies it on the editor container. |
| src/components/text-editor/text-editor.component.tsx | Passes the computed size into StyledTextEditor so typography can be applied consistently. |
| src/components/text-editor/internal/nodes/styled-span.node.ts | Skips inline font size/line height for paragraph preset spans to allow size-based inheritance. |
| src/components/text-editor/internal/nodes/styled-span.node.test.tsx | Adds tests validating paragraph spans don’t set inline font size/line height, including transitions to/from other presets. |
| src/components/text-editor/internal/nodes/mention.node.ts | Makes mention pill text inherit font so it scales with editor size. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| const node = StyledSpanNode.createFromOption("paragraph", "Body text"); | ||
| const domElement = node.createDOM(staticConfig); | ||
|
|
||
| // eslint-disable-next-line jest-dom/prefer-to-have-style |
There was a problem hiding this comment.
question: I'm guessing we're having to ignore the linter here due to some weirdness of Lexical?
There was a problem hiding this comment.
Yes, exactly. It is not a Lexical bug, we are intentionally checking direct inline style values on element.style (including empty string cases), and toHaveStyle is less precise for that specific assertion.
d274c55
f98fa97 to
e39ef22
Compare
|
🎉 This PR is included in version 162.14.2 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Proposed behaviour
the editor should apply size-based paragraph typography consistently across all paragraph content, including links and mention pill text. The mapping should be small = global/font/static/comp/regular/S, medium = global/font/static/comp/regular/M, and large = global/font/static/comp/regular/L, while preserving bold and italic styling.
Current behaviour
the TextEditor size updates the surrounding editor styling, but paragraph content inside the editor does not consistently inherit the size-specific font token. The paragraph node still applies a fixed typography setup of 400 / 21px / 14px, so links and text inside mention pills can stay on the wrong font, which is most noticeable at large size.
Checklist
d.tsfile added or updated if requiredQA
Additional context
Testing instructions