fix: editor eats up new line breaks

src/components/Editor/index.tsx

@@ -1,15 +1,12 @@
-import MarkdownIt from 'markdown-it';
 import ReactMdEditor from 'react-markdown-editor-lite';
 import 'react-markdown-editor-lite/lib/index.css';
 
 import { ImageProvider, compressImage } from 'core/api/img';
+import { mdParser } from './mdParser';
 
-// Initialize a markdown parser
-const mdParser = new MarkdownIt();
 const api = new ImageProvider();
 
 export function MdEditor(Props) {
-
   async function onImageUpload(file) {
     const imageFile = await compressImage(file);
     const formData = new FormData();

src/components/Editor/mdParser.ts

@@ -0,0 +1,35 @@
+import MarkdownIt from 'markdown-it';
+
+// Initialize a markdown parser
+export const mdParser = new MarkdownIt();
+
+// save multiple breaks, see: https://github.com/markdown-it/markdown-it/issues/211#issuecomment-508380611
+const defaultParagraphRenderer =
+  mdParser.renderer.rules.paragraph_open ||
+  ((tokens, idx, options, env, self) => self.renderToken(tokens, idx, options));
+mdParser.renderer.rules.paragraph_open = function (
+  tokens,
+  idx,
+  options,
+  env,
+  self,
+) {
+  let result = '';
+  if (idx > 1) {
+    const inline = tokens[idx - 2];
+    const paragraph = tokens[idx];
+    if (
+      inline.type === 'inline' &&
+      inline.map &&
+      inline.map[1] &&
+      paragraph.map &&
+      paragraph.map[0]
+    ) {
+      const diff = paragraph.map[0] - inline.map[1];
+      if (diff > 0) {
+        result = '<br>'.repeat(diff);
+      }
+    }
+  }
+  return result + defaultParagraphRenderer(tokens, idx, options, env, self);
+};

src/pages/post/[publicKey]/PostContent/index.tsx

@@ -16,7 +16,6 @@ const PostContent = ({
   t,
 }) => {
   const myPublicKey = useReadonlyMyPublicKey();
-
   return (
     <div className={styles.postContent}>
       <div className={styles.postHeader}>
@@ -86,7 +85,7 @@ const PostContent = ({
             ),
           }}
         >
-          {content ?? ''}
+          {content ? content.replace(/\n\n/gi, "&nbsp; \n\n") : ''}
         </ReactMarkdown>
       </div>