fix: preserve empty blockquote lines on markdown round-trips

Fixes #920

Author: petyosi

src/examples/bug-920.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { MDXEditor, MDXEditorMethods, quotePlugin } from '..'
+
+const fixture = `> one
+> two
+>
+> three`
+
+export function RoundTripBlockquoteEmptyLine() {
+  const ref = React.useRef<MDXEditorMethods>(null)
+  const [markdown, setMarkdown] = React.useState(fixture)
+  const [lastReloadedMarkdown, setLastReloadedMarkdown] = React.useState(fixture)
+
+  return (
+    <div style={{ display: 'grid', gap: 16 }}>
+      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+        <button
+          onClick={() => {
+            setMarkdown(fixture)
+            setLastReloadedMarkdown(fixture)
+            ref.current?.setMarkdown(fixture)
+          }}
+        >
+          Reset fixture
+        </button>
+        <button
+          onClick={() => {
+            const nextMarkdown = ref.current?.getMarkdown() ?? ''
+            setLastReloadedMarkdown(nextMarkdown)
+            ref.current?.setMarkdown(nextMarkdown)
+          }}
+        >
+          Reload exported markdown
+        </button>
+      </div>
+
+      <MDXEditor ref={ref} markdown={markdown} onChange={setMarkdown} plugins={[quotePlugin()]} />
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
+        <label style={{ display: 'grid', gap: 8 }}>
+          <span>Current markdown</span>
+          <textarea readOnly value={markdown} rows={6} style={{ fontFamily: 'monospace', width: '100%' }} />
+        </label>
+
+        <label style={{ display: 'grid', gap: 8 }}>
+          <span>Last reloaded markdown</span>
+          <textarea readOnly value={lastReloadedMarkdown} rows={6} style={{ fontFamily: 'monospace', width: '100%' }} />
+        </label>
+      </div>
+    </div>
+  )
+}

src/plugins/core/MdastParagraphVisitor.ts

@@ -2,7 +2,7 @@ import { $createParagraphNode } from 'lexical'
 import * as Mdast from 'mdast'
 import { MdastImportVisitor } from '../../importMarkdownToLexical'
 
-const lexicalTypesThatShouldSkipParagraphs = ['listitem', 'quote', 'admonition']
+const lexicalTypesThatShouldSkipParagraphs = ['listitem', 'admonition']
 
 export const MdastParagraphVisitor: MdastImportVisitor<Mdast.Paragraph> = {
   testNode: 'paragraph',

src/plugins/quote/LexicalQuoteVisitor.ts

@@ -4,9 +4,7 @@ import { LexicalExportVisitor } from '../../exportMarkdownFromLexical'
 
 export const LexicalQuoteVisitor: LexicalExportVisitor<QuoteNode, Mdast.Blockquote> = {
   testLexicalNode: $isQuoteNode,
-  visitLexicalNode: ({ lexicalNode, mdastParent, actions }) => {
-    const paragraph: Mdast.Paragraph = { type: 'paragraph', children: [] }
-    actions.appendToParent(mdastParent, { type: 'blockquote', children: [paragraph] })
-    actions.visitChildren(lexicalNode, paragraph)
+  visitLexicalNode: ({ actions }) => {
+    actions.addAndStepInto('blockquote')
   }
 }

src/test/core.test.tsx

@@ -2,6 +2,20 @@ import React from 'react'
 import { describe, expect, it } from 'vitest'
 import { MDXEditor, MDXEditorMethods } from '../'
 import { render } from '@testing-library/react'
+import { $getRoot, createEditor, ParagraphNode, TextNode } from 'lexical'
+import { QuoteNode } from '@lexical/rich-text'
+import { importMarkdownToLexical } from '../importMarkdownToLexical'
+import { exportMarkdownFromLexical } from '../exportMarkdownFromLexical'
+import { MdastRootVisitor } from '../plugins/core/MdastRootVisitor'
+import { MdastParagraphVisitor } from '../plugins/core/MdastParagraphVisitor'
+import { MdastTextVisitor } from '../plugins/core/MdastTextVisitor'
+import { MdastBreakVisitor } from '../plugins/core/MdastBreakVisitor'
+import { LexicalRootVisitor } from '../plugins/core/LexicalRootVisitor'
+import { LexicalParagraphVisitor } from '../plugins/core/LexicalParagraphVisitor'
+import { LexicalTextVisitor } from '../plugins/core/LexicalTextVisitor'
+import { LexicalLinebreakVisitor } from '../plugins/core/LexicalLinebreakVisitor'
+import { MdastBlockQuoteVisitor } from '../plugins/quote/MdastBlockQuoteVisitor'
+import { LexicalQuoteVisitor } from '../plugins/quote/LexicalQuoteVisitor'
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 ;(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true
@@ -34,6 +48,48 @@ describe('markdown import export', () => {
     testIdenticalMarkdown(`Hello\n\nWorld`)
   })
 
+  it('preserves empty lines inside blockquotes across lexical markdown round-trips', () => {
+    const editor = createEditor({
+      namespace: 'test-editor',
+      nodes: [ParagraphNode, TextNode, QuoteNode],
+      onError(error) {
+        throw error
+      }
+    })
+
+    let exportedMarkdown = ''
+
+    editor.update(() => {
+      importMarkdownToLexical({
+        root: $getRoot(),
+        markdown: `> one
+> two
+>
+> three`,
+        visitors: [MdastRootVisitor, MdastParagraphVisitor, MdastTextVisitor, MdastBreakVisitor, MdastBlockQuoteVisitor] as any,
+        syntaxExtensions: [],
+        mdastExtensions: [],
+        jsxComponentDescriptors: [],
+        directiveDescriptors: [],
+        codeBlockEditorDescriptors: []
+      })
+
+      exportedMarkdown = exportMarkdownFromLexical({
+        root: $getRoot(),
+        visitors: [LexicalRootVisitor, LexicalParagraphVisitor, LexicalTextVisitor, LexicalLinebreakVisitor, LexicalQuoteVisitor] as any,
+        toMarkdownExtensions: [],
+        toMarkdownOptions: {},
+        jsxComponentDescriptors: [],
+        jsxIsAvailable: false
+      }).trim()
+    })
+
+    expect(exportedMarkdown).toEqual(`> one
+> two
+>
+> three`)
+  })
+
   it('works with italics', () => {
     testIdenticalMarkdown(`*Hello* World`)
   })