Skip to content

feat(files): interactive markdown checkbox toggling in preview#3829

Merged
waleedlatif1 merged 8 commits intostagingfrom
waleedlatif1/md-checkbox-toggle
Mar 28, 2026
Merged

feat(files): interactive markdown checkbox toggling in preview#3829
waleedlatif1 merged 8 commits intostagingfrom
waleedlatif1/md-checkbox-toggle

Conversation

@waleedlatif1
Copy link
Copy Markdown
Collaborator

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
Copy link
Copy Markdown

vercel bot commented Mar 28, 2026

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

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Skipped Skipped Mar 28, 2026 9:15pm

Request Review

@cursor
Copy link
Copy Markdown

cursor bot commented Mar 28, 2026

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
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Mar 28, 2026

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 waleedlatif1 force-pushed the waleedlatif1/md-checkbox-toggle branch from bc84926 to a7e9399 Compare March 28, 2026 20:23
@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@cursor review

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@cursor review

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@cursor review

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@cursor review

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@cursor review

Copy link
Copy Markdown

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Bugbot reviewed your changes and found no new issues!

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

@waleedlatif1 waleedlatif1 merged commit 7b0ce80 into staging Mar 28, 2026
12 checks passed
@waleedlatif1 waleedlatif1 deleted the waleedlatif1/md-checkbox-toggle branch March 28, 2026 21:26
TheodoreSpeaks pushed a commit that referenced this pull request Mar 28, 2026
* feat(files): interactive markdown checkbox toggling in preview

* fix(files): handle ordered-list checkboxes and fix index drift

* lint

* fix(files): remove counter offset that prevented checkbox toggling

* fix(files): apply task-list styling to ordered lists too

* fix(files): render single pass when interactive to avoid index drift

* fix(files): move useMemo above conditional return to fix Rules of Hooks

* fix(files): pass content directly to preview when not streaming to avoid stale frame
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant