feat: add preserve empty line plugin (#1765)

* feat: add preserve empty line plugin

* [autofix.ci] apply automated fixes

* chore: fix e2e test

* test: add e2e

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: Saul-Mirone

Diff for: e2e/tests/crepe/latex.spec.ts

@@ -27,7 +27,7 @@ test('latex block preview toggle', async ({ page }) => {
 
   await expect(preview).toBeVisible()
   const markdown = await getMarkdown(page)
-  expect(markdown.trim()).toEqual('$$\nE=mc^2\n$$')
+  expect(markdown.trim()).toEqual('$$\nE=mc^2\n$$\n\n<br />')
 
   await codeTools.hover()
   await expect(previewToggleButton).toBeVisible()

Diff for: e2e/tests/data/preserve-empty-line.md

@@ -0,0 +1,9 @@
+123
+
+<br />
+
+456
+
+<br />
+
+789

Diff for: e2e/tests/transform/preserve-empty-line.spec.ts

@@ -0,0 +1,22 @@
+import { expect, test } from '@playwright/test'
+import { focusEditor, getMarkdown, loadFixture, setMarkdown } from '../misc'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/preset-commonmark/')
+})
+
+test('preserve empty line', async ({ page }) => {
+  await focusEditor(page)
+  const markdown = await loadFixture('preserve-empty-line.md')
+  await setMarkdown(page, markdown)
+
+  expect(await page.locator('p').count()).toBe(5)
+  expect(await page.locator('p').nth(0).textContent()).toBe('123')
+  expect(await page.locator('p').nth(1).textContent()).toBe('')
+  expect(await page.locator('p').nth(2).textContent()).toBe('456')
+  expect(await page.locator('p').nth(3).textContent()).toBe('')
+  expect(await page.locator('p').nth(4).textContent()).toBe('789')
+
+  const markdownOutput = await getMarkdown(page)
+  expect(markdownOutput.trim()).toBe(markdown.trim())
+})

Diff for: packages/plugins/preset-commonmark/src/composed/plugins.ts

@@ -9,6 +9,7 @@ import {
   remarkInlineLinkPlugin,
   remarkLineBreak,
   remarkMarker,
+  remarkPreserveEmptyLinePlugin,
   syncHeadingIdPlugin,
   syncListOrderPlugin,
 } from '../plugin'
@@ -26,6 +27,7 @@ export const plugins: MilkdownPlugin[] = [
   remarkLineBreak,
   remarkHtmlTransformer,
   remarkMarker,
+  remarkPreserveEmptyLinePlugin,
 
   syncHeadingIdPlugin,
   syncListOrderPlugin,

Diff for: packages/plugins/preset-commonmark/src/node/paragraph.ts

@@ -2,6 +2,8 @@ import { commandsCtx } from '@milkdown/core'
 import { setBlockType } from '@milkdown/prose/commands'
 import { $command, $nodeAttr, $nodeSchema, $useKeymap } from '@milkdown/utils'
 import { serializeText, withMeta } from '../__internal__'
+import { remarkPreserveEmptyLinePlugin } from '../plugin/remark-preserve-empty-line'
+import type { Ctx } from '@milkdown/ctx'
 
 /// HTML attributes for paragraph node.
 export const paragraphAttr = $nodeAttr('paragraph')
@@ -31,12 +33,30 @@ export const paragraphSchema = $nodeSchema('paragraph', (ctx) => ({
     match: (node) => node.type.name === 'paragraph',
     runner: (state, node) => {
       state.openNode('paragraph')
-      serializeText(state, node)
+      if (
+        (!node.content || node.content.size === 0) &&
+        shouldPreserveEmptyLine(ctx)
+      ) {
+        state.addNode('html', undefined, '<br />')
+      } else {
+        serializeText(state, node)
+      }
       state.closeNode()
     },
   },
 }))
 
+function shouldPreserveEmptyLine(ctx: Ctx) {
+  let shouldPreserveEmptyLine = false
+  try {
+    ctx.get(remarkPreserveEmptyLinePlugin.id)
+    shouldPreserveEmptyLine = true
+  } catch (e) {
+    shouldPreserveEmptyLine = false
+  }
+  return shouldPreserveEmptyLine
+}
+
 withMeta(paragraphSchema.node, {
   displayName: 'NodeSchema<paragraph>',
   group: 'Paragraph',

Diff for: packages/plugins/preset-commonmark/src/plugin/index.ts

@@ -3,6 +3,7 @@ export * from './remark-line-break'
 export * from './remark-inline-link-plugin'
 export * from './remark-html-transformer'
 export * from './remark-marker-plugin'
+export * from './remark-preserve-empty-line'
 
 export * from './inline-nodes-cursor-plugin'
 

Diff for: packages/plugins/preset-commonmark/src/plugin/remark-preserve-empty-line.ts

@@ -0,0 +1,42 @@
+import type { Node } from '@milkdown/transformer'
+import { visit } from 'unist-util-visit'
+import { $remark } from '@milkdown/utils'
+import { withMeta } from '../__internal__'
+
+function visitImage(ast: Node) {
+  return visit(ast, 'paragraph', (node: Node & { children?: Node[] }) => {
+    if (node.children?.length !== 1) return
+    const firstChild = node.children?.[0]
+    if (!firstChild || firstChild.type !== 'html') return
+
+    const { value } = firstChild as Node & {
+      value: string
+    }
+
+    if (!['<br />', '<br>', '<br/>'].includes(value)) {
+      return
+    }
+
+    node.children.splice(0, 1)
+  })
+}
+
+/// @internal
+/// This plugin is used to preserve the empty line.
+/// Markdown will fold the empty line into the previous line by default.
+/// This plugin will preserve the empty line by converting `<br />` to `line-break`.
+/// This plugin should be used with `linebreakSchema` to work.
+export const remarkPreserveEmptyLinePlugin = $remark(
+  'remark-preserve-empty-line',
+  () => () => visitImage
+)
+
+withMeta(remarkPreserveEmptyLinePlugin.plugin, {
+  displayName: 'Remark<remarkPreserveEmptyLine>',
+  group: 'Remark',
+})
+
+withMeta(remarkPreserveEmptyLinePlugin.options, {
+  displayName: 'RemarkConfig<remarkPreserveEmptyLine>',
+  group: 'Remark',
+})