Dokploy / Dokploy/dokploy

feat: add git-diff-style editor with unified/split toggle and full screen mode for patch editing

Open
#4,719 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
TypeScript
Stars
37.4k
Forks
3k
Avg merge
1d 3h
Merged PRs (30d)
73

Description

Feature Request

I'd like to propose adding a git-diff-style editor to the patch editing UI.

Motivation

Currently, the patch editor shows a plain code editor with no visual diff. When editing an existing patch, there's no indication of which lines were added, removed, or modified relative to the original file. This makes it difficult for users to review what changes a patch will actually apply, especially for larger files.

Suggested Behavior
  • Create mode (no patch yet): Diff highlights appear as the user types — added lines in green, removed lines in red.
  • Edit mode (existing patch): Highlights computed from the stored patch against the original file content on load.
  • Unified/Split toggle: Button to switch between inline view (green/red line backgrounds + gutter markers) and side-by-side view (read-only original on the left, editable new content on the right).
  • Full screen: Button to expand the editor to viewport size, collapsing the file tree while keeping app chrome accessible.
Implementation Notes
  • Extend the readRepoFile endpoint to return the original file content alongside the existing patch data.
  • Introduce a DiffCodeEditor component wrapping CodeMirror with custom decorations for inline mode, and @codemirror/merge for split mode.
  • Dependencies: diff, @types/diff, @codemirror/merge.
  • Edge cases: delete-type patches (no editor), large-file debounce (~150ms), mode switching preserving state, dark mode support.
Questions for Discussion
  1. Does the team agree with this approach, or is there a preferred direction?
  2. Are there any concerns with adding @codemirror/merge as a dependency?
  3. Would this be a welcome contribution from a community member?

/cc @Siumauricio

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the patch editing UI and the readRepoFile endpoint. Review how create and edit modes currently load patch data, then assess the proposed DiffCodeEditor, CodeMirror merge support, full-screen behavior, and large-file handling. Done means the team has agreed on the direction and the editor supports the listed modes and edge cases with appropriate tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
backend, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.