Merge remote-tracking branch 'origin/main' into stevenh/synced-blocks…

…-new-api

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',
@@ -77,17 +75,6 @@ const testCases: TestsCase[] = [
             },
         ],
     },
-    {
-        name: 'Snyk',
-        baseUrl: 'https://docs.snyk.io',
-        tests: [
-            {
-                name: 'Home',
-                url: '',
-                run: waitForCookiesDialog,
-            },
-        ],
-    },
     {
         name: 'Versioning',
         baseUrl: 'https://gitbook.gitbook.io/test-1-1/',
@@ -127,6 +114,7 @@ const testCases: TestsCase[] = [
                 name: 'Images',
                 url: 'blocks/block-images',
                 run: waitForCookiesDialog,
+                fullPage: true,
             },
             {
                 name: 'Inline Images',
@@ -152,6 +140,7 @@ const testCases: TestsCase[] = [
                 name: 'Tables',
                 url: 'blocks/tables',
                 run: waitForCookiesDialog,
+                fullPage: true,
             },
             {
                 name: 'Expandables',
@@ -197,6 +186,18 @@ const testCases: TestsCase[] = [
                 name: 'Math',
                 url: 'blocks/math',
             },
+            {
+                name: 'Embeds',
+                url: 'blocks/embeds',
+            },
+            {
+                name: 'Annotations',
+                url: 'blocks/annotations',
+                run: async (page) => {
+                    await page.waitForSelector('[data-testid="annotation-button"]');
+                    await page.click('[data-testid="annotation-button"]');
+                },
+            },
         ],
     },
     {
@@ -482,7 +483,7 @@ for (const testCase of testCases) {
                             display: none !important;
                         }
                     `,
-                        fullPage: testEntry.fullPage,
+                        fullPage: testEntry.fullPage ?? false,
                     });
                 }
             });

package.json

@@ -47,7 +47,6 @@
         "react": "^18",
         "react-dom": "^18",
         "react-hotkeys-hook": "^4.4.1",
-        "react-medium-image-zoom": "^5.1.10",
         "recoil": "^0.7.7",
         "rehype-sanitize": "^6.0.0",
         "rehype-stringify": "^10.0.0",

packages/react-openapi/src/OpenAPISchema.tsx

@@ -261,7 +261,9 @@ function getSchemaProperties(schema: OpenAPIV3.SchemaObject): null | OpenAPISche
 
                 result.push({
                     propertyName,
-                    required: schema.required?.includes(propertyName),
+                    required: Array.isArray(schema.required)
+                        ? schema.required.includes(propertyName)
+                        : undefined,
                     schema: propertySchema,
                 });
             });

src/components/DocumentView/Annotation/AnnotationPopover.tsx

@@ -14,6 +14,7 @@ export function AnnotationPopover(props: { children: React.ReactNode; body: Reac
         <Popover.Root>
             <Popover.Trigger asChild>
                 <button
+                    data-testid="annotation-button"
                     aria-label={tString(language, 'annotation_button_label')}
                     className={tcls(
                         'decoration-dotted',
@@ -44,6 +45,7 @@ export function AnnotationPopover(props: { children: React.ReactNode; body: Reac
                         '-outline-offset-2',
                         'outline-2',
                         'outline-primary/8',
+                        'z-20',
                     )}
                     sideOffset={5}
                 >

src/components/DocumentView/BlockSyncedBlock.tsx

@@ -1,6 +1,7 @@
 import { DocumentBlockSyncedBlock } from '@gitbook/api';
 
 import { getSyncedBlockContent } from '@/lib/api';
+import { resolveContentRefWithFiles } from '@/lib/references';
 
 import { BlockProps } from './Block';
 import { Blocks } from './Blocks';
@@ -18,22 +19,34 @@ export async function BlockSyncedBlock(props: BlockProps<DocumentBlockSyncedBloc
         return null;
     }
 
-    const result = await getSyncedBlockContent(
+    const syncedBlock = await getSyncedBlockContent(
         apiToken,
         context.contentRefContext.space.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/Caption.tsx

@@ -19,6 +19,7 @@ export function Caption(
         children: React.ReactNode;
         document: JSONDocument;
         style?: ClassValue;
+        fit?: boolean;
         wrapperStyle?: ClassValue;
         block: DocumentBlockImage | DocumentBlockDrawing | DocumentBlockEmbed;
     } & DocumentContextProps,
@@ -28,6 +29,7 @@ export function Caption(
         document,
         block,
         context,
+        fit = false,
         wrapperStyle = [
             'relative',
             'overflow-hidden',
@@ -43,6 +45,7 @@ export function Caption(
             'dark:after:border-light/1',
             'dark:after:mix-blend-plus-lighter',
             'after:pointer-events-none',
+            fit ? 'w-fit' : null,
         ],
         style,
     } = props;
@@ -60,7 +63,7 @@ export function Caption(
 
     return (
         <picture className={tcls('relative', style)}>
-            <div className={tcls(wrapperStyle)}>{children}</div>
+            <div className={tcls(wrapperStyle, 'mx-auto')}>{children}</div>
             <figcaption
                 className={tcls(
                     'text-sm',

src/components/DocumentView/CodeBlock/PlainCodeBlock.tsx

@@ -1,4 +1,5 @@
 import { DocumentBlockCode, JSONDocument } from '@gitbook/api';
+import { useId } from 'react';
 
 import { CodeBlock } from './CodeBlock';
 
@@ -8,8 +9,10 @@ import { CodeBlock } from './CodeBlock';
  */
 export function PlainCodeBlock(props: { code: string; syntax: string }) {
     const { code, syntax } = props;
+    const id = useId();
 
     const block: DocumentBlockCode = {
+        key: id,
         object: 'block',
         type: 'code',
         data: {

src/components/DocumentView/CodeBlock/highlight.test.ts

@@ -35,6 +35,33 @@ it('should parse plain code', async () => {
     ]);
 });
 
+it('should parse different code in parallel', async () => {
+    await Promise.all(
+        ['shell', 'scss', 'markdown', 'less', 'scss', 'css', 'scss', 'yaml'].map(async (syntax) =>
+            highlight({
+                object: 'block',
+                type: 'code',
+                data: {
+                    syntax: syntax,
+                },
+                nodes: [
+                    {
+                        object: 'block',
+                        type: 'code-line',
+                        data: {},
+                        nodes: [
+                            {
+                                object: 'text',
+                                leaves: [{ object: 'leaf', marks: [], text: 'Hello world' }],
+                            },
+                        ],
+                    },
+                ],
+            }),
+        ),
+    );
+});
+
 it('should parse a multilines plain code', async () => {
     const tokens = await highlight({
         object: 'block',
@@ -561,45 +588,30 @@ it('should support multiple code tokens in an annotation', async () => {
                     type: 'shiki',
                     token: {
                         content: 'const',
-                        color: '#000007',
-                        start: 0,
-                        end: 5,
                     },
                 },
                 {
                     type: 'shiki',
                     token: {
                         content: ' ',
-                        color: '#000001',
-                        start: 5,
-                        end: 6,
                     },
                 },
                 {
                     type: 'shiki',
                     token: {
                         content: 'a',
-                        color: '#000004',
-                        start: 6,
-                        end: 7,
                     },
                 },
                 {
                     type: 'shiki',
                     token: {
                         content: ' ',
-                        color: '#000001',
-                        start: 7,
-                        end: 8,
                     },
                 },
                 {
                     type: 'shiki',
                     token: {
                         content: '=',
-                        color: '#000007',
-                        start: 8,
-                        end: 9,
                     },
                 },
                 {
@@ -613,27 +625,18 @@ it('should support multiple code tokens in an annotation', async () => {
                             type: 'shiki',
                             token: {
                                 content: 'hello',
-                                color: '#000004',
-                                start: 9,
-                                end: 14,
                             },
                         },
                         {
                             type: 'shiki',
                             token: {
                                 content: '.world',
-                                color: '#000009',
-                                start: 14,
-                                end: 20,
                             },
                         },
                         {
                             type: 'shiki',
                             token: {
                                 content: '(',
-                                color: '#000001',
-                                start: 20,
-                                end: 21,
                             },
                         },
                     ],
@@ -642,9 +645,6 @@ it('should support multiple code tokens in an annotation', async () => {
                     type: 'shiki',
                     token: {
                         content: ');',
-                        color: '#000001',
-                        start: 21,
-                        end: 23,
                     },
                 },
             ],

src/components/DocumentView/CodeBlock/highlight.ts

@@ -9,7 +9,7 @@ import {
 // @ts-ignore - onigWasm is a Wasm module
 import onigWasm from 'shiki/onig.wasm?module';
 
-import { singleton, singletonMap } from '@/lib/async';
+import { asyncMutexFunction, singleton } from '@/lib/async';
 import { getNodeText } from '@/lib/document';
 import { trace } from '@/lib/tracing';
 
@@ -314,10 +314,13 @@ const loadHighlighter = singleton(async () => {
     });
 });
 
-const loadHighlighterLanguage = singletonMap(async (lang: keyof typeof bundledLanguages) => {
-    const highlighter = await loadHighlighter();
-    await trace(
-        `highlighting.loadLanguage(${lang})`,
-        async () => await highlighter.loadLanguage(lang),
-    );
-});
+const loadLanguagesMutex = asyncMutexFunction();
+async function loadHighlighterLanguage(lang: keyof typeof bundledLanguages) {
+    await loadLanguagesMutex.runBlocking(async () => {
+        const highlighter = await loadHighlighter();
+        await trace(
+            `highlighting.loadLanguage(${lang})`,
+            async () => await highlighter.loadLanguage(lang),
+        );
+    });
+}

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"