Implement block content ref

src/components/DocumentView/Block.tsx

@@ -16,6 +16,7 @@ import { Embed } from './Embed';
 import { Quote } from './Quote';
 import {
     DocumentBlockCode,
+    DocumentBlockContentRef,
     DocumentBlockDivider,
     DocumentBlockDrawing,
     DocumentBlockEmbed,
@@ -43,6 +44,7 @@ import { ListTasks } from './ListTasks';
 import { Divider } from './Divider';
 import assertNever from 'assert-never';
 import { Drawing } from './Drawing';
+import { BlockContentRef } from './BlockContentRef';
 
 export type SupportedBlock =
     | DocumentBlockParagraph
@@ -64,7 +66,8 @@ export type SupportedBlock =
     | DocumentBlockMath
     | DocumentBlockFile
     | DocumentBlockDivider
-    | DocumentBlockDrawing;
+    | DocumentBlockDrawing
+    | DocumentBlockContentRef;
 
 export type AncestorBlock = SupportedBlock | DocumentBlockTabsItem;
 
@@ -118,6 +121,8 @@ export function Block<T extends SupportedBlock>(props: BlockProps<T>) {
             return <Divider {...props} {...contextProps} block={block} />;
         case 'drawing':
             return <Drawing {...props} {...contextProps} block={block} />;
+        case 'content-ref':
+            return <BlockContentRef {...props} {...contextProps} block={block} />;
         default:
             assertNever(block);
     }

src/components/DocumentView/BlockContentRef.tsx

@@ -0,0 +1,41 @@
+import { resolveContentRef } from '@/lib/references';
+import { DocumentBlockContentRef } from '@gitbook/api';
+import { BlockProps } from './Block';
+import { tcls } from '@/lib/tailwind';
+import IconFile from '@geist-ui/icons/file';
+
+export async function BlockContentRef(props: BlockProps<DocumentBlockContentRef>) {
+    const { block, context, style } = props;
+
+    const resolved = await resolveContentRef(block.data.ref, context);
+    if (!resolved) {
+        return null;
+    }
+
+    return (
+        <a
+            href={resolved.href}
+            className={tcls(
+                'flex',
+                'flex-row',
+                'items-center',
+                'rounded',
+                'border',
+                'border-slate-200',
+                'hover:border-slate-300',
+                'px-5',
+                'py-2',
+                'text-slate-500',
+                'hover:text-slate-700',
+                style,
+            )}
+        >
+            <div className={tcls('mr-5')}>
+                <IconFile className={tcls('w-6', 'h-6')} />
+            </div>
+            <div>
+                <div className={tcls('text-base')}>{resolved.text}</div>
+            </div>
+        </a>
+    );
+}

src/components/DocumentView/Inlines.tsx

@@ -3,7 +3,9 @@ import { Inline } from './Inline';
 import { DocumentContextProps } from './DocumentView';
 import { DocumentInlinesRich } from '@gitbook/api';
 
-export function Inlines<T extends DocumentInlinesRich>(props: DocumentContextProps & { nodes: T[] }) {
+export function Inlines<T extends DocumentInlinesRich>(
+    props: DocumentContextProps & { nodes: T[] },
+) {
     const { nodes, ...contextProps } = props;
 
     return (