Add support for markdown preview in compose area.

This doesn't currently use the backend markdown processor, so the
previews are not completely faithful.

Fixes #217.

frontend_tests/casper_tests/04-compose.js

@@ -141,6 +141,41 @@ casper.then(function () {
     });
 });
 
+casper.then(function () {
+    casper.waitUntilVisible('#markdown_preview', function () {
+        casper.test.assertNotVisible('#undo_markdown_preview', 'Write button is hidden');
+        casper.click("#markdown_preview");
+    });
+});
+
+casper.then(function () {
+    casper.waitWhileVisible("#markdown_preview", function () {
+        casper.test.assertVisible('#undo_markdown_preview', 'Write button is visible');
+        casper.test.assertEquals(casper.getHTML('#preview_message_area'), "Nothing to preview", "Nothing to preview");
+        casper.click("#undo_markdown_preview");
+    });
+});
+
+casper.then(function () {
+    casper.waitWhileVisible("#undo_markdown_preview", function () {
+        casper.test.assertVisible('#markdown_preview', 'Preview button is visible.');
+        casper.test.assertNotVisible('#undo_markdown_preview', 'Write button is hidden.');
+        casper.test.assertEquals(casper.getHTML('#preview_message_area'), "", "Markdown preview area is empty");
+
+        casper.fill('form[action^="/json/messages"]', {
+            content: '**Markdown Preview** >> Test for markdown preview'
+        }, false);
+
+        casper.click("#markdown_preview");
+    });
+});
+
+casper.then(function () {
+    casper.waitWhileVisible("#markdown_preview", function () {
+        casper.test.assertEquals(casper.getHTML('#preview_message_area'), "<p><strong>Markdown Preview</strong> &gt;&gt; Test for markdown preview</p>", "Check markdown is previewed properly");
+    });
+});
+
 common.then_log_out();
 
 casper.run(function () {

static/js/compose.js

@@ -129,6 +129,14 @@ function clear_box() {
     $("#send-status").hide(0);
 }
 
+function clear_preview_area () {
+    $("#new_message_content").show();
+    $("#undo_markdown_preview").hide();
+    $("#preview_message_area").hide();
+    $("#preview_message_area").empty();
+    $("#markdown_preview").show();
+}
+
 function hide_box() {
     $('.message_comp').find('input, textarea, button').blur();
     $('#stream-message').hide();
@@ -137,6 +145,7 @@ function hide_box() {
     compose_fade.clear_compose();
     $('.message_comp').hide();
     $("#compose_controls").show();
+    clear_preview_area();
 }
 
 function update_lock_icon_for_stream(stream_name) {
@@ -673,6 +682,7 @@ exports.finish = function () {
         return false;
     }
     send_message();
+    clear_preview_area();
     // TODO: Do we want to fire the event even if the send failed due
     // to a server-side error?
     $(document).trigger($.Event('compose_finished.zulip'));
@@ -990,6 +1000,28 @@ $(function () {
         $("#compose #file_input").trigger("click");
     } );
 
+
+    $("#compose").on("click", "#markdown_preview", function (e) {
+        e.preventDefault();
+        var message = $("#new_message_content").val();
+        var preview = echo.apply_markdown(message);
+        $("#new_message_content").hide();
+        $("#markdown_preview").hide();
+        $("#undo_markdown_preview").show();
+        $("#preview_message_area").show();
+
+        if (message.length === 0) {
+            $("#preview_message_area").html(i18n.t("Nothing to preview"));
+        } else {
+            $("#preview_message_area").html(preview);
+        }
+    });
+
+    $("#compose").on("click", "#undo_markdown_preview", function (e) {
+        e.preventDefault();
+        clear_preview_area();
+    });
+
     $("#compose").on("click", "#attach_dropbox_files", function (e) {
         e.preventDefault();
         var options = {

static/styles/zulip.css

@@ -1773,12 +1773,13 @@ blockquote p {
 
 textarea.new_message_textarea {
     display: table-cell;
-    width: 99%;
+    width: calc(100% - 10px);
+    padding: 5px;
     height: 1.5em;
     max-height: 22em;
     margin-bottom: 0px;
     resize: none;
-    margin-top: 6px;
+    margin-top: 5px;
 }
 
 input.recipient_box {
@@ -3563,3 +3564,31 @@ li.show-more-private-messages a {
     margin-left: 5px;
 }
 
+#preview_message_area {
+    /* minus 5px padding. */
+    width: calc(100% - 10px);
+    padding: 5px;
+    /* the maximum height the textarea gets to. */
+    max-height: 308px;
+    /* the minimum height the textarea collapses to. */
+    min-height: 42px;
+    overflow: auto;
+
+    margin-top: 5px;
+
+    border: 1px solid #cccccc;
+    border-radius: 4px;
+
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+a#markdown_preview,
+a#undo_markdown_preview {
+    text-decoration: none;
+    position: relative;
+    top: 3px;
+    font-size: 16px;
+    color: #777;
+}

templates/zerver/compose.html

@@ -70,6 +70,7 @@
               <td class="messagebox" colspan="2">
                 <textarea class="new_message_textarea" name="content" id="new_message_content"
                           value="" placeholder="{{ _('Compose your message here') }}..." tabindex="140" maxlength="10000"></textarea>
+                <div class="scrolling_list" id="preview_message_area" style="display:none;"></div>
                 <div id="below-compose-content">
                   <input type="file" id="file_input" class="notvisible pull-left" multiple />
                   <a class="message-control-button icon-vector-dropbox notdisplayed"
@@ -78,6 +79,8 @@
                      id="attach_files" href="#" title="{{ _('Attach files') }}"></a>
                   <a class="message-control-button icon-vector-font"
                      href="#markdown-help" title="Formatting" data-toggle="modal"></a>
+                  <a id="undo_markdown_preview" class="icon-vector-edit" style="display:none;" title="Write"></a>
+                  <a id="markdown_preview" class="icon-vector-eye-open" title="Preview"></a>
                   <a id="restore-draft" onclick="compose.restore_message();">{{ _('Restore draft') }}</a>
                   <span id="sending-indicator">{{ _('Sending') }}...</span>
                   <div id="send_controls">