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;