From 38f60f2633ff8471f4e828dcd9039a4d58b474bc Mon Sep 17 00:00:00 2001
From: "Nolann B." <100787331+nolannbiron@users.noreply.github.com>
Date: Thu, 29 Oct 2026 08:56:09 +0100
Subject: [PATCH] Render soft line breaks in paragraphs with buttons
 (RND-12359) (#4724)

---
 .changeset/soft-break-after-button.md                 |  5 +++++
 packages/gitbook/src/components/DocumentView/Text.tsx | 11 ++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/soft-break-after-button.md

diff --git a/.changeset/soft-break-after-button.md b/.changeset/soft-break-after-button.md
new file mode 100644
index 000000000..33fa72012
--- /dev/null
+++ b/.changeset/soft-break-after-button.md
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Render soft line breaks in paragraphs that contain buttons.
diff --git a/packages/gitbook/src/components/DocumentView/Text.tsx b/packages/gitbook/src/components/DocumentView/Text.tsx
index f70a69782..4685b5f6e 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 {
+    const lines = text.split('\n');
+    // Keep `\n` in the same text node as a preceding `\r`: split apart, the HTML parser reads the lone `\r` as an extra line.
+    return lines.flatMap((line, index) =>
+        index < lines.length - 1 ? [`${line}\n`, <span key={index} className="basis-full" />] : line
+    );
+}
+
 const MARK_STYLES = {
     bold: Bold,
     italic: Italic,