Edit and Live Preview Views Not Persisting State

[tsemachh]

Link to reproduction

No response

Environment Info

Payload Version
3.0.0-beta.101

Node Version
v.22.8.0

Next.js Version
15.0.0-canary.104

Describe the Bug

As an author working on my content when I move between Edit and Live Preview the system ask me if I want to save changes. My expectation as a user that data will be persisted between the Edit and Live Preview as Live Preview also enables same editing experience as a User .

Here are some examples of apps that typically persist changes across Edit and Live Preview views:

Content Management Systems (CMS):

WordPress: When switching between the Visual Editor and Text Editor, changes are preserved. Drupal: The same applies to the WYSIWYG editor and HTML editor in Drupal. Joomla: Editing content in Joomla's Article Manager or other components usually maintains state across views.

Design Tools:

Figma: Switching between Design and Preview modes in Figma preserves your design elements and changes. Adobe XD: Similar to Figma, Adobe XD maintains design state across Edit and Preview modes. Sketch: Changes made in Sketch's Design mode are reflected in Preview mode and vice versa.

Web Development Environments:

CodePen: When you switch between the Edit and Preview panes in CodePen, your code changes are instantly reflected in the preview. JSFiddle: JSFiddle also maintains code changes across the Edit and Result panes.

Other Examples:

Google Docs: Switching between Edit and View mode in Google Docs preserves your document's content and formatting. Microsoft Word: Similar to Google Docs, Word maintains changes across Edit and Read modes.

Reproduction Steps

Open the Website template

1. Create a new post or edit an existing one.
2. Make changes to the content.
3. Switch between the Edit and Live Preview views.
4. Observe that the changes made in one view are not reflected in the other.

Expected Behavior:

When switching between Edit and Live Preview views, the current state of the entry (including any changes made) should be persisted and displayed correctly in both views.

Actual Behavior:

The changes made in one view are not reflected in the other, leading to inconsistent content display and potential data loss.

Adapters and Plugins

No response

[paulpopus]

This is expected behaviour since technically you're switching views or pages entirely. One way to get around this is to enable auto save, and therefore drafts.

As a side note for the latest beta we recommend you're on next canary.104 as a minimum.

[tsemachh]

I am aware of the technical aspects of the View and also the autoSave (Perhaphs it will be viable when Version Diff will be mature enough) I am giving you our authors input on the system , we can also solve it locally but I think payload need to think more about UX and the authors we work with have reported this issue.

[philjoseph]

From the user perspective, I do not see the current behavior as the expected one. Activating Live Preview is not switching page or view, but just willing to add more information on the current view / page by viewing the rendering result of the content being edited.

Basically: I start editing my content, wonder how this is looking, so I want to activate Live Preview and keep editing my content. The same way the Live Preview reflect my unsaved changes done after Live Preview starts, I expect it to reflect my unsaved changes before I started it.

When not autosaving, I do not see the Live Preview as creating boundaries in the edit session.

Autosave is good for some use cases and not for others. And as @tsemachh wrote, autosave is creating more complexities in the version control of the content and may be an issue for many use cases

[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

[paulpopus]

This is now fixed by live preview always using the latest form data by being mounted in the edit view https://github.com/payloadcms/payload/pull/12860

[github-actions[bot]]

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