feat(richtext-lexical): upgrade lexical from 0.28.0 to 0.34.0

[GermanJablo]

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.

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 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
• v.0.30.0
• v.0.29.0

---

TODO:

• [lexical-playground] Bug Fix: include font sizes in pt as well in parseAllowedFontSize facebook/lexical#7719
• [lexical-playground] Bug Fix: Fix equation rendering in Safari facebook/lexical#7362
• [lexical-playground] DateTime Plugin facebook/lexical#7707
• [lexical-playground] Bug Fix: Use natural dimensions for inherited image size facebook/lexical#7388
• [Breaking Change][lexical-react] Refactor: LexicalNestedComposer add skipEditableListener prop and deprecate initialNodes prop and implicit namespace setting facebook/lexical#7357
• [lexical-playground] Chore: Improve accessibility of DraggableBlockPlugin add block button facebook/lexical#7352
• [lexical][lexical-playground] Chore: Deprecate KEY_MODIFIER_COMMAND and use KEY_DOWN_COMMAND for playground shortcuts facebook/lexical#7472
• [lexical-playground] Bug Fix: Change list, strikethrough and quoteblock shortcuts to match Google Docs for Windows compatibility facebook/lexical#7556
• [lexical-playground] Bug: clear formatting should also clear any indent/outdent if applied facebook/lexical#7417
• Code highlighting facebook/lexical#1036
• [lexical-react][lexical-playground] FloatingUI Context Menu facebook/lexical#7509
• [lexical-playground]Bug Fix: Image links lose link state when dragged facebook/lexical#7693
• [lexical-table] Feature: Improve logic for pasting table into table facebook/lexical#7408
• Chore: migrate string literals to update tag constants facebook/lexical#7450
• [lexical-table] Refactor: Rename and deprecate some table utils facebook/lexical#7415
• [lexical-playground] Chore: Remove shared imports from playground facebook/lexical#7368
• [Breaking Change][lexical-table][lexical-playground] Bug Fix: Set tableFrozenColumn and tableFrozenRow classes only on the scrollable table wrapper facebook/lexical#7372
• [lexical-playground] Bug Fix: Preserve row striping in frozen table columns facebook/lexical#7572
• [lexical-playground][lexical-list] Bug Fix: Made checklist icon fully scalable, clickable, and properly spaced at large font sizes facebook/lexical#7558
• [lexical-code][lexical-markdown][lexical-playground] Feature: Add code diff highlighting facebook/lexical#7613
• [lexical-playground] Bug Fix: Floating toolbar position for end-aligned text facebook/lexical#7405
• [lexical-list] Feature: Enforce strict list indentation facebook/lexical#7420
• [lexical-code][lexical-code-shiki][lexical-markdown][lexical-playground][lexical-devtools] Feature: Experimental Shiki support for code highlighting 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

[github-actions]

📦 esbuild Bundle Analysis for payload

This analysis was generated by esbuild-bundle-analyzer. 🤖

Meta File	Out File	Size (raw)	Note
packages/next/meta_index.json	esbuild/index.js	753.94 KB	✅ No change
packages/payload/meta_index.json	esbuild/index.js	1.21 MB	✅ No change
packages/payload/meta_shared.json	esbuild/exports/shared.js	161.98 KB	✅ No change
packages/richtext-lexical/meta_client.json	esbuild/exports/client_optimized/index.js	258.83 KB	✅ -899 B (-0.3%)
packages/ui/meta_client.json	esbuild/exports/client_optimized/index.js	1.15 MB	✅ No change
packages/ui/meta_shared.json	esbuild/exports/shared_optimized/index.js	14.20 KB	✅ No change

Largest paths

These visualization shows top 20 largest paths in the bundle.

Meta file: packages/next/meta_index.json, Out file: esbuild/index.js

