From 63e5e0564339fd600d99f59f2ca538b43e6eb216 Mon Sep 17 00:00:00 2001
From: Julia Bichler <julia.bichler@tum.de>
Date: Wed, 2 Feb 2022 15:39:59 +0100
Subject: [PATCH] compose: Format button for strikethrough.

---
 web/src/compose_ui.js                         |  5 +++
 .../compose_control_buttons_in_popover.hbs    |  1 +
 web/tests/compose_ui.test.js                  | 44 +++++++++++++++++++
 3 files changed, 50 insertions(+)

diff --git a/web/src/compose_ui.js b/web/src/compose_ui.js
index 69e098bcf4..eebb209ac8 100644
--- a/web/src/compose_ui.js
+++ b/web/src/compose_ui.js
@@ -677,6 +677,11 @@ export function format_text($textarea, type, inserted_content) {
         case "numbered":
             format_list(type);
             break;
+        case "strikethrough": {
+            const strikethrough_syntax = "~~";
+            format(strikethrough_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 d0b754b1cf..d6ad0562e0 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
@@ -2,6 +2,7 @@
     <a role="button" data-format-type="link" class="compose_control_button fa fa-link formatting_button" aria-label="{{t 'Link' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Link' }}"></a>
     <a role="button" data-format-type="bold" class="compose_control_button fa fa-bold formatting_button" aria-label="{{t 'Bold' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Bold' }}"></a>
     <a role="button" data-format-type="italic" class="compose_control_button fa fa-italic formatting_button" aria-label="{{t 'Italic' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Italic' }}"></a>
+    <a role="button" data-format-type="strikethrough" class="compose_control_button fa fa-strikethrough formatting_button" aria-label="{{t 'Strikethrough' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Strikethrough' }}"></a>
     <div class="divider">|</div>
     <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>
diff --git a/web/tests/compose_ui.test.js b/web/tests/compose_ui.test.js
index ee73db9fbe..3caeae99e0 100644
--- a/web/tests/compose_ui.test.js
+++ b/web/tests/compose_ui.test.js
@@ -766,6 +766,50 @@ run_test("format_text - bold and italic", ({override}) => {
     assert.equal(wrap_selection_called, false);
 });
 
+run_test("format_text - strikethrough", ({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 strikethrough_syntax = "~~";
+
+    // Strikethrough selected text
+    reset_state();
+    compose_ui.format_text($textarea, "strikethrough");
+    assert.equal(set_text, "");
+    assert.equal(wrap_selection_called, true);
+    assert.equal(wrap_syntax_start, strikethrough_syntax);
+    assert.equal(wrap_syntax_end, strikethrough_syntax);
+
+    // Undo strikethrough selected text, syntax not selected
+    reset_state();
+    init_textarea("~~abc~~", {
+        start: 2,
+        end: 5,
+        text: "abc",
+        length: 3,
+    });
+    compose_ui.format_text($textarea, "strikethrough");
+    assert.equal(set_text, "abc");
+    assert.equal(wrap_selection_called, false);
+
+    // Undo strikethrough selected text, syntax selected
+    reset_state();
+    init_textarea("~~abc~~", {
+        start: 0,
+        end: 7,
+        text: "~~abc~~",
+        length: 7,
+    });
+    compose_ui.format_text($textarea, "strikethrough");
+    assert.equal(set_text, "abc");
+});
+
 run_test("markdown_shortcuts", ({override_rewire}) => {
     let format_text_type;
     override_rewire(compose_ui, "format_text", (_$textarea, type) => {