Skip to main content

From Code Mirror to Monaco

Richard Saunders
Richard SaundersContensis product owner
News and announcements3 min

If you spend any time managing and writing code, you’re probably using one of a handful of modern editors such as AtomSublime TextVisual Studio, or Visual Studio Code. These all provide a first class editing experience on the desktop – one that we quickly become familiar and comfortable with.

Replicating this experience in a web browser has never been straightforward. Code Mirror, the editor we use in Contensis, has done a great job of supporting what we’ve needed in the product for a number of years now.

But our research has highlighted that the way developers work with Contensis is changing, and the code editor has become a bottleneck in a number of developer workflows.

Introducing Monaco

Monaco is a browser-based code editor that comes from the same code base as Visual Studio Code. It provides a whole host of features that we have been missing, so we’re bringing it to the next version of Contensis.

Tabbing and code formatting

Let's get this out of the way. Our current code editor doesn’t handle tabbing very well. As a result, it can be a little frustrating when you are attempting to format your code.

That's not the case with Monaco. Tabbing just works. And, where a language supports it, you can also format your code in a clean and consistent manner – by selection or for the entire document.

An animation showing tabbing working in the Monaco code editor in Contensis.

IntelliSense and code validation

One of the most popular aspects of desktop code editors is the support for IntelliSense code completion. The editor supports rich IntelliSense and validation for TypeScript, JavaScript, CSS, LESS, SCSS, JSON, and HTML. We’ve just completed adding IntelliSense support for our own JS Delivery API making it easier to access content from content types and entries.

Where support for a language is not available, the editor automatically provides word completion to help you code faster and to avoid typos.

An animation showing IntelliSense working in the Monaco code editor in Contensis.

Warning and error highlighting

Warnings or errors are rendered inline, and in the overview ruler when a file is opened for editing. Your code is analysed as you work and contextual help is provided where available as you hover over an issue.

You can loop through errors or warnings by pressing F8 or Shift + F8 which will show an inline zone detailing the problem and possible code actions.

An animation showing contextual help in the Monaco code editor in Contensis.

Navigating your code

Finding aspects of your code is aided by a number of tools. You can locate symbols or definitions with the Go to… commands either using the command palette or context menu.

An animation showing code being navigated using the 'Go to Definition' command in the Monaco code editor in Contensis.

Find and replace

This is a huge upgrade over our existing code editor, making it easier to find and replace aspects of your code.

An animation showing the find and replace tool being used to replace a colour in a CSS file open in the Monaco editor in Contensis.

Multiple selection

Selecting and updating multiple lines of code at the same time can be a real timesaver, making changes is simple with multiple selection.

An animation showing multiple selection working in the Monaco editor in Contensis.

Summary

So thats a brief run down of some of the features within the Monaco editor coming to Contensis. If you want to take a look for yourself then you can take Monaco Editor for a spin at Microsoft’s own playground.