Skip to content

Commit 67d6aae

Browse files
authored
fix: preserve spacing for loose lists in Prose component (#1025)
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
1 parent ef32ada commit 67d6aae

2 files changed

Lines changed: 15 additions & 1 deletion

File tree

src/prose/prose-example.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,20 @@ A second paragraph now. One that contains [a link to Doist.com](https://doist.co
1111
formatting examples, such as **bold text**, _italic text_, ~~strikethrough text~~ and \`monospace\`.
1212
These can also be combined, like [using _italics_, \`monospace\`, or _\`both\`_ within a link](https://en.wikipedia.org/wiki/Typography).
1313
14-
Now let’s continue with a list:
14+
Now let’s continue with a tight list (no blank lines between items):
1515
1616
- this one
1717
- that one
1818
- the other one
1919
20+
And a loose list (blank lines between items):
21+
22+
- first item
23+
24+
- second item
25+
26+
- third item
27+
2028
And a blockquote:
2129
2230
> Blockquotes are indented and have a border on the left. The text color is slightly dimmed.

src/prose/prose.module.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,12 @@
133133
margin-top: calc(0.5 * var(--reactist-prose-space-1));
134134
}
135135

136+
/* Loose lists (blank lines between items) produce <p> inside <li>. Give them paragraph-level
137+
spacing so the visual gap the user intended is preserved. */
138+
.prose li:has(> p) + li {
139+
margin-top: var(--reactist-prose-space-2);
140+
}
141+
136142
.prose ul ul,
137143
.prose ul ol,
138144
.prose ol ol,

0 commit comments

Comments
 (0)