uiwjs / uiwjs/react-codemirror
Guidance on gutter indicators and collapsible sections in "edit mode" and "diff mode" using unifiedMergeView
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.3k
- Forks
- 161
- PR merge metrics
- No merged PRs in 30d
Description
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?
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?
Any examples, documentation, or implementation suggestions would be greatly appreciated. Thanks for maintaining this valuable open source project!
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the @codemirror/merge unifiedMergeView documentation and the repository’s TypeScript React integration. Determine the supported approach for edit-mode change gutters and diff-mode collapsible unchanged sections, then provide documented examples or implementation guidance for both modes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100