Closed punithbm closed 2 years ago
@punithbm This is a feature of GitHub Flavored Markdown Spec.
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
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?
@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"));
Thanks a lot @jaywcjlove
@punithbm What was your solution here? From what I can tell, the rehypeRewrite
node won't tell you if the user is pressing "enter"
Adding style={{ whiteSpace: 'pre-wrap' }}
works.
<MDEditor
value={value}
onChange={setValue}
style={{ whiteSpace: 'pre-wrap' }}
/>
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