live preview

Author: thewilloftheshadow

bun.lock

@@ -17,6 +17,7 @@
 	},
 	"dependencies": {
 		"@buape/cms-types": "0.20251108.3",
+		"@payloadcms/live-preview": "^3.63.0",
 		"@payloadcms/richtext-lexical": "^3.63.0",
 		"@payloadcms/sdk": "^3.63.0",
 		"@radix-ui/react-slot": "1.2.3",
@@ -29,6 +30,7 @@
 		"lucide-react": "0.534.0",
 		"next": "15.3.5",
 		"next-themes": "^0.4.6",
+		"payload": "^3.63.0",
 		"react": "19.1.1",
 		"react-dom": "19.1.1",
 		"react-icons": "5.5.0",

package.json

@@ -1,6 +1,7 @@
 import type { Metadata } from "next"
 import { notFound } from "next/navigation"
 import { createMetadata } from "~/app/createMetadata"
+import { RefreshRouteOnSave } from "~/components/RefreshOnSave"
 import { RichText } from "~/components/RichText"
 import GridPattern from "~/components/ui/grid-pattern"
 import { payload } from "~/lib/payload"
@@ -35,6 +36,7 @@ export default async function Page(props: {
 
 	return (
 		<>
+			<RefreshRouteOnSave />
 			<GridPattern
 				className={cn(
 					"mask-[linear-gradient(to_bottom,white,transparent,transparent)]"

src/app/[slug]/page.tsx

@@ -5,6 +5,7 @@ import type { Metadata } from "next"
 import Image from "next/image"
 import { notFound } from "next/navigation"
 import { createMetadata } from "~/app/createMetadata"
+import { RefreshRouteOnSave } from "~/components/RefreshOnSave"
 import { RichText } from "~/components/RichText"
 import GridPattern from "~/components/ui/grid-pattern"
 import { payload } from "~/lib/payload"
@@ -46,6 +47,7 @@ export default async function Page(props: {
 
 	return (
 		<>
+			<RefreshRouteOnSave />
 			<GridPattern
 				className={cn(
 					"mask-[linear-gradient(to_bottom,white,transparent,transparent)]"

src/app/blog/[slug]/page.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import { isDocumentEvent, ready } from "@payloadcms/live-preview"
+import { useRouter } from "next/navigation"
+import type React from "react"
+import { useCallback, useEffect, useRef } from "react"
+
+export const RefreshRouteOnSave: React.FC = () => {
+	const router = useRouter()
+
+	const hasSentReadyMessage = useRef<boolean>(false)
+
+	const onMessage = useCallback(
+		(event: MessageEvent) => {
+			if (isDocumentEvent(event, "https://cms.buape.com/api")) {
+				router.refresh()
+			}
+		},
+		[router]
+	)
+
+	useEffect(() => {
+		if (typeof window !== "undefined") {
+			window.addEventListener("message", onMessage)
+		}
+
+		if (!hasSentReadyMessage.current) {
+			hasSentReadyMessage.current = true
+
+			ready({
+				serverURL: "https://cms.buape.com/api"
+			})
+		}
+
+		return () => {
+			if (typeof window !== "undefined") {
+				window.removeEventListener("message", onMessage)
+			}
+		}
+	}, [onMessage])
+
+	return null
+}

src/components/RefreshOnSave.tsx

@@ -13,7 +13,7 @@ export const headingConverter: JSXConverters<SerializedHeadingNode> = {
 				.replace(/[^a-z0-9-]/g, "")
 			return <h2 id={id}>{text}</h2>
 		} else {
-			const text = nodesToJSX({ nodes: node.children }).join("")
+			const text = nodesToJSX({ nodes: node.children })
 			const Tag = node.tag
 			return <Tag>{text}</Tag>
 		}