[lexical-playground] Bug Fix: include font sizes in pt as well in parseAllowedFontSize by harshmetkel24 · Pull Request #7719 · facebook/lexical

harshmetkel24 · 2025-07-22T12:42:38Z

Description

Describe the changes in this pull request
Consider font sizes in pt as well along with px in parseAllowedFontSize as most of editors like Google docs and MS word export font-sizes in pt when copied content

Closes #7718
Closes #7726

Test plan

tests added for custom font-size in HTMLCopyAndPaste.test.ts

Before

Screen.Recording.2025-07-22.at.5.53.43.PM.mov

After

Screen.Recording.2025-07-22.at.5.54.26.PM.mov

vercel · 2025-07-22T12:42:43Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lexical	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 26, 2025 4:08pm
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 26, 2025 4:08pm

etrepum

Tests and lint are failing

etrepum

Tests are still failing

harshmetkel24 · 2025-07-22T15:47:27Z

I’ve resolved the lint error, but the test is still failing. After investigating, I realized my fix only addresses the issue in the playground, which doesn’t require updating unit tests in core.

I’d appreciate your guidance on how to proceed. Here are the options I’m considering:

Remove the test I added: This avoids misleading others but might allow regressions or encourage unsupported workarounds.
Fix it in lexicalTextNode: This would involve applying styles during importDOM, as shown in the first screenshot. However, this causes unintended font-size styles to propagate broadly, resulting in more test failures (see second screenshot).

Let me know what you think is the best direction.
Thanks!

etrepum · 2025-07-22T16:14:02Z

You can test the behavior of the playground with e2e tests. I do not think the default behavior of TextNode should be changed

Test verifies font-size handling when copying content from Google Docs/Word and pasting into Lexical.

harshmetkel24 · 2025-07-22T18:56:11Z

oh looks like some other tests related to copy paste are failing now 😢

etrepum · 2025-07-22T19:03:32Z

Yes it looks like other tests are expecting the font-size in pt to be ignored on paste, so those expectations would have to change.

fix tests by style updates for HTML tables and text format in CopyAndPaste specs.

On closer inspection, the toolbar's size is not displayed correctly when the font-size is in pt

etrepum

When inspecting the playground for this I noticed that the toolbar displays the raw number associated with the font-size, the number parsing should be used for this functionality as well.

          <FontSize
            selectionFontSize={toolbarState.fontSize.slice(0, -2)}
            editor={activeEditor}
            disabled={!isEditable}

Here's a playground link for this PR with some content that uses pt font sizes

In e2e tests and font size plugin, update font sizes to pixels for better rendering.

harshmetkel24 · 2025-07-24T06:11:01Z

When inspecting the playground for this I noticed that the toolbar displays the raw number associated with the font-size, the number parsing should be used for this functionality as well.
          <FontSize
            selectionFontSize={toolbarState.fontSize.slice(0, -2)}
            editor={activeEditor}
            disabled={!isEditable}
Here's a playground link for this PR with some content that uses pt font sizes

yes

etrepum · 2025-07-24T17:45:35Z

It looks like some tests are failing because the font-size is a floating point and the precision is different depending on the browser

harshmetkel24 · 2025-07-25T16:20:01Z

oh okay I got that. I am thinking to keep font-size in style in pt only. Just round off pt value to nearest px value in toolbar
This should work right?

etrepum · 2025-07-25T16:28:46Z

Yes handling it in a different way in the toolbar will likely work, the parsing should be split into two functions so the toolbar code can just get the px value as a number

harshmetkel24 · 2025-07-25T17:19:11Z

Yes agree, I made changes for that

etrepum · 2025-07-25T17:55:36Z

The formatting check is failing npm run prettier:fix will typically resolve that

etrepum

This isn't really how I would've split things up, there are three operations here:

Parse a font-size as [fontSize, unit] for certain known units (pt, px)
Normalize that [fontSize, unit] to a numeric px value (fontSizePx)
Validate whether that fontSize falls in the range of allowed sizes

The parseFontSizeForToolbar function needs to do steps 1 and 2 and return the value from 2, but by calling parseAllowedFontSize it has to do all of the steps and then basically repeats steps 1 & 2.

The parseAllowedFontSize function needs to do all of the steps and return the input or an empty string if validation fails.

etrepum

Looks good, nice work!

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

Support font sizes in pt units in parseAllowedFontSize

a8af92f

harshmetkel24 requested review from Fetz, Sahejkm, acywatson, fantactuka, ivailop7, lilshady, potatowagon, takuyakanbr and zurfyx as code owners July 22, 2025 12:42

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jul 22, 2025

