标签：#payload

Managing payload cms lexical tables in a content-heavy site means enabling EXPERIMENTAL_TableFeature — but the real trap is the markdown import that strips tables without warning. We lost a whole batch of production blog posts to this exact hole before we found the fix. Here’s why it happens and the step-by-step configuration that keeps your tables intact. The Silent Table Eater: Payload CMS Lexical Tables and Markdown Conversion The default markdown-to-Lexical conversion helper completely ignores your editor’s feature list. So even when you’ve added the table feature to your editor config, every GFM table in imported markdown is silently dropped. Here’s the code that ate our data: import { editorConfigFactory , defaultFeatures } from ' @payloadcms/richtext-lexical ' // ❌ This uses a plain config that doesn’t know about tables const mdConverter = editorConfigFactory . default ({ features : defaultFeatures , }) const lexicalData = mdConverter . parse ( ' # Hello \n\n | A | B | \n |---|---| \n | 1 | 2 | ' ) // result: { root: … } — no table node anywhere The problem: editorConfigFactory.default builds a conversion pipeline from a static feature set, not from your actual editor config. Any experimental or custom feature you’ve wired into the editor simply isn’t there during markdown parsing. Fix It: Wire EXPERIMENTAL_TableFeature Into the Conversion Config Switch to editorConfigFactory.fromFeatures , which actually reads the feature array you provide. Include the table feature alongside the defaults, and the markdown converter will start producing proper Lexical table nodes. import { editorConfigFactory , defaultFeatures , EXPERIMENTAL_TableFeature , } from ' @payloadcms/richtext-lexical ' const mdConverter = editorConfigFactory . fromFeatures ({ features : [... defaultFeatures , EXPERIMENTAL_TableFeature ()], }) Takeaway: You must add EXPERIMENTAL_TableFeature() to both your editor’s features array and to every markdown conversion config. Missing one side silently eat

When you wire up a payload cms live preview , you’re not just plumbing a URL—you’re building a contract between the admin panel and your Next.js App Router. The goal is keystrokes-ago fidelity: editors click Preview, land on your front end, and see exactly what’s in the draft, even when the public site is cached to the hilt. Our implementation at techpotions settled on one preview route, one shared secret, and one shared URL builder. Here’s every decision that made it work. One /next/preview route for the entire site The admin panel’s preview button doesn’t need to know about your page structure. It calls a single /next/preview route with a secret query param and a slug search param that points to the document being previewed. // app/(payload)/next/preview/route.ts import { draftMode } from ' next/headers ' import { redirect } from ' next/navigation ' export async function GET ( request : Request ) { const { searchParams } = new URL ( request . url ) const secret = searchParams . get ( ' secret ' ) const slug = searchParams . get ( ' slug ' ) if ( secret !== process . env . PREVIEW_SECRET ) { return new Response ( ' Invalid token ' , { status : 401 }) } const draft = await draftMode () draft . enable () redirect ( slug ?? ' / ' ) } That’s the entire route. No collection-specific logic, no second-guessing which page type is involved. The redirect lands on the actual page, which reads draftMode().isEnabled and fetches accordingly. This is the pattern the Payload CMS preview documentation expects: a function that resolves to a string with additional URL parameters pointing to your app. The preview-URL builder lives in one shared lib Here’s where most implementations drift apart. The admin config, the preview route, and each page component all need to agree on how a preview URL is constructed. Store that logic in one place—a single getPreviewUrl utility imported everywhere—or you’ll be chasing 404s in production when someone renames a collection slug. // lib/getPreviewU

Running 23 European e-commerce shops on Payload CMS v3 taught me that some things simply don't exist yet. So I built them. Background I maintain a multi-clone e-commerce infrastructure — 23 Next.js + Payload CMS v3 shops deployed across Europe, each on its own subdomain and language. Think fr.myshop.com , de.myshop.com , sk.myshop.com ... all running on the same codebase with country-specific patches. While building this, I kept running into two missing pieces that no one had published for Payload v3: A customer reviews system with admin moderation and Google star ratings Complete Schema.org JSON-LD for Google rich snippets (Product, BreadcrumbList, ItemList, AggregateRating) Both are now published on npm. Here's what I built, the bugs I hit, and how I solved them. Part 1 — The Reviews Plugin What didn't exist Search npm for payload reviews or payload ratings — you'll find nothing for v3. The official plugin ecosystem covers SEO, forms, redirects, Stripe... but not customer reviews. Building the collection The reviews collection itself is straightforward — relationship to products , rating (1-5), status select (pending/approved/rejected), author fields. The tricky parts came later. Access control gotcha: Payload v3 uses a roles array, not a role string. This breaks if you copy v2 patterns: // ❌ Wrong — always returns false update : ({ req }) => req . user ?. role === ' admin ' , // ✅ Correct for v3 update : ({ req }) => req . user ?. roles ?. includes ( ' admin ' ), Prevent self-verification: Users can POST any field on create: () => true collections. Lock verified in a beforeChange hook: hooks : { beforeChange : [ ({ data }) => { if ( ! data . status ) data . status = ' pending ' data . verified = false // admin-only, always reset on create return data }, ], }, Email protection: read: () => true on the collection exposes authorEmail in the public API. Add field-level access: { name : ' authorEmail ' , type : ' email ' , access : { read : ({ req }) => req . user ?.