Add support for reusable content

Author: emmerich

packages/gitbook/src/components/DocumentView/Block.tsx

@@ -32,6 +32,7 @@ import { BlockMath } from './Math';
 import { OpenAPI } from './OpenAPI';
 import { Paragraph } from './Paragraph';
 import { Quote } from './Quote';
+import { ReusableContent } from './ReusableContent';
 import { Stepper } from './Stepper';
 import { StepperStep } from './StepperStep';
 import { Table } from './Table';
@@ -91,7 +92,7 @@ export function Block<T extends DocumentBlock>(props: BlockProps<T>) {
             case 'math':
                 return <BlockMath {...props} {...contextProps} block={block} />;
             case 'file':
-                return <File {...props} {...contextProps} block={block} />;
+                return <File {...props} {...contextProps} block={block} />
             case 'divider':
                 return <Divider {...props} {...contextProps} block={block} />;
             case 'drawing':
@@ -107,7 +108,7 @@ export function Block<T extends DocumentBlock>(props: BlockProps<T>) {
             case 'synced-block':
                 return <BlockSyncedBlock {...props} {...contextProps} block={block} />;
             case 'reusable-content':
-                return null;
+                return <ReusableContent {...props} {...contextProps} block={block} />;
             case 'stepper':
                 return <Stepper {...props} {...contextProps} block={block} />;
             case 'stepper-step':

packages/gitbook/src/components/DocumentView/ReusableContent.tsx

@@ -0,0 +1,33 @@
+import { DocumentBlockReusableContent } from '@gitbook/api';
+
+import { getReusableContentDocument } from '@/lib/api';
+
+import { BlockProps } from './Block';
+import { UnwrappedBlocks } from './Blocks';
+
+export async function ReusableContent(props: BlockProps<DocumentBlockReusableContent>) {
+    const { block, context, ancestorBlocks } = props;
+
+    if (!context.content) {
+        return null;
+    }
+
+    const document = await getReusableContentDocument(
+        context.content.spaceId,
+        context.content.revisionId,
+        block.data.ref.reusableContent,
+    );
+
+    if (!document) {
+        return null;
+    }
+
+    return (
+        <UnwrappedBlocks
+            nodes={document.nodes}
+            document={document}
+            ancestorBlocks={[...ancestorBlocks, block]}
+            context={context}
+        />
+    );
+}

packages/gitbook/src/lib/api.ts

@@ -7,6 +7,7 @@ import {
     GitBookAPI,
     GitBookAPIError,
     HttpResponse,
+    JSONDocument,
     List,
     PublishedSiteContentLookup,
     RequestRenderIntegrationUI,
@@ -487,6 +488,40 @@ const getRevisionFileById = cache({
     },
 });
 
+const getRevisionReusableContentById = cache({
+    name: 'api.getRevisionReusableContentById',
+    tag: (spaceId, revisionId) =>
+        getAPICacheTag({ tag: 'revision', space: spaceId, revision: revisionId }),
+    get: async (
+        spaceId: string,
+        revisionId: string,
+        reusableContentId: string,
+        options: CacheFunctionOptions,
+    ) => {
+        try {
+            const response = await (async () => {
+                return api().spaces.getReusableContentInRevisionById(
+                    spaceId,
+                    revisionId,
+                    reusableContentId,
+                    {
+                        ...noCacheFetchOptions,
+                        signal: options.signal,
+                    },
+                );
+            })();
+
+            return cacheResponse(response, cacheTtl_7days);
+        } catch (error: any) {
+            if (error instanceof GitBookAPIError && error.code === 404) {
+                return { data: null, ...cacheTtl_7days };
+            }
+
+            throw error;
+        }
+    },
+});
+
 /**
  * Get all the files in a revision of a space.
  * It should not be used directly, use `getRevisionFile` instead.
@@ -578,6 +613,35 @@ export const getRevisionFile = batch<[string, string, string], RevisionFile | nu
     },
 );
 
+/**
+ * Get reusable content in a revision. Also returns the document.
+ */
+export const getReusableContentDocument = async (
+    spaceId: string,
+    revisionId: string,
+    reusableContentId: string,
+): Promise<JSONDocument | null> => {
+    const hasRevisionInMemory = await getRevision.hasInMemory(spaceId, revisionId, {
+        metadata: false,
+    });
+
+    if (hasRevisionInMemory) {
+        const revision = await getRevision(spaceId, revisionId, { metadata: false });
+        const reusableContent = revision.reusableContents[reusableContentId];
+        if (!reusableContent) {
+            return null;
+        }
+        return getDocument(reusableContent.documentId);
+    } else {
+        const response = await getRevisionReusableContentById(
+            spaceId,
+            revisionId,
+            reusableContentId,
+        );
+        return response?.document ?? null;
+    }
+};
+
 /**
  * Get a document by its ID.
  */