fix(web): Single linebreaks are lost when viewing textnote card. Fixes #549 (#551)

added remarkBreaks plugin to properly handle single newlines

3 files changed, 25 insertions, 1 deletions

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