diff --git a/web/src/compose_ui.js b/web/src/compose_ui.js
index 0dd60fdd9f..ca90c684e4 100644
--- a/web/src/compose_ui.js
+++ b/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)");
diff --git a/web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover.hbs b/web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover.hbs
index f50837713d..16a47bc00c 100644
--- a/web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover.hbs
+++ b/web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover.hbs
@@ -8,6 +8,7 @@
|
+
|
diff --git a/web/tests/compose_ui.test.js b/web/tests/compose_ui.test.js
index b56880deaa..e4ddd19254 100644
--- a/web/tests/compose_ui.test.js
+++ b/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;