Merge branch 'main' into brett/RND-2311-openapi-enum

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

@@ -4,7 +4,7 @@ import { getSyncedBlockContent } from '@/lib/api';
 import { resolveContentRefWithFiles } from '@/lib/references';
 
 import { BlockProps } from './Block';
-import { Blocks } from './Blocks';
+import { Blocks, UnwrappedBlocks } from './Blocks';
 
 export async function BlockSyncedBlock(props: BlockProps<DocumentBlockSyncedBlock>) {
     const { block, ancestorBlocks, context, style } = props;
@@ -30,7 +30,7 @@ export async function BlockSyncedBlock(props: BlockProps<DocumentBlockSyncedBloc
     }
 
     return (
-        <Blocks
+        <UnwrappedBlocks
             nodes={syncedBlock.document.nodes}
             document={syncedBlock.document}
             ancestorBlocks={[...ancestorBlocks, block]}
@@ -47,7 +47,6 @@ export async function BlockSyncedBlock(props: BlockProps<DocumentBlockSyncedBloc
                     return context.resolveContentRef(ref, options);
                 },
             }}
-            style={style}
         />
     );
 }

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

@@ -5,50 +5,66 @@ import { tcls, ClassValue } from '@/lib/tailwind';
 import { Block } from './Block';
 import { DocumentContextProps } from './DocumentView';
 
-export function Blocks<T extends DocumentBlock, Tag extends React.ElementType = 'div'>(
-    props: DocumentContextProps & {
-        /** Blocks to render */
-        nodes: T[];
-
-        /** Document being rendered */
-        document: JSONDocument;
-
-        /** Ancestors of the blocks */
-        ancestorBlocks: DocumentBlock[];
-
+/**
+ * Renders a list of blocks with a wrapper element.
+ */
+export function Blocks<TBlock extends DocumentBlock, Tag extends React.ElementType = 'div'>(
+    props: UnwrappedBlocksProps<TBlock> & {
         /** HTML tag to use for the wrapper */
         tag?: Tag;
 
         /** Style passed to the wrapper */
         style?: ClassValue;
 
-        /** Style passed to all blocks */
-        blockStyle?: ClassValue;
-
         /** Props to pass to the wrapper element */
         wrapperProps?: React.ComponentProps<Tag>;
     },
 ) {
-    const { nodes, tag: Tag = 'div', style, blockStyle, wrapperProps, ...contextProps } = props;
+    const { tag: Tag = 'div', style, wrapperProps, ...blocksProps } = props;
 
     return (
         <Tag {...wrapperProps} className={tcls(style)}>
-            {nodes.map((node, index) => (
+            <UnwrappedBlocks {...blocksProps} />
+        </Tag>
+    );
+}
+
+type UnwrappedBlocksProps<TBlock extends DocumentBlock> = DocumentContextProps & {
+    /** Blocks to render */
+    nodes: TBlock[];
+
+    /** Document being rendered */
+    document: JSONDocument;
+
+    /** Ancestors of the blocks */
+    ancestorBlocks: DocumentBlock[];
+
+    /** Style passed to all blocks */
+    blockStyle?: ClassValue;
+};
+
+/**
+ * Renders a list of blocks without a wrapper element.
+ */
+export function UnwrappedBlocks<TBlock extends DocumentBlock>(props: UnwrappedBlocksProps<TBlock>) {
+    const { nodes, blockStyle, ...contextProps } = props;
+
+    return (
+        <>
+            {nodes.map((node) => (
                 <Block
                     key={node.key}
                     block={node}
                     style={[
+                        'w-full mx-auto decoration-primary/6',
                         node.data && 'fullWidth' in node.data && node.data.fullWidth
                             ? 'max-w-screen-xl'
                             : 'max-w-3xl',
-                        'w-full',
-                        'mx-auto',
-                        'decoration-primary/6',
                         blockStyle,
                     ]}
                     {...contextProps}
                 />
             ))}
-        </Tag>
+        </>
     );
 }