Render Embed blocks that can be handled by an integration in the Space. (#2302)

Author: emmerich

bun.lockb

@@ -20,7 +20,7 @@
  ],
  "dependencies": {
  "@geist-ui/icons": "^1.0.2",
- "@gitbook/api": "^0.43.0",
+ "@gitbook/api": "^0.46.0",
  "@radix-ui/react-checkbox": "^1.0.4",
  "@radix-ui/react-popover": "^1.0.7",
  "@sentry/nextjs": "^7.94.1",

package.json

@@ -3,7 +3,7 @@
  "exports": "./src/index.ts",
  "dependencies": {
  "classnames": "^2.5.1",
- "@gitbook/api": "^0.41.0",
+ "@gitbook/api": "^0.46.0",
  "assert-never": "^1.2.1"
  },
  "peerDependencies": {

packages/react-contentkit/package.json

@@ -1,4 +1,4 @@
-import { DocumentBlockEmbed } from '@gitbook/api';
+import * as gitbookAPI from '@gitbook/api';
 import Script from 'next/script';
 
 import { Card } from '@/components/primitives';
@@ -7,11 +7,14 @@ import { tcls } from '@/lib/tailwind';
 
 import { BlockProps } from './Block';
 import { Caption } from './Caption';
+import { IntegrationBlock } from './Integration';
 
-export async function Embed(props: BlockProps<DocumentBlockEmbed>) {
- const { block } = props;
+export async function Embed(props: BlockProps<gitbookAPI.DocumentBlockEmbed>) {
+ const { block, context, ...otherProps } = props;
 
- const { data: embed } = await api().urls.getEmbedByUrl({ url: block.data.url });
+ const { data: embed } = await (context.content
+ ? api().spaces.getEmbedByUrlInSpace(context.content.spaceId, { url: block.data.url })
+ : api().urls.getEmbedByUrl({ url: block.data.url }));
 
  return (
  <Caption {...props}>
@@ -25,6 +28,12 @@ export async function Embed(props: BlockProps<DocumentBlockEmbed>) {
  {/* We load the iframely script to resize the embed iframes dynamically */}
  <Script src="https://cdn.iframe.ly/embed.js" defer async />
  </>
+ ) : embed.type === 'integration' ? (
+ <IntegrationBlock
+ {...otherProps}
+ context={context}
+ block={createIntegrationBlock(block.data.url, embed.integration, embed.block)}
+ />
  ) : (
  <Card
  leadingIcon={
@@ -40,3 +49,28 @@ export async function Embed(props: BlockProps<DocumentBlockEmbed>) {
  </Caption>
  );
 }
+
+/**
+ * Create an integration block with an unfurl action from the GitBook Embed response.
+ */
+function createIntegrationBlock(
+ url: string,
+ integration: string,
+ block: gitbookAPI.IntegrationBlock,
+): gitbookAPI.DocumentBlockIntegration {
+ return {
+ object: 'block',
+ type: 'integration',
+ isVoid: true,
+ data: {
+ integration,
+ block: block.id,
+ props: {},
+ action: {
+ action: '@link.unfurl',
+ url,
+ },
+ url,
+ },
+ };
+}

src/components/DocumentView/Embed.tsx

@@ -70,6 +70,7 @@ export async function IntegrationBlock(props: BlockProps<DocumentBlockIntegratio
  const initialInput = {
  componentId: block.data.block,
  props: block.data.props,
+ action: block.data.action,
  context: contentKitContext,
  };