LibWeb: Implement the "foreColor" editing command

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

Libraries/LibWeb/Editing/Commands.cpp

@@ -593,6 +593,28 @@ String command_font_size_value(DOM::Document const& document)
     return legacy_font_size(pixel_size.to_int());
 }
 
+// https://w3c.github.io/editing/docs/execCommand/#the-forecolor-command
+bool command_fore_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::foreColor, resulting_value);
+
+    // 4. Return true.
+    return true;
+}
+
 // https://w3c.github.io/editing/docs/execCommand/#the-forwarddelete-command
 bool command_forward_delete_action(DOM::Document& document, String const&)
 {
@@ -1229,6 +1251,12 @@ static Array const commands {
         .value = command_font_size_value,
         .relevant_css_property = CSS::PropertyID::FontSize,
     },
+    // https://w3c.github.io/editing/docs/execCommand/#the-forecolor-command
+    CommandDefinition {
+        .command = CommandNames::foreColor,
+        .action = command_fore_color_action,
+        .relevant_css_property = CSS::PropertyID::Color,
+    },
     // https://w3c.github.io/editing/docs/execCommand/#the-forwarddelete-command
     CommandDefinition {
         .command = CommandNames::forwardDelete,

Libraries/LibWeb/Editing/Commands.h

@@ -38,6 +38,7 @@ bool command_delete_action(DOM::Document&, String const&);
 bool command_font_name_action(DOM::Document&, String const&);
 bool command_font_size_action(DOM::Document&, String const&);
 String command_font_size_value(DOM::Document const&);
+bool command_fore_color_action(DOM::Document&, String const&);
 bool command_forward_delete_action(DOM::Document&, String const&);
 bool command_insert_linebreak_action(DOM::Document&, String const&);
 bool command_insert_paragraph_action(DOM::Document&, String const&);

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

@@ -0,0 +1,2 @@
+Div contents: "<font color="#0000ff">foo</font>bar"
+Div contents: "<font color="#0000ff">foo</font><font color="#ff0000">bar</font>"

Tests/LibWeb/Text/input/Editing/execCommand-foreColor.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('foreColor', false, '#0000ff');
+        println(`Div contents: "${divElm.innerHTML}"`);
+
+        // Make 'bar' red
+        range.setStart(divElm.childNodes[1], 0);
+        range.setEnd(divElm.childNodes[1], 3);
+        document.execCommand('foreColor', false, 'red');
+        println(`Div contents: "${divElm.innerHTML}"`);
+    });
+</script>