I can't get new lines or hardbreaks to save on getMarkdown

[jfrader]

I'm using <EditorComponent /> inside <Remirror /> and it doesn't add the line breaks. Even if I add 10 line breaks between paragraphs, no matter I have the HardBreakExtension and no matter I press shift + Enter, the line breaks are shown in the editor but not saved to the document.

Im using getMarkdown helper for the onChange event and the remirror state context seems to be ok, it has the empty paragraphs but then getMarkdown doesn't return the new lines

import {
  Box,
  Divider,
  Image,
  ListItem,
  ListProps,
  OrderedList,
  UnorderedList,
} from '@chakra-ui/react'
import { useDebouncedCallback } from '@react-hookz/web'
import {
  Callout,
  CodeBlock,
  createIFrameHandler,
  createLinkHandler,
  Doc,
  EditorComponent,
  Heading,
  MarkMap,
  NodeViewComponentProps,
  Remirror,
  RemirrorRenderer,
  TextHandler,
  ThemeProvider,
  useHelpers,
  useRemirror,
  useRemirrorContext,
  WysiwygToolbar,
} from '@remirror/react'
import { AllStyledComponent } from '@remirror/styles/emotion'
import { ForwardedRef, PropsWithChildren, useCallback } from 'react'
import { Control, useController } from 'react-hook-form'
import {
  ExtensionPriority,
  getRemirrorJSON,
  InvalidContentHandler,
} from 'remirror'
import {
  BlockquoteExtension,
  BoldExtension,
  BulletListExtension,
  CodeExtension,
  HardBreakExtension,
  HeadingExtension,
  IframeExtension,
  ImageExtension,
  ItalicExtension,
  LinkExtension,
  MarkdownExtension,
  OrderedListExtension,
  PlaceholderExtension,
  TableExtension,
  TextExtension,
  TrailingNodeExtension,
  UnderlineExtension,
} from 'remirror/extensions'
import TurndownService from 'turndown'

import { remirrorTheme } from '../../config'
import { useSignedUpload } from '../../hooks'

const turndownService = new TurndownService()
turndownService.keep(['iframe'])

interface Props {
  preview?: boolean
  content?: string
  placeholder?: string
  initialContent?: () => string
  initialContentReady?: boolean
  name?: string
  control?: Control<any, any>
}

export const MarkdownField = ({
  preview,
  content,
  placeholder,
  initialContent,
  initialContentReady = true,
  name,
  control,
}: Props) => {
  const onError: InvalidContentHandler = useCallback(
    ({ json, invalidContent, transformers }) => {
      // Automatically remove all invalid nodes and marks.
      return transformers.remove(json, invalidContent)
    },
    [],
  )

  const { uploadFile } = useSignedUpload()

  const extensions = useCallback(
    () => [
      new PlaceholderExtension({ placeholder }),
      new LinkExtension({
        autoLink: true,
        defaultTarget: '_blank',
        extraAttributes: {
          rel: 'noopener noreferrer',
        },
      }),
      new MarkdownExtension({
        copyAsMarkdown: true,
        htmlToMarkdown: (html) => turndownService.turndown(html),
      }),
      new BoldExtension(),
      new UnderlineExtension(),
      new ItalicExtension(),
      new HeadingExtension(),
      new BlockquoteExtension(),
      new OrderedListExtension(),
      new CodeExtension(),
      new IframeExtension(),
      new TableExtension(),
      new TrailingNodeExtension(),
      new BulletListExtension(),
      new TextExtension(),
      new ImageExtension({
        uploadHandler(files) {
          return files.map(
            (file) => () =>
              uploadFile(file.file).then((data) => ({
                src: data.src,
                fileName: data.filename,
              })),
          )
        },
        enableResizing: false,
      }),
      new HardBreakExtension({ priority: ExtensionPriority.High }),
    ],
    [placeholder, uploadFile],
  )

  const { manager } = useRemirror({
    extensions,
    stringHandler: 'markdown',
    onError,
    react: {
      nodeViewComponents: {
        image: imageHandler,
        bulletList: ({ forwardRef }: { forwardRef: ForwardedRef<any> }) => (
          <Box pl={5} ref={forwardRef} />
        ),
        orderedList: ({ forwardRef }: { forwardRef: ForwardedRef<any> }) => (
          <Box pl={5} ref={forwardRef} />
        ),
      },
    },
  })

  if (preview) {
    return (
      <RemirrorStyleProvider>
        <RemirrorRenderer
          typeMap={typeMap}
          markMap={markMap}
          json={getRemirrorJSON(
            manager.createState({
              content,
              stringHandler: 'markdown',
            }),
          )}
        />
      </RemirrorStyleProvider>
    )
  }

  if (!initialContentReady) {
    return null
  }

  return (
    <RemirrorStyleProvider>
      <Remirror autoFocus manager={manager} initialContent={initialContent?.()}>
        <WysiwygToolbar />
        <EditorComponent />
        <SaveModule name={name} control={control} />
      </Remirror>
    </RemirrorStyleProvider>
  )
}

const RemirrorStyleProvider = ({ children }: PropsWithChildren) => {
  return (
    <Box width="100%">
      <AllStyledComponent theme={remirrorTheme}>
        <ThemeProvider theme={remirrorTheme}>{children}</ThemeProvider>
      </AllStyledComponent>
    </Box>
  )
}

const imageHandler = ({
  node: {
    attrs: { src, alt },
  },
}: NodeViewComponentProps) => {
  return <Image my={4} borderRadius="8px" src={src} alt={alt} />
}

const unorderedListHandler = ({ children }: ListProps) => {
  return <UnorderedList>{children}</UnorderedList>
}

const listItemHandler = ({ children }: ListProps) => {
  return <ListItem>{children}</ListItem>
}

const typeMap = {
  blockquote: 'blockquote',
  bulletList: unorderedListHandler,
  callout: Callout,
  codeBlock: CodeBlock,
  doc: Doc,
  hardBreak: 'br',
  heading: Heading,
  horizontalRule: Divider,
  iframe: createIFrameHandler(),
  image: imageHandler,
  listItem: listItemHandler,
  paragraph: 'p',
  orderedList: OrderedList,
  text: TextHandler,
} satisfies MarkMap

const markMap = {
  italic: 'em',
  bold: 'strong',
  code: 'code',
  link: createLinkHandler({ target: '_blank' }),
  underline: 'u',
} satisfies MarkMap

function SaveModule(props: { control?: Control; name?: string }) {
  const {
    field: { onChange, value },
  } = useController({
    control: props.control,
    name: props.name ?? 'content',
  })

  const { getMarkdown } = useHelpers()

  const changeCallback = useDebouncedCallback(
    (ctx) => {
      console.log(ctx.state)
      onChange(getMarkdown(ctx.state))
    },
    [],
    500,
  )

  useRemirrorContext(changeCallback)

  return <></>
}

[brycefranzen]

Since   is a valid character in markdown you can preseve new lines like so:

new MarkdownExtension({
    htmlToMarkdown: (html: string) => html.replace(/<p><\/p>/g, '<p>&nbsp;</p>'),
  }),

This makes it so that prior to converting the html from the editor to markdown, you replace all empty paragraphs with ones that have an empty space in them. Now they'll be included in the markdown and blank lines will be preserved :)

But then you'll need to use your own HTML to markdown method to pass that HTML string into so you can get markdown back.