payloadcms / payloadcms/payload
Link editor in RichText not working correctly
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 44.8k
- Forks
- 4.2k
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 53
Description
Describe the Bug
Describe the bug
When editing an existing link in the Lexical rich text editor, the URL field resets to its original value while typing. The issue is caused by the form-state endpoint response arriving after the user has started typing, overwriting the input with the original link data.
Steps to reproduce
- Create a document with a rich text field containing a link
- Save the document
- Reload the page
- Click the link in the editor to open the link drawer
- Immediately start typing in the URL field
- Observe that the typed value is reset to the original URL
Expected behavior
The URL field should retain the typed value after the form-state response is received.
Actual behavior
The form-state endpoint (/api/<collection>/<id> with name: form-state) is called when the link drawer opens. The response initializes the link drawer fields with the original link data. If the response arrives while the user is already typing, it overwrites the input with the original value.
The form-state request payload shows the link data is sent as data and the schemaPath confirms this is specific to the link drawer:
{
"name": "form-state",
"args": {
"data": {
"url": "https://example.com/original-url",
"newTab": true,
"linkType": "custom"
},
"schemaPath": "collection.blocks.content.body.lexical_internal_feature.link.fields"
}
}
Workaround
Toggling any other input field after opening the link drawer before typing forces a render cycle that completes the initialization. After that, the URL field retains typed values correctly. Waiting before typing does not help.
Environment
Payload: 3.85.1
@payloadcms/richtext-lexical: 3.85.1
Next.js: 16.2.6
React: 19.2.6
Browser: Chrome
Link to the code that reproduces this issue
https://github.com/snakemastr/payload_reproductions_link-editor
Reproduction Steps
- Create a document with a rich text field containing a link
- Save the document
- Reload the page
- Click the link in the editor to open the link drawer
- Immediately start typing in the URL field
- Observe that the typed value is reset to the original URL
Which area(s) are affected?
area: core, area: ui
Environment Info
Payload: 3.85.1
@payloadcms/richtext-lexical: 3.85.1
Next.js: 16.2.6
React: 19.2.6
Browser: Chrome
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Lexical link drawer and its form-state initialization, using the reproduction steps and the linked reproduction repository to trigger the delayed response while typing. Trace the /api/<collection>/<id> request with name: form-state; done means the URL field keeps typed text when the response arrives, while the reproduction steps no longer reset the value.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100