Codemirror for mail templates and limit user errors

Last time I talked about codemirror.js, but you may still don’t see clearly what it can help with. Here is more about how I use it.

Problem: User can edit email template body by their own. We allow them to use variables, for example {{applicant_name}}. It will be replaced to real applicant name before sending out. The problem is, this kind of tag make user feel confused and it’s very easy to make a mistype those.

Solution: We use code mirror to create our own syntax highlight, make the variable part un-editable, so people know this is variable. Because they cannot be edited, the user never makes mistake again while create variable tag.

The trick here is to use, in the coffeescript file

editor = CodeMirror.fromTextArea(document.getElementById(@id), {
  lineNumbers: false,
  dragDrop: false,
  theme: 'oa'
});

editor.markText(
  cursorPosition,
  {line:cursorPosition.line,ch:cursorPosition.ch + text.length},
  {
    className: 'variable',
    atomic: true,
  }
)

You can check more about markText in the API doc at http://codemirror.net/doc/manual.html#api