Construct's new text and code editor

The latest Construct release has a big upgrade for the built-in text and code editor! It's now widely available with the r432 stable release. Here's a summary of what's new with it.

What's it do?

If you ever edit a text-based file in Construct, you're using the built-in text editor. That covers text, CSV, JSON, XML, HTML and CSS files.

We know lots of people use Construct for its great visual event-block based alternative for programming, but Construct has highly capable traditional coding capabilities with JavaScript coding too. We launched this in 2019, and as explained there, it's a great feature to have for advanced users and for professional use cases, and it's an excellent way to learn a real-world programming language you can get a job in - a significant advantage for both the education world and ambitious hobbyists alike.

Moving to Monaco

Previously Construct's built-in text and code editor was based on CodeMirror 5. This worked well but was ageing having been replaced by a completely redesigned CodeMirror 6 a few years ago. We also wanted to upgrade Construct's built-in coding capabilities with support for TypeScript - something that we supported, but requiring an external editor.

We settled on choosing Monaco, the same code editor used by Visual Studio Code (VS Code). We use VS Code to develop Construct itself, so we know it's a robust and highly capable tool with a fantastic code editor!

The code editor integration with Construct is complex, and so taking out CodeMirror and replacing it with Monaco was hard work, and by no means a drop-in replacement. However we've done all of that now with the latest release, so you can take advantage of the benefits!

Monaco improvements

Open a JavaScript example in Construct, like Spell Caster Code, and you can try out the new code editor for yourself. Here are some of the new features with Monaco. If you've used VS Code before, some of this may be familiar, but a refresh may be helpful anyway!

New context menu options

If you right-click something in the code editor, there's a set of new options in the menu.

The context menu in the Monaco code editor

Choosing Go to definition instantly jumps to where the variable or function you clicked on was defined - a great help when navigating larger amounts of code. You can also choose Peek definition to show the same part of the code but in an inline view, so you don't lose your place in the current document.

The 'Peek definition' option showing an inline view.

Go to symbol lets you type in a name and jump to the definition of that - rather like Go to definition but for something you type in rather than what you clicked on.

Find references generates a list of everywhere in the code is used - another essential tool for reviewing your existing code. A list of references appears down the right, and clicking each reference jumps to the code location in the inline view. Double-clicking an entry will then jump to that part of the code in the main view.

The 'Find references' option showing an inline view.

Related to that is a Rename option which lets you change the name of a variable, property, function or class, and automatically update all the references to it in your code. It's like using Find references and then going through every result and renaming it, but automatic.

Change all occurrences uses the multi-cursor capability of the Monaco editor, selecting every instance of a name and updating them all simultaneously as you type.

Using 'Change all occurrences' to edit the name 'dt' in multiple places.

The Format document option will apply a default code formatting to the file, arranging things like braces, statements and indentation for you. With the old CodeMirror editor you could use this for JSON files, but with Monaco you can now use it for JavaScript, HTML and CSS files as well. Some people will want to customize how the formatting works - for that we'd recommend using an external editor, and then you can use any other industry-standard code formatting tools, such as the Prettier extension for VS Code, and customize it however you like.

Finally there's the Command palette - essentially a list with many other commands that Monaco can perform for you, such as advanced navigation options, text transforms, and more. Typing in the search field lets you quickly navigate the many options available. This really shows the depth of Monaco's features!

The Command Palette

Code minimap

On the right by the scrollbar, you'll now see a minimap - a version of all the code in the file rendered much smaller. This helps you navigate your way through large files, and you can click and drag on it to move your current view around.

A code minimap in a larger file showing on the right by the scrollbar.

It does more than that though - you can type in a comment starting with // MARK: Text, and it creates a marked section in the code minimap! It uses a larger text size to make the marked text readable. This is a really useful way to help scroll through a file quickly finding the section you want.

Using mark comments to add headers in the minimap.

A related feature is you can use comments like //#region My region and //#endregion to denote a region of code. The region also appears in the minimap like a mark, and then also shows an arrow next to the region comment where you can expand or collapse that entire code region.

A code region denoted by a special comment which then becomes collapsible

Annotated scrollbar

While we're looking over by the scrollbar, it also has some extra annotations to help navigate code. The current cursor position appears as a horizontal line, so you know where it is even if you scroll away. When a name is selected in the file, all other occurrences are also highlighted so you can find them easily, and those highlights also appear as annotations on the scrollbar so you can scroll to them quickly. Similarly if you search for some text, all results are annotated on the scrollbar too.

Sticky scrolling

A helpful code navigation feature with Monaco is as you scroll through a class or method, it sticks the definition line to the top of the view. For example if you scroll down through a method named Move, the method definition line with its name and parameters sticks to the top of the view. If the method is inside a class, then both the class definition and the method definition stick to the top. This means even in long functions you still know what context you're working in.

Sticky scrolling with a class and method definition at the top of the view.

Other features

The new Monaco editor is also now used for editing scripts in event sheets, much as CodeMirror also used to. However you'll note some features are disabled when editing in an event sheet, mainly to save space with a more constrained view area. For example the minimap and scrollbar won't appear, and sticky scrolling is disabled. We'd already have recommended calling a function defined in a script file if you need to use longer pieces of code in an event sheet, and this is another reason to use that approach: with small snippets of code in event sheets calling longer functions in script files, you'll be able to use the full features of the Monaco editor with the larger view that comes with a script file. Notably we've also made sure the other features mentioned - like Go to definition, Find all references, and Rename - also work with scripts in event sheets, thanks to our enhanced integration with Monaco and Construct.

The new Monaco editor also includes most of the same features that CodeMirror had, such as find and replace, and Construct-specific autocomplete. We were also able to add a little extra information in autocomplete to provide some extra tips about what the suggestions are for, such as the plugin type of objects, and the interfaces that suggestions are available on.

Video summary

The r432 release video which introduces the new Monaco editor covers some of the improvements mentioned here from the 4m00s mark, so check that out to see them in action.

Conclusion

Construct has highly capable JavaScript coding features with significant advantages over other languages like GML, and we've taken it to the next level with an upgraded code editor in Construct. Monaco itself is also built entirely from web technologies, helping showcase the power of the web platform even for sophisticated code editors. Even if you don't use coding, many of these improvements apply to any other kind of text file you edit in Construct, such as text files, data files like JSON, XML and CSV, and HTML and CSS files too. If you want to have even more advanced code editing features, there's still comprehensive support for using an external editor which allows you to use any other code editor of your choice - whether it's VS Code or something else entirely - with a convenient workflow.

We're also excited that moving to Monaco has also unlocked built-in support for TypeScript in Construct! This is already available in our latest beta releases, so you can try it out now if you want to give that a spin. We'll be covering that in more detail when it rolls out to a stable release, so stay tuned for more news on that! And if you're not bothered about coding in Construct, fear not - our attention will be turning back to other Construct features shortly.