vercel bot deployed to Preview – lexical July 22, 2025 12:43 View deployment

vercel bot deployed to Preview – lexical-playground July 22, 2025 12:44 View deployment

added test for custom font size

27758f5

vercel bot deployed to Preview – lexical July 22, 2025 12:50 View deployment

vercel bot deployed to Preview – lexical-playground July 22, 2025 12:51 View deployment

etrepum reviewed Jul 22, 2025

View reviewed changes

Fix type of pxValue to allow undefined in fontSize parser

46598a2

vercel bot deployed to Preview – lexical July 22, 2025 15:23 View deployment

vercel bot deployed to Preview – lexical-playground July 22, 2025 15:24 View deployment

etrepum reviewed Jul 22, 2025

View reviewed changes

ADD TEST FOR FONT-SIZE HANDLING FROM GOOGLE DOCS/WORD

149a3e9

Test verifies font-size handling when copying content from Google Docs/Word and pasting into Lexical.

vercel bot deployed to Preview – lexical July 22, 2025 18:44 View deployment

vercel bot deployed to Preview – lexical-playground July 22, 2025 18:45 View deployment

CAPTURE_HTML_TABLES_AND_TEXT_FORMAT_CHANGES

89cd0f3

fix tests by style updates for HTML tables and text format in CopyAndPaste specs.

etrepum previously approved these changes Jul 23, 2025

View reviewed changes

etrepum reviewed Jul 23, 2025

View reviewed changes

MOVE FONT SIZES TO PIXELS

b0e97cf

In e2e tests and font size plugin, update font sizes to pixels for better rendering.

vercel bot deployed to Preview – lexical July 24, 2025 06:11 View deployment

vercel bot deployed to Preview – lexical-playground July 24, 2025 06:12 View deployment

Fix font sizes in pt tests

4a37f62

vercel bot deployed to Preview – lexical July 24, 2025 06:15 View deployment

vercel bot deployed to Preview – lexical-playground July 24, 2025 06:16 View deployment

etrepum mentioned this pull request Jul 24, 2025

Fix(Format Error): when content from google docs or microsoft word, font-size is lost #7726

Closed

tests fix for floating font-size while converting pt to px

0e7e55e

vercel bot deployed to Preview – lexical July 25, 2025 17:19 View deployment

vercel bot deployed to Preview – lexical-playground July 25, 2025 17:20 View deployment

etrepum reviewed Jul 25, 2025

View reviewed changes

Refactor font size parsing and validation logic

6b3f571

vercel bot deployed to Preview – lexical July 26, 2025 16:07 View deployment

vercel bot deployed to Preview – lexical-playground July 26, 2025 16:08 View deployment

etrepum approved these changes Jul 26, 2025

View reviewed changes

etrepum added this pull request to the merge queue Jul 26, 2025

Merged via the queue into facebook:main with commit 914c239 Jul 26, 2025
39 checks passed

etrepum mentioned this pull request Aug 7, 2025

v0.34.0 monthly release #7746

Merged

GermanJablo mentioned this pull request Aug 29, 2025

feat(richtext-lexical): upgrade lexical from 0.28.0 to 0.34.0 payloadcms/payload#13622

Merged

23 tasks

Conversation

harshmetkel24 commented Jul 22, 2025 • edited by etrepum Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Test plan

Before

Uh oh!

vercel bot commented Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

etrepum left a comment

Choose a reason for hiding this comment

Uh oh!

etrepum left a comment

Choose a reason for hiding this comment

Uh oh!

harshmetkel24 commented Jul 22, 2025

Uh oh!

etrepum commented Jul 22, 2025

Uh oh!

harshmetkel24 commented Jul 22, 2025

Uh oh!

etrepum commented Jul 22, 2025

Uh oh!

etrepum left a comment

Choose a reason for hiding this comment

Uh oh!

harshmetkel24 commented Jul 24, 2025

Uh oh!

etrepum commented Jul 24, 2025

Uh oh!

harshmetkel24 commented Jul 25, 2025

Uh oh!

etrepum commented Jul 25, 2025

Uh oh!

harshmetkel24 commented Jul 25, 2025

Uh oh!

etrepum commented Jul 25, 2025

Uh oh!

etrepum left a comment

Choose a reason for hiding this comment

Uh oh!

etrepum left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

harshmetkel24 commented Jul 22, 2025 •

edited by etrepum

Loading

vercel bot commented Jul 22, 2025 •

edited

Loading