LibWeb: Implement the "bold" editing command

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

Libraries/LibWeb/Editing/Commands.cpp

@@ -25,6 +25,23 @@
 
 namespace Web::Editing {
 
+// https://w3c.github.io/editing/docs/execCommand/#the-bold-command
+bool command_bold_action(DOM::Document& document, String const&)
+{
+    // If queryCommandState("bold") returns true, set the selection's value to "normal".
+    if (document.query_command_state(CommandNames::bold)) {
+        set_the_selections_value(document, CommandNames::bold, "normal"_string);
+    }
+
+    // Otherwise set the selection's value to "bold".
+    else {
+        set_the_selections_value(document, CommandNames::bold, "bold"_string);
+    }
+
+    // Either way, return true.
+    return true;
+}
+
 // https://w3c.github.io/editing/docs/execCommand/#the-defaultparagraphseparator-command
 bool command_default_paragraph_separator_action(DOM::Document& document, String const& input_value)
 {
@@ -822,6 +839,13 @@ bool command_style_with_css_state(DOM::Document const& document)
 }
 
 static Array const commands {
+    // https://w3c.github.io/editing/docs/execCommand/#the-bold-command
+    CommandDefinition {
+        .command = CommandNames::bold,
+        .action = command_bold_action,
+        .relevant_css_property = CSS::PropertyID::FontWeight,
+        .inline_activated_values = { "bold"sv, "600"sv, "700"sv, "800"sv, "900"sv },
+    },
     // https://w3c.github.io/editing/docs/execCommand/#the-delete-command
     CommandDefinition {
         .command = CommandNames::delete_,

Libraries/LibWeb/Editing/Commands.h

@@ -23,12 +23,13 @@ struct CommandDefinition {
     bool preserves_overrides { false };
 
     // https://w3c.github.io/editing/docs/execCommand/#inline-command-activated-values
-    Vector<String> inline_activated_values {};
+    Vector<StringView> inline_activated_values {};
 };
 
 Optional<CommandDefinition const&> find_command_definition(FlyString const&);
 
 // Command implementations
+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&);
 bool command_delete_action(DOM::Document&, String const&);

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

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

Tests/LibWeb/Text/expected/Editing/execCommand-is-a-noop.txt

@@ -1,7 +0,0 @@
-execCommand("bold") returned false
-Hello, world!<b>I'm totally bold rn</b>
-queryCommandEnabled("bold") returned false
-queryCommandIndeterm("bold") returned false
-queryCommandState("bold") returned false
-queryCommandSupported("bold") returned false
-queryCommandValue("bold") returned ""

Tests/LibWeb/Text/input/Editing/execCommand-bold.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('bold')} selection: ${printableSelection()}`);
+        report();
+
+        // Make 'bar' bold
+        range.setStart(divElm.childNodes[0], 3);
+        range.setEnd(divElm.childNodes[0], 6);
+        document.execCommand('bold');
+        report();
+
+        // Make 'foo' bold
+        range.setStart(divElm.childNodes[0], 0);
+        range.setEnd(divElm.childNodes[0], 3);
+        document.execCommand('bold');
+        report();
+
+        // Deboldify 'bar'
+        range.setStart(divElm.childNodes[0].childNodes[1], 0);
+        range.setEnd(divElm.childNodes[0].childNodes[1], 3);
+        document.execCommand('bold');
+        report();
+    });
+</script>

Tests/LibWeb/Text/input/Editing/execCommand-is-a-noop.html

@@ -1,32 +0,0 @@
-<script src="../include.js"></script>
-<div id="text" contenteditable="true"></div>
-<script>
-    test(() => {
-        let text = document.getElementById("text");
-        text.focus();
-
-        let hello = text.appendChild(document.createTextNode("Hello, world!"));
-
-        let boldText = document.createTextNode("I'm totally bold rn");
-        let boldTag = text.appendChild(document.createElement("b"));
-        boldTag.appendChild(boldText);
-
-        // select the text
-        let range = document.createRange();
-        range.selectNodeContents(hello);
-        let selection = window.getSelection();
-        selection.removeAllRanges();
-        selection.addRange(range);
-
-        let e = document.execCommand("bold", false, "on");
-        println(`execCommand("bold") returned ${e}`);
-        let allTheText = text.innerHTML;
-        println(allTheText);
-
-        println(`queryCommandEnabled("bold") returned ${document.queryCommandEnabled("bold")}`);
-        println(`queryCommandIndeterm("bold") returned ${document.queryCommandIndeterm("bold")}`);
-        println(`queryCommandState("bold") returned ${document.queryCommandState("bold")}`);
-        println(`queryCommandSupported("bold") returned ${document.queryCommandSupported("bold")}`);
-        println(`queryCommandValue("bold") returned "${document.queryCommandValue("bold")}"`);
-    });
-</script>