diff --git a/src/prose/prose-example.ts b/src/prose/prose-example.ts index 62ee60df..fcc168d2 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 b6042042..b2cc2fb1 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

inside

  • . 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,