feat(files): interactive markdown checkbox toggling in preview

[waleedlatif1]

Summary

• Add interactive checkbox toggling in markdown file preview — click to check/uncheck without editing raw text
• Renders task list items with proper styling (flex layout, no bullet) and emcn Checkbox component
• Toggling updates raw markdown content and triggers autosave

Type of Change

• New feature

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	Actions	Updated (UTC)
docs	Skipped		Mar 28, 2026 9:15pm

[cursor]

PR Summary

Medium Risk
Medium risk because it introduces interactive editing from the markdown preview via index-based parsing/regex replacement, which could toggle the wrong checkbox or mutate content unexpectedly; it’s gated off during streaming and when editing is disabled.

Overview
Adds interactive task-list checkboxes to the markdown preview: task list items are rendered with the app’s Checkbox component and clicking a checkbox updates the underlying markdown content (and therefore autosave) without switching to raw-text editing.

Preview behavior is adjusted so checkbox interactivity is only enabled when canEdit and not streaming, and streaming previews continue to use the revealed/animated content path.

^{Written by Cursor Bugbot for commit 51163c6. Configure here.}

[greptile-apps]

Greptile Summary

This PR adds interactive markdown checkbox toggling to the file preview panel — users can click checkboxes in the rendered preview to check/uncheck them without touching the raw editor. The changes integrate cleanly with the existing streaming/committed/incoming architecture.

Key changes:

• toggleMarkdownCheckbox in file-viewer.tsx — a pure string-replace utility using the ordered-list-aware regex /^(\\s*(?:[-*+]|\\d+[.)]) +)\\[([ xX])\\]/gm to rewrite the target checkbox at a 0-based index
• handleCheckboxToggle callback — reads from contentRef (always current) and calls handleContentChange only when the content actually changed
• buildMarkdownComponents factory in preview-panel.tsx — creates custom ul/ol/li/input renderers; the input renderer increments a shared checkboxCounterRef so each checkbox gets a stable sequential index
• MarkdownPreview interactive fast-path — when onCheckboxToggle is provided, renders content directly in a single ReactMarkdown call, bypassing the streaming split (safe because onCheckboxToggle is only passed when !isStreaming)
• The Checkbox emcn component is used correctly with size="sm", disabled, checked, and onCheckedChange; all props are valid per the component definition

Confidence Score: 5/5

Safe to merge — all previously reported counter/regex issues are resolved, no new bugs found.

Both previously raised P1 concerns (ordered-list regex gap and counter index drift) have been addressed in follow-up commits. The interactive path correctly short-circuits the streaming reveal logic, contentRef is always up-to-date at toggle time, and the Checkbox component API is used correctly. No remaining P0/P1 issues were found during this review.

No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx	Adds toggleMarkdownCheckbox (with the fixed ordered-list-aware regex) and handleCheckboxToggle callback; correctly gates the prop to canEdit && !isStreaming.
apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx	Introduces buildMarkdownComponents factory with a ref-based counter for zero-indexed checkbox identification; interactive path takes an early return that bypasses streaming logic; uses the emcn Checkbox component with correct props.

Sequence Diagram

sequenceDiagram
    participant U as User
    participant CB as Checkbox (preview-panel)
    participant MP as MarkdownPreview
    participant HCT as handleCheckboxToggle
    participant TMC as toggleMarkdownCheckbox
    participant HCC as handleContentChange

    U->>CB: click checkbox (index N)
    CB->>MP: onCheckedChange(newChecked)
    MP->>HCT: onCheckboxToggle(N, Boolean(newChecked))
    HCT->>TMC: toggleMarkdownCheckbox(contentRef.current, N, checked)
    TMC-->>HCT: updated markdown string
    HCT->>HCC: handleContentChange(toggled) [only if changed]
    HCC-->>MP: setContent(value) + contentRef.current = value
    MP-->>CB: re-render with updated checked prop from parsed markdown

Loading

_{Reviews (5): Last reviewed commit: "fix(files): move useMemo above condition..." | Re-trigger Greptile}

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[waleedlatif1]

@cursor review

[waleedlatif1]

@greptile

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[waleedlatif1]

@cursor review

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR