• 
      

    Use CodeMirror as the new text field for editing Markdown.

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

    Information

    Review Board
    master

    Reviewers

    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
    them.

    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.


    chipx86
    1. 
        
    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.

    3. 
        
    david
    1. Ship It!
    2. 
        
    chipx86
    Review request changed
    Status:
    Completed