Sitecore Insiders
Code Editor v2.0 module for Sitecore using Monaco Editor

VS Code like field editor in Sitecore with Monaco Editor

Changing Code Editor module to Monaco Editor

The first version of my Code Editor module, and the one described in the tutorial, was using Code Mirror as the Sitecore field code editor. I decided to change to Monaco Editor as Sitecore field editor, the same editor that powers VS Code.

The Code Mirror was nice for a first version and to discover Sitecore but, after real-world usage, comments and suggestions, I realize that it doesn’t suit the needs.

Understanding how a SPEAK dialog work and what I could do with it, made me go for a new challenge, integrate it with Monaco Editor!

Now the Sitecore Insiders Code Editor v2.0 have brand new features like:

  • Error, warning and suggestion highlights, by setting a different color in the respective line
  • JavaScript code formatting
  • Full-size code editor
  • Diff mode code editor
  • Dark and white theme
  • Good appearance 🙂

I’m posting this to show how simple it is to do things with a simple SPEAK dialog to edit your field.

Image 1 – My Code Editor v2.0 module for Sitecore using Monaco Editor

Integrate with Monaco Editor

It is very easy using it from a CDN and there are no conflicts with Sitecore required libraries. This was one of the key factors for the change, since upgrading Code Mirror for newer versions would require Lodash, which conflicts with Underscore.

require.config({
    paths: {
        'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.22.3/min/vs',
    }
});

define(["sitecore",
    "vs/editor/editor.main",
], function (Sitecore, monaco) {
...
}

Then to create the code editor it is simple as:

this.CodeModel = monaco.editor.createModel(this.CodeText.get('text'), "javascript");

this.CodeEditor = monaco.editor.create(element, {
                model: this.CodeModel,
                language: 'javascript',
                theme: 'vs-dark',
                automaticLayout: true,
                glyphMargin: true
            });

And finally the Save action:

save: function () {
	this.SaveButton.set('text', 'Saving...');
	this.SaveButton.set("isEnabled", false);

	//get the value from Monaco Editor
	let text = this.CodeEditor.getValue();
	if (!text.trim())
		text = "__#!$No value$!#__";

	this.CodeText.set("text", text);
},

You can check the full source code here.

The frontend decisions

Previous version was not that beautiful and no effort was made on that side. The new version is a ready for production module, it brings very useful features and a familiar code editor, captivating developers to use it.

As stated in the tutorial, extra JS code and styles were being imported inside the JS page code file. This strategy allows to test and develop everything in a single point without touch Sitecore Rocks. Following that strategy, containers and buttons are also being created dynamically using JavaScript.

Since Code Mirror was hiding Textarea when creating the editor, it is necessary to set it to display none manually for Monaco Editor. An alternative was an Hidden Input but couldn’t find a match on SPEAK renderings.

Everything nowadays is giving the possibility of dark mode, here it will be the default but the user can change it easily using a simple button to switch between white and dark themes.

References

Is was incredibly easy to do some fancy things like the theme switch and the diff mode. All that was possible just by checking the examples on Monaco Editor homepage Playground and the API Docs.

Bruno Nunes

Sitecore developer since 2015, passed by 7.5, 8.2, 9.1, next step will be the 10!
Self-motivated to bring new capabilities to Sitecore and to adapt it for every business case.
Currently working on Noesis as Sitecore Architect / Tech Lead.

Add comment

Bruno Nunes

Sitecore developer since 2015, passed by 7.5, 8.2, 9.1, next step will be the 10!
Self-motivated to bring new capabilities to Sitecore and to adapt it for every business case.
Currently working on Noesis as Sitecore Architect / Tech Lead.