From 6977ba76e1454c8fbf8740b8eab2ea49651375ed Mon Sep 17 00:00:00 2001
From: kamtschatka <simon.schatka@gmx.at>
Date: Sat, 19 Oct 2024 15:15:59 +0200
Subject: [PATCH] fix(web): Single linebreaks are lost when viewing textnote
 card. Fixes #549 (#551)

added remarkBreaks plugin to properly handle single newlines
---
 apps/web/components/ui/markdown-component.tsx |  3 ++-
 apps/web/package.json                         |  1 +
 pnpm-lock.yaml                                | 22 +++++++++++++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/apps/web/components/ui/markdown-component.tsx b/apps/web/components/ui/markdown-component.tsx
index d567ddb3..d3c832ac 100644
--- a/apps/web/components/ui/markdown-component.tsx
+++ b/apps/web/components/ui/markdown-component.tsx
@@ -4,6 +4,7 @@ import { cn } from "@/lib/utils";
 import Markdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { dracula } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import remarkBreaks from "remark-breaks";
 import remarkGfm from "remark-gfm";
 
 function PreWithCopyBtn({ className, ...props }: React.ComponentProps<"pre">) {
@@ -28,7 +29,7 @@ export function MarkdownComponent({
 }) {
   return (
     <Markdown
-      remarkPlugins={[remarkGfm]}
+      remarkPlugins={[remarkGfm, remarkBreaks]}
       className="prose dark:prose-invert"
       components={{
         pre({ ...props }) {
diff --git a/apps/web/package.json b/apps/web/package.json
index 0d967e8d..e6691563 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -66,6 +66,7 @@
     "react-masonry-css": "^1.0.16",
     "react-select": "^5.8.0",
     "react-syntax-highlighter": "^15.5.0",
+    "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.0",
     "sharp": "^0.33.3",
     "superjson": "^2.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 17c46457..1d26e527 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -610,6 +610,9 @@ importers:
       react-syntax-highlighter:
         specifier: ^15.5.0
         version: 15.5.0(react@18.2.0)
+      remark-breaks:
+        specifier: ^4.0.0
+        version: 4.0.0
       remark-gfm:
         specifier: ^4.0.0
         version: 4.0.0
@@ -8672,6 +8675,9 @@ packages:
   mdast-util-mdxjs-esm@2.0.1:
     resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
 
+  mdast-util-newline-to-break@2.0.0:
+    resolution: {integrity: sha512-MbgeFca0hLYIEx/2zGsszCSEJJ1JSCdiY5xQxRcLDDGa8EPvlLPupJ4DSajbMPAnC0je8jfb9TiUATnxxrHUog==}
+
   mdast-util-phrasing@4.1.0:
     resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
 
@@ -10796,6 +10802,9 @@ packages:
     resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
     engines: {node: '>= 0.10'}
 
+  remark-breaks@4.0.0:
+    resolution: {integrity: sha512-IjEjJOkH4FuJvHZVIW0QCDWxcG96kCq7An/KVH2NfJe6rKZU2AsHeB3OEjPNRxi4QC34Xdx7I2KGYn6IpT7gxQ==}
+
   remark-directive@3.0.0:
     resolution: {integrity: sha512-l1UyWJ6Eg1VPU7Hm/9tt0zKtReJQNOA4+iDMAxTyZNWnJnFlbS/7zhiel/rogTLQ2vMYwDzSJa4BiVNqGlqIMA==}
 
@@ -24454,6 +24463,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  mdast-util-newline-to-break@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.3
+      mdast-util-find-and-replace: 3.0.1
+    dev: false
+
   mdast-util-phrasing@4.1.0:
     dependencies:
       '@types/mdast': 4.0.3
@@ -27469,6 +27484,13 @@ snapshots:
   relateurl@0.2.7:
     dev: false
 
+  remark-breaks@4.0.0:
+    dependencies:
+      '@types/mdast': 4.0.3
+      mdast-util-newline-to-break: 2.0.0
+      unified: 11.0.4
+    dev: false
+
   remark-directive@3.0.0:
     dependencies:
       '@types/mdast': 4.0.3