Merge branch 'main' into fix-small-image-border

README.md

@@ -1,7 +1,3 @@
-<!-- <p align="center">
-  <img alt="GitBook Open Header" src="./assets/gitbook-open-header.png">
-</p> -->
-
 <h1 align="center">GitBook</h1>
 
 <p align="center">
@@ -28,8 +24,10 @@
 
 -   [Getting Started](#getting-started)
 -   [Contributing](#contributing)
--   [Types of contributions](#types-of-contributions)
+    -   [Types of contributions](#types-of-contributions)
 -   [Licensing](#license)
+-   [Acknowledgements](#acknowledgements)
+-   [Legacy GitBook](#legacy-gitbook-deprecated)
 
 ## Getting Started
 
@@ -120,3 +118,7 @@ GitBook wouldn't be possible without these projects:
 -   [Bun](https://bun.sh/)
 -   [Tailwind CSS](https://tailwindcss.com/)
 -   [Framer Motion](https://www.npmjs.com/package/framer-motion)
+
+## Legacy GitBook (Deprecated)
+
+Our previous version of GitBook and it's CLI tool are now deprecated. You can still view the old repository and it's commits on this [branch](https://github.com/GitbookIO/gitbook/tree/legacy).

e2e/pages.spec.ts

@@ -52,15 +52,13 @@ const testCases: TestsCase[] = [
             {
                 name: 'Search',
                 url: '?q=',
-                fullPage: false,
             },
             {
                 name: 'Search Results',
                 url: '?q=gitbook',
                 run: async (page) => {
                     await page.waitForSelector('[data-test="search-results"]');
                 },
-                fullPage: false,
             },
             {
                 name: 'AI Search',
@@ -482,7 +480,7 @@ for (const testCase of testCases) {
                             display: none !important;
                         }
                     `,
-                        fullPage: testEntry.fullPage,
+                        fullPage: testEntry.fullPage ?? false,
                     });
                 }
             });

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/components/utils/Image.tsx

@@ -280,6 +280,7 @@ async function ImagePicture(
         style,
         loading,
         fetchPriority,
+        crossOrigin: 'anonymous',
         ...rest,
         ...attrs,
     };

src/components/utils/ZoomImage.tsx

@@ -125,7 +125,12 @@ export function ZoomImage(
                     ) : null}
 
                     {ReactDOM.createPortal(
-                        <ZoomImageModal src={src} alt={alt ?? ''} onClose={onClose} />,
+                        <ZoomImageModal
+                            src={src}
+                            crossOrigin={props.crossOrigin}
+                            alt={alt ?? ''}
+                            onClose={onClose}
+                        />,
                         document.body,
                     )}
                 </>
@@ -166,8 +171,13 @@ export function ZoomImage(
     );
 }
 
-function ZoomImageModal(props: { src: string; alt: string; onClose: () => void }) {
-    const { src, alt, onClose } = props;
+function ZoomImageModal(props: {
+    src: string;
+    alt: string;
+    crossOrigin: React.ComponentPropsWithoutRef<'img'>['crossOrigin'];
+    onClose: () => void;
+}) {
+    const { src, alt, crossOrigin, onClose } = props;
 
     const buttonRef = React.useRef<HTMLButtonElement>(null);
 
@@ -210,6 +220,7 @@ function ZoomImageModal(props: { src: string; alt: string; onClose: () => void }
             <img
                 src={src}
                 alt={alt}
+                crossOrigin={crossOrigin}
                 className={tcls(
                     'max-w-full',
                     'max-h-full',

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;
+}