feat(note-block): note block preview newlines

[emir-karabeg]

Summary

Adds the remark-breaks plugin to the note block's markdown renderer, allowing single newlines to render as visible line breaks (<br>) in the preview. This resolves the issue where users previously had to use double newlines (\n\n) to achieve a line break.

Fixes # (issue)

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Other: Improvement

Testing

The change was verified by running lint and type checks.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Screenshots/Videos

---

 

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs	Ready	Preview, Comment	Feb 4, 2026 4:28am

[waleedlatif1]

@cursor review

[greptile-apps]

Greptile Overview

Greptile Summary

This PR replaces a custom regex-based newline preprocessing approach with the standard remark-breaks plugin, enabling single newlines to render as line breaks in note block markdown previews.

Key Changes:

• Imported and added remark-breaks to the remarkPlugins array in NoteMarkdown component
• Added remark-breaks@^4.0.0 dependency to package.json
• Removed the previous custom convertNewlinesToBreaks function that used regex preprocessing

Benefits of this approach:

• AST-based transformation is more reliable than regex string manipulation
• Handles edge cases correctly (code blocks, lists, tables, blockquotes)
• Follows standard markdown plugin patterns
• Eliminates issues raised in previous threads about sentinel collisions and incorrect code block parsing

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The implementation correctly uses the standard remark-breaks plugin instead of custom regex preprocessing, which resolves all the issues from previous implementation attempts. The change is minimal, well-scoped, and follows established markdown plugin patterns.
• No files require special attention

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx	Added remark-breaks plugin to enable single newline rendering as line breaks in markdown preview
apps/sim/package.json	Added remark-breaks@^4.0.0 dependency for markdown newline handling

Sequence Diagram

sequenceDiagram
    participant User
    participant NoteBlock
    participant NoteMarkdown
    participant ReactMarkdown
    participant remarkBreaks
    participant remarkGfm
    participant DOM

    User->>NoteBlock: Views note block
    NoteBlock->>NoteBlock: Extract content from storedValues
    NoteBlock->>NoteMarkdown: Pass content string
    NoteMarkdown->>ReactMarkdown: Initialize with remarkPlugins
    ReactMarkdown->>remarkGfm: Process GitHub Flavored Markdown
    remarkGfm-->>ReactMarkdown: Return transformed AST
    ReactMarkdown->>remarkBreaks: Process single newlines
    remarkBreaks->>remarkBreaks: Convert \n to <br> in AST
    remarkBreaks-->>ReactMarkdown: Return transformed AST
    ReactMarkdown->>ReactMarkdown: Apply custom components
    ReactMarkdown->>DOM: Render markdown with line breaks
    DOM-->>User: Display formatted content

Loading

[greptile-apps]

_{1 file reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

_{1 file reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[waleedlatif1]

@greptile

[greptile-apps]

_{2 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}