Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add ability to toggle standalone editor into a diff editor

See original GitHub issue

It would be great we if can just switch from IStandaloneCodeEditor to IStandaloneDiffEditor by providing an extra model that points to the original.

We use Monaco in our app and highlight the diffs as line decorators. When the user clicks the decorator we want to toggle a side editor that shows the diffs inside IStandaloneDiffEditor. I believe that this is not possible since IStandaloneDiffEditor works in standalone mode.

Issue Analytics

State:
Created 3 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

alexdimacommented, Apr 2, 2020

I see two options to get that feature:

copy-paste the code from VS Code and adjust it.
implement from scratch by:

adding a view zone which reserves 7 lines,
adding an overlay widget that is rendered perfectly on top of that view zone (using view zone callbacks which indicate the top and height).
creating a diff editor and attaching it to the overlay widget
in the diff editor using the same model as the outer editor

Since this is not an issue with the Monaco Editor itself, I will close for now. Good luck!

0reactions

burembacommented, Apr 2, 2020

The IStandaloneCodeEditor performs expensive DOM operations since it creates an actual editor, destroying the DOM elements and creating another editor based on IStandaloneCodeEditor is not a cheap operation. It’s probably not a common use-case so let me explain our use-case:

We have a web-based editor based on Monaco and I added line decorations that indicate the local changes as follows:
When the user clicks the line decorator, I basically destroy the IStandaloneCodeEditor and create an IStandaloneDiffEditor and highlight the change over there. When the user switches to the edit mode, I destroy the Diff Editor and use the IStandaloneCodeEditor.

It’s probably no optimum way because the UX feels sluggish since I need to compute the diff again and add the line decorators, editor actions in each switch in addition to these expensive DOM operations.

VSCode has this feature out of the box with GIT extension but I couldn’t find a way to make it work in Monaco. One other alternative is to enable the edit mode in DiffEditor but it’s not really designed for edit mode as it adds overlay widgets and shows the 2 editors at the same time.

Is there any other way to implement the line decorators in Monaco similar to VSCode’s line decorators as seen in the following screenshot?

Top Results From Across the Web

git - How do I edit the current revision of a file from diff view ...

As you noticed, the diff is sometimes editable from the Git Changes page in Team Explorer. Here's a summary of how we determine...

Visual Studio Code Tips and Tricks

Use the Toggle Output command (Ctrl+K Ctrl+H) and select Git in the dropdown. Gutter indicators. View diff decorations in editor. See documentation for...

Line-staging (Interactive Staging) - Visual Studio Blog

Ability to stage chunks of code directly from the editor; Addressed a number of issues and limitations. Work is in progress to add...

13 Best Text Editors to Speed up Your Workflow - Kinsta

Sublime Text provides split editing for managing and editing files next to each other. You can also open multiple windows and place them...

GitLab Web Editor

You can now make changes to any files, as needed. When you're ready to merge the changes back to your default branch, you...