Oct 15, 2025 · Oct 15, 2025 · Oct 15, 2025 · Oct 15, 2025
diff --git a/packages/gitbook/src/components/DocumentView/File.tsx b/packages/gitbook/src/components/DocumentView/File.tsx
diff --git a/packages/gitbook/src/components/DocumentView/FileIcon.tsx b/packages/gitbook/src/components/DocumentView/FileIcon.tsx
diff --git a/packages/gitbook/src/components/primitives/DownloadButton.tsx b/packages/gitbook/src/components/primitives/DownloadButton.tsx
diff --git a/packages/gitbook/src/intl/translations/de.ts b/packages/gitbook/src/intl/translations/de.ts
diff --git a/packages/gitbook/src/intl/translations/en.ts b/packages/gitbook/src/intl/translations/en.ts
diff --git a/packages/gitbook/src/intl/translations/es.ts b/packages/gitbook/src/intl/translations/es.ts
diff --git a/packages/gitbook/src/intl/translations/fr.ts b/packages/gitbook/src/intl/translations/fr.ts
diff --git a/packages/gitbook/src/intl/translations/it.ts b/packages/gitbook/src/intl/translations/it.ts
diff --git a/packages/gitbook/src/intl/translations/ja.ts b/packages/gitbook/src/intl/translations/ja.ts
diff --git a/packages/gitbook/src/intl/translations/nl.ts b/packages/gitbook/src/intl/translations/nl.ts
diff --git a/packages/gitbook/src/intl/translations/no.ts b/packages/gitbook/src/intl/translations/no.ts
diff --git a/packages/gitbook/src/intl/translations/pt-br.ts b/packages/gitbook/src/intl/translations/pt-br.ts
diff --git a/packages/gitbook/src/intl/translations/ru.ts b/packages/gitbook/src/intl/translations/ru.ts
diff --git a/packages/gitbook/src/intl/translations/zh.ts b/packages/gitbook/src/intl/translations/zh.ts
diff --git a/packages/gitbook/src/lib/files.ts b/packages/gitbook/src/lib/files.ts
Original file line number	Diff line number	Diff line change
		@@ -1,78 +1,83 @@
		import { type DocumentBlockFile, SiteInsightsLinkPosition } from '@gitbook/api';

	import { t } from '@/intl/translate';
		import { getSimplifiedContentType } from '@/lib/files';
		import { resolveContentRef } from '@/lib/references';
	import { tcls } from '@/lib/tailwind';

	import { Link } from '../primitives';
	import { getSpaceLanguage } from '@/intl/server';
	import { Button, Link } from '../primitives';
	import { DownloadButton } from '../primitives/DownloadButton';
		import type { BlockProps } from './Block';
		import { Caption } from './Caption';
		import { FileIcon } from './FileIcon';

		export async function File(props: BlockProps<DocumentBlockFile>) {
		const { block, context } = props;

	const contentRef = context.contentContext
	? await resolveContentRef(block.data.ref, context.contentContext)
	: null;
	if (!context.contentContext) {
	return null;
	}

	const contentRef = await resolveContentRef(block.data.ref, context.contentContext);
		const file = contentRef?.file;

		if (!file) {
		return null;
		}

	const language = getSpaceLanguage(context.contentContext);
		const contentType = getSimplifiedContentType(file.contentType);
	const insights = {
	type: 'link_click' as const,
	link: {
	target: block.data.ref,
	position: SiteInsightsLinkPosition.Content,
	},
	};

		return (
		<Caption {...props} withBorder>
	<Link
	href={file.downloadURL}
	download={file.name}
	insights={{
	type: 'link_click',
	link: {
	target: block.data.ref,
	position: SiteInsightsLinkPosition.Content,
	},
	}}
	className={tcls('group/file', 'flex', 'flex-row', 'items-center', 'px-5', 'py-3')}
	>
	<div
	className={tcls(
	'min-w-14',
	'mr-5',
	'pr-5',
	'flex',
	'flex-col',
	'items-center',
	'gap-1',
	'border-r',
	'border-tint-subtle'
	)}
	>
	<div>
	<FileIcon
	contentType={contentType}
	className={tcls('size-5', 'text-primary')}
	/>
	</div>
	<div
	className={tcls(
	'text-xs',
	'text-tint',
	'group-hover/file:text-tint-strong'
	)}
	>
	{getHumanFileSize(file.size)}
	</div>
	<div className="flex flex-wrap items-center gap-5 px-5 py-3">
	<div className="flex min-w-14 flex-col items-center gap-1 border-tint-subtle border-r pr-5">
	<FileIcon contentType={contentType} className="size-5 text-primary" />
	<div className="text-hint text-xs">{getHumanFileSize(file.size)}</div>
		</div>
	<div>
	<div className={tcls('text-base')}>{file.name}</div>
	<div className={tcls('text-sm', 'opacity-9', 'dark:opacity-8')}>
	{contentType}
	<div className="min-w-24 flex-1 overflow-hidden">
	<div className="truncate text-base">
	<Link
	href={file.downloadURL}
	target="_blank"
	insights={insights}
	className="hover:underline"
	>
	{file.name}
	</Link>
		</div>
	<div className="truncate text-sm opacity-9 dark:opacity-8">{contentType}</div>
	</div>
	<div className="flex shrink-0 flex-wrap gap-2">
	<DownloadButton
	icon="download"
	size="xsmall"
	variant="secondary"
	downloadUrl={file.downloadURL}
	filename={file.name}
	insights={insights}
	>
	{t(language, 'download')}
	</DownloadButton>
	<Button
	icon="arrow-up-right-from-square"
	size="xsmall"
	variant="secondary"
	href={file.downloadURL}
	target="_blank"
	insights={insights}
	>
	{t(language, 'open')}
	</Button>
		</div>
	</Link>
	</div>
		</Caption>
		);
		}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,7 +9,7 @@ export function FileIcon(props: { contentType: SimplifiedFileType \| null; classN
		const { contentType, className } = props;

		switch (contentType) {
	case 'pdf':
	case 'PDF':
		return <Icon icon="file-pdf" className={className} />;
		case 'image':
		return <Icon icon="file-image" className={className} />;
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,39 @@
	'use client';
	import { Button, type ButtonProps } from './Button';

	/**
	* Button that triggers a file download when clicked.
	*/
	export function DownloadButton(
	props: Omit<ButtonProps, 'onClick' \| 'href'> & { downloadUrl: string; filename: string }
	) {
	const { downloadUrl, filename, ...buttonProps } = props;

	return (
	<Button
	{...buttonProps}
	onClick={(e) => {
	e.preventDefault();
	void forceDownload(downloadUrl, filename);
	}}
	/>
	);
	}

	/**
	* Force download a file from a given URL with a specified filename.
	*/
	async function forceDownload(url: string, filename: string) {
	const response = await fetch(url);
	const blob = await response.blob();
	const objectUrl = URL.createObjectURL(blob);

	const link = document.createElement('a');
	link.href = objectUrl;
	link.download = filename;
	document.body.appendChild(link);
	link.click();
	document.body.removeChild(link);

	URL.revokeObjectURL(objectUrl);
	}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -130,4 +130,6 @@ export const de = {
		hint_warning: 'Warnung',
		hint_danger: 'Gefahr',
		hint_success: 'Erfolg',
	download: 'Herunterladen',
	open: 'Öffnen',
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -127,4 +127,6 @@ export const en = {
		hint_warning: 'Warning',
		hint_danger: 'Danger',
		hint_success: 'Success',
	download: 'Download',
	open: 'Open',
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -131,4 +131,6 @@ export const es: TranslationLanguage = {
		hint_warning: 'Advertencia',
		hint_danger: 'Peligro',
		hint_success: 'Éxito',
	download: 'Descargar',
	open: 'Abrir',
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -126,4 +126,6 @@ export const fr = {
		hint_warning: 'Avertissement',
		hint_danger: 'Danger',
		hint_success: 'Succès',
	download: 'Télécharger',
	open: 'Ouvrir',
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -130,4 +130,6 @@ export const it: TranslationLanguage = {
		hint_warning: 'Avviso',
		hint_danger: 'Pericolo',
		hint_success: 'Successo',
	download: 'Scarica',
	open: 'Apri',
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -129,4 +129,6 @@ export const ja: TranslationLanguage = {
		hint_warning: '警告',
		hint_danger: '危険',
		hint_success: '成功',
	download: 'ダウンロード',
	open: '開く',
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -129,4 +129,6 @@ export const nl: TranslationLanguage = {
		hint_warning: 'Waarschuwing',
		hint_danger: 'Gevaar',
		hint_success: 'Succes',
	download: 'Downloaden',
	open: 'Openen',
		};