compose: Format button for quotes.

Co-authored-by: N-Shar-ma <bablinaneh@gmail.com>

web/src/compose_ui.js

@@ -702,6 +702,19 @@ export function format_text($textarea, type, inserted_content) {
             $textarea.caret(range.end + `[](${inserted_content})`.length);
             break;
         }
+        case "quote": {
+            let quote_syntax_start = "```quote\n";
+            let quote_syntax_end = "\n```";
+            // Add newlines before and after, if not already present.
+            if (range.start > 0 && text[range.start - 1] !== "\n") {
+                quote_syntax_start = "\n" + quote_syntax_start;
+            }
+            if (range.end < text.length && text[range.end] !== "\n") {
+                quote_syntax_end = quote_syntax_end + "\n";
+            }
+            format(quote_syntax_start, quote_syntax_end);
+            break;
+        }
         case "latex": {
             const inline_latex_syntax = "$$";
             let block_latex_syntax_start = "```math\n";

web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover.hbs

@@ -7,6 +7,7 @@
     <a role="button" data-format-type="numbered" class="compose_control_button fa fa-list-ol formatting_button" aria-label="{{t 'Numbered list' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Numbered list' }}"></a>
     <a role="button" data-format-type="bulleted" class="compose_control_button fa fa-list-ul formatting_button" aria-label="{{t 'Bulleted list' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Bulleted list' }}"></a>
     <div class="divider">|</div>
+    <a role="button" data-format-type="quote" class="compose_control_button fa fa-quote-left formatting_button" aria-label="{{t 'Quote' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Quote' }}"></a>
     <a role="button" data-format-type="latex" class="compose_control_button fa fa-superscript formatting_button" aria-label="{{t 'LaTeX' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'LaTeX' }}"></a>
     <div class="divider">|</div>
 </div>

web/tests/compose_ui.test.js

@@ -945,6 +945,93 @@ run_test("format_text - latex", ({override}) => {
     assert.equal(wrap_selection_called, false);
 });
 
+run_test("format_text - quote", ({override}) => {
+    override(text_field_edit, "set", (_field, text) => {
+        set_text = text;
+    });
+    override(text_field_edit, "wrapSelection", (_field, syntax_start, syntax_end) => {
+        wrap_selection_called = true;
+        wrap_syntax_start = syntax_start;
+        wrap_syntax_end = syntax_end;
+    });
+
+    const quote_syntax_start = "```quote\n";
+    const quote_syntax_end = "\n```";
+
+    // Quote selected text
+    reset_state();
+    init_textarea("abc", {
+        start: 0,
+        end: 3,
+        text: "abc",
+        length: 3,
+    });
+    compose_ui.format_text($textarea, "quote");
+    assert.equal(set_text, "");
+    assert.equal(wrap_selection_called, true);
+    assert.equal(wrap_syntax_start, quote_syntax_start);
+    assert.equal(wrap_syntax_end, quote_syntax_end);
+
+    reset_state();
+    init_textarea("abc\ndef\nghi", {
+        start: 4,
+        end: 7,
+        text: "def",
+        length: 3,
+    });
+    compose_ui.format_text($textarea, "quote");
+    assert.equal(set_text, "");
+    assert.equal(wrap_selection_called, true);
+    assert.equal(wrap_syntax_start, quote_syntax_start);
+    assert.equal(wrap_syntax_end, quote_syntax_end);
+
+    // Undo quote selected text, syntax not selected
+    reset_state();
+    init_textarea("```quote\nabc\n```", {
+        start: 9,
+        end: 12,
+        text: "abc",
+        length: 3,
+    });
+    compose_ui.format_text($textarea, "quote");
+    assert.equal(set_text, "abc");
+    assert.equal(wrap_selection_called, false);
+
+    reset_state();
+    init_textarea("abc\n```quote\ndef\n```\nghi", {
+        start: 13,
+        end: 16,
+        text: "abc",
+        length: 3,
+    });
+    compose_ui.format_text($textarea, "quote");
+    assert.equal(set_text, "abc\ndef\nghi");
+    assert.equal(wrap_selection_called, false);
+
+    // Undo quote selected text, syntax selected
+    reset_state();
+    init_textarea("```quote\nabc\n```", {
+        start: 0,
+        end: 16,
+        text: "```quote\nabc\n```",
+        length: 16,
+    });
+    compose_ui.format_text($textarea, "quote");
+    assert.equal(set_text, "abc");
+    assert.equal(wrap_selection_called, false);
+
+    reset_state();
+    init_textarea("abc\n```quote\ndef\n```\nghi", {
+        start: 4,
+        end: 20,
+        text: "```quote\ndef\n```",
+        length: 16,
+    });
+    compose_ui.format_text($textarea, "quote");
+    assert.equal(set_text, "abc\ndef\nghi");
+    assert.equal(wrap_selection_called, false);
+});
+
 run_test("markdown_shortcuts", ({override_rewire}) => {
     let format_text_type;
     override_rewire(compose_ui, "format_text", (_$textarea, type) => {