From 250e77d18b0f65c91ede6ab9b7f5ccb3d9650eb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Berg=C3=A9?= <berge.greg@gmail.com>
Date: Thu, 3 Oct 2024 10:30:21 +0200
Subject: [PATCH] Fix synced blocks display (#2508)

---
 README.md                                     |  7 ++-
 .../DocumentView/BlockSyncedBlock.tsx         |  5 +-
 .../src/components/DocumentView/Blocks.tsx    | 56 ++++++++++++-------
 3 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/README.md b/README.md
index ce931fdbb..0580fc083 100644
--- a/README.md
+++ b/README.md
@@ -120,24 +120,25 @@ If you plan to distribute the code, you must make the source code public to comp
 See `LICENSE` for more information.
 
 ## Badges
+
 <p align="left">
   <a href="https://gitbook.com"><img src="https://img.shields.io/static/v1?message=Documented%20on%20GitBook&logo=gitbook&logoColor=ffffff&label=%20&labelColor=5c5c5c&color=3F89A1"></a>
   <a href="https://gitbook.com"><img src="https://img.shields.io/static/v1?message=Documented%20on%20GitBook&logo=gitbook&logoColor=ffffff&label=%20&labelColor=5c5c5c&color=F4E28D"></a>
   <a href="https://gitbook.com"><img src="https://img.shields.io/static/v1?message=Documented%20on%20GitBook&logo=gitbook&logoColor=ffffff&label=%20&labelColor=5c5c5c&color=FDA599"></a>
 </p>
 
-
 ```md
 [![GitBook](https://img.shields.io/static/v1?message=Documented%20on%20GitBook&logo=gitbook&logoColor=ffffff&label=%20&labelColor=5c5c5c&color=3F89A1)](https://gitbook.com/)
 ```
 
 ```html
 <a href="https://gitbook.com">
-  <img src="https://img.shields.io/static/v1?message=Documented%20on%20GitBook&logo=gitbook&logoColor=ffffff&label=%20&labelColor=5c5c5c&color=3F89A1">
+    <img
+        src="https://img.shields.io/static/v1?message=Documented%20on%20GitBook&logo=gitbook&logoColor=ffffff&label=%20&labelColor=5c5c5c&color=3F89A1"
+    />
 </a>
 ```
 
-
 ## Acknowledgements
 
 GitBook wouldn't be possible without these projects:
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<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}
         />
     );
 }
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<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>
+        </>
     );
 }