How Can We Add UnifiedDiffView-Like Functionality to the Current Active Editor?

IntelliJ Platform
1

I have an active editor and a temporary file for changes that are compared to the code in the active editor.

How can I build the same UnifiedDiffView functionality that shows changes (e.g., add, delete, modify) with highlights in the current active file, and includes toolbars that allow actions like accept, discard, go to next change, etc.?

This allows me to see UnifiedDiffView in modal or new tab, but not sure how to add it for existing editor.

fun showDiff(editor: Editor, updatedDocuments: UpdatedDocuments) {
        val project = editor.project ?: return
        val diffContentFactory = DiffContentFactory.getInstance()
        
        val diffRequest = SimpleDiffRequest(
            "Changes",
            diffContentFactory.create(project, editor.document, PlainTextFileType.INSTANCE),
            diffContentFactory.create(project, updatedDocuments.first().text, PlainTextFileType.INSTANCE),
            "Current",
            "Updated"
        )

        DiffManager.getInstance().showDiff(project, diffRequest, DiffDialogHints.MODAL)
    }
3

Hi @phanthaiduong22! You could try something like this to create a diif viewer:

val diffRequestPanel = DiffManager.getInstance().createRequestPanel(project, TODO(), null)
diffRequestPanel.putContextHints(DiffUserDataKeysEx.FORCE_DIFF_TOOL, UnifiedDiffTool.INSTANCE)
    ...
diffRequestPanel.setRequest(...) // pass your SimpleDiffRequest here
...
diffRequestPanel.getComponent() // to get diff panel
4

Hi @ilia.shulgin,

Thank you for your response! This approach allows me to obtain a JComponent and display the SimpleDiffRequest directly in the current active editor, like this:

// Create the diff request panel
        val diffRequestPanel = DiffManager.getInstance().createRequestPanel(project, this, null)
        diffRequestPanel.putContextHints(DiffUserDataKeysEx.FORCE_DIFF_TOOL, UnifiedDiffTool.INSTANCE)
        diffRequestPanel.setRequest(diffRequest) // Pass your SimpleDiffRequest here

        // Get the component to display in the current active editor
        val diffComponent = diffRequestPanel.getComponent()

        // Create a panel to hold the diff component
        val diffPanel = SimpleToolWindowPanel(true, true)
        diffPanel.setContent(diffComponent)

        // Show the diff component in the current active editor
        val currentEditor = FileEditorManager.getInstance(project).selectedEditor
        if (currentEditor != null) {
            val editorComponent = currentEditor.component
            val parent = editorComponent.parent as? JPanel
            parent?.removeAll() // Clear existing components
            parent?.add(diffPanel, BorderLayout.CENTER) // Add the diff panel to the editor's parent
            parent?.revalidate()
            parent?.repaint()
        }
    }

However, it overrides my current editor’s code. If I want to implement it more manually similar to UnifiedDiffView (e.g., deciding where to display the changes, where to highlight green, red, etc., in the current active editor), this method enables me to add them manually showing unified diff view without overriding the existing editor content.

How can I achieve this? Are there any JetBrains classes I should refer to? If there are any examples, that would be great. Since I don’t find an official documentation about this, I find it challenging to figure this out just by reading the code.

Thank you so much.

5

Sorry, it seems like I misunderstood your request.
Probably the best approach for you would be to take a look at UnifiedDiffViewer itself. I would also suggest checking out UnifiedDiffChangeUi and the “highlighters” section in DiffDrawUtil.
This might sound like a bad advice (I wish I could just link the documentation here), but I would recommend running IntelliJ Community from sources in a debug mode with breakpoints set around these classes.