Keyboard Enter doesn't take to new line in preview mode

[punithbm]

When I try to press enter to insert a new line under MD editor it doesn't go to a new line in the preview. If the user presses keyboard enter twice then it's taking to a new line. Please find the attached video. Also, let me know if there is any walkaround or any solution to address this.

https://user-images.githubusercontent.com/13044958/163332838-23a05546-68f7-4ccf-b080-d6e642258f35.mp4

[jaywcjlove]

@punithbm This is a feature of GitHub Flavored Markdown Spec.

[jaywcjlove]

If you don't like it, you can use the remark plugins or rehype plugins to change it.

This may require you to write your own plugin by yourself

@punithbm

[punithbm]

Thanks for the response @jaywcjlove

I was trying to use the remark-breaks plugin but getting an error when trying to add editor props previewOptions for remark plugins. Can you suggest how to user remark breaks plugin with the editor?

[jaywcjlove]

@punithbm Example: https://codesandbox.io/embed/uiwjs-react-md-editor-issues-375-8ihvi6?fontsize=14&hidenavigation=1&theme=dark

import React from "react";
import ReactDOM from "react-dom";
import MDEditor from "@uiw/react-md-editor";
import rehypeRewrite from "rehype-rewrite";
// No import is required in the WebPack.
// import "@uiw/react-md-editor/dist/markdown-editor.css";

const mkdStr = `
**Hello world!!!**

header

`;

function App() {
  const [value, setValue] = React.useState(mkdStr);
  return (
    <div className="container">
      <h3>Auto</h3>
      <MDEditor
        height={200}
        value={value}
        onChange={setValue}
        previewOptions={{
          rehypePlugins: [
            [
              rehypeRewrite,
              {
                rewrite: (node, index, parent) => {
                  if (node.type === "text" && node.value === "header") {
                    node.value = "~~~~";
                  }
                }
              }
            ]
          ]
        }}
      />
      <div data-color-mode="light">
        <h3>Light</h3>
        <MDEditor
          height={200}
          value={value}
          onChange={setValue}
          previewOptions={{
            rehypePlugins: [
              [
                rehypeRewrite,
                {
                  rewrite: (node, index, parent) => {
                    if (node.type === "text" && node.value === "header") {
                      node.value = "~~~~";
                    }
                  }
                }
              ]
            ]
          }}
        />
      </div>
      <h3>Auto MDEditor.Markdown</h3>
      <MDEditor.Markdown
        style={{ padding: 15 }}
        source={value}
        linkTarget="_blank"
        rehypePlugins={[
          [
            rehypeRewrite,
            {
              rewrite: (node, index, parent) => {
                if (node.type === "text" && node.value === "header") {
                  node.value = "~~~~";
                }
              }
            }
          ]
        ]}
      />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("container"));

[punithbm]

Thanks a lot @jaywcjlove

[amolpatel]

@punithbm What was your solution here? From what I can tell, the rehypeRewrite node won't tell you if the user is pressing "enter"

[kazumi3858]

Adding style={{ whiteSpace: 'pre-wrap' }} works.

<MDEditor
  value={value}
  onChange={setValue}
  style={{ whiteSpace: 'pre-wrap' }}
/>