Building a Low Effort, High Impact Prototype for Hackfest: Online Code Editor for ACLScript

ACLScript is a scripting language, similar to SQL used for various data analysis purposes. It is processed by Galvanize’s Analytics engine on the various Galvanize platforms, one of which is the ACL Robotics Platform, https://www.wegalvanize.com/robotic-process-automation/. It is a domain specific language (DSL) and is unique to Galvanize. Users package their ACLScripts in the form of a ‘Robot’ to be sent to ACL Robotics Platform for scheduling jobs to run on a remote Analytics engine machine.

The current development mode workflow in Galvanize’s ACL Robotics Platform requires users to download all the scripts contained with a Robot package just to edit a single line in a script to make a change or fix an error. The change must then be re-committed back to ACL Robotics Platform for subsequent iteration of execution.

The apparent problem is that the user’s download directory gets cluttered with many Robots. Moreover, one needs to have a corresponding and matching encoding (non-Unicode/Unicode) of Analytics application installed just to open, edit and commit the changes. The trivial solution to this problem is to have an online ACLScript code-editor in the Robotics Platform to eliminate the intermediate steps of taking a user from a problem-state to a desired-end-state.

With the use of an existing open-source library this was a low-effort and high-impact project to work on. In fact, it was an ideal project for a two day hackfest event to showcase how a simple and trivial solution can add high value to our existing product and also make the code-run-debug-fix cycle far less tedious.

Design and Interaction With react-monaco-editor

We created a React Application and used react-monaco-editor library for the code editor features. This library has multiple functionalities out of the box like syntax highlighting, language theme, auto-completion, IntelliSense, validation and a diff-editor mode. For a reference, the popular IDE Visual Studio Code is also powered by Monaco-editor. All that needed to be done was to add our ACLScript DSL language. All of the following examples are related to integrating react-monaco-editor into existing application.

Teaching Monaco About the Keywords in AClScript

In order for the react-monaco-editor to successfully highlight the code, we must specify a list of keywords within the ACLScript language. We created a separate file to contain the syntax definitions for the ACLScript language. With the definitions in place, the setMonarchTokensProvider method is used to set the language with the API from editor.api as mentioned in the import statement. See the code below.

The ACLScript keywords were added as part of the tokenizer attribute. This method sets the keyword validation for syntax highlighting and also detects comments within the code.

Adding Auto-Completion Implementation

To better understand the problem and solution, let’s take a quick look at auto-completion example for ACLScript:

auto-completion example

Auto-completion is also straightforward using the registerCompletionItemProvider method provided by react-monaco-editor. The label attribute is used as a label for IntelliSense. The ${1:parameter1}, ${2:parameter2} in the insertText attribute allows users to efficiently tab through parameters when entering values for a given ACLScript command.

In order to auto-complete the SPLIT command, the label attribute is set to “SPLIT(string, separator, segment <,text_qualifier>)”. This is the label we want users to see once the IntelliSense picks up the matching keyword — for Parameter Info and short description. Once the user presses ENTER key, our insertText attribute kicks in. The SPLIT command only accepts three parameters so the insertText attribute is set to “ SPLIT(“${1:}”,”${2:}”,${3:})”. The editor automatically puts the cursor on the first parameter where user can start entering value for first parameter and tab through rest of the parameters. The following is an example of ACLScript commands that were enabled for auto-completion.

Adding Language Theme and the Global Editor Theme

You can inherit an existing color theme from a pre-defined theme and customize each token with a color as shown below. To provide an experience similar to working in the ACL Analytics application’s script-editor we added a theme with nearly identical look and feel.

Adding Diff-Editor Mode

The following is a quick demonstration of the diff-editor mode:

diff-editor mode example

The diff-editor mode was another out of the box feature ready for plug and play. The initial-state is the text within the script, before any changes are made. It is set by passing the “value” props to the MonacoEditor class component where all the initial script-contents are injected. Once the code-editor starts with the initial-state, any changes in the script is automatically reflected in value props by the MonacoEditor component itself.

Unlike the MonacoEditor component, MonacoDiffEditor component supports an additional “original” attribute to which the prior code version of an ACLScript is passed-in to visually display the difference between prior and current versions. To enable diff-editor mode, we simply return the MoncaoDiffEditor component in the render method of our App component.

Conclusion

There it is, entry steps into building a code-editor with all the basic features that a user is most likely to expect. This blog-post provides a basic intro to building a DSL code-editor and showcases a successful hackfest project that could easily become a significant product enhancement. If you wish to understand and use the full features of the react-monaco-editor, you can visit their playground environment at https://microsoft.github.io/monaco-editor/playground.html and try it for yourself. They have many other features that are not covered in this post.