Support images & files in synced blocks

package.json

@@ -20,7 +20,7 @@
     ],
     "dependencies": {
         "@geist-ui/icons": "^1.0.2",
-        "@gitbook/api": "^0.36.0",
+        "@gitbook/api": "^0.38.0",
         "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-popover": "^1.0.7",
         "@sentry/nextjs": "^7.94.1",

src/components/DocumentView/BlockSyncedBlock.tsx

@@ -1,6 +1,7 @@
 import { DocumentBlockSyncedBlock } from '@gitbook/api';
 
 import { getSyncedBlock } from '@/lib/api';
+import { resolveContentRefWithFiles } from '@/lib/references';
 
 import { BlockProps } from './Block';
 import { Blocks } from './Blocks';
@@ -13,22 +14,34 @@ export async function BlockSyncedBlock(props: BlockProps<DocumentBlockSyncedBloc
         return null;
     }
 
-    const result = await getSyncedBlock(
+    const syncedBlock = await getSyncedBlock(
         apiToken,
         block.data.ref.organization,
         block.data.ref.syncedBlock,
     );
 
-    if (!result) {
+    if (!syncedBlock) {
         return null;
     }
 
     return (
         <Blocks
-            nodes={result.document.nodes}
-            document={result.document}
+            nodes={syncedBlock.document.nodes}
+            document={syncedBlock.document}
             ancestorBlocks={[...ancestorBlocks, block]}
-            context={context}
+            context={{
+                ...context,
+                resolveContentRef: async (ref, options) => {
+                    if (!syncedBlock?.files) {
+                        return context.resolveContentRef(ref, options);
+                    }
+                    const result = resolveContentRefWithFiles(syncedBlock.files, ref);
+                    if (result !== undefined) {
+                        return result;
+                    }
+                    return context.resolveContentRef(ref, options);
+                },
+            }}
             style={style}
         />
     );

src/components/DocumentView/Drawing.tsx

@@ -19,7 +19,7 @@ export async function Drawing(props: BlockProps<DocumentBlockDrawing>) {
                 sources={{
                     light: {
                         src: resolved.href,
-                        size: resolved.fileDimensions,
+                        size: resolved.file?.dimensions,
                     },
                 }}
                 alt="Drawing"

src/components/DocumentView/File.tsx

@@ -4,21 +4,16 @@ import IconImage from '@geist-ui/icons/image';
 import IconPaperClip from '@geist-ui/icons/paperclip';
 import { DocumentBlockFile } from '@gitbook/api';
 
-import { getRevisionFile } from '@/lib/api';
 import { tcls } from '@/lib/tailwind';
 
 import { BlockProps } from './Block';
 
 export async function File(props: BlockProps<DocumentBlockFile>) {
     const { block, context, style } = props;
 
-    const file = context.content
-        ? await getRevisionFile(
-              context.content.spaceId,
-              context.content.revisionId,
-              block.data.ref.file,
-          )
-        : null;
+    const contentRef = await context.resolveContentRef(block.data.ref);
+    const file = contentRef?.file;
+
     if (!file) {
         return null;
     }

src/components/DocumentView/Images.tsx

@@ -89,12 +89,12 @@ async function ImageBlock(props: {
                 sources={{
                     light: {
                         src: src.href,
-                        size: src.fileDimensions,
+                        size: src.file?.dimensions,
                     },
                     dark: darkSrc
                         ? {
                               src: darkSrc.href,
-                              size: darkSrc.fileDimensions,
+                              size: darkSrc.file?.dimensions,
                           }
                         : null,
                 }}

src/components/DocumentView/InlineImage.tsx

@@ -32,12 +32,12 @@ export async function InlineImage(props: InlineProps<DocumentInlineImage>) {
                 sources={{
                     light: {
                         src: src.href,
-                        size: src.fileDimensions,
+                        size: src.file?.dimensions,
                     },
                     dark: darkSrc
                         ? {
                               src: darkSrc.href,
-                              size: darkSrc.fileDimensions,
+                              size: darkSrc.file?.dimensions,
                           }
                         : null,
                 }}
@@ -55,7 +55,7 @@ async function getImageSizes(size: 'original' | 'line', src: ResolvedContentRef)
     switch (size) {
         case 'line': {
             const imageSize =
-                src.fileDimensions ??
+                src.file?.dimensions ??
                 (await getImageSize(src.href, {
                     dpr: 3,
                 }));

src/components/DocumentView/Table/RecordCard.tsx

@@ -52,7 +52,7 @@ export async function RecordCard(
                     sources={{
                         light: {
                             src: cover.href,
-                            size: cover.fileDimensions,
+                            size: cover.file?.dimensions,
                         },
                     }}
                     sizes={[

src/components/PageBody/PageCover.tsx

@@ -5,7 +5,6 @@ import { ContentRefContext, resolveContentRef } from '@/lib/references';
 import { tcls } from '@/lib/tailwind';
 
 import defaultPageCover from './default-page-cover.svg';
-import { PAGE_COVER_HEIGHT } from '../layout';
 
 const PAGE_COVER_SIZE: ImageSize = { width: 1990, height: 480 };
 
@@ -43,7 +42,7 @@ export async function PageCover(props: {
                     light: resolved
                         ? {
                               src: resolved.href,
-                              size: resolved.fileDimensions,
+                              size: resolved.file?.dimensions,
                           }
                         : {
                               src: defaultPageCover.src,

src/lib/references.ts

@@ -1,4 +1,4 @@
-import { ContentRef, Revision, RevisionPageDocument, Space } from '@gitbook/api';
+import { ContentRef, Revision, RevisionFile, RevisionPageDocument, Space } from '@gitbook/api';
 import assertNever from 'assert-never';
 
 import {
@@ -24,8 +24,8 @@ export interface ResolvedContentRef {
     href: string;
     /** True if the content ref is active */
     active: boolean;
-    /** Image size, if the reference is a image file */
-    fileDimensions?: { width: number; height: number };
+    /** File, if the reference is a file */
+    file?: RevisionFile;
 }
 
 export interface ContentRefContext extends PageHrefContext {
@@ -90,7 +90,7 @@ export async function resolveContentRef(
                     href: file.downloadURL,
                     text: file.name,
                     active: false,
-                    fileDimensions: file.dimensions,
+                    file,
                 };
             } else {
                 return null;
@@ -251,3 +251,22 @@ async function resolveContentRefInSpace(spaceId: string, contentRef: ContentRef)
         baseUrl,
     });
 }
+
+export function resolveContentRefWithFiles(
+    files: RevisionFile[],
+    contentRef: ContentRef,
+): ResolvedContentRef | null | undefined {
+    if (contentRef.kind === 'file') {
+        const file = files.find((file) => file.id === contentRef.file);
+        if (file) {
+            return {
+                href: file.downloadURL,
+                text: file.name,
+                active: false,
+                file,
+            };
+        }
+        return null;
+    }
+    return undefined;
+}