Skip to content

Guidance on gutter indicators and collapsible sections in "edit mode" and "diff mode" using unifiedMergeView #738

@bisonhubert

Description

@bisonhubert

Hi @uiwjs/react-codemirror team!

I'm using @uiwjs/react-codemirror with @codemirror/merge's unifiedMergeView and have introduced a mode selector: "Edit" (editable) and "Diff" (read-only). I'm looking for guidance on implementing two features.

1. Edit mode: Display gutter indicators showing which lines have been modified compared to the original. What's the recommended approach for tracking line changes and adding gutter markers?

Image

2. Diff mode: Add collapse/expand buttons in the gutter for unchanged sections, similar to GitHub's diff view. Are there existing patterns or extensions for collapsible regions in merge view?

Image

Any examples, documentation, or implementation suggestions would be greatly appreciated. Thanks for maintaining this valuable open source project!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions