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}