feat(next): export default edit and live preview views

[jacobsfletch]

Exports the default EditView and LivePreviewView from @payloadcms/next/views. This will allow you to import these components into your own project and render them within your custom view.

For example, if you wanted to swap live preview with the default edit view, you could do something like this:

import type { CollectionConfig } from 'payload'

export const MyCollectionConfig: CollectionConfig = {
  // ...
  admin: {
    components: {
      views: {
        edit: {
          default: {
            Component: '/path-to-my-custom-live-preview-view',
            tab: {
              label: 'Live Preview',
            },
          },
          livePreview: {
            Component: '/path-to-a-404-view,
          },
          newEdit: {
            path: '/edit',
            Component: '/path-to-my-custom-edit-view,
            tab: {
              label: 'Edit',
              href: '/edit',
            },
          },
        },
      },
    },
  },
}

Your custom live preview view would look something like this:

import type { DocumentViewServerProps } from 'payload'

import { LivePreviewView } from '@payloadcms/next/views'
import React from 'react'

export const MyLivePreviewView = (props: DocumentViewServerProps) => {
  return <LivePreviewView {...props} />
}

Followed by your custom edit view:

'use client'
import type { DocumentViewClientProps } from 'payload'

import { EditView } from '@payloadcms/next/views'
import React from 'react'

export const MyEditView = (props: DocumentViewClientProps) => {
  return <EditView {...props} />
}

Bigger Picture

In the future we plan to make this even easier, as this is such a frequent request. Ideally, the /preview route doesn't exist at all, and the default edit view can switch between the two without re-routing to a different page entirely. This would mean that there is no need to wire up custom views to achieve the same functionality, and your selection would save to preferences.

This would also completely avoid the LeaveWithoutSaving modal from popping up when you attempt to navigate to live preview with unsaved changes, which would be a huge win.