Skip to content

fix(richtext-lexical): drag/drop image into rich text fails when a field name matches the collection slug#16397

Open
GermanJablo wants to merge 2 commits intopayloadcms:mainfrom
GermanJablo:cursor/6a987709
Open

fix(richtext-lexical): drag/drop image into rich text fails when a field name matches the collection slug#16397
GermanJablo wants to merge 2 commits intopayloadcms:mainfrom
GermanJablo:cursor/6a987709

Conversation

@GermanJablo
Copy link
Copy Markdown
Contributor

@GermanJablo GermanJablo commented Apr 27, 2026

Summary

When a top-level rich text field has the same name as the collection's slug, dragging or pasting an image into the editor opens a blank bulk upload drawer. The lexical field and the document layout both mount a BulkUploadProvider; when the field path equals the collection slug they compute the same drawer slug and render two drawers for it, one with empty state (blank), which is what the user sees.

The fix is a 1-line change: namespace the lexical field's nested BulkUploadProvider with a lexical- prefix so its drawer slug can never collide with the document-level provider.

- <BulkUploadProvider drawerSlugPrefix={path}>
+ <BulkUploadProvider drawerSlugPrefix={`lexical-${path}`}>

The rest of the diff is a new e2e test.

Test plan

Added test/lexical/collections/LexicalSlugFieldNameCollision/e2e.spec.ts, which asserts that dropping a file into a rich text editor opens exactly one bulk upload drawer when the field name equals the collection slug. Verified that the test fails without the production change (Expected: 1, Received: 2) and passes with it.

- Updated `tsconfig.base.json` to reference the new configuration for `@payload-config`.
- Introduced `LexicalSlugFieldNameCollision` collection to handle cases where a top-level rich text field name matches the collection slug.
- Added a new `Collision` interface to manage collision data structure.
- Updated various interfaces in `payload-types.ts` to use `string` for `id` fields instead of `number`.
- Implemented drag-and-drop functionality for file uploads in `LexicalHelpers`.
- Created end-to-end tests for the new collision handling feature in `e2e.spec.ts`.
- Added necessary slugs and utility functions to support the new feature.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants