Live preview does not render edit custom view

[dvorac20]

Describe the Bug

When we defined a custom view for a collection, in the edit view the custom view is displayed,
After saving the page and moving to live preview the custom view disapears and the default view is shown

Link to the code that reproduces this issue

https://github.com/shefing/payload_custom_edit_view

Reproduction Steps

Steps to reproduce:

1. Clone the link to reproduction ripo and launch Payload (test/ live-preview)
2. Create a new Post instance
3. Save the page
4. Move to live preview tab

Expected:
Custom view will display.

Actual:
Default view displayed instead of custom view

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

area: ui

Environment Info

Output from 'pnpm payload info':
Binaries:
Node: 20.9.0
npm: 10.2.5
Yarn: 1.22.21
pnpm: 9.10.0
Relevant Packages:
payload: 3.0.0-beta.104
next: 15.0.0-canary.104
@payloadcms/db-mongodb: 3.0.0-beta.104
@payloadcms/graphql: 3.0.0-beta.104
@payloadcms/live-preview: 3.0.0-beta.104
@payloadcms/next/utilities: 3.0.0-beta.104
@payloadcms/plugin-cloud-storage: 3.0.0-beta.104
@payloadcms/plugin-redirects: 3.0.0-beta.104
@payloadcms/plugin-seo: 3.0.0-beta.104
@payloadcms/richtext-lexical: 3.0.0-beta.104
@payloadcms/storage-s3: 3.0.0-beta.104
@payloadcms/translations: 3.0.0-beta.104
@payloadcms/ui/shared: 3.0.0-beta.104
react: 19.0.0-rc-06d0b89e-20240801
react-dom: 19.0.0-rc-06d0b89e-20240801

[paulpopus]

This should be fixed as of beta 122 #8930

[tsemachh]

@paulpopus it's not fixed.
This issue handles next use case:

• I define Custom View A for the Edit View
• I navigate to Live Preview

I expect when I move to Live Preview to have same Custom View A with Live Preview on the right panel(or as popup).
In our case we have View with Comments at the right panel and user expects to have it also in live preview.
Of course we can use custom view with double logic of the comments but it's not a good solution.
I suggest instead of rendering the fields in live preview - check if custom edit view is provided and render it there instead

[kendelljoseph]

@dvorac20 is there a particular branch in the reproduction repo that has the custom view?

[dvorac20]

@kendelljoseph, the branch is custom_edit_view

[kendelljoseph]

Okay, was able to reproduce what you are calling attention to.

I'm seeing what the best way to implement a solution according to what makes sense here that avoids having to add redundant components.

[github-actions[bot]]

This issue has been marked as stale due to lack of activity.

To keep this issue open, please indicate that it is still relevant in a comment below.

[tsemachh]

Its still relevant

[kendelljoseph]

@dvorac20 after digging into the code, this is a feature request.

Adding the ability to sync custom components from the edit view with the live-preview view, without duplication requires structural changes to the Edit view and would be a breaking change.

Since we would want to have the ability to include components seamlessly, we would need to restructure the existing components in the Edit view and Live preview so that we can pass components without duplicating Forms, headers, etc.

[tsemachh]

Just a thought, how about rendering ahead in the edit a place holder for the live preview and when moving there just render the live preview based on existing data on the view , this will resolve other issue we had with users don't understand why they have to save when they move to live preview

[paulpopus]

The live preview is a completely different route + view. I understand why it's confusing for the editors though as it appears exactly the same.

We need to restructure our components here or support a new slot just for the Form provider in both views