feat(live-preview): client-side live preview: simplify population, support hooks and lexical block population #13619
Conversation
📦 esbuild Bundle Analysis for payloadThis analysis was generated by esbuild-bundle-analyzer. 🤖
Largest pathsThese visualization shows top 20 largest paths in the bundle.Meta file: packages/next/meta_index.json, Out file: esbuild/index.js
Meta file: packages/payload/meta_index.json, Out file: esbuild/index.js
Meta file: packages/payload/meta_shared.json, Out file: esbuild/exports/shared.js
Meta file: packages/richtext-lexical/meta_client.json, Out file: esbuild/exports/client_optimized/index.js
Meta file: packages/ui/meta_client.json, Out file: esbuild/exports/client_optimized/index.js
Meta file: packages/ui/meta_shared.json, Out file: esbuild/exports/shared_optimized/index.js
DetailsNext to the size is how much the size has increased or decreased compared with the base branch of this PR.
|
|
Thanks for looking into this @AlessioGr, this simplifies things a lot 🤩 |
…-preview # Please enter a commit message to explain why this merge is necessary, # especially if it merges an updated upstream into a topic branch. # # Lines starting with '#' will be ignored, and an empty message aborts # the commit.
AlessioGr
requested review from
JarrodMFlesch and
jacobsfletch
as code owners
|
@AlessioGr I tried this change in one of my projects 👀 It seems to work great with populating data in my blocks inside lexical 🤩 One tiny issue is that the new header has to be part of CORS. So I had to add: to my payload config before I got it working. Since my website and cms is running in different projects. I think that payload/packages/payload/src/utilities/headersWithCors.ts Lines 12 to 20 in 008a52d |
jacobsfletch
left a comment
jacobsfletch
left a comment
There was a problem hiding this comment.
This is so good it makes me sick
#13717) ### What? Set X-Payload-HTTP-Method-Override as allowed cross origin header ### Why? As of #13619 the live preview uses POST method to retrieve updated data. When running cms and website on different origins, the cross origin requires X-Payload-HTTP-Method-Override header to be allowed ### How? Adding X-Payload-HTTP-Method-Override as a default allowed header
|
🚀 This is included in version v3.55.0 |
|
What does this mean for the implementation of Live Preview? Does this change anything for developers? |
Only if you pass your own
|
|
@AlessioGr It seems that before this change an updated version was sent immediately to the client window on each keypress even without autosave enabled, which was great and imho how a live preview should work. Now this doesn't seem to work anymore. 🫤 On the one hand one has to enable autosave, on the other hand, each keypress has to wait until autosave is completed and until the frontend fetches the new draft version from the server, which is a significant delay. Unfortunately this is quite the decrease in user experience. 🫤 EDIT: The Live Preview docs also doesn't mention anywhere, that this only works with autosave enabled, which seems to be the case now. So this is kind-of a feature-regression. Is there any way to get the old behaviour back? |
|
@codeflorist For us it works this way still, so I think this is something project specific on your end. Are you able to create an issue with a minimal reproduction? |
I'm one of the lucky 0.001% of developers, who is using his own I've just spent about a week to get live preview to work with my Nuxt frontend, now everything is broken again. 😖 When my requestHandler sends it's post request, i get a 403. When i send the post request directly, it works, when only the Oh well, here goes another week... |
|
@andershermansen Thanks for your help! I basically got it working again, so it gets updated on keypress. I forgot to add But it does not work for rich-text (inside a block). Does this work for you? The rich-text field is completely missing from the object returned by the |
I use blocks inside rich-text, not richtext inside blocks. But I tested this in the payload monorepo now, the live-preview test already contains this setup. And it works fine there: 
|
It was this issue, which only affected localized rich-text fields: #13756 Upgrading to the just now released v3.56.0 fixes the problem. Many thanks again @andershermansen for your efforts! |
5 participants
Alternative solution to #11104. Big thanks to @andershermansen and @GermanJablo for kickstarting work on a solution and bringing this to our attention. This PR copies over the live-preview test suite example from his PR.
Fixes #5285, #6071 and #8277. Potentially fixes #11801
This PR completely gets rid of our client-side live preview field traversal + population and all logic related to it, and instead lets the findByID endpoint handle it.
The data sent through the live preview message event is now passed to findByID via the newly added
dataattribute. The findByID endpoint will then use this data and run hooks on it (which run population), instead of fetching the data from the database.This new API basically behaves like a
/api/populate?data=endpoint, with the benefit that it runs all the hooks. Another use-case for it will be rendering lexical data. Sometimes you may only have unpopulated data available. This functionality allows you to then populate the lexical portion of it on-the-fly, so that you can properly render it to JSX while displaying images.Benefits
lexicalHTMLfield is now supported! This was a long-running issueMethod Override (POST) change
The population request to the findByID endpoint is sent as a post request, so that we can pass through the
datawithout having to squeeze it into the url params. To do that, it uses theX-Payload-HTTP-Method-Overrideheader.Previously, this functionality still expected the data to be sent through as URL search params - just passed to the body instead of the URL. In this PR, I made it possible to pass it as JSON instead. This means:
req.dataand is not able to read it from the search paramsPassing data as json has the following benefits:
qs-esm. This is especially important here, as we are passing large amounts of json dataNote for people passing their own live preview
requestHandler: instead of sending a GET request to populate documents, you will now need to send a POST request to the findByID endpoint and pass additional headers. Additionally, you will need to send through the arguments as JSON instead of search params and includedataas an argument. Here is the updated defaultRequestHandler for reference: