feat: setup live preview inline editing (#69)

remidej · web-flow · commit e35411058ab3 · 2025-09-15T12:22:28.000-04:00
* feat: setup preview inline editing (cherry picked from commit f611284) * chore: more preview url building to strapi config (cherry picked from commit 0015f26) * fix: only encode source maps in draft mode (cherry picked from commit d58c5b2)
diff --git a/next/app/[locale]/(marketing)/ClientSlugHandler.tsx b/next/app/[locale]/(marketing)/ClientSlugHandler.tsx
@@ -18,26 +18,5 @@ export default function ClientSlugHandler({
     }
   }, [localizedSlugs, dispatch]);
 
-  const router = useRouter();
-
-  useEffect(() => {
-    const handleMessage = async (message: MessageEvent<any>) => {
-      if (
-        message.origin === process.env.NEXT_PUBLIC_API_URL &&
-        message.data.type === 'strapiUpdate'
-      ) {
-        router.refresh();
-      }
-    };
-
-    // Add the event listener
-    window.addEventListener('message', handleMessage);
-
-    // Cleanup the event listener on unmount
-    return () => {
-      window.removeEventListener('message', handleMessage);
-    };
-  }, [router]);
-
   return null; // This component only handles the state and doesn't render anything.
 }
diff --git a/next/app/api/preview/route.ts b/next/app/api/preview/route.ts
@@ -4,37 +4,24 @@ import { redirect } from 'next/navigation';
 export const GET = async (request: Request) => {
   const { searchParams } = new URL(request.url);
   const secret = searchParams.get('secret');
-  const slug = searchParams.get('slug');
-  const locale = searchParams.get('locale');
-  const uid = searchParams.get('uid');
+  const url = searchParams.get('url') ?? '/';
   const status = searchParams.get('status');
 
+  // Check the secret and next parameters
+  // This secret should only be known to this route handler and the CMS
   if (secret !== process.env.PREVIEW_SECRET) {
     return new Response('Invalid token', { status: 401 });
   }
 
-  const contentType = uid?.split('.').pop();
-
-  // Specific for the application
-  let slugToReturn = `/${locale}/${contentType}`;
-
-  if (contentType === 'page' || contentType === 'global') {
-    if (slug && slug !== 'homepage') {
-      slugToReturn = `/${locale}/${slug}`;
-    } else {
-      slugToReturn = `/${locale}`;
-    }
-  } else if (contentType === 'article' || contentType?.includes('blog')) {
-    slugToReturn = `/${locale}/blog${slug ? `/${slug}` : ''}`;
-  } else if (contentType?.includes('product')) {
-    slugToReturn = `/en/products${slug ? `/${slug}` : ''}`;
-  }
-
   const draft = await draftMode();
-  if (status === 'draft') {
-    draft.enable();
-  } else {
+
+  if (status === 'published') {
+    // Make sure draft mode is disabled so we only query published content
     draft.disable();
+  } else {
+    // Enable draft mode so we can query draft content
+    draft.enable();
   }
-  redirect(slugToReturn);
+
+  redirect(url);
 };
diff --git a/next/app/layout.tsx b/next/app/layout.tsx
@@ -5,6 +5,7 @@ import { Locale, i18n } from '@/i18n.config';
 import './globals.css';
 
 import { SlugProvider } from './context/SlugContext';
+import { Preview } from '@/components/preview';
 
 export const viewport: Viewport = {
   themeColor: [
@@ -25,6 +26,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body suppressHydrationWarning>
+        <Preview />
         <SlugProvider>{children}</SlugProvider>
       </body>
     </html>
diff --git a/next/components/preview.tsx b/next/components/preview.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+
+export const Preview = () => {
+  const router = useRouter();
+
+  useEffect(() => {
+    const handleMessage = async (message: MessageEvent<any>) => {
+      const { origin, data } = message;
+
+      if (origin !== process.env.NEXT_PUBLIC_API_URL) {
+        return;
+      }
+
+      if (data.type === 'strapiUpdate') {
+        router.refresh();
+      } else if (data.type === 'strapiScript') {
+        const script = window.document.createElement('script');
+        script.textContent = data.payload.script;
+        window.document.head.appendChild(script);
+      }
+    };
+
+    // Add the event listener
+    window.addEventListener('message', handleMessage);
+
+    // Let Strapi know we're ready to receive the script
+    window.parent?.postMessage({ type: 'previewReady' }, '*');
+
+    // Remove the event listener on unmount
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [router]);
+
+  return null;
+};
diff --git a/next/lib/strapi/fetchContentType.ts b/next/lib/strapi/fetchContentType.ts
@@ -33,12 +33,12 @@ export default async function fetchContentType(
   params: Record<string, unknown> = {},
   spreadData?: boolean
 ): Promise<any> {
-  const { isEnabled } = await draftMode();
+  const { isEnabled: isDraftMode } = await draftMode();
 
   try {
     const queryParams = { ...params };
 
-    if (isEnabled) {
+    if (isDraftMode) {
       queryParams.status = 'draft';
     }
 
@@ -49,6 +49,9 @@ export default async function fetchContentType(
     const response = await fetch(`${url.href}?${qs.stringify(queryParams)}`, {
       method: 'GET',
       cache: 'no-store',
+      headers: {
+        'strapi-encode-source-maps': isDraftMode ? 'true' : 'false',
+      },
     });
 
     if (!response.ok) {
diff --git a/strapi/config/admin.ts b/strapi/config/admin.ts
@@ -1,43 +1,71 @@
-export default ({ env }) => ({
-  auth: {
-    secret: env('ADMIN_JWT_SECRET'),
-  },
-  apiToken: {
-    salt: env('API_TOKEN_SALT'),
-  },
-  transfer: {
-    token: {
-      salt: env('TRANSFER_TOKEN_SALT'),
+const getPreviewPathname = (uid, { locale, document }): string | null => {
+  const { slug } = document;
+
+  switch (uid) {
+    case 'api::page.page': {
+      if (slug === 'homepage') {
+        return '/';
+      }
+      return `/${slug}`;
+    }
+    case 'api::product.product':
+      return `/products/${slug}`;
+    case 'api::product-page.product-page':
+      return '/products';
+    case 'api::article.article':
+      return `/blog/${slug}`;
+    case 'api::blog-page.blog-page':
+      return '/blog';
+    default:
+      return null;
+  }
+};
+
+export default ({ env }) => {
+  const clientUrl = env('CLIENT_URL');
+  const previewSecret = env('PREVIEW_SECRET');
+
+  return {
+    auth: {
+      secret: env('ADMIN_JWT_SECRET'),
+    },
+    apiToken: {
+      salt: env('API_TOKEN_SALT'),
+    },
+    transfer: {
+      token: {
+        salt: env('TRANSFER_TOKEN_SALT'),
+      },
+    },
+    flags: {
+      nps: env.bool('FLAG_NPS', true),
+      promoteEE: env.bool('FLAG_PROMOTE_EE', true),
     },
-  },
-  flags: {
-    nps: env.bool('FLAG_NPS', true),
-    promoteEE: env.bool('FLAG_PROMOTE_EE', true),
-  },
-  preview: {
-    enabled: true,
-    config: {
-      allowedOrigins: [env('CLIENT_URL')],
-      async handler(uid, { documentId, locale, status }) {
-        const document = await strapi.documents(uid).findOne({
-          documentId,
-          populate: null,
-          fields: ['slug'],
-        });
-        const { slug } = document;
+    preview: {
+      enabled: true,
+      config: {
+        allowedOrigins: [clientUrl],
+        async handler(uid, { documentId, locale, status }) {
+          const document = await strapi
+            .documents(uid)
+            .findOne({ documentId, locale, status });
+          const pathname = getPreviewPathname(uid, { locale, document });
 
-        const urlSearchParams = new URLSearchParams({
-          secret: env('PREVIEW_SECRET'),
-          ...(slug && { slug }),
-          locale,
-          uid,
-          status,
-        });
+          // Disable preview if the pathname is not found
+          if (!pathname) {
+            return null;
+          }
 
-        const previewURL = `${env('CLIENT_URL')}/api/preview?${urlSearchParams}`;
+          // Use Next.js draft mode
+          const urlSearchParams = new URLSearchParams({
+            url: `/${locale ?? 'en'}${pathname}`,
+            secret: previewSecret,
+            status,
+          });
 
-        return previewURL;
+          return `${clientUrl}/api/preview?${urlSearchParams}`;
+        },
       },
     },
-  },
-});
+  };
+};
