Skip to content

Commit c1533bf

Browse files
paulpopuspaulpopus
authored
fix(templates): add button to exit preview mode (#7991)
1 parent 442d105 commit c1533bf

File tree

4 files changed

+37
-23
lines changed

4 files changed

+37
-23
lines changed

‎templates/website/src/app/(frontend)/layout.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,11 @@ import { Providers } from '@/providers'
1313
import { InitTheme } from '@/providers/Theme/InitTheme'
1414
import { mergeOpenGraph } from '@/utilities/mergeOpenGraph'
1515
import './globals.css'
16+
import { draftMode } from 'next/headers'
1617

1718
export default async function RootLayout({ children }: { children: React.ReactNode }) {
19+
const { isEnabled } = draftMode()
20+
1821
return (
1922
<html className={cn(GeistSans.variable, GeistMono.variable)} lang="en" suppressHydrationWarning>
2023
<head>
@@ -24,7 +27,11 @@ export default async function RootLayout({ children }: { children: React.ReactNo
2427
</head>
2528
<body>
2629
<Providers>
27-
<AdminBar />
30+
<AdminBar
31+
adminBarProps={{
32+
preview: isEnabled,
33+
}}
34+
/>
2835
<LivePreviewListener />
2936

3037
<Header />

‎templates/website/src/app/(payload)/admin/importMap.js

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -20,25 +20,24 @@ import { default as default_18 } from '@/components/BeforeDashboard'
2020
import { default as default_19 } from '@/components/BeforeLogin'
2121

2222
export const importMap = {
23-
'@payloadcms/richtext-lexical/client#RichTextCell': RichTextCell_0,
24-
'@payloadcms/richtext-lexical/client#RichTextField': RichTextField_1,
25-
'@payloadcms/richtext-lexical/generateComponentMap#getGenerateComponentMap':
26-
getGenerateComponentMap_2,
27-
'@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient': InlineToolbarFeatureClient_3,
28-
'@payloadcms/richtext-lexical/client#FixedToolbarFeatureClient': FixedToolbarFeatureClient_4,
29-
'@payloadcms/richtext-lexical/client#HeadingFeatureClient': HeadingFeatureClient_5,
30-
'@payloadcms/richtext-lexical/client#UnderlineFeatureClient': UnderlineFeatureClient_6,
31-
'@payloadcms/richtext-lexical/client#BoldFeatureClient': BoldFeatureClient_7,
32-
'@payloadcms/richtext-lexical/client#ItalicFeatureClient': ItalicFeatureClient_8,
33-
'@payloadcms/richtext-lexical/client#LinkFeatureClient': LinkFeatureClient_9,
34-
'@payloadcms/plugin-seo/client#OverviewComponent': OverviewComponent_10,
35-
'@payloadcms/plugin-seo/client#MetaTitleComponent': MetaTitleComponent_11,
36-
'@payloadcms/plugin-seo/client#MetaImageComponent': MetaImageComponent_12,
37-
'@payloadcms/plugin-seo/client#MetaDescriptionComponent': MetaDescriptionComponent_13,
38-
'@payloadcms/plugin-seo/client#PreviewComponent': PreviewComponent_14,
39-
'@/fields/slug/SlugComponent#SlugComponent': SlugComponent_15,
40-
'@payloadcms/richtext-lexical/client#HorizontalRuleFeatureClient': HorizontalRuleFeatureClient_16,
41-
'@payloadcms/richtext-lexical/client#BlocksFeatureClient': BlocksFeatureClient_17,
42-
'@/components/BeforeDashboard#default': default_18,
43-
'@/components/BeforeLogin#default': default_19,
23+
"@payloadcms/richtext-lexical/client#RichTextCell": RichTextCell_0,
24+
"@payloadcms/richtext-lexical/client#RichTextField": RichTextField_1,
25+
"@payloadcms/richtext-lexical/generateComponentMap#getGenerateComponentMap": getGenerateComponentMap_2,
26+
"@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient": InlineToolbarFeatureClient_3,
27+
"@payloadcms/richtext-lexical/client#FixedToolbarFeatureClient": FixedToolbarFeatureClient_4,
28+
"@payloadcms/richtext-lexical/client#HeadingFeatureClient": HeadingFeatureClient_5,
29+
"@payloadcms/richtext-lexical/client#UnderlineFeatureClient": UnderlineFeatureClient_6,
30+
"@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_7,
31+
"@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_8,
32+
"@payloadcms/richtext-lexical/client#LinkFeatureClient": LinkFeatureClient_9,
33+
"@payloadcms/plugin-seo/client#OverviewComponent": OverviewComponent_10,
34+
"@payloadcms/plugin-seo/client#MetaTitleComponent": MetaTitleComponent_11,
35+
"@payloadcms/plugin-seo/client#MetaImageComponent": MetaImageComponent_12,
36+
"@payloadcms/plugin-seo/client#MetaDescriptionComponent": MetaDescriptionComponent_13,
37+
"@payloadcms/plugin-seo/client#PreviewComponent": PreviewComponent_14,
38+
"@/fields/slug/SlugComponent#SlugComponent": SlugComponent_15,
39+
"@payloadcms/richtext-lexical/client#HorizontalRuleFeatureClient": HorizontalRuleFeatureClient_16,
40+
"@payloadcms/richtext-lexical/client#BlocksFeatureClient": BlocksFeatureClient_17,
41+
"@/components/BeforeDashboard#default": default_18,
42+
"@/components/BeforeLogin#default": default_19
4443
}

‎templates/website/src/blocks/Form/Component.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ export const FormBlock: React.FC<
125125
)
126126

127127
return (
128-
<div className="container max-w-[48rem] pb-20">
128+
<div className="container lg:max-w-[48rem] pb-20">
129129
<FormProvider {...formMethods}>
130130
{enableIntro && introContent && !hasSubmitted && (
131131
<RichText className="mb-8" content={introContent} enableGutter={false} />

‎templates/website/src/components/AdminBar/index.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { cn } from '@/utilities/cn'
66
import { useSelectedLayoutSegments } from 'next/navigation'
77
import { PayloadAdminBar } from 'payload-admin-bar'
88
import React, { useState } from 'react'
9+
import { useRouter } from 'next/navigation'
910

1011
const collectionLabels = {
1112
pages: {
@@ -31,6 +32,7 @@ export const AdminBar: React.FC<{
3132
const segments = useSelectedLayoutSegments()
3233
const [show, setShow] = useState(false)
3334
const collection = collectionLabels?.[segments?.[1]] ? segments?.[1] : 'pages'
35+
const router = useRouter()
3436

3537
const onAuthChange = React.useCallback((user) => {
3638
setShow(user?.id)
@@ -60,6 +62,12 @@ export const AdminBar: React.FC<{
6062
}}
6163
logo={<Title />}
6264
onAuthChange={onAuthChange}
65+
onPreviewExit={() => {
66+
fetch('/next/exit-preview').then(() => {
67+
router.push('/')
68+
router.refresh()
69+
})
70+
}}
6371
style={{
6472
backgroundColor: 'transparent',
6573
padding: 0,

0 commit comments

Comments
 (0)