From d2e86b93b1796ea4340944db7fcd86f99d58c93f Mon Sep 17 00:00:00 2001 From: Jacob Fletcher Date: Wed, 4 Dec 2024 15:22:39 -0500 Subject: [PATCH 1/4] feat: supports relative preview URLs --- docs/admin/collections.mdx | 2 ++ docs/live-preview/overview.mdx | 4 ++-- packages/next/src/routes/rest/collections/preview.ts | 5 +++++ 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/docs/admin/collections.mdx b/docs/admin/collections.mdx index 00c7bedba23..56149750c23 100644 --- a/docs/admin/collections.mdx +++ b/docs/admin/collections.mdx @@ -87,6 +87,8 @@ The following options are available: It is possible to display a Preview Button within the Edit View of the Admin Panel. This will allow editors to visit the frontend of your app the corresponds to the document they are actively editing. This way they can preview the latest, potentially unpublished changes. +The `preview` property resolves to a string that points to your front-end application with additional URL parameters. This can be an absolute URL or a relative path. If you are using a relative path, Payload will prepend the application's origin onto it, creating a fully qualified URL. + To configure the Preview Button, set the `admin.preview` property to a function in your [Collection Config](../configuration/collections): ```ts diff --git a/docs/live-preview/overview.mdx b/docs/live-preview/overview.mdx index 7900e0db805..ef59472bf06 100644 --- a/docs/live-preview/overview.mdx +++ b/docs/live-preview/overview.mdx @@ -52,9 +52,9 @@ _\* An asterisk denotes that a property is required._ ### URL -The `url` property is a string that points to your front-end application. This value is used as the `src` attribute of the iframe rendering your front-end. Once loaded, the Admin Panel will communicate directly with your app through `window.postMessage` events. +The `url` property resolves to a string that points to your front-end application. This value is used as the `src` attribute of the iframe rendering your front-end. Once loaded, the Admin Panel will communicate directly with your app through `window.postMessage` events. -This can be an absolute URL or a relative path. If you are using a relative path, Payload will resolve it relative to the application's origin URL. This is useful for Vercel preview deployments, for example, where URLs are not known ahead of time. +This can be an absolute URL or a relative path. If you are using a relative path, Payload will prepend the application's origin onto it, creating a fully qualified URL. This is useful for Vercel preview deployments, for example, where URLs are not known ahead of time. To set the URL, use the `admin.livePreview.url` property in your [Payload Config](../configuration/overview): diff --git a/packages/next/src/routes/rest/collections/preview.ts b/packages/next/src/routes/rest/collections/preview.ts index 780eaa75f53..db4513d5590 100644 --- a/packages/next/src/routes/rest/collections/preview.ts +++ b/packages/next/src/routes/rest/collections/preview.ts @@ -34,6 +34,11 @@ export const preview: CollectionRouteHandlerWithID = async ({ id, collection, re req, token, }) + + // Support relative URLs by prepending the origin, if necessary + if (previewURL && previewURL.startsWith('/')) { + previewURL = `${req.protocol}//${req.host}${previewURL}` + } } catch (err) { return routeError({ collection, From 726a02282f8b020a6ba55a052e479d3bde5c1172 Mon Sep 17 00:00:00 2001 From: Jacob Fletcher Date: Wed, 4 Dec 2024 15:33:38 -0500 Subject: [PATCH 2/4] updates tests --- test/admin/collections/Posts.ts | 2 +- test/admin/globals/Global.ts | 1 - test/versions/collections/Autosave.ts | 1 - test/versions/collections/CustomIDs.ts | 1 - test/versions/collections/Drafts.ts | 1 - test/versions/collections/DraftsWithMax.ts | 1 - test/versions/collections/Versions.ts | 1 - test/versions/globals/Autosave.ts | 3 --- test/versions/globals/DraftWithMax.ts | 1 - 9 files changed, 1 insertion(+), 11 deletions(-) diff --git a/test/admin/collections/Posts.ts b/test/admin/collections/Posts.ts index 2bf07ac8910..21b40afc490 100644 --- a/test/admin/collections/Posts.ts +++ b/test/admin/collections/Posts.ts @@ -57,7 +57,7 @@ export const Posts: CollectionConfig = { title: 'This is a custom OG title for posts', }, }, - preview: () => 'https://payloadcms.com', + preview: () => '/', useAsTitle: 'title', }, fields: [ diff --git a/test/admin/globals/Global.ts b/test/admin/globals/Global.ts index b2bd2323d23..127a90feea4 100644 --- a/test/admin/globals/Global.ts +++ b/test/admin/globals/Global.ts @@ -18,7 +18,6 @@ export const Global: GlobalConfig = { }, }, group: 'Group', - preview: () => 'https://payloadcms.com', }, fields: [ { diff --git a/test/versions/collections/Autosave.ts b/test/versions/collections/Autosave.ts index 1c3d11f74e9..3caaee13c2c 100644 --- a/test/versions/collections/Autosave.ts +++ b/test/versions/collections/Autosave.ts @@ -11,7 +11,6 @@ const AutosavePosts: CollectionConfig = { admin: { useAsTitle: 'title', defaultColumns: ['title', 'description', 'createdAt', '_status'], - preview: () => 'https://payloadcms.com', }, versions: { maxPerDoc: 35, diff --git a/test/versions/collections/CustomIDs.ts b/test/versions/collections/CustomIDs.ts index 1176f6a365f..fdb20dfc452 100644 --- a/test/versions/collections/CustomIDs.ts +++ b/test/versions/collections/CustomIDs.ts @@ -6,7 +6,6 @@ const CustomIDs: CollectionConfig = { slug: customIDSlug, admin: { defaultColumns: ['id', 'title', 'createdAt'], - preview: () => 'https://payloadcms.com', useAsTitle: 'id', }, fields: [ diff --git a/test/versions/collections/Drafts.ts b/test/versions/collections/Drafts.ts index 9ee974b3e7e..b7c3426a661 100644 --- a/test/versions/collections/Drafts.ts +++ b/test/versions/collections/Drafts.ts @@ -44,7 +44,6 @@ const DraftPosts: CollectionConfig = { }, }, defaultColumns: ['title', 'description', 'createdAt', '_status'], - preview: () => 'https://payloadcms.com', useAsTitle: 'title', }, fields: [ diff --git a/test/versions/collections/DraftsWithMax.ts b/test/versions/collections/DraftsWithMax.ts index 0fbc861e8a9..13d2e762bb4 100644 --- a/test/versions/collections/DraftsWithMax.ts +++ b/test/versions/collections/DraftsWithMax.ts @@ -44,7 +44,6 @@ const DraftWithMaxPosts: CollectionConfig = { }, }, defaultColumns: ['title', 'description', 'createdAt', '_status'], - preview: () => 'https://payloadcms.com', useAsTitle: 'title', }, fields: [ diff --git a/test/versions/collections/Versions.ts b/test/versions/collections/Versions.ts index e5827c3d759..cdcbf8835ab 100644 --- a/test/versions/collections/Versions.ts +++ b/test/versions/collections/Versions.ts @@ -29,7 +29,6 @@ const VersionPosts: CollectionConfig = { }, admin: { defaultColumns: ['title', 'description', 'createdAt'], - preview: () => 'https://payloadcms.com', useAsTitle: 'title', }, fields: [ diff --git a/test/versions/globals/Autosave.ts b/test/versions/globals/Autosave.ts index 434962477f5..6b6d7fbe9ad 100644 --- a/test/versions/globals/Autosave.ts +++ b/test/versions/globals/Autosave.ts @@ -26,9 +26,6 @@ const AutosaveGlobal: GlobalConfig = { } }, }, - admin: { - preview: () => 'https://payloadcms.com', - }, fields: [ { name: 'title', diff --git a/test/versions/globals/DraftWithMax.ts b/test/versions/globals/DraftWithMax.ts index 6a056d5bbfa..dab8ec339fb 100644 --- a/test/versions/globals/DraftWithMax.ts +++ b/test/versions/globals/DraftWithMax.ts @@ -6,7 +6,6 @@ const DraftWithMaxGlobal: GlobalConfig = { slug: draftWithMaxGlobalSlug, label: 'Draft Global', admin: { - preview: () => 'https://payloadcms.com', components: { views: { edit: { From 564559fde1617f3176ff6b6f8463599aeaa143c2 Mon Sep 17 00:00:00 2001 From: Jacob Fletcher Date: Wed, 4 Dec 2024 15:53:42 -0500 Subject: [PATCH 3/4] adds admin.preview to live preview test suite bc it has a front-end --- docs/admin/collections.mdx | 4 ++-- test/live-preview/collections/Pages.ts | 1 + test/live-preview/collections/Posts.ts | 1 + test/live-preview/collections/SSR.ts | 1 + test/live-preview/collections/SSRAutosave.ts | 1 + 5 files changed, 6 insertions(+), 2 deletions(-) diff --git a/docs/admin/collections.mdx b/docs/admin/collections.mdx index 56149750c23..612febe2c6c 100644 --- a/docs/admin/collections.mdx +++ b/docs/admin/collections.mdx @@ -87,8 +87,6 @@ The following options are available: It is possible to display a Preview Button within the Edit View of the Admin Panel. This will allow editors to visit the frontend of your app the corresponds to the document they are actively editing. This way they can preview the latest, potentially unpublished changes. -The `preview` property resolves to a string that points to your front-end application with additional URL parameters. This can be an absolute URL or a relative path. If you are using a relative path, Payload will prepend the application's origin onto it, creating a fully qualified URL. - To configure the Preview Button, set the `admin.preview` property to a function in your [Collection Config](../configuration/collections): ```ts @@ -110,6 +108,8 @@ export const Posts: CollectionConfig = { } ``` +The `preview` property resolves to a string that points to your front-end application with additional URL parameters. This can be an absolute URL or a relative path. If you are using a relative path, Payload will prepend the application's origin onto it, creating a fully qualified URL. + The preview function receives two arguments: | Argument | Description | diff --git a/test/live-preview/collections/Pages.ts b/test/live-preview/collections/Pages.ts index abd2ab725c3..125039a69c6 100644 --- a/test/live-preview/collections/Pages.ts +++ b/test/live-preview/collections/Pages.ts @@ -32,6 +32,7 @@ export const Pages: CollectionConfig = { }, }, }, + preview: (doc) => `/live-preview/${doc?.slug}`, }, fields: [ { diff --git a/test/live-preview/collections/Posts.ts b/test/live-preview/collections/Posts.ts index 60f22bd84ef..cafc51598f8 100644 --- a/test/live-preview/collections/Posts.ts +++ b/test/live-preview/collections/Posts.ts @@ -18,6 +18,7 @@ export const Posts: CollectionConfig = { admin: { useAsTitle: 'title', defaultColumns: ['id', 'title', 'slug', 'createdAt'], + preview: (doc) => `/live-preview/posts/${doc?.slug}`, }, fields: [ { diff --git a/test/live-preview/collections/SSR.ts b/test/live-preview/collections/SSR.ts index 69150b88d93..8d8c2bf7325 100644 --- a/test/live-preview/collections/SSR.ts +++ b/test/live-preview/collections/SSR.ts @@ -22,6 +22,7 @@ export const SSR: CollectionConfig = { admin: { useAsTitle: 'title', defaultColumns: ['id', 'title', 'slug', 'createdAt'], + preview: (doc) => `/live-preview/ssr/${doc?.slug}`, }, fields: [ { diff --git a/test/live-preview/collections/SSRAutosave.ts b/test/live-preview/collections/SSRAutosave.ts index ef720bd64ac..a19236c541d 100644 --- a/test/live-preview/collections/SSRAutosave.ts +++ b/test/live-preview/collections/SSRAutosave.ts @@ -29,6 +29,7 @@ export const SSRAutosave: CollectionConfig = { admin: { useAsTitle: 'title', defaultColumns: ['id', 'title', 'slug', 'createdAt'], + preview: (doc) => `/live-preview/ssr-autosave/${doc?.slug}`, }, fields: [ { From ce772b64a788359a4f2625b5128a32ded7a14eeb Mon Sep 17 00:00:00 2001 From: Jacob Fletcher Date: Wed, 4 Dec 2024 16:26:01 -0500 Subject: [PATCH 4/4] adds back to global for existing test --- test/admin/collections/Posts.ts | 2 +- test/admin/globals/Global.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/test/admin/collections/Posts.ts b/test/admin/collections/Posts.ts index 21b40afc490..2bf07ac8910 100644 --- a/test/admin/collections/Posts.ts +++ b/test/admin/collections/Posts.ts @@ -57,7 +57,7 @@ export const Posts: CollectionConfig = { title: 'This is a custom OG title for posts', }, }, - preview: () => '/', + preview: () => 'https://payloadcms.com', useAsTitle: 'title', }, fields: [ diff --git a/test/admin/globals/Global.ts b/test/admin/globals/Global.ts index 127a90feea4..b2bd2323d23 100644 --- a/test/admin/globals/Global.ts +++ b/test/admin/globals/Global.ts @@ -18,6 +18,7 @@ export const Global: GlobalConfig = { }, }, group: 'Group', + preview: () => 'https://payloadcms.com', }, fields: [ {