Fix images and other content refs in reusable content across spaces. (#3190)

.changeset/big-clocks-rush.md

@@ -0,0 +1,5 @@
+---
+"gitbook": minor
+---
+
+Fix images in reusable content across spaces.

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

@@ -2,6 +2,7 @@ import type { DocumentBlockReusableContent } from '@gitbook/api';
 
 import { resolveContentRef } from '@/lib/references';
 
+import type { GitBookSpaceContext } from '@v2/lib/context';
 import { getDataOrNull } from '@v2/lib/data';
 import type { BlockProps } from './Block';
 import { UnwrappedBlocks } from './Blocks';
@@ -33,7 +34,7 @@ export async function ReusableContent(props: BlockProps<DocumentBlockReusableCon
 
     const document = await getDataOrNull(
         dataFetcher.getDocument({
-            spaceId: resolved.reusableContent.space,
+            spaceId: resolved.reusableContent.space.id,
             documentId: reusableContent.document,
         })
     );
@@ -42,12 +43,27 @@ export async function ReusableContent(props: BlockProps<DocumentBlockReusableCon
         return null;
     }
 
+    // Create a new context for reusable content block, including
+    // the data fetcher with the token from the block meta and the correct
+    // space and revision pointers.
+    const reusableContentContext: GitBookSpaceContext = {
+        ...context.contentContext,
+        dataFetcher,
+        space: resolved.reusableContent.space,
+        revisionId: resolved.reusableContent.revision,
+        pages: [],
+        shareKey: undefined,
+    };
+
     return (
         <UnwrappedBlocks
             nodes={document.nodes}
             document={document}
             ancestorBlocks={[...ancestorBlocks, block]}
-            context={context}
+            context={{
+                ...context,
+                contentContext: reusableContentContext,
+            }}
         />
     );
 }

packages/gitbook/src/lib/references.tsx

@@ -44,7 +44,7 @@ export interface ResolvedContentRef {
     /** Resolved reusable content, if the ref points to reusable content on a revision. Also contains the space and revision used for resolution. */
     reusableContent?: {
         revisionReusableContent: RevisionReusableContent;
-        space: string;
+        space: Space;
         revision: string;
     };
     /** Resolve OpenAPI spec filesystem. */
@@ -236,10 +236,10 @@ export async function resolveContentRef(
 
         case 'reusable-content': {
             // Figure out which space and revision the reusable content is in.
-            const container: { space: string; revision: string } | null = await (async () => {
+            const container: { space: Space; revision: string } | null = await (async () => {
                 // without a space on the content ref, or if the space is the same as the current one, we can use the current revision.
                 if (!contentRef.space || contentRef.space === context.space.id) {
-                    return { space: context.space.id, revision: revisionId };
+                    return { space: context.space, revision: revisionId };
                 }
 
                 const space = await getDataOrNull(
@@ -253,7 +253,7 @@ export async function resolveContentRef(
                     return null;
                 }
 
-                return { space: space.id, revision: space.revision };
+                return { space, revision: space.revision };
             })();
 
             if (!container) {
@@ -262,7 +262,7 @@ export async function resolveContentRef(
 
             const reusableContent = await getDataOrNull(
                 dataFetcher.getReusableContent({
-                    spaceId: container.space,
+                    spaceId: container.space.id,
                     revisionId: container.revision,
                     reusableContentId: contentRef.reusableContent,
                 })