Skip to content

feat: mount live preview to document root #12860

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

Merged
merged 27 commits into from
Jun 27, 2025

Conversation

jacobsfletch
Copy link
Member

@jacobsfletch jacobsfletch commented Jun 18, 2025

Mounts live preview to ../:id instead ../:id/preview.

This is a huge win for both UX and a maintainability standpoint.

Here are just a few of those wins:

  1. If you edit a document, then decide you want to preview those changes, you are currently presented with the LeaveWithoutSaving modal and are forced to either save your edits or clear them. This is because you are being navigated to an entirely new page with it's own form context. Instead, you should be able to freely navigate back and forth between the two.
  2. If you are an editor who most often uses Live Preview, or you are editing a collection that typically requires it, you likely want it to automatically enter live preview mode when you open a document. Currently, the user has to navigate to the document first, then use the live preview tab. Instead, you should be able to set a preference and avoid this extra step.
  3. Since the inception of Live Preview, we've been maintaining largely the same code across the default edit view and the live preview view, which often became out of sync and inconsistent—but they're essentially doing the same thing. While we could abstract a lot of this out, it is no longer necessary if the two views are combined into one.

This change does also include some small modifications to UI. The "Live Preview" tab no longer exists, and instead has been replaced with a button placed next to the document controls (subject to change).

Before:

Screen.Recording.2025-06-25.at.5.13.13.PM.mp4

After:

Screen.Recording.2025-06-25.at.4.55.49.PM.mov

@jacobsfletch jacobsfletch marked this pull request as ready for review June 25, 2025 21:17
paulpopus
paulpopus previously approved these changes Jun 26, 2025
jacobsfletch added a commit that referenced this pull request Jun 26, 2025
Needed for #12860.

The client config unnecessarily omits the `livePreview.collections` and
`livePreview.globals` properties. This is because the root live preview
config extends the type with these two additional properties without
sharing it elsewhere. To led to the client sanitization function
overlooking these additional properties, as there was no type indication
that they exist.

The `collections` and `globals` properties are now appended to the
client config as expected, and the root live preview is standardized
behind the `RootLivePreviewConfig` type to ensure no properties are
lost.

---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1210628466702823
jacobsfletch added a commit that referenced this pull request Jun 26, 2025
…#12925)

Needed for #12860.

If the admin panel broadcasts foreign postMessage events, i.e. those
without the `payload-live-preview` signature, client-side live preview
subscriptions will reset back to initial state.

This is because we dispatch two postMessage events in the admin panel,
one for client-side live preview to catch (`payload-live-preview`), and
the other for server-side live preview (`payload-document-event`). This
was not previously noticeable because both events would only get called
simultaneously on initial render, where initial state is already the
expected result.

Now that Live Preview can be freely toggled on and off, both events are
frequently dispatched and very obviously disregard the current working
state.

---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1210628466702818
Copy link
Contributor

@DanRibbens DanRibbens left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like the live-preview e2e failure might not be a flake.

jacobsfletch added a commit that referenced this pull request Jun 27, 2025
Needed for #12860.

The new live preview pattern requires collection-level preferences, a
pattern that does not yet exist.

Instead of creating a new record for these types of preferences, we can
simply reuse `<collectionSlug>-list` under a more general key:
`collection-<slug>`. This way other relevant properties can be attached
in the future that might not specifically apply to the list view.

This will also match the conventions already estalished by
document-level preferences in `collection-<slug>-<id>` and
`global-<slug>`.

---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1210628212784050
@JarrodMFlesch
Copy link
Contributor

Love this change

@jacobsfletch jacobsfletch merged commit f2213e5 into main Jun 27, 2025
77 checks passed
@jacobsfletch jacobsfletch deleted the feat/mount-live-preview-to-doc-root branch June 27, 2025 15:58
Copy link
Contributor

github-actions bot commented Jul 3, 2025

🚀 This is included in version v3.45.0

jacobsfletch added a commit that referenced this pull request Jul 3, 2025
Fixes #13035.

We broke collection-level live preview configs in #12860.
@Maypher
Copy link

Maypher commented Jul 12, 2025

This feature seems to have changed how the live preview url is generated causing issues. See #13149

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants