From 628c77068aa787ad41de055f213f5bfe97ea591f Mon Sep 17 00:00:00 2001
From: Nolann Biron <biron.nolann@gmail.com>
Date: Wed, 28 Oct 2026 23:47:36 +0100
Subject: [PATCH] Render soft line breaks in paragraphs with buttons
 (RND-12359)

---
 packages/gitbook/src/components/DocumentView/Text.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/gitbook/src/components/DocumentView/Text.tsx b/packages/gitbook/src/components/DocumentView/Text.tsx
index f70a69782..8b2669bcb 100644
--- a/packages/gitbook/src/components/DocumentView/Text.tsx
+++ b/packages/gitbook/src/components/DocumentView/Text.tsx
@@ -38,12 +38,21 @@ export function Text(props: { text: DocumentText }) {
                                 {children}
                             </Mark>
                         );
-                    }, leaf.text)}
+                    }, withSoftBreaks(leaf.text))}
             </React.Fragment>
         );
     });
 }
 
+// Paragraphs with buttons are flex containers, where a `\n` alone can't move the next items to a new line.
+function withSoftBreaks(text: string): React.ReactNode {
+    return text
+        .split('\n')
+        .flatMap((line, index) =>
+            index === 0 ? line : ['\n', <span key={index} className="basis-full" />, line]
+        );
+}
+
 const MARK_STYLES = {
     bold: Bold,
     italic: Italic,