fix(web): Single linebreaks are lost when viewing textnote card. Fixes …

…hoarder-app#549 (hoarder-app#551)

added remarkBreaks plugin to properly handle single newlines

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 }) {

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",