Path	Size
../../node_modules	${{\color{Goldenrod}{ ████████████████████ }}}$ 80.3%, 601.88 KB
dist/views/Version	${{\color{Goldenrod}{ █▋ }}}$ 6.7%, 50.09 KB
dist/views/Document	${{\color{Goldenrod}{ ▌ }}}$ 2.0%, 14.91 KB
dist/views/List	${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 9.16 KB
dist/views/Root	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 7.08 KB
dist/views/Versions	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 6.30 KB
dist/views/API	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 5.98 KB
dist/views/Account	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 5.32 KB
dist/elements/Nav	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 4.84 KB
dist/elements/DocumentHeader	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 4.81 KB
dist/views/Login	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 4.39 KB
dist/views/Dashboard	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 3.68 KB
dist/views/ForgotPassword	${{\color{Goldenrod}{ }}}$ 0.4%, 3.09 KB
dist/layouts/Root	${{\color{Goldenrod}{ }}}$ 0.4%, 3.09 KB
dist/utilities/initPage	${{\color{Goldenrod}{ }}}$ 0.4%, 3.06 KB
dist/templates/Default	${{\color{Goldenrod}{ }}}$ 0.4%, 2.83 KB
dist/views/CreateFirstUser	${{\color{Goldenrod}{ }}}$ 0.3%, 2.61 KB
dist/views/BrowseByFolder	${{\color{Goldenrod}{ }}}$ 0.3%, 2.60 KB
dist/views/CollectionFolders	${{\color{Goldenrod}{ }}}$ 0.3%, 2.46 KB
dist/views/ResetPassword	${{\color{Goldenrod}{ }}}$ 0.3%, 2.41 KB
(other)	${{\color{Goldenrod}{ ████▉ }}}$ 19.7%, 147.38 KB

Meta file: packages/payload/meta_index.json, Out file: esbuild/index.js

Path	Size
../../node_modules	${{\color{Goldenrod}{ █████████████████▍ }}}$ 69.7%, 841.07 KB
dist/fields/hooks	${{\color{Goldenrod}{ ▊ }}}$ 3.3%, 40.21 KB
dist/collections/operations	${{\color{Goldenrod}{ ▊ }}}$ 3.0%, 36.03 KB
dist/auth/operations	${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 15.22 KB
dist/queues/operations	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 12.00 KB
dist/utilities/configToJSONSchema.js	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 11.54 KB
dist/globals/operations	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 11.13 KB
dist/fields/config	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 10.82 KB
dist/fields/validations.js	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 9.38 KB
dist/bin/generateImportMap	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.27 KB
dist/database/migrations	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.79 KB
dist/collections/config	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.79 KB
dist/uploads/fetchAPI-multipart	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.74 KB
dist/index.js	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.37 KB
dist/collections/endpoints	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.20 KB
dist/config/orderable	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 6.25 KB
dist/auth/strategies	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 5.50 KB
dist/config/sanitize.js	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 5.44 KB
dist/auth/endpoints	${{\color{Goldenrod}{ }}}$ 0.4%, 5.41 KB
dist/utilities/telemetry	${{\color{Goldenrod}{ }}}$ 0.4%, 5.31 KB
(other)	${{\color{Goldenrod}{ ███████▌ }}}$ 30.3%, 365.51 KB

Meta file: packages/payload/meta_shared.json, Out file: esbuild/exports/shared.js

Path	Size
../../node_modules	${{\color{Goldenrod}{ ████████████████████ }}}$ 80.0%, 126.93 KB
dist/fields/validations.js	${{\color{Goldenrod}{ █▍ }}}$ 5.9%, 9.38 KB
dist/fields/baseFields	${{\color{Goldenrod}{ ▍ }}}$ 1.8%, 2.79 KB
dist/utilities/deepCopyObject.js	${{\color{Goldenrod}{ ▍ }}}$ 1.6%, 2.48 KB
dist/auth/cookies.js	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 1.55 KB
dist/utilities/flattenTopLevelFields.js	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 1.41 KB
dist/fields/config	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 1.28 KB
dist/utilities/flattenAllFields.js	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 943 B
dist/utilities/fieldSchemaToJSON.js	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 917 B
dist/folders/utils	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 916 B
dist/utilities/unflatten.js	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 779 B
dist/utilities/sanitizeUserDataForEmail.js	${{\color{Goldenrod}{ }}}$ 0.4%, 713 B
dist/collections/config	${{\color{Goldenrod}{ }}}$ 0.4%, 570 B
dist/bin/generateImportMap	${{\color{Goldenrod}{ }}}$ 0.4%, 559 B
dist/auth/sessions.js	${{\color{Goldenrod}{ }}}$ 0.3%, 545 B
dist/utilities/getSafeRedirect.js	${{\color{Goldenrod}{ }}}$ 0.3%, 423 B
dist/utilities/deepMerge.js	${{\color{Goldenrod}{ }}}$ 0.3%, 413 B
dist/utilities/getFieldPermissions.js	${{\color{Goldenrod}{ }}}$ 0.2%, 391 B
dist/utilities/formatLabels.js	${{\color{Goldenrod}{ }}}$ 0.2%, 380 B
dist/utilities/transformColumnPreferences.js	${{\color{Goldenrod}{ }}}$ 0.2%, 348 B
(other)	${{\color{Goldenrod}{ █████ }}}$ 20.0%, 31.82 KB

Meta file: packages/richtext-lexical/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Path	Size
dist/lexical/plugins	${{\color{Goldenrod}{ ███ }}}$ 12.1%, 30.95 KB
dist/features/experimental_table	${{\color{Goldenrod}{ ██▎ }}}$ 9.3%, 23.66 KB
dist/lexical/ui	${{\color{Goldenrod}{ ██▎ }}}$ 9.2%, 23.47 KB
dist/features/blocks	${{\color{Goldenrod}{ ██▏ }}}$ 8.8%, 22.42 KB
dist/packages/@lexical	${{\color{Goldenrod}{ █▊ }}}$ 7.4%, 18.99 KB
dist/features/link	${{\color{Goldenrod}{ █▊ }}}$ 7.0%, 17.96 KB
dist/features/toolbars	${{\color{Goldenrod}{ █▋ }}}$ 6.9%, 17.68 KB
dist/features/textState	${{\color{Goldenrod}{ █ }}}$ 4.3%, 10.98 KB
dist/features/upload	${{\color{Goldenrod}{ ▉ }}}$ 3.8%, 9.60 KB
dist/features/relationship	${{\color{Goldenrod}{ ▉ }}}$ 3.7%, 9.41 KB
dist/lexical/utils	${{\color{Goldenrod}{ ▊ }}}$ 3.2%, 8.08 KB
dist/features/debug	${{\color{Goldenrod}{ ▋ }}}$ 2.9%, 7.39 KB
dist/features/converters	${{\color{Goldenrod}{ ▋ }}}$ 2.8%, 7.04 KB
dist/utilities/fieldsDrawer	${{\color{Goldenrod}{ ▋ }}}$ 2.7%, 7.01 KB
dist/lexical/config	${{\color{Goldenrod}{ ▌ }}}$ 2.0%, 5.10 KB
dist/features/lists	${{\color{Goldenrod}{ ▍ }}}$ 1.9%, 4.95 KB
dist/lexical/theme	${{\color{Goldenrod}{ ▍ }}}$ 1.6%, 4.01 KB
dist/features/format	${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 3.46 KB
dist/lexical/LexicalEditor.js	${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 3.46 KB
dist/features/indent	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 2.50 KB
(other)	${{\color{Goldenrod}{ █████████████████████▉ }}}$ 87.9%, 224.86 KB

Meta file: packages/ui/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Path	Size
../../node_modules	${{\color{Goldenrod}{ ████████████▌ }}}$ 50.2%, 572.93 KB
dist/elements/FolderView	${{\color{Goldenrod}{ ▋ }}}$ 2.7%, 30.37 KB
dist/elements/BulkUpload	${{\color{Goldenrod}{ ▌ }}}$ 2.2%, 24.57 KB
dist/elements/WhereBuilder	${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 16.26 KB
dist/fields/Relationship	${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 16.11 KB
dist/views/Edit	${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 15.43 KB
dist/elements/Table	${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 15.26 KB
dist/forms/Form	${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 14.82 KB
dist/fields/Blocks	${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 12.43 KB
dist/fields/Upload	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 11.94 KB
dist/fields/Array	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 9.30 KB
dist/elements/QueryPresets	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 9.08 KB
dist/elements/PublishButton	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 8.72 KB
dist/providers/Folders	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.38 KB
dist/elements/LivePreview	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.20 KB
dist/elements/ListHeader	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 7.98 KB
dist/views/CollectionFolder	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 7.89 KB
dist/elements/HTMLDiff	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 7.81 KB
dist/views/List	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.18 KB
dist/elements/ReactSelect	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.91 KB
(other)	${{\color{Goldenrod}{ ████████████▍ }}}$ 49.8%, 567.89 KB

Meta file: packages/ui/meta_shared.json, Out file: esbuild/exports/shared_optimized/index.js

Path	Size
dist/graphics/Logo	${{\color{Goldenrod}{ █████▋ }}}$ 22.9%, 3.12 KB
../../node_modules	${{\color{Goldenrod}{ ████▉ }}}$ 19.5%, 2.65 KB
dist/graphics/Icon	${{\color{Goldenrod}{ ██▊ }}}$ 11.2%, 1.52 KB
dist/utilities/formatDocTitle	${{\color{Goldenrod}{ ██▍ }}}$ 9.7%, 1.32 KB
dist/providers/TableColumns	${{\color{Goldenrod}{ █▌ }}}$ 6.3%, 862 B
dist/utilities/groupNavItems.js	${{\color{Goldenrod}{ █▌ }}}$ 6.0%, 814 B
dist/utilities/api.js	${{\color{Goldenrod}{ █▍ }}}$ 5.6%, 756 B
dist/elements/Translation	${{\color{Goldenrod}{ ▉ }}}$ 3.6%, 493 B
dist/elements/withMergedProps	${{\color{Goldenrod}{ ▋ }}}$ 2.5%, 339 B
dist/utilities/handleTakeOver.js	${{\color{Goldenrod}{ ▍ }}}$ 1.8%, 251 B
dist/elements/WithServerSideProps	${{\color{Goldenrod}{ ▍ }}}$ 1.7%, 232 B
dist/utilities/handleGoBack.js	${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 168 B
dist/fields/mergeFieldStyles.js	${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 159 B
dist/forms/Form	${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 147 B
dist/utilities/abortAndIgnore.js	${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 146 B
dist/utilities/hasSavePermission.js	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 136 B
dist/utilities/handleBackToDashboard.js	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 129 B
dist/utilities/findLocaleFromCode.js	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 84 B
dist/utilities/sanitizeID.js	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 77 B
dist/utilities/isEditing.js	${{\color{Goldenrod}{ }}}$ 0.4%, 59 B
(other)	${{\color{Goldenrod}{ ███████████████████▎ }}}$ 77.1%, 10.49 KB

Details

Next to the size is how much the size has increased or decreased compared with the base branch of this PR.

• ‼️: Size increased by 20% or more. Special attention should be given to this.
• ⚠️: Size increased in acceptable range (lower than 20%).
• ✅: No change or even downsized.
• 🗑️: The out file is deleted: not found in base branch.
• 🆕: The out file is newly found: will be added to base branch.

[DanRibbens]

@GermanJablo You'll need to go through the release notes to call them out so we can link to those for our release notes.

[GermanJablo]

I've updated the PR description @DanRibbens. Does this seem okay to you?

[AlessioGr]

@GermanJablo Historically for lexical bumps, given that we still have large chunks of code that are similar to the lexical playground, I went through the lexical playground commits and ported over all relevant changes to payload (e.g. see #11764).

That way, we stay up to date on new / deprecated APIs or broken / improved functionality. Also caught a lot of bugs that way. Could you do that here, or in a separate PR? Same thing for lexical/react - we took some code from there, like the link feature.

[GermanJablo]

Ok, I've reviewed and ported all the relevant changes. Only two tasks remain (I've already added them to Asana):

1. Review the changes to frozenRows and frozenColumns (1 and 2). I didn't do this because I saw ours is pretty broken. I'll do it in another PR.
2. We need to port the changes from [lexical-playground] Bug Fix: Floating toolbar position for end-aligned text facebook/lexical#7405. It conflicts with the changes in
   fix(richtext-lexical): floating toolbar caret positioned incorrectly for some line heights #6149, but that PR doesn't have tests, , and I can't quite grasp its purpose from the description. So, I assigned it to you, @AlessioGr. Let me know if that's okay with you.

This PR should be ready to go.

[github-actions]

🚀 This is included in version v3.55.0