From c81e89c7f451de5c6251a985a000d61d3a8f3eda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Berg=C3=A9?= <berge.greg@gmail.com>
Date: Mon, 25 Mar 2024 17:34:15 +0100
Subject: [PATCH] Support images & files in synced blocks

---
 bun.lockb                                     | Bin 468747 -> 469147 bytes
 package.json                                  |   2 +-
 .../DocumentView/BlockSyncedBlock.tsx         |  24 ++++++++++++----
 src/components/DocumentView/Drawing.tsx       |   2 +-
 src/components/DocumentView/File.tsx          |  10 ++-----
 src/components/DocumentView/Images.tsx        |   4 +--
 src/components/DocumentView/InlineImage.tsx   |   6 ++--
 .../DocumentView/Table/RecordCard.tsx         |   2 +-
 src/lib/references.ts                         |  27 +++++++++++++++---
 9 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/bun.lockb b/bun.lockb
index 2d949319652fd5e48e534a65f9a6f8e2da097e1d..447149b32e4dee8b665494e91ae5f2bb39bca4b4 100755
GIT binary patch
delta 2806
zcmY+`dr(wW90%}o*$b?wsDL7fyj&2)HUX6lUn?jesH-A^FVqo3^AS>xg4*tmn40An
ztF7Y;YI>rLIHcF`i5i-YI%;W?O*sNn(>RS*W2Q6N_qY4)kIrzozx%nrbMC$8ckhL5
z*JAeGh}mHsv@54|?bD#MrI9PIhv)rh-=3veT=RB6>dZD`mu=enOKsPbU?uJScT3^|
z_Ir-3ePRh~4^XO`Qm&)$C~Sk5G}k0OwwNnpvme$^H0qlx3p(a&$sTt>s^@Hhxp_<D
z+KUpHS}Qb9VdL=ks<iwr;Y&1S$6zzkGK|_P?V%+U^QsQBQX00MW}~J`dur+aKQyXO
zY8N)zd;j4$>Nxf2Q1PAvC*!u*hupt*w|G&~<Oh}a)<?ZwJ~wqv#+^^EG)3Fiq_r2i
z`*hxY`fKa)hGSQ6b~wLXQ?cAg+`PdaU~I6PD#E;@>;aRsdarxBsYGiq(uz#&b3Ho>
zB8-S8Q`UX2z1)<h{q1$s>C-~)d30QtQkV958|(DZi~o7<Z$88!xoYXY#(lZ?J|qn$
z`zG|hG!snru~9L!AdU^h{s8YZj~?z!;vq8+Nlk{*y3nw0DuWh6>w^7gIe^xc7J@h-
z$VaLhtt)m@Y29IRnW(TD;y0)2!Nl&seoX913xzolOY24Jfw&m4OcX}ziFm2p6k0f~
z7vdGP2$-xz7<x8hX_3A>Ck9|=iX27j%fS(dXV9W(y<sh^LNrYZ&_?SAlZ%Q(zf9{-
zlcHqGL9{rI#q+IloWyuyG_YK<&=P3<B<4~l!sNQ7qBs2Sk4j=*f0zR%OP&mqsbkSg
zXeqQfn3XH-91O&dibqc;T4@QeVYGCZ+*BgE4JI|rfXT%SK>rA_lxqa@EQrk<n@N*r
z?IBmy2Ezq9RWk4qF^h=<Va>FWv=rD;+9>~EH3)W$HimhFVFqn1^HO1-(Z(@v2&~wI
z`b(3CLYC_V^aV^D&qOQi8S6QL_9E;GEte*5%~nhzwa%lZAzq3uEuWT-xDe%(vQBgo
z<@It93uwb&Q(5;y+HhDhZ4zw+?0Y^7lWCc-g)piA6qvjSHuPsGiPXP{dCr%x^PF{>
z0hCq9LJ#1CGnqIN7ECLlje`Bfv8A-pu*bAnoNo;5ByA2%7I-ZBsUXxp9zhvUUO7AZ
zc_vnI!f~)8wAVOcHY|s>nwA5T?}4;6wDE}Ldms;9HMUZ*3Fz`Y5UbHqf5BYzR$P`m
zJnNX4hxi<yh4r+2n1{B3HW5}%dxKU0tHV;tGx1-E3lZ;>lcBkoH%XqqKe?=Kpe+An
z^v5u%>qaI{LA;B3wajzCth6_oHx-sd+f17VONL2Vx6q~|PJqez)mCB=;z$mDi#7w6
z%cb5%D~8q3-loljt%gat-l3HsE`>?Cw!@^vrRcM1ALuy0-0>`Q`BX~#kb`F<jzye<
zt$bW$<>sK@$5Q8F`!Q`U;>BG4Phb+xLw|-Fk(F#@UK!%uyt#w4`3hf#9k?2~qeDP>
zO%|YcU=}&q5hgA~e97zHgFl#G^IXk5v<Qb*(Y}Dm{gk6u(~dE3F{}=!nvbnPdl~Ug
z+HqP1>?+58Nm~ND2E%1IRSQs#%Xh`i#8XUs1y&1NgzahCGQ_uGGVvLXU5@xVOeQ|Z
zycLLV(9Y9VGEe5X;4{1duQE~aD<)PVzJ<XuaT{$FO(wZWd$JD!THhvb=wUq(Bb4#;
zUVV_Jbr`+&>vux6pN!6fdYmaFzsaBZ!!2K?R7TYsX@~W70}>D5&}HmjLU-fAaG^KA
zdVb>{GyR0oc2jqmG@FrkTi@UA{cd33FiSB0FT|fM*TSZCMVrgqpPRKZn{}ua?`Xpb
z-}K6L#%pc~wEHG8@>>G$nL?V*_z#&<jP%oi*Q+sQfGsHUH*eeVpcwCiO#F&U4*vaL
DGLBEd

delta 2590
zcmXxmdr%cs90%}S?p|K<5HJWt5xsyU5~A`<y@DWb3`B?!Au+PB26}-^UDO&<t5LvN
z3lf@MgXIV@xT#2k8ktQJ(BxEqWZ*P3H4Qz6n!&NYKlaNRkNext{?56(=XZ9seKh#!
zjo@R^ku}|UR!_~@)9PLE>-dbv*yLY#U$03`-hC!@KpT#)>}w2nQKWSpFAj0)YU!>2
z*XG`j^FT#u8maC(7&c?;Ys$L4OSjdjQLSHRx%QnrUH`ehtxnBw`=MG@?8tL%J)X7J
z_@+*swpmq-ois*ub#^}fZa}?yNKY%YWH(RQos22FrOa3Vt-z9_b{fAFS|-bkTRoPf
z3F{DM^U{CnvE;f>wP=_|Q3l%e4_dVi`j4$zpu>NT@E5K*;UN89niI@|Sb8wc3X{8$
zsaDXOX;z$v(OhWGIFF&Z(qwJcnx;SBrg=JoT+K6gCb;1=R7RpLpt&PnMe~5kjV?fs
zqIogT1GbpvP4k51BbK(1=7qS(jLQ`tqBn4_JO-LCZ6V@)G(VWEh7WoQVrl-&^F^E|
z7tsP}eu%g0l_xYm#|2q6v_M|E2k|g12qw=X#kfujrUk&_<s#Zrj+FwX(n4t1T1u59
zp)I2YAr3Xy)}e#~<@Oe%kDA+4u`yAqn-7yk4ui?uOVEpH5wxYSXfAFf41bgm^jO+z
z+A`QW+8UUuIB+Mx1fWzc7AQBf9Q{4SQla&8iRQL)<={A)4cDi+xbZN#LD_15&=Q#!
z4(p>O(IQ~|4q`F~uLPc>ZD3*~%%E*#-hHrcnw@#8U`4de%!`6m&{CPV8aB&vI<^p_
zfnO5SX!pYo<B_D+=`?w1_M%JMN?U_C8}*dBX3%00=hHH2@^Wo6>#k&(=1|rF!-?5U
zTo3!6dm)Dw2djih{c~Zm_2bcJQ4*<t0rL_N|Hm>F!lWdL=uVuEFPD-8b8$iarS0J0
zWW@h)a53!x*bJ?N6K;SF&`M#l!W+>q!DQp@ge}5x6Z#eA)p9;Ntd~~j;Dnojsl;b!
zDKL54r9DSWMJ#W-4aa&MrD9vq7ttDMX|N&OmF%7Uv~<LmxfdE~)~&!+z4i@!3aWVR
z1zyX<r4}roY=akRS%}-__YN%^_BU6z2_`F^gFXY3N*-ihF5(l+JH)&^ShQ(g%F9g5
z2ZrfBZ{nWhA1tX}GcP@eIFxg|LMwm;&<@iIVd-4YBed<X{j{UBBG|JqJC3i?b|5Z+
zp(YOHHK0_o7`@a)<!zWeWC{8b#M0j3;D->)_b>&=cWI@FC$P9u6#1&i`aO)khYS8b
zOu{nsSv-g=UiVxcw&zZqoaED;=HPPJG2Dzi(T6a37j~iF#w_w<J<O{>e2qWSORI!^
zLHn5Y2&|UY2a|`}jovW-dFp3k6|e<AEH`kDwg+(=&7eIB`-&5OLaT<|fK}jl9wwI`
zLqEX00p`iq<t3Qhl;aZdah!Y$l!*s9_zA=#FqwFWc{PYfX_smHm?v{wp*_hwv8%MF
z5RYT5%=?*XdS{2`<}VWrGij<F0h)GJAM4P<jXNEhO;sn1&{Nt?FXPTfTCl}E=B$}B
zFeW+6)l)`hkJh*%$brIN$JlG=ok*D;GxP4AH+~-1nk;IZQGHW;YtlA?{~dWKN>gP|
zV_|dofitdZc|vqdG`_tV7o^sTvT{%_yJ)o=T^FslEbb+Pram2R9Qo8b(twFd6P*Ko
K*SjNJ{`?<q%Nz#)

diff --git a/package.json b/package.json
index 29da9ba4b5..a6d8c18d77 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     ],
     "dependencies": {
         "@geist-ui/icons": "^1.0.2",
-        "@gitbook/api": "^0.36.0",
+        "@gitbook/api": "^0.38.0",
         "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-popover": "^1.0.7",
         "@sentry/nextjs": "^7.94.1",
diff --git a/src/components/DocumentView/BlockSyncedBlock.tsx b/src/components/DocumentView/BlockSyncedBlock.tsx
index 2bc64baaa5..36fbbb1d89 100644
--- a/src/components/DocumentView/BlockSyncedBlock.tsx
+++ b/src/components/DocumentView/BlockSyncedBlock.tsx
@@ -1,6 +1,7 @@
 import { DocumentBlockSyncedBlock } from '@gitbook/api';
 
 import { getSyncedBlock } from '@/lib/api';
+import { resolveContentRefWithFiles } from '@/lib/references';
 
 import { BlockProps } from './Block';
 import { Blocks } from './Blocks';
@@ -13,22 +14,35 @@ export async function BlockSyncedBlock(props: BlockProps<DocumentBlockSyncedBloc
         return null;
     }
 
-    const result = await getSyncedBlock(
+    const syncedBlock = await getSyncedBlock(
         apiToken,
         block.data.ref.organization,
         block.data.ref.syncedBlock,
     );
 
-    if (!result) {
+    if (!syncedBlock) {
         return null;
     }
 
     return (
         <Blocks
-            nodes={result.document.nodes}
-            document={result.document}
+            nodes={syncedBlock.document.nodes}
+            document={syncedBlock.document}
             ancestorBlocks={[...ancestorBlocks, block]}
-            context={context}
+            context={{
+                ...context,
+                resolveContentRef: async (ref, options) => {
+                    if (!syncedBlock?.files) {
+                        return context.resolveContentRef(ref, options);
+                    }
+                    const result = resolveContentRefWithFiles(syncedBlock.files, ref);
+                    console.log('RESOLVED', result);
+                    if (result !== undefined) {
+                        return result;
+                    }
+                    return context.resolveContentRef(ref, options);
+                },
+            }}
             style={style}
         />
     );
diff --git a/src/components/DocumentView/Drawing.tsx b/src/components/DocumentView/Drawing.tsx
index b4adf477a9..1b0d83d404 100644
--- a/src/components/DocumentView/Drawing.tsx
+++ b/src/components/DocumentView/Drawing.tsx
@@ -19,7 +19,7 @@ export async function Drawing(props: BlockProps<DocumentBlockDrawing>) {
                 sources={{
                     light: {
                         src: resolved.href,
-                        size: resolved.fileDimensions,
+                        size: resolved.file?.dimensions,
                     },
                 }}
                 alt="Drawing"
diff --git a/src/components/DocumentView/File.tsx b/src/components/DocumentView/File.tsx
index f86d063af3..d0f623134d 100644
--- a/src/components/DocumentView/File.tsx
+++ b/src/components/DocumentView/File.tsx
@@ -12,13 +12,9 @@ import { BlockProps } from './Block';
 export async function File(props: BlockProps<DocumentBlockFile>) {
     const { block, context, style } = props;
 
-    const file = context.content
-        ? await getRevisionFile(
-              context.content.spaceId,
-              context.content.revisionId,
-              block.data.ref.file,
-          )
-        : null;
+    const contentRef = await context.resolveContentRef(block.data.ref);
+    const file = contentRef?.file;
+
     if (!file) {
         return null;
     }
diff --git a/src/components/DocumentView/Images.tsx b/src/components/DocumentView/Images.tsx
index 1bb7d67f32..a9595dd988 100644
--- a/src/components/DocumentView/Images.tsx
+++ b/src/components/DocumentView/Images.tsx
@@ -89,12 +89,12 @@ async function ImageBlock(props: {
                 sources={{
                     light: {
                         src: src.href,
-                        size: src.fileDimensions,
+                        size: src.file?.dimensions,
                     },
                     dark: darkSrc
                         ? {
                               src: darkSrc.href,
-                              size: darkSrc.fileDimensions,
+                              size: darkSrc.file?.dimensions,
                           }
                         : null,
                 }}
diff --git a/src/components/DocumentView/InlineImage.tsx b/src/components/DocumentView/InlineImage.tsx
index c3c35fbc45..799af9bcb3 100644
--- a/src/components/DocumentView/InlineImage.tsx
+++ b/src/components/DocumentView/InlineImage.tsx
@@ -32,12 +32,12 @@ export async function InlineImage(props: InlineProps<DocumentInlineImage>) {
                 sources={{
                     light: {
                         src: src.href,
-                        size: src.fileDimensions,
+                        size: src.file?.dimensions,
                     },
                     dark: darkSrc
                         ? {
                               src: darkSrc.href,
-                              size: darkSrc.fileDimensions,
+                              size: darkSrc.file?.dimensions,
                           }
                         : null,
                 }}
@@ -55,7 +55,7 @@ async function getImageSizes(size: 'original' | 'line', src: ResolvedContentRef)
     switch (size) {
         case 'line': {
             const imageSize =
-                src.fileDimensions ??
+                src.file?.dimensions ??
                 (await getImageSize(src.href, {
                     dpr: 3,
                 }));
diff --git a/src/components/DocumentView/Table/RecordCard.tsx b/src/components/DocumentView/Table/RecordCard.tsx
index c79f772b83..7658891d60 100644
--- a/src/components/DocumentView/Table/RecordCard.tsx
+++ b/src/components/DocumentView/Table/RecordCard.tsx
@@ -52,7 +52,7 @@ export async function RecordCard(
                     sources={{
                         light: {
                             src: cover.href,
-                            size: cover.fileDimensions,
+                            size: cover.file?.dimensions,
                         },
                     }}
                     sizes={[
diff --git a/src/lib/references.ts b/src/lib/references.ts
index 8c5a8bdaff..b7f6771f99 100644
--- a/src/lib/references.ts
+++ b/src/lib/references.ts
@@ -1,4 +1,4 @@
-import { ContentRef, Revision, RevisionPageDocument, Space } from '@gitbook/api';
+import { ContentRef, Revision, RevisionFile, RevisionPageDocument, Space } from '@gitbook/api';
 import assertNever from 'assert-never';
 
 import {
@@ -24,8 +24,8 @@ export interface ResolvedContentRef {
     href: string;
     /** True if the content ref is active */
     active: boolean;
-    /** Image size, if the reference is a image file */
-    fileDimensions?: { width: number; height: number };
+    /** File, if the reference is a file */
+    file?: RevisionFile;
 }
 
 export interface ContentRefContext extends PageHrefContext {
@@ -90,7 +90,7 @@ export async function resolveContentRef(
                     href: file.downloadURL,
                     text: file.name,
                     active: false,
-                    fileDimensions: file.dimensions,
+                    file,
                 };
             } else {
                 return null;
@@ -251,3 +251,22 @@ async function resolveContentRefInSpace(spaceId: string, contentRef: ContentRef)
         baseUrl,
     });
 }
+
+export function resolveContentRefWithFiles(
+    files: RevisionFile[],
+    contentRef: ContentRef,
+): ResolvedContentRef | null | undefined {
+    if (contentRef.kind === 'file') {
+        const file = files.find((file) => file.id === contentRef.file);
+        if (file) {
+            return {
+                href: file.downloadURL,
+                text: file.name,
+                active: false,
+                file,
+            };
+        }
+        return null;
+    }
+    return undefined;
+}