From 8b3bceffc403a3966fb9d1abf370c9a66c2d036d Mon Sep 17 00:00:00 2001
From: Craig Carlyle <craigcarlyle@me.com>
Date: Fri, 3 Apr 2026 08:42:47 -0700
Subject: [PATCH] fix: preserve spacing for loose lists in Prose component

Loose lists (bullet lists with blank lines between items) produce <p>
inside <li> per the CommonMark spec. The existing li p:first-child
rule zeroes out the paragraph margin, making loose and tight lists
visually identical. Add a li:has(> p) + li rule that gives loose list
items paragraph-level spacing so the user's intended blank lines are
preserved.

Made-with: Cursor
---
 src/prose/prose-example.ts | 10 +++++++++-
 src/prose/prose.module.css |  6 ++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/prose/prose-example.ts b/src/prose/prose-example.ts
index 62ee60dfe..fcc168d2a 100644
--- a/src/prose/prose-example.ts
+++ b/src/prose/prose-example.ts
@@ -11,12 +11,20 @@ A second paragraph now. One that contains [a link to Doist.com](https://doist.co
 formatting examples, such as **bold text**, _italic text_, ~~strikethrough text~~ and \`monospace\`.
 These can also be combined, like [using _italics_, \`monospace\`, or _\`both\`_ within a link](https://en.wikipedia.org/wiki/Typography).
 
-Now let’s continue with a list:
+Now let’s continue with a tight list (no blank lines between items):
 
 -   this one
 -   that one
 -   the other one
 
+And a loose list (blank lines between items):
+
+-   first item
+
+-   second item
+
+-   third item
+
 And a blockquote:
 
 > Blockquotes are indented and have a border on the left. The text color is slightly dimmed.
diff --git a/src/prose/prose.module.css b/src/prose/prose.module.css
index b6042042f..b2cc2fb13 100644
--- a/src/prose/prose.module.css
+++ b/src/prose/prose.module.css
@@ -133,6 +133,12 @@
     margin-top: calc(0.5 * var(--reactist-prose-space-1));
 }
 
+/* Loose lists (blank lines between items) produce <p> inside <li>. Give them paragraph-level
+   spacing so the visual gap the user intended is preserved. */
+.prose li:has(> p) + li {
+    margin-top: var(--reactist-prose-space-2);
+}
+
 .prose ul ul,
 .prose ul ol,
 .prose ol ol,