payloadcms / payloadcms/payload

Malfunctioning lexical rich text editing in custom block drawer

Open
#16,273 0 comments 1 reaction 1 assignee View on GitHub

@PatrikKozak is already working on this.

Since Apr 15, 2026.

plugin: richtext-lexical
Dominant language
TypeScript
Stars
44.8k
Forks
4.2k
Avg merge
2d 21h
Merged PRs (30d)
53

Description

Describe the Bug

We are looking into using blocks feature within lexical for page building, but we run into issues in the core functionality which is quite limiting.

For the sake of providing a more "realistic" preview of the end result we need to use custom components for the blocks in the lexical editor. However, these need to be easily modified, which lead us to use the @payloadcms/richtext-lexical/client, BlockEditButton for the drawer component to edit the block content. The issue is that when we have rich text editing in the block, we are unable to edit the text properly. The cursor is jumping back to the start on every slight delay in input, causing the block to be useless as a user cannot enter any relevant text into the editor without interruption.

Link to the code that reproduces this issue

https://github.com/Studentlitteratur/payload-reprod/pull/7

Reproduction Steps

Reproduction of issue with rich text editing in drawer component of custom block in lexical editor:

Visit localhost:3000/admin/collections/editor
"Create new Editor"
Add a text block to the lexical editor
Click the drawer component of the custom TextBlockPreview and trey editing the rich text field
The cursor is jumping back to starting position and prevent normal text editing behaviour
It seems the cursor is jumping back to the starting position on every fetch/post to the collection.

Which area(s) are affected?

plugin: richtext-lexical

Environment Info
Binaries:
  Node: 22.21.1
  npm: 10.9.4
  Yarn: N/A
  pnpm: 10.24.0
Relevant Packages:
  payload: 3.82.1
  next: 16.2.3
  @payloadcms/db-postgres: 3.82.1
  @payloadcms/drizzle: 3.82.1
  @payloadcms/graphql: 3.82.1
  @payloadcms/next/utilities: 3.82.1
  @payloadcms/richtext-lexical: 3.82.1
  @payloadcms/translations: 3.82.1
  @payloadcms/ui/shared: 3.82.1
  react: 19.2.3
  react-dom: 19.2.3
Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 24.6.0: Mon Jan 19 22:00:10 PST 2026; root:xnu-11417.140.69.708.3~1/RELEASE_X86_64
  Available memory (MB): 32768
  Available CPU cores: 12

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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.