lexicalHTML field doesn't update in client-side Live Preview

[stephtr]

Link to reproduction

No response

Environment Info

Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: 1.22.19
  pnpm: 9.7.1
Relevant Packages:
  payload: 3.0.0-beta.107
  next: 15.0.0-canary.136
  @payloadcms/graphql: 3.0.0-beta.107
  @payloadcms/live-preview: 3.0.0-beta.107
  @payloadcms/live-preview-react: 3.0.0-beta.107
  @payloadcms/next/utilities: 3.0.0-beta.107
  @payloadcms/richtext-lexical: 3.0.0-beta.107
  @payloadcms/translations: 3.0.0-beta.29
  @payloadcms/ui/shared: 3.0.0-beta.107
  react: 19.0.0-rc-e56f4ae3-20240830
  react-dom: 19.0.0-rc-e56f4ae3-20240830
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.0.0: Mon Aug 12 20:52:41 PDT 2024; root:xnu-11215.1.10~2/RELEASE_ARM64_T6031
  Available memory (MB): 36864
  Available CPU cores: 14

Describe the Bug

When adding a rich text field and a lexicalHTML field for automatically converting it into HTML code, as well as enabling client-side Live Preview, only the rich text field content gets updated while typing, but not the generated HTML field.

Is this a bug or a design decision?
If a bug, I could quickly create a repo for reproduction.

Reproduction Steps

• Create a collection with a rich text field
• Add a lexicalHTML field as documented
• Add client-side Live Preview as documented

Adapters and Plugins

No response

[alexnitta]

I'm also facing this issue and curious how it might be resolved; the experience for editing a lexicalHTML field is less than ideal in the current state of the live preview feature.

[stephtr]

I guess you anyway know, but you could also switch to server-side live-preview together with Versions/Draft-mode and Autosave. Overall, I find this the even better experience.

[alexnitta]

@stephtr I was not aware of that option; I'll look into it. Thanks for the tip!

[alexnitta]

@stephtr to be clear, are you saying that we should see the generated HTML field update after an autosave? I tried setting up server-side live preview with versions/draft-mode and autosave, but I didn't see the generated HTML update in the live preview. I'm on an outdated version of the Payload beta, so that could be my issue, but I wasn't actually sure if you expected this to fix the problem.

[afreidz]

facing the same issue on payload version: 2.30.1. I am guessing the afterRead hook that lexicalHTML uses behind the scenes is not re-running before the updated data is passed back to the live server client.

[stephtr]

@alexnitta yes, for me that worked (I was running beta 107). You then either have about 2 seconds delay until autosave kicks in or decrease the autosave interval

[m-shum]

Any updates on this?
Server-side live preview is all good and well for frameworks with server-side components, but those of us using Vue3, for example, don't have that option.