diff --git a/packages/gitbook/src/components/DocumentView/BlockSyncedBlock.tsx b/packages/gitbook/src/components/DocumentView/BlockSyncedBlock.tsx index 9012d4c06..6789fdd4c 100644 --- a/packages/gitbook/src/components/DocumentView/BlockSyncedBlock.tsx +++ b/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) { const { block, ancestorBlocks, context, style } = props; @@ -30,7 +30,7 @@ export async function BlockSyncedBlock(props: BlockProps ); } diff --git a/packages/gitbook/src/components/DocumentView/Blocks.tsx b/packages/gitbook/src/components/DocumentView/Blocks.tsx index c6c55bc2b..defb40b33 100644 --- a/packages/gitbook/src/components/DocumentView/Blocks.tsx +++ b/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( - 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( + props: UnwrappedBlocksProps & { /** 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; }, ) { - const { nodes, tag: Tag = 'div', style, blockStyle, wrapperProps, ...contextProps } = props; + const { tag: Tag = 'div', style, wrapperProps, ...blocksProps } = props; return ( - {nodes.map((node, index) => ( + + + ); +} + +type UnwrappedBlocksProps = 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(props: UnwrappedBlocksProps) { + const { nodes, blockStyle, ...contextProps } = props; + + return ( + <> + {nodes.map((node) => ( ))} - + ); }