payloadcms / payloadcms/payload

Link editor in RichText not working correctly

Open
#17,167 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

area: core area: ui status: needs-triage v3
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

  1. Create a document with a rich text field containing a link
  2. Save the document
  3. Reload the page
  4. Click the link in the editor to open the link drawer
  5. Immediately start typing in the URL field
  6. 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
  1. Create a document with a rich text field containing a link
  2. Save the document
  3. Reload the page
  4. Click the link in the editor to open the link drawer
  5. Immediately start typing in the URL field
  6. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.