fix(markdown): fix line breaks

fixes #214

src/components/markdown/Markdown.module.scss

@@ -52,6 +52,17 @@
         margin: 0;
     }
 
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        &:not(:first-child) {
+            margin-top: 12px;
+        }
+    }
+
     ul,
     ol {
         list-style-position: inside;

src/components/markdown/Renderer.tsx

@@ -81,10 +81,40 @@ declare global {
     }
 }
 
+// Include emojis.
 md.renderer.rules.emoji = function (token, idx) {
     return generateEmoji(token[idx].content);
 };
 
+// Force line breaks.
+// https://github.com/markdown-it/markdown-it/issues/211#issuecomment-508380611
+const defaultParagraphRenderer =
+    md.renderer.rules.paragraph_open ||
+    ((tokens, idx, options, env, self) =>
+        self.renderToken(tokens, idx, options));
+
+md.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);
+};
+
 const RE_TWEMOJI = /:(\w+):/g;
 
 // ! FIXME: Move to library