From 555b00e4d25c62510fc7f150086db011030e142a Mon Sep 17 00:00:00 2001 From: Scott Hillson Date: Sat, 9 May 2026 09:47:56 -0700 Subject: [PATCH 1/6] Add layout option to Document block; open Documents MIME types Adds a `layout` select field (Download Link / Embed) to the Document block so editors can choose how a file is presented. Replaces the hardcoded MIME type allowlist with a hook that rejects only images and videos, directing those to the Media collection instead. Co-Authored-By: Claude Sonnet 4.6 --- src/blocks/Document/Component.tsx | 26 +- src/blocks/Document/config.ts | 9 + .../hooks/validateNotImageOrVideo.ts | 23 + src/collections/Documents/index.ts | 12 +- src/migrations/20260502_155913.json | 23305 ++++++++++++++++ src/migrations/20260502_155913.ts | 23 + src/migrations/index.ts | 12 + src/payload-types.ts | 2 + src/scripts/check-migrations.ts | 3 +- 9 files changed, 23402 insertions(+), 13 deletions(-) create mode 100644 src/collections/Documents/hooks/validateNotImageOrVideo.ts create mode 100644 src/migrations/20260502_155913.json create mode 100644 src/migrations/20260502_155913.ts diff --git a/src/blocks/Document/Component.tsx b/src/blocks/Document/Component.tsx index 219161e50..5f934e842 100644 --- a/src/blocks/Document/Component.tsx +++ b/src/blocks/Document/Component.tsx @@ -5,13 +5,16 @@ import { getMediaURL } from '@/utilities/getURL' import { isValidRelationship } from '@/utilities/relationships' import { getHostnameFromTenant } from '@/utilities/tenancy/getHostnameFromTenant' import { cn } from '@/utilities/ui' +import { FileDown } from 'lucide-react' type Props = DocumentBlockProps & { isLayoutBlock: boolean + // layout is present in the block config but absent from generated types until pnpm generate:types is run + layout?: 'download' | 'embed' | null } export const DocumentBlockComponent = (props: Props) => { - const { document, isLayoutBlock = true } = props + const { document, layout, isLayoutBlock = true } = props const { tenant } = useTenant() if (!isValidRelationship(document) || !document.url) { @@ -19,10 +22,29 @@ export const DocumentBlockComponent = (props: Props) => { } const src = getMediaURL(document.url, null, getHostnameFromTenant(tenant)) + const filename = document.filename ?? 'Download' + + // Treat missing layout as 'embed' so existing blocks keep their current behavior + const resolvedLayout = layout ?? 'embed' + + if (resolvedLayout === 'download') { + return ( +
+ + + {filename} + +
+ ) + } return (
-