Use CodeMirror for the text compose area

[yuvipanda]

Would give us better tab handling (#2) and also optional markdown syntax highlighting.

[AlexTatiyants]

I considered using a WISYWIG editor, but chose against it because a custom implementation gave me the most flexibility to a handle a couple of tough edge cases.

[yuvipanda]

CodeMirror not only would give us markdown syntax handling, it would also give us an optional vim mode. And it's purely a text editor, and not anywhere close to a WISYWIG. It might be harder to do the image drag and drop though :(

Can you tell me which edge cases using contentEditable handles?

[AlexTatiyants]

I ran into a complication with using contentEditable. I originally created a simple Angular directive to both annotate the control as being editable as well as publish an event in response to an edit (that directive is editable-text.js). I wanted this directive to be generic because I'm actually using it in a number of places.

This directive uses the inner text of the element for both rendering and reading the control. This works fine but only if you don't have and html formatting in the text control. However, for the main editor there is a lot of html formatting added by the browser. So I wrote another custom directive (editable-markdown.js), which uses html instead of inner text for rendering and reading, but also saves off the innerText property.

So, if CodeMirror could be integrated with this directive, that would be ideal. Otherwise, we'd need to figure out how to get the same behavior into it.

[yuvipanda]

https://github.com/angular-ui/ui-codemirror should work nicely too.