diff --git a/src/blocks/Document/Component.tsx b/src/blocks/Document/Component.tsx index 219161e5..c6214dae 100644 --- a/src/blocks/Document/Component.tsx +++ b/src/blocks/Document/Component.tsx @@ -5,13 +5,26 @@ 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' + +// MIME types that browsers can reliably render in an iframe +const EMBEDDABLE_MIME_TYPES = new Set([ + 'application/pdf', + 'text/html', + 'text/plain', + 'text/xml', + 'application/xml', + 'application/vnd.google-earth.kml+xml', +]) type Props = DocumentBlockProps & { isLayoutBlock: boolean + // displayAs is present in the block config but absent from generated types until pnpm generate:types is run + displayAs?: 'download' | 'embed' | null } export const DocumentBlockComponent = (props: Props) => { - const { document, isLayoutBlock = true } = props + const { document, displayAs, isLayoutBlock = true } = props const { tenant } = useTenant() if (!isValidRelationship(document) || !document.url) { @@ -19,10 +32,31 @@ export const DocumentBlockComponent = (props: Props) => { } const src = getMediaURL(document.url, null, getHostnameFromTenant(tenant)) + const filename = document.filename ?? 'Download' + + const isEmbeddable = document.mimeType != null && EMBEDDABLE_MIME_TYPES.has(document.mimeType) + const resolvedDisplay = displayAs === 'embed' && isEmbeddable ? 'embed' : 'download' + + if (resolvedDisplay === 'embed') { + return ( +
+