feat: support integrations inside reusable content blocks

Author: Antoine-C

packages/gitbook/src/components/DocumentView/Integration/IntegrationBlock.tsx

@@ -11,9 +11,14 @@ import { renderIntegrationUi } from './server-actions';
 
 export async function IntegrationBlock(props: BlockProps<DocumentBlockIntegration>) {
     const { block, context, style } = props;
+    const { spaceId } = props.block.data
 
-    if (!context.contentContext?.space) {
-        throw new Error('integration block requires a content.spaceId');
+    if (!context.contentContext) {
+        throw new Error('Expected a content context to render an block');
+    }
+
+    if (!context.contentContext?.space && !spaceId) {
+        throw new Error('integration block requires a spaceId');
     }
 
     const initialInput: RenderIntegrationUI = {
@@ -22,13 +27,22 @@ export async function IntegrationBlock(props: BlockProps<DocumentBlockIntegratio
         action: block.data.action,
         context: {
             type: 'document',
-            spaceId: context.contentContext?.space.id,
+            // When the block originates from a cross-space reusable content, the server adds a spaceId so the integration is
+            // looked up in the correct source space.
+            spaceId: spaceId ?? context.contentContext.space.id,
             editable: false,
             theme: 'light', // TODO: how to handle this without moving rendering to the client side?
         },
     };
 
-    const initialResponse = await fetchSafeIntegrationUI(context.contentContext, {
+    const dataFetcher = block.meta?.token
+        ? context.contentContext.dataFetcher.withToken({ apiToken: block.meta.token })
+        : context.contentContext.dataFetcher;
+
+    const initialResponse = await fetchSafeIntegrationUI({
+        ...context.contentContext,
+        dataFetcher
+    }, {
         integrationName: block.data.integration,
         request: initialInput,
     });