00a673e491
Closes #12785. Although your live preview URL can be dynamic based on document data, it is never recalculated after initial mount. This means if your URL is dependent of document data that was just changed, such as a "slug" field, the URL of the iframe does not reflect that change as expected until the window is refreshed or you navigate back. This also means that server-side live preview will crash when your front-end attempts to query using a slug that no longer exists. Here's the general flow: slug changes, autosave runs, iframe refreshes (url has old slug), 404. Now, we execute your live preview function on submit within form state, and the window responds to the new URL as expected, refreshing itself without losing its connection. Here's the result: https://github.com/user-attachments/assets/7dd3b147-ab6c-4103-8b2f-14d6bc889625 --- - To see the specific tasks where the Asana app for GitHub is being used, see below: - https://app.asana.com/0/0/1211094211063140
97 lines
2.0 KiB
TypeScript
97 lines
2.0 KiB
TypeScript
import type { CollectionConfig } from 'payload'
|
|
|
|
import { Archive } from '../blocks/ArchiveBlock/index.js'
|
|
import { CallToAction } from '../blocks/CallToAction/index.js'
|
|
import { Content } from '../blocks/Content/index.js'
|
|
import { MediaBlock } from '../blocks/MediaBlock/index.js'
|
|
import { hero } from '../fields/hero.js'
|
|
import { mediaSlug, ssrAutosavePagesSlug, tenantsSlug } from '../shared.js'
|
|
|
|
export const SSRAutosave: CollectionConfig = {
|
|
slug: ssrAutosavePagesSlug,
|
|
labels: {
|
|
singular: 'SSR Autosave Page',
|
|
plural: 'SSR Autosave Pages',
|
|
},
|
|
access: {
|
|
read: () => true,
|
|
create: () => true,
|
|
update: () => true,
|
|
delete: () => true,
|
|
},
|
|
versions: {
|
|
drafts: {
|
|
autosave: {
|
|
interval: 375,
|
|
},
|
|
},
|
|
},
|
|
admin: {
|
|
useAsTitle: 'title',
|
|
defaultColumns: ['id', 'title', 'slug', 'createdAt'],
|
|
preview: (doc) => `/live-preview/ssr-autosave/${doc?.slug}`,
|
|
},
|
|
fields: [
|
|
{
|
|
name: 'slug',
|
|
type: 'text',
|
|
required: true,
|
|
unique: true,
|
|
admin: {
|
|
position: 'sidebar',
|
|
},
|
|
},
|
|
{
|
|
name: 'tenant',
|
|
type: 'relationship',
|
|
relationTo: tenantsSlug,
|
|
admin: {
|
|
position: 'sidebar',
|
|
},
|
|
},
|
|
{
|
|
name: 'title',
|
|
type: 'text',
|
|
required: true,
|
|
},
|
|
{
|
|
type: 'tabs',
|
|
tabs: [
|
|
{
|
|
label: 'Hero',
|
|
fields: [hero],
|
|
},
|
|
{
|
|
label: 'Content',
|
|
fields: [
|
|
{
|
|
name: 'layout',
|
|
type: 'blocks',
|
|
blocks: [CallToAction, Content, MediaBlock, Archive],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'meta',
|
|
type: 'group',
|
|
fields: [
|
|
{
|
|
name: 'title',
|
|
type: 'text',
|
|
},
|
|
{
|
|
name: 'description',
|
|
type: 'textarea',
|
|
},
|
|
{
|
|
name: 'image',
|
|
type: 'upload',
|
|
relationTo: mediaSlug,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
}
|