LibWeb: Implement the "fontName" editing command

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

Libraries/LibWeb/Editing/Commands.cpp

@@ -492,6 +492,14 @@ bool command_delete_action(DOM::Document& document, String const&)
     return true;
 }
 
+// https://w3c.github.io/editing/docs/execCommand/#the-fontname-command
+bool command_font_name_action(DOM::Document& document, String const& value)
+{
+    // Set the selection's value to value, then return true.
+    set_the_selections_value(document, CommandNames::fontName, value);
+    return true;
+}
+
 // https://w3c.github.io/editing/docs/execCommand/#the-forwarddelete-command
 bool command_forward_delete_action(DOM::Document& document, String const&)
 {
@@ -1115,6 +1123,12 @@ static Array const commands {
         .action = command_default_paragraph_separator_action,
         .value = command_default_paragraph_separator_value,
     },
+    // https://w3c.github.io/editing/docs/execCommand/#the-fontname-command
+    CommandDefinition {
+        .command = CommandNames::fontName,
+        .action = command_font_name_action,
+        .relevant_css_property = CSS::PropertyID::FontFamily,
+    },
     // https://w3c.github.io/editing/docs/execCommand/#the-forwarddelete-command
     CommandDefinition {
         .command = CommandNames::forwardDelete,

Libraries/LibWeb/Editing/Commands.h

@@ -35,6 +35,7 @@ bool command_create_link_action(DOM::Document&, String const&);
 bool command_default_paragraph_separator_action(DOM::Document&, String const&);
 String command_default_paragraph_separator_value(DOM::Document const&);
 bool command_delete_action(DOM::Document&, String const&);
+bool command_font_name_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-fontName.txt

@@ -0,0 +1,2 @@
+foo<font face="monospace" style="font-family: monospace;">bar</font>
+<font face="sans-serif" style="font-family: sans-serif;">foo</font><font face="sans-serif" style="font-family: sans-serif;"><font style="">bar</font></font>

Tests/LibWeb/Text/input/Editing/execCommand-fontName.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');
+
+        // Set fontName for 'bar'
+        range.setStart(divElm.childNodes[0], 3);
+        range.setEnd(divElm.childNodes[0], 6);
+        document.execCommand('fontName', false, 'monospace');
+        println(divElm.innerHTML);
+
+        // Set fontName for the entire editable div
+        range.setStart(divElm, 0);
+        range.setEnd(divElm, 2);
+        document.execCommand('fontName', false, 'sans-serif');
+        println(divElm.innerHTML);
+    });
+</script>