Show captions for file blocks (#2506)

GitbookIO · Sep 30, 2024 · 15d2ee3 · 15d2ee3
1 parent b066db4
commit 15d2ee3
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 62 deletions.
diff --git a/.changeset/nine-maps-judge.md b/.changeset/nine-maps-judge.md
@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Show the caption for file blocks
diff --git a/packages/gitbook/e2e/pages.spec.ts b/packages/gitbook/e2e/pages.spec.ts
@@ -371,6 +371,11 @@ const testCases: TestsCase[] = [
                 name: 'Math',
                 url: 'blocks/math',
             },
+            {
+                name: 'Files',
+                url: 'blocks/files',
+                fullPage: true,
+            },
             {
                 name: 'Embeds',
                 url: 'blocks/embeds',

diff --git a/packages/gitbook/src/components/DocumentView/Caption.tsx b/packages/gitbook/src/components/DocumentView/Caption.tsx
@@ -1,6 +1,7 @@
 import {
     DocumentBlockDrawing,
     DocumentBlockEmbed,
+    DocumentBlockFile,
     DocumentBlockImage,
     JSONDocument,
 } from '@gitbook/api';
@@ -21,7 +22,7 @@ export function Caption(
         style?: ClassValue;
         fit?: boolean;
         wrapperStyle?: ClassValue;
-        block: DocumentBlockImage | DocumentBlockDrawing | DocumentBlockEmbed;
+        block: DocumentBlockImage | DocumentBlockDrawing | DocumentBlockEmbed | DocumentBlockFile;
     } & DocumentContextProps,
 ) {
     const {

diff --git a/packages/gitbook/src/components/DocumentView/File.tsx b/packages/gitbook/src/components/DocumentView/File.tsx
@@ -4,10 +4,11 @@ import { getSimplifiedContentType } from '@/lib/files';
 import { tcls } from '@/lib/tailwind';
 
 import { BlockProps } from './Block';
+import { Caption } from './Caption';
 import { FileIcon } from './FileIcon';
 
 export async function File(props: BlockProps<DocumentBlockFile>) {
-    const { block, context, style } = props;
+    const { block, context } = props;
 
     const contentRef = await context.resolveContentRef(block.data.ref);
     const file = contentRef?.file;
@@ -19,76 +20,65 @@ export async function File(props: BlockProps<DocumentBlockFile>) {
     const contentType = getSimplifiedContentType(file.contentType);
 
     return (
-        <a
-            href={file.downloadURL}
-            download={file.name}
-            className={tcls(
-                'group/file',
-                'flex',
-                'flex-row',
-                'items-center',
-                'border',
-                'border-b-0',
-                'px-5',
-                'py-3',
-                'border-dark/3',
-
-                //all
-                '[&]:mt-[0px]',
-                //select first child
-                '[&:first-child]:mt-5',
-                '[&:first-child]:rounded-t-lg',
-                //select first in group
-                '[:not(&)_+&]:mt-5',
-                '[:not(&)_+&]:rounded-t-lg',
-                //select last in group
-                '[&:not(:has(+_&))]:mb-5',
-                '[&:not(:has(+_&))]:rounded-b-lg',
-                '[&:not(:has(+_&))]:border-b',
-
-                'hover:text-primary-600',
-                'dark:border-light/3',
-                'dark:hover:text-primary-300',
-                style,
-            )}
-        >
-            <div
+        <Caption {...props} wrapperStyle={[]}>
+            <a
+                href={file.downloadURL}
+                download={file.name}
                 className={tcls(
-                    'min-w-14',
-                    'mr-5',
-                    'pr-5',
+                    'group/file',
                     'flex',
-                    'flex-col',
+                    'flex-row',
                     'items-center',
-                    'gap-1',
-                    'border-r',
-                    'border-dark/2',
-                    'dark:border-light/2',
+                    'border',
+                    'px-5',
+                    'py-3',
+                    'border-dark/3',
+                    'rounded-lg',
+                    'hover:text-primary-600',
+                    'dark:border-light/3',
+                    'dark:hover:text-primary-300',
                 )}
             >
-                <div>
-                    <FileIcon
-                        contentType={contentType}
-                        className={tcls('size-5', 'text-primary')}
-                    />
-                </div>
                 <div
                     className={tcls(
-                        'text-xs',
-                        'text-dark-4/8',
-                        'group-hover/file:text-dark',
-                        'dark:text-light-4/7',
-                        'dark:group-hover/file:text-light',
+                        'min-w-14',
+                        'mr-5',
+                        'pr-5',
+                        'flex',
+                        'flex-col',
+                        'items-center',
+                        'gap-1',
+                        'border-r',
+                        'border-dark/2',
+                        'dark:border-light/2',
                     )}
                 >
-                    {getHumanFileSize(file.size)}
+                    <div>
+                        <FileIcon
+                            contentType={contentType}
+                            className={tcls('size-5', 'text-primary')}
+                        />
+                    </div>
+                    <div
+                        className={tcls(
+                            'text-xs',
+                            'text-dark-4/8',
+                            'group-hover/file:text-dark',
+                            'dark:text-light-4/7',
+                            'dark:group-hover/file:text-light',
+                        )}
+                    >
+                        {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>
                 </div>
-            </div>
-            <div>
-                <div className={tcls('text-base')}>{file.name}</div>
-                <div className={tcls('text-sm', 'opacity-9', 'dark:opacity-8')}>{contentType}</div>
-            </div>
-        </a>
+            </a>
+        </Caption>
     );
 }