Last year, Microsoft published the Monaco Editor, the browser-based text editor responsible for many of the cool features inside of Visual Studio Code. The Monaco Editor offers many of the features we've come to expect from browser-based editors such as syntax highlighting for many languages, code folding, and the option for selecting different themes. In addition to all of these features though, the Monaco Editor also supports Intellisense to suggest words as you type as well as the ability to compare two pieces of code to see the differences between them.
In the Alternate Method Editor community project, we've aimed at creating a new Form for the Method ItemType that embeds the Monaco Editor to offer all of the same functionality you've come to expect from the standard method editor with a few cool new additions.
Intellisense
With no extra configuration, the Monaco Editor offers basic Intellisense that will offer suggestions to complete words as you type.
This Intellisense works in two parts. It will offer suggestions from a standard set of libraries configured in the editor as well as parse the document to offer suggestions on variables and functions you've used previously. The standard libraries are fully configurable as well. In a future release of this project, we'd like to include the objects from the IOM.dll for both C# and VB method editing. From my experience, this has been one of the most requested features of the Method editor and we're excited to make it even better!
Diff Editor
Another out-of-the-box feature of the Monaco Editor is a diff editor that allows for easy comparison between two snippets of code. The most obvious use for this inside of Aras Innovator is to compare two different versions of the same Method. In the GIF below, I've added two new inputs to the toolbar. A dropdown to select the generation of the Method you want to compare to and a button to launch the diff editor.
Theme Selector
By default, the Monaco Editor supports three themes: Visual Studio, Visual Studio Dark, and High-Contrast Dark. This project adds a new dropdown to the Method Editor toolbar to allow developers to easily switch between these themes with just one input.
There are also a few projects online that aim at offering additional themes for the Monaco Editor. Whether you use these projects or make your own themes, you can easily add them to this dropdown just by adding values to a List within Aras Innovator.
Code Preview
The Monaco Editor also supports a handy code preview by default, which you can see on the right-hand side of the screen. This functionality is especially useful when editing long methods.
LOOKING FOR MORE ARAS INSPIRATION?
Subscribe to our blog and follow @ArasLabs on Twitter for more helpful content! You can also find our latest open-source projects and sample code on the Aras Labs GitHub page