From 0bc245b7a9e74684b3ffc1d7c1ce8aa27328c860 Mon Sep 17 00:00:00 2001 From: Emir Karabeg <78010029+emir-karabeg@users.noreply.github.com> Date: Tue, 3 Feb 2026 20:30:39 -0800 Subject: [PATCH] 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 * Revert "feat(note-block): add single newline support in preview" This reverts commit 049b42502ad92b5dc19635a8272987d6dcfbdb2f. * 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 * refactor(note-block): simplify comments Co-authored-by: Emir Karabeg * added remark-breaks to allow single new line --------- Co-authored-by: Cursor Agent Co-authored-by: Emir Karabeg Co-authored-by: waleed --- .../w/[workflowId]/components/note-block/note-block.tsx | 3 ++- apps/sim/package.json | 1 + bun.lock | 5 +++++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx index c5dd3070e..4bfa5776e 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx +++ b/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 ( (

diff --git a/apps/sim/package.json b/apps/sim/package.json index 122dc84d0..6dcc55980 100644 --- a/apps/sim/package.json +++ b/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", diff --git a/bun.lock b/bun.lock index 372d3e829..a4678369b 100644 --- a/bun.lock +++ b/bun.lock @@ -179,6 +179,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", @@ -2615,6 +2616,8 @@ "mdast-util-mdxjs-esm": ["mdast-util-mdxjs-esm@2.0.1", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0" } }, "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg=="], + "mdast-util-newline-to-break": ["mdast-util-newline-to-break@2.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-find-and-replace": "^3.0.0" } }, "sha512-MbgeFca0hLYIEx/2zGsszCSEJJ1JSCdiY5xQxRcLDDGa8EPvlLPupJ4DSajbMPAnC0je8jfb9TiUATnxxrHUog=="], + "mdast-util-phrasing": ["mdast-util-phrasing@4.1.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "unist-util-is": "^6.0.0" } }, "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w=="], "mdast-util-to-hast": ["mdast-util-to-hast@13.2.1", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "@ungap/structured-clone": "^1.0.0", "devlop": "^1.0.0", "micromark-util-sanitize-uri": "^2.0.0", "trim-lines": "^3.0.0", "unist-util-position": "^5.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" } }, "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA=="], @@ -3111,6 +3114,8 @@ "remark": ["remark@15.0.1", "", { "dependencies": { "@types/mdast": "^4.0.0", "remark-parse": "^11.0.0", "remark-stringify": "^11.0.0", "unified": "^11.0.0" } }, "sha512-Eht5w30ruCXgFmxVUSlNWQ9iiimq07URKeFS3hNc8cUWy1llX4KDWfyEDZRycMc+znsN9Ux5/tJ/BFdgdOwA3A=="], + "remark-breaks": ["remark-breaks@4.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-newline-to-break": "^2.0.0", "unified": "^11.0.0" } }, "sha512-IjEjJOkH4FuJvHZVIW0QCDWxcG96kCq7An/KVH2NfJe6rKZU2AsHeB3OEjPNRxi4QC34Xdx7I2KGYn6IpT7gxQ=="], + "remark-gfm": ["remark-gfm@4.0.1", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-gfm": "^3.0.0", "micromark-extension-gfm": "^3.0.0", "remark-parse": "^11.0.0", "remark-stringify": "^11.0.0", "unified": "^11.0.0" } }, "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg=="], "remark-mdx": ["remark-mdx@3.1.1", "", { "dependencies": { "mdast-util-mdx": "^3.0.0", "micromark-extension-mdxjs": "^3.0.0" } }, "sha512-Pjj2IYlUY3+D8x00UJsIOg5BEvfMyeI+2uLPn9VO9Wg4MEtN/VTIq2NEJQfde9PnX15KgtHyl9S0BcTnWrIuWg=="],