feat(note-block): note block preview newlines (#3127)

* feat(note-block): add single newline support in preview

Add remark-breaks plugin to the note block markdown renderer to convert
single newlines into line breaks. This fixes the issue where users had
to use double newlines (\n\n) to create visible line breaks in the
note block preview.

Co-authored-by: Emir Karabeg <emir-karabeg@users.noreply.github.com>

* Revert "feat(note-block): add single newline support in preview"

This reverts commit 049b425.

* feat(note-block): add single newline support in preview

Add a preprocessor function that converts single newlines to markdown
hard breaks (two trailing spaces + newline) before rendering. This
ensures that when users press Enter in the note block editor, the
line break shows up in the preview.

The function preserves:
- Double newlines (paragraph breaks)
- Code block formatting (fenced and inline)

Co-authored-by: Emir Karabeg <emir-karabeg@users.noreply.github.com>

* refactor(note-block): simplify comments

Co-authored-by: Emir Karabeg <emir-karabeg@users.noreply.github.com>

* added remark-breaks to allow single new line

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Emir Karabeg <emir-karabeg@users.noreply.github.com>
Co-authored-by: waleed <walif6@gmail.com>

Author: 3 people

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx

@@ -1,6 +1,7 @@
 import { memo, useCallback, useMemo } from 'react'
 import ReactMarkdown from 'react-markdown'
 import type { NodeProps } from 'reactflow'
+import remarkBreaks from 'remark-breaks'
 import remarkGfm from 'remark-gfm'
 import { cn } from '@/lib/core/utils/cn'
 import { BLOCK_DIMENSIONS } from '@/lib/workflows/blocks/block-dimensions'
@@ -305,7 +306,7 @@ function getEmbedInfo(url: string): EmbedInfo | null {
 const NoteMarkdown = memo(function NoteMarkdown({ content }: { content: string }) {
   return (
     <ReactMarkdown
-      remarkPlugins={[remarkGfm]}
+      remarkPlugins={[remarkGfm, remarkBreaks]}
       components={{
         p: ({ children }: any) => (
           <p className='mb-1 break-words text-[var(--text-primary)] text-sm leading-[1.25rem] last:mb-0'>

apps/sim/package.json

@@ -148,6 +148,7 @@
     "redis": "5.10.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
+    "remark-breaks": "^4.0.0",
     "remark-gfm": "4.0.1",
     "resend": "^4.1.2",
     "rss-parser": "3.13.0",