feat(notes): add notes

[Sg312]

Summary

Adds notes block as core block.
Supports plain text or markdown (new markdown format, could possibly reuse existing)
No ports, etc
Does not get affected by autolayout

Type of Change

• New feature

Testing

Manual testing

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)

[vercel]

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

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Nov 11, 2025 9:26pm

[greptile-apps]

Greptile Overview

Greptile Summary

This PR adds a notes block feature that allows users to add contextual annotations directly to the workflow canvas. Notes support both plain text and Markdown rendering and are treated as annotation-only blocks that don't participate in workflow execution.

Key Changes:

• Created NoteBlock component with Markdown support via react-markdown and remark-gfm
• Introduced shared useBlockCore hook consolidating common block functionality (state, focus, ring styling)
• Added useBlockDimensions hook for deterministic dimension calculations without ResizeObserver jitter
• Refactored WorkflowBlock to use the new shared hooks, reducing code duplication
• Implemented comprehensive autolayout exclusion for note blocks across all layout algorithms (incremental, targeted, containers)
• Added isAnnotationOnlyBlock() and supportsHandles() utility functions to distinguish note blocks
• Prevented edge connections to/from note blocks in the workflow store
• Fixed React prop naming issues in HumanInTheLoopIcon component

Architecture:
The implementation follows a clean separation where note blocks are "first-class" canvas elements but explicitly excluded from execution flow. The autolayout system consistently filters out note blocks at every level (root, containers, incremental adjustments), ensuring they remain user-positionable while other blocks auto-arrange.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The implementation is well-architected with proper separation of concerns. The refactoring introduces shared hooks that reduce code duplication while maintaining backwards compatibility. All edge cases are handled: note blocks are excluded from autolayout at every level, prevented from having connections, and properly integrated into both the main workflow and preview modes. The code follows existing patterns and is thoroughly consistent across all affected systems.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx	5/5	New note block component with markdown support and proper dimension handling
apps/sim/blocks/blocks/note.ts	5/5	Note block configuration with format and content subblocks, no outputs
apps/sim/executor/consts.ts	5/5	Added note block type constants and helper functions for annotation-only blocks
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-core.ts	5/5	New consolidated hook for shared block functionality across note and workflow blocks
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-dimensions.ts	5/5	New hook for deterministic dimension calculation without ResizeObserver jitter
apps/sim/lib/workflows/autolayout/utils.ts	5/5	Added note block exclusion logic for autolayout with filtering utilities
apps/sim/stores/workflows/workflow/store.ts	5/5	Prevented edge connections to/from annotation-only blocks

Sequence Diagram

sequenceDiagram
participant User
participant Workflow as Workflow Canvas
participant NoteBlock as NoteBlock Component
participant Core as useBlockCore Hook
participant Dims as useBlockDimensions Hook
participant Store as Workflow Store
participant AutoLayout as AutoLayout System
participant Edge as Edge Manager
User->>Workflow: Add note block to canvas
Workflow->>Store: Create note block
Store->>Store: Check isAnnotationOnlyBlock(type)
Note over Store: Block type: 'note'
Workflow->>NoteBlock: Render NoteBlock component
NoteBlock->>Core: useBlockCore({blockId, data})
Core->>Store: Get block state (enabled, active, focus)
Store-->>Core: Return block state
Core-->>NoteBlock: Return state + ring styles
NoteBlock->>Dims: useBlockDimensions({blockId, calculateDimensions})
Dims->>Dims: Calculate height based on content
Note over Dims: Fixed width: 250px<br/>Dynamic height based on isEmpty
Dims->>Store: updateBlockLayoutMetrics(blockId, dimensions)
Store-->>Dims: Dimensions updated
Dims->>Workflow: updateNodeInternals(blockId)
NoteBlock->>NoteBlock: Render markdown or plain text
NoteBlock-->>Workflow: Display note block
User->>Workflow: Trigger autolayout
Workflow->>AutoLayout: applyAutoLayout(blocks, edges)
AutoLayout->>AutoLayout: filterLayoutEligibleBlockIds(blockIds)
AutoLayout->>AutoLayout: shouldSkipAutoLayout(block)
Note over AutoLayout: Note blocks excluded from layout
AutoLayout->>AutoLayout: Layout only non-note blocks
AutoLayout-->>Workflow: Return positioned blocks
User->>Workflow: Attempt to connect edge to note
Workflow->>Edge: addEdge(edge)
Edge->>Store: Check source and target blocks
Edge->>Edge: isAnnotationOnlyBlock(sourceType)?
Edge->>Edge: isAnnotationOnlyBlock(targetType)?
Note over Edge: Connection blocked if note block
Edge-->>Workflow: Edge creation prevented

Loading

[greptile-apps]

Additional Comments (1)

1. apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx, line 3-4 (link)

   syntax: unused imports added to wrong file

_{13 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

_{18 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}