improvement(condition): added variable and envvar highlighting for condition input

[waleedlatif1]

Summary

added variable and envvar highlighting for condition input, the exact same way we do it in the code subblock and all other subblocks, just using a variant of formatDisplayText since this needs text back and not a react component

Type of Change

• Other: Improvement

Testing

Tested manually.

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			Oct 22, 2025 8:07pm

[greptile-apps]

Greptile Overview

Summary

Added syntax highlighting for variable references (<variable>) and environment variables ({{envVar}}) in the condition input editor. The implementation uses a placeholder replacement pattern similar to code-editor.tsx to prevent Prism from interfering with custom syntax.

Key changes:

• Added shouldHighlightReference() function that validates variable references against accessible block prefixes
• Replaced basic Prism highlighting with custom highlighter that preserves and highlights variables/env vars
• Variables and env vars are displayed in blue (text-blue-500)
• Only highlights valid variable references that pass isLikelyReferenceSegment() and accessibility checks

Technical approach:

1. Replace variables/env vars with temporary placeholders before Prism highlighting
2. Apply JavaScript syntax highlighting via Prism
3. Restore placeholders with custom blue styling

The implementation correctly escapes HTML entities for variable references to prevent XSS issues.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The changes are straightforward UI improvements that add syntax highlighting without modifying any logic. The implementation follows an existing pattern from code-editor.tsx, properly escapes HTML entities, and includes validation checks for variable references. No breaking changes or risky logic modifications.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/condition-input.tsx	5/5	Added syntax highlighting for variables and environment variables in condition input using placeholder replacement pattern. Implementation is safe and follows similar patterns from code-editor.tsx.

Sequence Diagram

sequenceDiagram
    participant User
    participant ConditionInput
    participant Editor
    participant Highlighter
    participant ValidationUtils
    
    User->>ConditionInput: Type code with variables/env vars
    ConditionInput->>Editor: onValueChange
    Editor->>Highlighter: highlight(codeToHighlight)
    
    Highlighter->>Highlighter: Replace {{envVar}} with __ENV_VAR_N__
    Highlighter->>Highlighter: Replace <varRef> with __VAR_REF_N__
    Note over Highlighter: Store originals in placeholders array
    
    Highlighter->>ValidationUtils: shouldHighlightReference(<varRef>)
    ValidationUtils->>ValidationUtils: Check isLikelyReferenceSegment()
    ValidationUtils->>ValidationUtils: Check accessible prefixes
    ValidationUtils-->>Highlighter: true/false
    
    Highlighter->>Highlighter: Apply Prism JavaScript highlighting
    Highlighter->>Highlighter: Restore placeholders with blue styling
    Highlighter-->>Editor: Return highlighted HTML
    Editor-->>User: Display syntax-highlighted code

Loading

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}