From 043a28baebe2d4b86e4163d67d8f2cf572a8ede6 Mon Sep 17 00:00:00 2001
From: Jelle Raaijmakers <jelle@ladybird.org>
Date: Wed, 8 Jan 2025 17:26:06 +0100
Subject: [PATCH] LibWeb: Implement the "underline" editing command

---
 Libraries/LibWeb/Editing/Commands.cpp         | 23 +++++++++++++
 Libraries/LibWeb/Editing/Commands.h           |  1 +
 .../Editing/execCommand-underline.txt         |  4 +++
 .../input/Editing/execCommand-underline.html  | 34 +++++++++++++++++++
 4 files changed, 62 insertions(+)
 create mode 100644 Tests/LibWeb/Text/expected/Editing/execCommand-underline.txt
 create mode 100644 Tests/LibWeb/Text/input/Editing/execCommand-underline.html

diff --git a/Libraries/LibWeb/Editing/Commands.cpp b/Libraries/LibWeb/Editing/Commands.cpp
index 12e332425af..da74aed07f0 100644
--- a/Libraries/LibWeb/Editing/Commands.cpp
+++ b/Libraries/LibWeb/Editing/Commands.cpp
@@ -1422,6 +1422,23 @@ bool command_superscript_indeterminate(DOM::Document const& document)
     return has_mixed_value;
 }
 
+// https://w3c.github.io/editing/docs/execCommand/#the-underline-command
+bool command_underline_action(DOM::Document& document, String const&)
+{
+    // If queryCommandState("underline") returns true, set the selection's value to null.
+    if (document.query_command_state(CommandNames::underline)) {
+        set_the_selections_value(document, CommandNames::underline, {});
+    }
+
+    // Otherwise set the selection's value to "underline".
+    else {
+        set_the_selections_value(document, CommandNames::underline, "underline"_string);
+    }
+
+    // Either way, return true.
+    return true;
+}
+
 static Array const commands {
     // https://w3c.github.io/editing/docs/execCommand/#the-backcolor-command
     CommandDefinition {
@@ -1534,6 +1551,12 @@ static Array const commands {
         .indeterminate = command_superscript_indeterminate,
         .inline_activated_values = { "superscript"sv },
     },
+    // https://w3c.github.io/editing/docs/execCommand/#the-underline-command
+    CommandDefinition {
+        .command = CommandNames::underline,
+        .action = command_underline_action,
+        .inline_activated_values = { "underline"sv },
+    },
 };
 
 Optional<CommandDefinition const&> find_command_definition(FlyString const& command)
diff --git a/Libraries/LibWeb/Editing/Commands.h b/Libraries/LibWeb/Editing/Commands.h
index 8bc14e9c05c..971671ffa91 100644
--- a/Libraries/LibWeb/Editing/Commands.h
+++ b/Libraries/LibWeb/Editing/Commands.h
@@ -51,5 +51,6 @@ bool command_subscript_action(DOM::Document&, String const&);
 bool command_subscript_indeterminate(DOM::Document const&);
 bool command_superscript_action(DOM::Document&, String const&);
 bool command_superscript_indeterminate(DOM::Document const&);
+bool command_underline_action(DOM::Document&, String const&);
 
 }
diff --git a/Tests/LibWeb/Text/expected/Editing/execCommand-underline.txt b/Tests/LibWeb/Text/expected/Editing/execCommand-underline.txt
new file mode 100644
index 00000000000..f8e52a0ec36
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/Editing/execCommand-underline.txt
@@ -0,0 +1,4 @@
+Div contents: "foobar" state: false selection: #document 0 #document 0
+Div contents: "foo<u>bar</u>" state: true selection: #text 0 #text 3
+Div contents: "<u>foobar</u>" state: true selection: #text 0 #text 3
+Div contents: "<u>foo</u>bar" state: false selection: #text 0 #text 3
diff --git a/Tests/LibWeb/Text/input/Editing/execCommand-underline.html b/Tests/LibWeb/Text/input/Editing/execCommand-underline.html
new file mode 100644
index 00000000000..5a1ef1aae51
--- /dev/null
+++ b/Tests/LibWeb/Text/input/Editing/execCommand-underline.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('underline')} selection: ${printableSelection()}`);
+        report();
+
+        // Underline 'bar'
+        range.setStart(divElm.childNodes[0], 3);
+        range.setEnd(divElm.childNodes[0], 6);
+        document.execCommand('underline');
+        report();
+
+        // Underline 'foo'
+        range.setStart(divElm.childNodes[0], 0);
+        range.setEnd(divElm.childNodes[0], 3);
+        document.execCommand('underline');
+        report();
+
+        // Ununderlinify 'bar'
+        range.setStart(divElm.childNodes[0].childNodes[1], 0);
+        range.setEnd(divElm.childNodes[0].childNodes[1], 3);
+        document.execCommand('underline');
+        report();
+    });
+</script>