diff --git a/packages/koenig-lexical/src/styles/components/kg-prose.css b/packages/koenig-lexical/src/styles/components/kg-prose.css index d183aad1d3..caac9990f0 100644 --- a/packages/koenig-lexical/src/styles/components/kg-prose.css +++ b/packages/koenig-lexical/src/styles/components/kg-prose.css @@ -549,9 +549,16 @@ /* -------------------------------------------------------------------- */ :where( - blockquote p + blockquote > * ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) { - margin: 0; + margin-top: 0; + margin-bottom: 0; + } + + :where( + blockquote > * + * + ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) { + margin-top: 1em; } :where( diff --git a/packages/koenig-lexical/test/e2e/cards/markdown-card.test.js b/packages/koenig-lexical/test/e2e/cards/markdown-card.test.js index ba92bf5304..1a788a5c08 100644 --- a/packages/koenig-lexical/test/e2e/cards/markdown-card.test.js +++ b/packages/koenig-lexical/test/e2e/cards/markdown-card.test.js @@ -73,6 +73,73 @@ test.describe('Markdown card', async () => { `); }); + test('preserves multi-paragraph and nested blockquote spacing in read-only mode', async function () { + await page.evaluate(() => { + const markdown = [ + '> First paragraph', + '>', + '> Second paragraph', + '>', + '> > Nested one', + '> >', + '> > Nested two' + ].join('\n'); + + const serializedState = JSON.stringify({ + root: { + children: [{ + type: 'markdown', + version: 1, + markdown + }], + direction: null, + format: '', + indent: 0, + type: 'root', + version: 1 + } + }); + const editor = window.lexicalEditor; + const editorState = editor.parseEditorState(serializedState); + editor.setEditorState(editorState); + }); + + await assertHTML(page, html` +
+
+
+
+
+
+

First paragraph

+

Second paragraph

+
+

Nested one

+

Nested two

+
+
+
+
+
+
+
+ `); + + const quoteStyles = await page.evaluate(() => { + const card = document.querySelector('[data-kg-card="markdown"]'); + const secondParagraph = card.querySelector('blockquote > p + p'); + const nestedQuote = card.querySelector('blockquote > blockquote'); + + return { + secondParagraphMarginTop: getComputedStyle(secondParagraph).marginTop, + nestedQuoteBorderLeftWidth: getComputedStyle(nestedQuote).borderLeftWidth + }; + }); + + expect(parseFloat(quoteStyles.secondParagraphMarginTop)).toBeGreaterThan(0); + expect(parseFloat(quoteStyles.nestedQuoteBorderLeftWidth)).toBeGreaterThan(0); + }); + test('renders markdown card node', async function () { await focusEditor(page); await page.keyboard.type('/');