Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing block breaks Lexical editor #10445

Closed
cbratschi opened this issue Jan 8, 2025 · 2 comments · Fixed by #10497
Closed

Missing block breaks Lexical editor #10445

cbratschi opened this issue Jan 8, 2025 · 2 comments · Fixed by #10497
Assignees
Labels
plugin: richtext-lexical @payloadcms/richtext-lexical

Comments

@cbratschi
Copy link

Describe the Bug

A few version back there was a white screen shown with a block not found error message. Now an error boundary is hit and displays this error code whenever a serialized node contains an unknown block:

Cannot read properties of undefined (reading '0')

The above error occurred in the <Pr> component. It was handled by the <ErrorBoundary> error boundary. Error Component Stack
    at Pr (index.js:945:15)
    at Suspense (<anonymous>)
    at ErrorBoundary (LexicalErrorBoundary.dev.mjs:51:35)
    at LexicalErrorBoundary (LexicalErrorBoundary.dev.mjs:126:3)
    at RichTextPlugin (LexicalRichTextPlugin.dev.mjs:158:3)

The editor is no longer functional i.e. the document is blocked from being edited and the error code is not meaningful.

The Lexical editor should be able to handle such cases:

  • detect unknown blocks: show console error message
  • display an error block which keeps the serialized node data as is
    • error block can be deleted (unknown code will be gone)
    • developer can add the missing block (on reload edit works normally again)
    • probably a way to view, edit or copy the serialized data to fix the issue (e.g. a block was renamed)
  • add error hook to modify unknown blocks on the fly (e.g. update data or convert to other nodes)

Link to the code that reproduces this issue

https://github.com/cbratschi/payload

Reproduction Steps

  • use custom Lexical blocks
  • create a document with blocks
  • remove the custom block
  • edit the document

Which area(s) are affected? (Select all that apply)

plugin: richtext-lexical

Environment Info

Binaries:
  Node: 22.12.0
  npm: 10.9.0
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  payload: 3.13.0
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.1.0: Thu Oct 10 21:05:23 PDT 2024; root:xnu-11215.41.3~2/RELEASE_ARM64_T6031
  Available memory (MB): 65536
  Available CPU cores: 16
@cbratschi cbratschi added status: needs-triage Possible bug which hasn't been reproduced yet validate-reproduction labels Jan 8, 2025
@AlessioGr AlessioGr self-assigned this Jan 10, 2025
@AlessioGr AlessioGr added status: verified If an issue has been reproduced plugin: richtext-lexical @payloadcms/richtext-lexical labels Jan 10, 2025
@github-actions github-actions bot removed the status: needs-triage Possible bug which hasn't been reproduced yet label Jan 10, 2025
@github-actions github-actions bot removed the status: verified If an issue has been reproduced label Jan 10, 2025
Copy link
Contributor

🚀 This is included in version v3.16.0

Copy link
Contributor

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 12, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
plugin: richtext-lexical @payloadcms/richtext-lexical
Projects
None yet
2 participants