LibWeb: Implement the "strikethrough" editing command

Author: https://github.com/gmta
Commit: 8c51d6863f
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3216

Libraries/LibWeb/Editing/Commands.cpp

@@ -1281,6 +1281,23 @@ bool command_remove_format_action(DOM::Document& document, String const&)
     return true;
 }
 
+// https://w3c.github.io/editing/docs/execCommand/#the-strikethrough-command
+bool command_strikethrough_action(DOM::Document& document, String const&)
+{
+    // If queryCommandState("strikethrough") returns true, set the selection's value to null.
+    if (document.query_command_state(CommandNames::strikethrough)) {
+        set_the_selections_value(document, CommandNames::strikethrough, {});
+    }
+
+    // Otherwise set the selection's value to "line-through".
+    else {
+        set_the_selections_value(document, CommandNames::strikethrough, "line-through"_string);
+    }
+
+    // Either way, return true.
+    return true;
+}
+
 // https://w3c.github.io/editing/docs/execCommand/#the-stylewithcss-command
 bool command_style_with_css_action(DOM::Document& document, String const& value)
 {
@@ -1385,6 +1402,12 @@ static Array const commands {
         .command = CommandNames::removeFormat,
         .action = command_remove_format_action,
     },
+    // https://w3c.github.io/editing/docs/execCommand/#the-strikethrough-command
+    CommandDefinition {
+        .command = CommandNames::strikethrough,
+        .action = command_strikethrough_action,
+        .inline_activated_values = { "line-through"sv },
+    },
     // https://w3c.github.io/editing/docs/execCommand/#the-stylewithcss-command
     CommandDefinition {
         .command = CommandNames::styleWithCSS,

Libraries/LibWeb/Editing/Commands.h

@@ -44,6 +44,7 @@ bool command_insert_linebreak_action(DOM::Document&, String const&);
 bool command_insert_paragraph_action(DOM::Document&, String const&);
 bool command_italic_action(DOM::Document&, String const&);
 bool command_remove_format_action(DOM::Document&, String const&);
+bool command_strikethrough_action(DOM::Document&, String const&);
 bool command_style_with_css_action(DOM::Document&, String const&);
 bool command_style_with_css_state(DOM::Document const&);
 

Tests/LibWeb/Text/expected/Editing/execCommand-strikethrough.txt

@@ -0,0 +1,4 @@
+Div contents: "foobar" state: false selection: #document 0 #document 0
+Div contents: "foo<s>bar</s>" state: true selection: #text 0 #text 3
+Div contents: "<s>foobar</s>" state: true selection: #text 0 #text 3
+Div contents: "<s>foo</s>bar" state: false selection: #text 0 #text 3

Tests/LibWeb/Text/input/Editing/execCommand-strikethrough.html

@@ -0,0 +1,34 @@
+<script src="../include.js"></script>
+<div contenteditable="true">foobar</div>
+<script>
+    test(() => {
+        const range = document.createRange();
+        getSelection().addRange(range);
+
+        const divElm = document.querySelector('div');
+        const printableSelection = () => {
+            let activeRange = getSelection().getRangeAt(0);
+            return `${activeRange.startContainer.nodeName} ${activeRange.startOffset} ${activeRange.endContainer.nodeName} ${activeRange.endOffset}`;
+        };
+        const report = () => println(`Div contents: "${divElm.innerHTML}" state: ${document.queryCommandState('strikethrough')} selection: ${printableSelection()}`);
+        report();
+
+        // Strike through 'bar'
+        range.setStart(divElm.childNodes[0], 3);
+        range.setEnd(divElm.childNodes[0], 6);
+        document.execCommand('strikethrough');
+        report();
+
+        // Strike through 'foo'
+        range.setStart(divElm.childNodes[0], 0);
+        range.setEnd(divElm.childNodes[0], 3);
+        document.execCommand('strikethrough');
+        report();
+
+        // Unstrikethroughify 'bar'
+        range.setStart(divElm.childNodes[0].childNodes[1], 0);
+        range.setEnd(divElm.childNodes[0].childNodes[1], 3);
+        document.execCommand('strikethrough');
+        report();
+    });
+</script>