Use CodeMirror as the new text field for editing Markdown.

Review Request #4841 — Created Oct. 23, 2013 and submitted


Review Board


Use CodeMirror as the new text field for editing Markdown.

The big problem with Markdown input was that it was too easy to
unintentionally add characters that would render text differently, such
as _, or `. While it wasn't a big deal for things like the review
request description fields, it was a problem for comments, as you
wouldn't know until you published how they look.

To fix this, I've added CodeMirror as a dependency, as integrated it
with all our edit fields. Now, instead of a textarea with just plain
text, there's a syntax-highlighted editor that otherwise behaves just
like a textarea.

CodeMirror itself is hidden behind a new view, MarkdownEditorView. This
is the view used for all text fields now. It provides a convenient way
to integrate in with inlineEditor as well.

All the benefits we had before are still there. CodeMirror does a good
job of feeling native on each platform, and it can autogrow the text
fields to fit the content, just like textarea with autoSizeTextArea.

What it doesn't do is syntax-highlight any code added in the Markdown
text (like Python). It could, but it means adding a bunch of
dependencies for each highlighter, which are bulkier than those in
google-code-prettify (due to also being tokenizers). Even with those
added, it requires an explicit ```language block in order to highlight

It will, however, highlight that they are code blocks, so we have that
at least.

Tested this on Chrome and Firefox.

I tested the Description and Testing done fields on review requests,
change descriptions, the body top/bottom and comment fields on the
Review dialog, the comment dialog, and review replies.

I also tested interaction in the comment dialog, such as resizing the
dialog and checking that the dirty status was correct.

Tested that everything loaded and saved correctly.

  2. Note that this comes from the default Google-Formatted Markdown mode. We can inject our own thing that will highlight things like /r/123 and bug # and stuff. A task for another day.

  1. Ship It!
Review request changed