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 🙂