compose: Format button for code.

Note that toggling off, only works for code blocks without a specified
language. So toggling formatting off only works for code blocks like:
```
code
```
and not:
```javascript
code
```

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

web/src/compose_ui.js

@@ -682,6 +682,30 @@ export function format_text($textarea, type, inserted_content) {
             format(strikethrough_syntax);
             break;
         }
+        case "code": {
+            const inline_code_syntax = "`";
+            let block_code_syntax_start = "```\n";
+            let block_code_syntax_end = "\n```";
+            // If there is no text selected or the selected text is either multiline or
+            // already using multiline code syntax, we use multiline code syntax.
+            if (
+                selected_text === "" ||
+                selected_text.includes("\n") ||
+                is_selection_formatted(block_code_syntax_start, block_code_syntax_end)
+            ) {
+                // Add newlines before and after, if not already present.
+                if (range.start > 0 && text[range.start - 1] !== "\n") {
+                    block_code_syntax_start = "\n" + block_code_syntax_start;
+                }
+                if (range.end < text.length && text[range.end] !== "\n") {
+                    block_code_syntax_end = block_code_syntax_end + "\n";
+                }
+                format(block_code_syntax_start, block_code_syntax_end);
+            } else {
+                format(inline_code_syntax);
+            }
+            break;
+        }
         case "link": {
             // Ctrl + L: Insert a link to selected text
             wrapSelection(field, "[", "](url)");

web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover.hbs

@@ -8,6 +8,7 @@
     <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="code" class="compose_control_button fa fa-code formatting_button" aria-label="{{t 'Code' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Code' }}"></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,141 @@ run_test("format_text - latex", ({override}) => {
     assert.equal(wrap_selection_called, false);
 });
 
+run_test("format_text - code", ({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 code_syntax = "`";
+    const code_block_syntax_start = "```\n";
+    const code_block_syntax_end = "\n```";
+
+    // Code selected text
+    reset_state();
+    init_textarea("abc def", {
+        start: 0,
+        end: 3,
+        text: "abc",
+        length: 3,
+    });
+    compose_ui.format_text($textarea, "code");
+    assert.equal(set_text, "");
+    assert.equal(wrap_selection_called, true);
+    assert.equal(wrap_syntax_start, code_syntax);
+    assert.equal(wrap_syntax_end, code_syntax);
+
+    reset_state();
+    init_textarea("abc", {
+        start: 0,
+        end: 3,
+        text: "abc",
+        length: 3,
+    });
+    compose_ui.format_text($textarea, "code");
+    assert.equal(set_text, "");
+    assert.equal(wrap_selection_called, true);
+    assert.equal(wrap_syntax_start, code_syntax);
+    assert.equal(wrap_syntax_end, code_syntax);
+
+    reset_state();
+    init_textarea("abc\ndef\nghi\njkl", {
+        start: 4,
+        end: 11,
+        text: "def\nghi",
+        length: 7,
+    });
+    compose_ui.format_text($textarea, "code");
+    assert.equal(set_text, "");
+    assert.equal(wrap_selection_called, true);
+    assert.equal(wrap_syntax_start, code_block_syntax_start);
+    assert.equal(wrap_syntax_end, code_block_syntax_end);
+
+    // No text selected
+    reset_state();
+    init_textarea("", {
+        start: 0,
+        end: 0,
+        text: "",
+        length: 0,
+    });
+    compose_ui.format_text($textarea, "code");
+    assert.equal(set_text, "");
+    assert.equal(wrap_selection_called, true);
+
+    // Undo code selected text, syntax not selected
+    reset_state();
+    init_textarea("`abc`", {
+        start: 1,
+        end: 4,
+        text: "abc",
+        length: 3,
+    });
+    compose_ui.format_text($textarea, "code");
+    assert.equal(set_text, "abc");
+    assert.equal(wrap_selection_called, false);
+
+    reset_state();
+    init_textarea("```\nabc\n```", {
+        start: 4,
+        end: 7,
+        text: "abc",
+        length: 3,
+    });
+    compose_ui.format_text($textarea, "code");
+    assert.equal(set_text, "abc");
+    assert.equal(wrap_selection_called, false);
+
+    reset_state();
+    init_textarea("abc\n```\ndef\n```\nghi", {
+        start: 8,
+        end: 11,
+        text: "abc",
+        length: 3,
+    });
+    compose_ui.format_text($textarea, "code");
+    assert.equal(set_text, "abc\ndef\nghi");
+    assert.equal(wrap_selection_called, false);
+
+    // Undo code selected text, syntax selected
+    reset_state();
+    init_textarea("`abc` def", {
+        start: 0,
+        end: 5,
+        text: "`abc`",
+        length: 5,
+    });
+    compose_ui.format_text($textarea, "code");
+    assert.equal(set_text, "abc def");
+    assert.equal(wrap_selection_called, false);
+
+    reset_state();
+    init_textarea("```\nabc\ndef\n```", {
+        start: 0,
+        end: 15,
+        text: "```\nabc\ndef\n```",
+        length: 15,
+    });
+    compose_ui.format_text($textarea, "code");
+    assert.equal(set_text, "abc\ndef");
+    assert.equal(wrap_selection_called, false);
+
+    reset_state();
+    init_textarea("abc\n```\ndef\n```\nghi", {
+        start: 3,
+        end: 16,
+        text: "\n```\ndef\n```\n",
+        length: 13,
+    });
+    compose_ui.format_text($textarea, "code");
+    assert.equal(set_text, "abc\ndef\nghi");
+    assert.equal(wrap_selection_called, false);
+});
+
 run_test("format_text - quote", ({override}) => {
     override(text_field_edit, "set", (_field, text) => {
         set_text = text;