From 5db3cbc2ceb8470b4e39060230fb34d5bfa426d0 Mon Sep 17 00:00:00 2001
From: Steven H <steven@gitbook.io>
Date: Thu, 25 Apr 2024 15:25:53 +0100
Subject: [PATCH] Render Embed blocks that can be handled by an integration in
 the Space. (#2302)

---
 bun.lockb                                     | Bin 478189 -> 477805 bytes
 package.json                                  |   2 +-
 packages/react-contentkit/package.json        |   2 +-
 src/components/DocumentView/Embed.tsx         |  42 ++++++++++++++++--
 .../Integration/IntegrationBlock.tsx          |   1 +
 5 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/bun.lockb b/bun.lockb
index 426c0b2910f11fe43ca266a38cbff80fe89ba178..cf322fbd63ef32621dce5cfc3599616726be1f02 100755
GIT binary patch
delta 2657
zcmXxkdr%cs90%~-d-sB%;sY-tPf<Wn0@UQ8VHXk&5R(XbC}^0^6z~s|9^*x((kvB%
zT%1%iuuN3sq1%|_3rDdTlhL@Q*^Cb`oyk&rPt(}<$9_4(Z}zvJ^E-##bI#p|df>y_
zz^dp--`2rb{yyNoY;Wt+9R>HBZ`|!X=i~ccS4>*({zsMzv3WnHxhv9Is&j)as~cL%
zE5baF;(nB(R6H(i^9)}f)>f4fx<HMt*_$z;=2pglw)<a{U)J}mQ(yG>uT)hWC>(&k
z$wp|oS{~-6VsN5|;a9F!hS~aVjKmIg=X%F^W#_i~q+>n4A4i4+Ha*?mys^>0S=%+r
zKF~HQvAyA5Y)yTSTg<75CuNr8#@!u1MO-@jS;Eqs-|t0#<;=QK_|Zmtip8*}SeFIr
zC#G3v>zxa&gN&#})~F(5)k*8yy|%k}8ZTX4XZ5d%t&AP4C`TGJJdC2$9n|z{m(5$>
z)Tl-3?Ty+9=ZL-zMHz|;3vvk`+HjZ^xr86h4wILW2}5W;G#l>6(niwUaQ_U=mnI7x
zYnnc5pElT;IKaH~V}S>59WoNlpXP}?ofZI-2OWsWparpR5Ns+fn1&@#N|8$&P4hy&
z*365P5aJNvW_b;?F|?t`x6;PKWHp8%ijhkTXWek*E2R@{9L*bfnLhDz&D+@}tA-ZI
zE<5s@wDGY1g}+6MqK!mdrgWl3bF44&d|C_*=TuqCb&Q4eZ(5pZPGvF+{ZaVHJnPD{
zv;bHMOcr?xOy&+myg`en1;H}8xQQ_QDZz*=S`uwEESr`LQx&IqTylZ3Ybii^!ZC>R
z$YqC8`wGn?6v@FeX`$$sBPwkcuJV9kh+(ueTxH?H5m&hh>9ldMZYME=gCl@0S|$r4
zVb^GLST`Pakv5lg6JTp-S*(kKy+g}pot*n&+$QHM#Ax7c?r{z+2DT4{ve)xy@&l>I
z-pRh^(k3Erpykmf!5YmyR`O|+VQ<k2Ow&*8*KE!?#Q7|og2I1z78cOrU==Xg|3a7?
z{dj~QO!i;Sy*z&cB8X!b!{kL15h1iCteXl8H_b~~N}LAt(X+n955vy-<(wl4T|aR9
zSHfgbrz38{<gBfR$ye)n#2wac;Is}{7p;=>CBuqo@6u9WlaQkoDen_sz@7X^LUG-M
ztGwh4g#1XvKA@!{zm2Do<Fc7H6Zsu(|A(|$ux35^faaZ4!LBXrN<-ISESPNkR$4mp
zCLWA!v<z6FUX3Z7-rTxsbjea@BJ42P!Wx#(LEg^gtYzIxQcK&;y1B3!G@X_OONGf6
z*3n)@?l9}TlpVxuV4Oa&3D2~I%law1a?rJdwv#pwRtt0Bx{H>Jd>u@-W;aZ>GY|15
ztraHkn2(T8inMl)EkHgUd5VH>%2DEcpar>X%`w^n<Qur|229dIgdY}77VkLgijW&z
zjIU`6Va<3Ld7%?9`3)>WXvpP%o$0H?H|<s2+~+?z%fZF42eb~_V%QeiIhefNYlu&1
z@(q-|UxH}CKb8l$KwFBujn+w927B25O}j{34*UfZ%0qnvlet$QcJZHFV%<vE9@t`B
zzoos7{7;xne3@fcA^#O7^Il=yYUGb;#aD?XER;#Uqm{ByteaMb{5K4iiCwfcG@0WX
zt@9ufw20ICu|rz8@%<q!KvffrKMreShZq4Twb543ywhgQbG>~vYO}H8jCM8DuMErB
zj<KzXBPc2BHS4B!8%6iD*;X~qXnLUK{H(_5s>>E{d0eWOxNN?jo4RF_@v_(TDwoaC
lH^}I6*=|`q>#mz!-D$@08@8TuOi`ch7W$X|Z@T-F{{boKLrnkx

delta 2848
zcmZA3eN>KT90&0G>A9aIM3O=&y?R7?<h2*;P2nk2lIR6_ODOHMk{wUxOvb@l+RYiV
z$!ydr$-NzG8OE4Ho65`l5gX$iHak0G&W>~T{dvBB?K-Y=|L)KAyRPTHuitfdJl*U4
zRP%m6)ZBUg-$kt#Eta)iFV9&=`$hIUzCW`{Ggl|<`_MJzpMl$QtbG(|C#y4k9M;sg
zlvf50?r>0){)$rB1|Np2xwzFKXmg-b@yNJmb+h!k)=FzYwjrdZ+8R>RX?1G7b*%il
z1Ot94GAL6qK^8R2ur{yEFthKZVuKO`b^?X#U1f&yzybIPC8DpQ7;uf$Qx6)p{@-q&
zGaT3)bLK_R$%@8ju4Cc~;}7({cu-IjS?gb0())MWxU96Xr9RV|mUeWU@V}6MrD9$0
z_Uo5UdzA#6k8etj*P`m;Dz2qhwZ%H<ZL!8x-mz+QcBA5X<<mYcXF9AAzMH##{B248
ztEm+suOb^V9-T68yxH}Y&(7*$dAkpVTJ+$W%A{`Vlh((3w*3_K=9aVHT-~AN<QYA*
z>_}s>p+zsqGfv5^Icy!GA8t2pdY}y|G+Im}@TM->$L+=x=jM79ucjysjau0eHCk&q
zqI%fmZKVyun8dORLj=%VVRCOoA1Z+629tYPYPbN}P|h_W9`#xj#e?REdw-fIP3k+&
zZdy{kI=~jjgyBp;6_jaCb{s)-#%+wOhUP`<hj=#48zv8nW1?7TKFk{ci=g?^Twq0r
z(Q=hh#DTagMJx;X(FP&jA+Lt!Pjf}Qn-&0*9T|+i46(Fe=D8tWqgjrsZnk2{K{Ip6
z9dRdje+*4F`7SL4CXeBP-b))t^Ms|yAli7&#b=>p(ZXm_pi=uj+7t^=o?!&~EN<>Z
zCVIi1**`mF63rX79wwVS876CwM1PAmmF5FW;pRrb@K5nYPo+(NZ8rPSNGHYt<)!@4
zGhtG-c$hq(Kl(+)QlUiV1t2zaZW1jJCdXFVOkCvwgV5#JN}J8RV8l0U+<q%@G_aeN
z%*ke04{Z+f#=vgU<}xn?cA1vSys@wiv^3_)8GoB*o6p2hpeyT?K^qUd#~Lr7$v1Hn
zc~a|4ngwwkN+)$)NSlE82rY{i4y$L07uikgIHsCx6~x6%oP@+Vv~1dB*h`*;9NH9E
zB~0p{3zMUdKdZ`cnAAU?dD9S&<lN;jdCv&+QFe1tRx&XX7^J0sh7V&X^H*~y8bj{1
z0<JL~_A|?02$M~H1N|<{7uWSL`KuL!exG^oaJ^VqCv7X&i-Rq*TdwjhF&;Ppv9u~$
z0^)GQa@O9%Rf;qNT|OMK9kfKm_wZD5Tz1lu5Z~8gKUdwNn|KO#acCBXDrviEvteIg
z!=&(gXja50v}!D2^XB=e=1>ZT+*rB~V6xS7(A{BD!oAF!i})0`vzB@DU@0_>d8x1j
z+CEwuYz7P^bW!#b(}6LX<v5;cGV?#;PzHupaH|i{7Qpt?4$?AVdtp+VL$rm6%V1KP
zI+&C*3w<N46(;Yv2t67xnoVir<i)s?zcW(8)3j{F4u}(R)oD41w{YLTgh`l-J{+4S
zn|FqJd5Cqs+}E@vuqHf=yihyLgx^<|;zq@d{Mb1rE<^l?KXRUy4|`0zKwA#mMf(mW
zZ?^)ymUfAGD`748;U&0!Pg{k!)keHbTn&86$yaCvu-{?wP(Q$Acn$hN=3Qf6A?z@0
zIj+}fYY{(($-14KyAJUmFj?1jgNf^L^Cz*3R>VYEq?=aEJh2|y2E>11t}J|$Rzj0C
zZqaTvB0!7!)_!%4D%DOjsNVY32G!GGh|nK2s{R8VCiT@F+f_fK^J?bJf2e)Zp!yk_
z^{lh%jR3zUOh1KnPNJ9Ko7#Zh0^9!3zV5ajJ@J8>Y&3-HHILMcCkBi5xXUy}3yU^Q
z3^3z=Q~mMjE^XeFUX{D0(aDfIH8d;~pKNE3NuEw=zM~~{n_~3s-KJinbMGCyW?1!-
i+ooU3v1n$RW55f|^Q@zn7MteiZnT7kX=SteJpT`Uwt4{o

diff --git a/package.json b/package.json
index 34d3c1a834..38d06167b4 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/packages/react-contentkit/package.json b/packages/react-contentkit/package.json
index 6e4a5ed661..2826bca3a4 100644
--- a/packages/react-contentkit/package.json
+++ b/packages/react-contentkit/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": {
diff --git a/src/components/DocumentView/Embed.tsx b/src/components/DocumentView/Embed.tsx
index d118f2deaa..6066bf3cbf 100644
--- a/src/components/DocumentView/Embed.tsx
+++ b/src/components/DocumentView/Embed.tsx
@@ -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,
+        },
+    };
+}
diff --git a/src/components/DocumentView/Integration/IntegrationBlock.tsx b/src/components/DocumentView/Integration/IntegrationBlock.tsx
index 9df941689c..935db36ca4 100644
--- a/src/components/DocumentView/Integration/IntegrationBlock.tsx
+++ b/src/components/DocumentView/Integration/IntegrationBlock.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,
     };