Question

With BugMonkey 2 combining the css and js into one textbox, I realize that it isn't going to be as useful for the css portion, but having that textbox syntax highlighted for javascript would be a HUGE improvement. You can do it for Kiln, and it's done on this site (for non-editable things), so why not in FogBugz!

Case FC2011210

Answer 1

You are in luck! While doing a bit of Kiln-related research, I came across the totally awesome CodeMirror project. As a test, I decided to try it out by BugMonkey-ing our BugMonkey editor. It worked better than I expected.

The only little gotcha is that it has to load the edit area twice, since BugMonkey is pretty AJAXy. This would be fixed by including this in the BugMonkey plugin (which we have a case open for). You also might need to reload the page once or twice after activating it before it fully loads (I'm still looking into why that happens). The BugMonkey script is below:

name:          BugMonkey Syntax Highlighting
description:   Makes your customization editor pretty using CodeMirror (http://codemirror.net/)
author:        Tyler Hicks-Wright
version:       1.0.0.1

js:

cmUrl = window.location.protocol + '//tghwmedia.appspot.com/media/hwnet/codemirror';

function initCodeMirror() {
  if($('#sCust').length) {
    $.getScript(cmUrl + '/js/codemirror.js', function(data, status) {
          var editor = CodeMirror.fromTextArea('sCust', {
            parserfile: ['tokenizejavascript.js', 'parsejavascript.js'],
            stylesheet: cmUrl + '/css/jscolors.css',
            path: cmUrl + '/js/',
            onChange: function() { editor.save() },
            height: 'dynamic',
            tabMode: 'shift',
            autoMatchParens: true
          });
    });
  }
  else {
    setTimeout(initCodeMirror, 100);
  }
}
function pollCodeMirror() {
  if(window.location.hash.indexOf('sView=edit') > -1 && window.location.hash.indexOf('ixCust') > -1) {
    setTimeout(initCodeMirror, 100);
  }
}
$(window).bind('hashchange', pollCodeMirror);
$(pollCodeMirror);


css:

.CodeMirror-wrapping iframe {
  border: 1px solid #8FB3D4 !important;
}

As you're reading through the code, you might notice that I'm pulling in some scripts from an appspot address (my poorman's CDN). This is just a copy of the CodeMirror code, which you can get from their site and host elsewhere if you wish. You can also read up on their documentation if you would like to better understand and possibly tweak the initial settings, which are passed to the fromTextArea function.

Disclaimer

I have not tested this on a wide range of browsers, so it very well may break on IE or Opera or Lynx. Use at your own risk.

We have had some instances where we lost work while working on particularly large BugMonkey scripts. For these, by far the best way to edit them is to use the $.getScript() function to load the script from a web site on which you host it while you develop it.