Highlight Errors in CodeMirror

Hello all,
With the release of Optimus for Umbraco that me & Tim Geyssens have built that allows you to create bundles and write Sass, Less, CoffeeScript & TypeScript files directly inside Umbraco.

We wanted a way to highlight any compiling errors with your code that you write, by highlighting the line number in the editor of the Umbraco back office.

The code editor inside Umbraco, uses the highly popular HTML & JavaScript code editor CodeMirror. My goal was to highlight the exact line number in the editor so we can visually highlight to the user where in their code that is the problem.

So I will take you through the small code snippet that was used to achieve this:

In the FileEditor.aspx page that we have I wrote the following JavaScript function

    function highlightLine(lineNumber) {

        //Line number is zero based index
        var actualLineNumber = lineNumber - 1;

        //Select editor loaded in the DOM
        var myEditor = $("#body_EditorSource .CodeMirror");

        //Write the item to the console window, for debugging
        console.log(myEditor);

        //Select the first item (zero index) just incase more than one found & get the CodeMirror JS object
        var codeMirrorEditor = myEditor[0].CodeMirror;

        //Write the item to the console window, for debugging
        console.log(myEditor[0].CodeMirror);

        //Set line CSS class to the line number & affecting the background of the line with the css class of line-error
        codeMirrorEditor.setLineClass(actualLineNumber, 'background', 'line-error');
    }

In addition to this I need a small chunk of CSS in order to style the error line in red for it to be easily noticed.

<style>
        .line-error {
            background: #FBC2C4 !important;
            color: #8a1f11 !important;
        }

</style>

The final thing that needs for this all to come together and work, is that when the save button is hit on our custom code editor page, that we check for any errors from the transformers such as Sass & CoffeeScript for example. Parse the line number and pass that to our Javascript function highlightLine().

        private bool SaveConfigFile(string filename, string contents)
        {
           //This gets the filename of the Sass, Less, CoffeeScript or TypeScript file
            var path = Request.QueryString["path"] + filename;

            //This gets the full path to the file (Server MapPath'd)
            var fullPath = Server.MapPath(Request.QueryString["path"]) + filename;

            //Open up the file on disk
            using (var text = File.CreateText(fullPath))
            {
                //Save the file contents
                text.Write(contents);

                //Close the text reader, as we are done with it
                text.Close();

                //Check the translation for errors
                var errors = transCore.ValidateTranslation(path);

                //If no errors then...
                if (errors == null || !errors.Any())
                {
                    //Save the translation to disk
                    transCore.SaveTranslation(path);
                    return true;
                }
                else
                {
                    //Get the first exception message out of the collection
                    var exceptionMessage = errors.First().Message;

                    //Set the panel on the page - it's an error type & show the exception message
                    Feedback.type = Feedback.feedbacktype.error;
                    Feedback.Text = exceptionMessage;
                    Feedback.Visible = true;

                    //Get Line number from the exception message - presumes messages always ends with
                    //Line number: 3
                    var lineNumber = exceptionMessage.Split(' ').Last().Replace("\r", "").Replace("\n", "");
                    int.TryParse(lineNumber, out ErrorLineNumber);

                    return false;
                }
            }

So that’s all the parts of our code that enables us to highlight the line number in the CodeMirror editor.

There is plenty more that could be done with the editor, as there are many options available to us when we have the CodeMirror object selected in JavaScript. So let your imagination go wild and start playing around with the code editor inside Umbraco.

Any questions please leave them in the comments.

Thanks,
Warren 🙂