How to preserve empty lines?

[francisashley]

Given the following input

# Document Title

## Section One

Content for the first section.

## Section Two

Content for the second section.

I would like to preserve the empty lines.

Currently it appears that the empty lines are being removed.

I tried convertign all the empty lines to <br/> tags but it seams that html is not being interpreted.

A similar thread suggests upgrading to 7.7 but I'm on 7.15..

Any idea how to preserve empty lines?

Thanks

[francisashley]

I have hacked together a rough solution

<script setup lang="ts">
import { Crepe } from '@milkdown/crepe'
import { Milkdown, useEditor } from '@milkdown/vue'
import '@milkdown/crepe/theme/common/style.css'
import '@milkdown/crepe/theme/nord-dark.css'

const props = defineProps<{
  defaultValue?: string
}>()

function isInCodeBlock(lineIndex: number, lines: string[]): boolean {
  let inCodeBlock = false

  for (let i = 0; i <= lineIndex; i++) {
    if (lines[i].startsWith('```')) {
      inCodeBlock = !inCodeBlock
    }
  }

  return inCodeBlock
}

function preprocessMarkdown(markdown: string): string {
  return markdown
    .split('\n')
    .reduce((result: string[], row, index, lines) => {
      const inCodeBlock = isInCodeBlock(index, lines)
      const isEmptyLine = row.trim() === ''
      const alreadyHasBr = row.includes('<br')
      const previousLineHasBr = index > 0 && lines[index - 1].includes('<br')
      const nextLineHasBr = index < lines.length - 1 && lines[index + 1].includes('<br')

      if (isEmptyLine && !inCodeBlock && !alreadyHasBr && !previousLineHasBr && !nextLineHasBr) {
        result.push('\n<br/>\n')
      } else {
        result.push(row)
      }

      return result
    }, [])
    .join('\n')
}

useEditor((root) => {
  const preparedDefaultValue = props.defaultValue ? preprocessMarkdown(props.defaultValue) : undefined

  const crepe = new Crepe({
    root,
    defaultValue: preparedDefaultValue,
  })

  crepe.on((listener) => {
    listener.markdownUpdated(() => {
      console.log('Markdown updated:', crepe.getMarkdown())
    })
  })

  return crepe
})
</script>