From a21f0811cbd6b9e693964660bb616163fc28da26 Mon Sep 17 00:00:00 2001
From: Jelle Raaijmakers <jelle@ladybird.org>
Date: Wed, 8 Jan 2025 13:17:04 +0100
Subject: [PATCH] LibWeb: Implement the "backColor" and "hiliteColor" editing
 commands

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

diff --git a/Libraries/LibWeb/Editing/Commands.cpp b/Libraries/LibWeb/Editing/Commands.cpp
index 2f0106d8aa727..22cfbd6d9cd79 100644
--- a/Libraries/LibWeb/Editing/Commands.cpp
+++ b/Libraries/LibWeb/Editing/Commands.cpp
@@ -25,6 +25,28 @@
 
 namespace Web::Editing {
 
+// https://w3c.github.io/editing/docs/execCommand/#the-backcolor-command
+bool command_back_color_action(DOM::Document& document, String const& value)
+{
+    // 1. If value is not a valid CSS color, prepend "#" to it.
+    auto resulting_value = value;
+    if (!Color::from_string(resulting_value).has_value()) {
+        resulting_value = MUST(String::formatted("#{}", resulting_value));
+
+        // 2. If value is still not a valid CSS color, or if it is currentColor, return false.
+        if (!Color::from_string(resulting_value).has_value()) {
+            // FIXME: Also return false in case of currentColor.
+            return false;
+        }
+    }
+
+    // 3. Set the selection's value to value.
+    set_the_selections_value(document, CommandNames::backColor, resulting_value);
+
+    // 4. Return true.
+    return true;
+}
+
 // https://w3c.github.io/editing/docs/execCommand/#the-bold-command
 bool command_bold_action(DOM::Document& document, String const&)
 {
@@ -1042,6 +1064,12 @@ bool command_style_with_css_state(DOM::Document const& document)
 }
 
 static Array const commands {
+    // https://w3c.github.io/editing/docs/execCommand/#the-backcolor-command
+    CommandDefinition {
+        .command = CommandNames::backColor,
+        .action = command_back_color_action,
+        .relevant_css_property = CSS::PropertyID::BackgroundColor,
+    },
     // https://w3c.github.io/editing/docs/execCommand/#the-bold-command
     CommandDefinition {
         .command = CommandNames::bold,
@@ -1067,6 +1095,12 @@ static Array const commands {
         .action = command_forward_delete_action,
         .preserves_overrides = true,
     },
+    // https://w3c.github.io/editing/docs/execCommand/#the-hilitecolor-command
+    CommandDefinition {
+        .command = CommandNames::hiliteColor,
+        .action = command_back_color_action,  // For historical reasons, backColor and hiliteColor behave identically.
+        .relevant_css_property = CSS::PropertyID::BackgroundColor,
+    },
     // https://w3c.github.io/editing/docs/execCommand/#the-insertlinebreak-command
     CommandDefinition {
         .command = CommandNames::insertLineBreak,
diff --git a/Libraries/LibWeb/Editing/Commands.h b/Libraries/LibWeb/Editing/Commands.h
index e5f7b35e1d0fd..38b389887d17b 100644
--- a/Libraries/LibWeb/Editing/Commands.h
+++ b/Libraries/LibWeb/Editing/Commands.h
@@ -29,6 +29,7 @@ struct CommandDefinition {
 Optional<CommandDefinition const&> find_command_definition(FlyString const&);
 
 // Command implementations
+bool command_back_color_action(DOM::Document&, String const&);
 bool command_bold_action(DOM::Document&, String const&);
 bool command_default_paragraph_separator_action(DOM::Document&, String const&);
 String command_default_paragraph_separator_value(DOM::Document const&);
diff --git a/Tests/LibWeb/Text/expected/Editing/execCommand-backColor.txt b/Tests/LibWeb/Text/expected/Editing/execCommand-backColor.txt
new file mode 100644
index 0000000000000..738319e55c5bd
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/Editing/execCommand-backColor.txt
@@ -0,0 +1,2 @@
+Div contents: "<span style="background-color: rgb(0, 0, 255);">foo</span>bar"
+Div contents: "<span style="background-color: rgb(0, 0, 255);">foo</span><span style="background-color: red;">bar</span>"
diff --git a/Tests/LibWeb/Text/input/Editing/execCommand-backColor.html b/Tests/LibWeb/Text/input/Editing/execCommand-backColor.html
new file mode 100644
index 0000000000000..7ec26de2ec5e4
--- /dev/null
+++ b/Tests/LibWeb/Text/input/Editing/execCommand-backColor.html
@@ -0,0 +1,22 @@
+<script src="../include.js"></script>
+<div contenteditable="true">foobar</div>
+<script>
+    test(() => {
+        const range = document.createRange();
+        getSelection().addRange(range);
+
+        const divElm = document.querySelector('div');
+
+        // Make 'foo' blue
+        range.setStart(divElm.childNodes[0], 0);
+        range.setEnd(divElm.childNodes[0], 3);
+        document.execCommand('backColor', false, '#0000ff');
+        println(`Div contents: "${divElm.innerHTML}"`);
+
+        // Make 'bar' red
+        range.setStart(divElm.childNodes[1], 0);
+        range.setEnd(divElm.childNodes[1], 3);
+        document.execCommand('hiliteColor', false, 'red');
+        println(`Div contents: "${divElm.innerHTML}"`);
+    });
+</script>