Deference reusable content at the API level

packages/gitbook/e2e/internal.spec.ts

@@ -1123,6 +1123,16 @@ const testCases: TestsCase[] = [
             },
         ]),
     },
+    {
+        name: 'Reusable contents',
+        contentBaseURL: 'https://gitbook-open-e2e-sites.gitbook.io/reusable-contents/',
+        tests: [
+            {
+                name: 'All cases',
+                url: '',
+            },
+        ],
+    },
     {
         name: 'Page actions',
         contentBaseURL: 'https://gitbook.gitbook.io/test-gitbook-open/',

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

@@ -7,18 +7,18 @@ import {
 import { Card, type CardProps } from '@/components/primitives';
 import {
     type ResolvedContentRef,
-    resolveContentRef,
     resolveContentRefFallback,
+    resolveContentRefInDocument,
 } from '@/lib/references';
 
 import type { BlockProps } from './Block';
 import { NotFoundRefHoverCard } from './NotFoundRefHoverCard';
 
 export async function BlockContentRef(props: BlockProps<DocumentBlockContentRef>) {
-    const { block, context, style } = props;
+    const { document, block, context, style } = props;
 
     const resolved = context.contentContext
-        ? await resolveContentRef(block.data.ref, context.contentContext, {
+        ? await resolveContentRefInDocument(document, block.data.ref, context.contentContext, {
               resolveAnchorText: true,
               iconStyle: ['text-xl', 'text-tint'],
           })

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

@@ -1,18 +1,18 @@
 import type { DocumentBlockDrawing } from '@gitbook/api';
 
-import { resolveContentRef } from '@/lib/references';
+import { resolveContentRefInDocument } from '@/lib/references';
 
 import { Image } from '../utils';
 import type { BlockProps } from './Block';
 import { Caption } from './Caption';
 import { imageBlockSizes } from './Images';
 
 export async function Drawing(props: BlockProps<DocumentBlockDrawing>) {
-    const { block, context } = props;
+    const { document, block, context } = props;
 
     const resolved =
         block.data.ref && context.contentContext
-            ? await resolveContentRef(block.data.ref, context.contentContext)
+            ? await resolveContentRefInDocument(document, block.data.ref, context.contentContext)
             : null;
     if (!resolved) {
         return null;

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

@@ -2,7 +2,7 @@ import { type DocumentBlockFile, SiteInsightsLinkPosition } from '@gitbook/api';
 
 import { t } from '@/intl/translate';
 import { getSimplifiedContentType } from '@/lib/files';
-import { resolveContentRef } from '@/lib/references';
+import { resolveContentRefInDocument } from '@/lib/references';
 
 import { getSpaceLanguage } from '@/intl/server';
 import { Button, Link } from '../primitives';
@@ -12,13 +12,17 @@ import { Caption } from './Caption';
 import { FileIcon } from './FileIcon';
 
 export async function File(props: BlockProps<DocumentBlockFile>) {
-    const { block, context } = props;
+    const { document, block, context } = props;
 
     if (!context.contentContext) {
         return null;
     }
 
-    const contentRef = await resolveContentRef(block.data.ref, context.contentContext);
+    const contentRef = await resolveContentRefInDocument(
+        document,
+        block.data.ref,
+        context.contentContext
+    );
     const file = contentRef?.file;
 
     if (!file) {

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

@@ -1,7 +1,7 @@
 import type { DocumentBlockImage, DocumentBlockImages, JSONDocument, Length } from '@gitbook/api';
 
 import { Image, type ImageResponsiveSize } from '@/components/utils';
-import { resolveContentRef } from '@/lib/references';
+import { resolveContentRefInDocument } from '@/lib/references';
 import { type ClassValue, tcls } from '@/lib/tailwind';
 
 import type { BlockProps } from './Block';
@@ -81,12 +81,14 @@ async function ImageBlock(props: {
     isEstimatedOffscreen: boolean;
     withFrame?: boolean;
 }) {
-    const { block, context, isEstimatedOffscreen, withFrame } = props;
+    const { document, block, context, isEstimatedOffscreen, withFrame } = props;
 
     const [src, darkSrc] = await Promise.all([
-        context.contentContext ? resolveContentRef(block.data.ref, context.contentContext) : null,
+        context.contentContext
+            ? resolveContentRefInDocument(document, block.data.ref, context.contentContext)
+            : null,
         block.data.refDark && context.contentContext
-            ? resolveContentRef(block.data.refDark, context.contentContext)
+            ? resolveContentRefInDocument(document, block.data.refDark, context.contentContext)
             : null,
     ]);
 

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

@@ -1,4 +1,4 @@
-import { resolveContentRef, resolveContentRefFallback } from '@/lib/references';
+import { resolveContentRefFallback, resolveContentRefInDocument } from '@/lib/references';
 import * as api from '@gitbook/api';
 import type { IconName } from '@gitbook/icons';
 import { Button, type ButtonProps } from '../primitives';
@@ -45,13 +45,13 @@ export function InlineButton(props: InlineProps<api.DocumentInlineButton>) {
 export async function InlineLinkButton(
     props: InlineProps<api.DocumentInlineButton> & { buttonProps: ButtonProps }
 ) {
-    const { inline, context, buttonProps } = props;
+    const { document, inline, context, buttonProps } = props;
 
     if (!('ref' in inline.data)) return;
 
     const resolved =
         context.contentContext && inline.data.ref
-            ? await resolveContentRef(inline.data.ref, context.contentContext)
+            ? await resolveContentRefInDocument(document, inline.data.ref, context.contentContext)
             : null;
 
     const href =

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

@@ -2,20 +2,22 @@ import type { GitBookBaseContext } from '@/lib/context';
 import type { DocumentInlineImage } from '@gitbook/api';
 import assertNever from 'assert-never';
 
-import { type ResolvedContentRef, resolveContentRef } from '@/lib/references';
+import { type ResolvedContentRef, resolveContentRefInDocument } from '@/lib/references';
 import { tcls } from '@/lib/tailwind';
 
 import { Image } from '../utils';
 import type { InlineProps } from './Inline';
 
 export async function InlineImage(props: InlineProps<DocumentInlineImage>) {
-    const { inline, context, ancestorInlines } = props;
+    const { document, inline, context, ancestorInlines } = props;
     const { size = 'original' } = inline.data;
 
     const [src, darkSrc] = await Promise.all([
-        context.contentContext ? resolveContentRef(inline.data.ref, context.contentContext) : null,
+        context.contentContext
+            ? resolveContentRefInDocument(document, inline.data.ref, context.contentContext)
+            : null,
         inline.data.refDark && context.contentContext
-            ? resolveContentRef(inline.data.refDark, context.contentContext)
+            ? resolveContentRefInDocument(document, inline.data.refDark, context.contentContext)
             : null,
     ]);
 

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

@@ -4,8 +4,8 @@ import { getSpaceLanguage, tString } from '@/intl/server';
 import { type TranslationLanguage, languages } from '@/intl/translations';
 import {
     type ResolvedContentRef,
-    resolveContentRef,
     resolveContentRefFallback,
+    resolveContentRefInDocument,
 } from '@/lib/references';
 import { Icon } from '@gitbook/icons';
 import { StyledLink } from '../../primitives';
@@ -15,10 +15,10 @@ import { NotFoundRefHoverCard } from '../NotFoundRefHoverCard';
 import { InlineLinkTooltip } from './InlineLinkTooltip';
 
 export async function InlineLink(props: InlineProps<DocumentInlineLink>) {
-    const { inline, document, context, ancestorInlines } = props;
+    const { document, inline, context, ancestorInlines } = props;
 
     const resolved = context.contentContext
-        ? await resolveContentRef(inline.data.ref, context.contentContext, {
+        ? await resolveContentRefInDocument(document, inline.data.ref, context.contentContext, {
               // We don't want to resolve the anchor text here, as it can be very expensive and will block rendering if there is a lot of anchors link.
               resolveAnchorText: false,
           })

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

@@ -1,15 +1,15 @@
 import { type DocumentInlineMention, SiteInsightsLinkPosition } from '@gitbook/api';
 
 import { StyledLink } from '@/components/primitives';
-import { resolveContentRef } from '@/lib/references';
+import { resolveContentRefInDocument } from '@/lib/references';
 
 import type { InlineProps } from './Inline';
 
 export async function Mention(props: InlineProps<DocumentInlineMention>) {
-    const { inline, context } = props;
+    const { document, inline, context } = props;
 
     const resolved = context.contentContext
-        ? await resolveContentRef(inline.data.ref, context.contentContext, {
+        ? await resolveContentRefInDocument(document, inline.data.ref, context.contentContext, {
               resolveAnchorText: true,
           })
         : null;

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

@@ -1,12 +1,13 @@
 import type { DocumentBlockReusableContent } from '@gitbook/api';
 
 import { getDataOrNull } from '@/lib/data';
-import { resolveContentRef } from '@/lib/references';
+import { resolveContentRefInDocument } from '@/lib/references';
 import type { BlockProps } from './Block';
 import { UnwrappedBlocks } from './Blocks';
 
+// TODO-DEREF: Remove this once we have rolled out the new reusable content deref in the API.
 export async function ReusableContent(props: BlockProps<DocumentBlockReusableContent>) {
-    const { block, context, ancestorBlocks } = props;
+    const { document, block, context, ancestorBlocks } = props;
 
     if (!context.contentContext) {
         throw new Error('Expected a content context to render a reusable content block');
@@ -16,7 +17,7 @@ export async function ReusableContent(props: BlockProps<DocumentBlockReusableCon
         ? context.contentContext.dataFetcher.withToken({ apiToken: block.meta.token })
         : context.contentContext.dataFetcher;
 
-    const resolved = await resolveContentRef(block.data.ref, {
+    const resolved = await resolveContentRefInDocument(document, block.data.ref, {
         ...context.contentContext,
         dataFetcher,
     });
@@ -30,22 +31,22 @@ export async function ReusableContent(props: BlockProps<DocumentBlockReusableCon
         return null;
     }
 
-    const document = await getDataOrNull(
+    const reusableContentDocument = await getDataOrNull(
         dataFetcher.getRevisionReusableContentDocument({
             spaceId: reusableContent.context.space.id,
             revisionId: reusableContent.context.revisionId,
             reusableContentId: reusableContent.revisionReusableContent.id,
         })
     );
 
-    if (!document) {
+    if (!reusableContentDocument) {
         return null;
     }
 
     return (
         <UnwrappedBlocks
-            nodes={document.nodes}
-            document={document}
+            nodes={reusableContentDocument.nodes}
+            document={reusableContentDocument}
             ancestorBlocks={[...ancestorBlocks, block]}
             context={{
                 ...context,

packages/gitbook/src/components/DocumentView/Table/RecordCard.tsx

@@ -1,6 +1,6 @@
 import { LinkBox, LinkOverlay } from '@/components/primitives';
 import { Image } from '@/components/utils';
-import { type ResolvedContentRef, resolveContentRef } from '@/lib/references';
+import { type ResolvedContentRef, resolveContentRefInDocument } from '@/lib/references';
 import { tcls } from '@/lib/tailwind';
 import {
     CardsImageObjectFit,
@@ -18,7 +18,7 @@ export async function RecordCard(
         record: TableRecordKV;
     }
 ) {
-    const { view, record, context, block, isOffscreen } = props;
+    const { view, record, context, block, isOffscreen, document } = props;
 
     const { dark, light } = getRecordCardCovers(record[1], view);
     const targetRef = view.targetDefinition
@@ -27,13 +27,13 @@ export async function RecordCard(
 
     const [lightCover, darkCover, target] = await Promise.all([
         light.contentRef && context.contentContext
-            ? resolveContentRef(light.contentRef, context.contentContext)
+            ? resolveContentRefInDocument(document, light.contentRef, context.contentContext)
             : null,
         dark.contentRef && context.contentContext
-            ? resolveContentRef(dark.contentRef, context.contentContext)
+            ? resolveContentRefInDocument(document, dark.contentRef, context.contentContext)
             : null,
         targetRef && context.contentContext
-            ? resolveContentRef(targetRef, context.contentContext)
+            ? resolveContentRefInDocument(document, targetRef, context.contentContext)
             : null,
     ]);
 

packages/gitbook/src/components/DocumentView/Table/RecordColumnValue.tsx

@@ -12,7 +12,7 @@ import { StyledLink } from '@/components/primitives';
 import { Image } from '@/components/utils';
 import { getNodeFragmentByName } from '@/lib/document';
 import { getSimplifiedContentType } from '@/lib/files';
-import { resolveContentRef } from '@/lib/references';
+import { resolveContentRefInDocument } from '@/lib/references';
 import { tcls } from '@/lib/tailwind';
 import { filterOutNullable } from '@/lib/typescript';
 import type { BlockProps } from '../Block';
@@ -176,7 +176,8 @@ export async function RecordColumnValue<Tag extends React.ElementType = 'div'>(
             const files = await Promise.all(
                 value.map((fileId) =>
                     context.contentContext
-                        ? resolveContentRef(
+                        ? resolveContentRefInDocument(
+                              document,
                               {
                                   kind: 'file',
                                   file: fileId,
@@ -250,7 +251,7 @@ export async function RecordColumnValue<Tag extends React.ElementType = 'div'>(
             }
             const resolved =
                 value && context.contentContext
-                    ? await resolveContentRef(value, context.contentContext, {
+                    ? await resolveContentRefInDocument(document, value, context.contentContext, {
                           resolveAnchorText: true,
                           iconStyle: ['mr-2', 'text-tint-subtle'],
                       })
@@ -293,7 +294,11 @@ export async function RecordColumnValue<Tag extends React.ElementType = 'div'>(
                         user: userId,
                     };
                     const resolved = context.contentContext
-                        ? await resolveContentRef(contentRef, context.contentContext)
+                        ? await resolveContentRefInDocument(
+                              document,
+                              contentRef,
+                              context.contentContext
+                          )
                         : null;
                     if (!resolved) {
                         return null;
@@ -366,7 +371,8 @@ export async function RecordColumnValue<Tag extends React.ElementType = 'div'>(
             }
 
             const image = context.contentContext
-                ? await resolveContentRef(
+                ? await resolveContentRefInDocument(
+                      document,
                       'ref' in value ? value.ref : value,
                       context.contentContext
                   )