LibWeb: Implement the "insertUnorderedList" editing command

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

Libraries/LibWeb/Editing/Commands.cpp

@@ -1841,6 +1841,28 @@ bool command_insert_text_action(DOM::Document& document, String const& value)
     return true;
 }
 
+// https://w3c.github.io/editing/docs/execCommand/#the-insertunorderedlist-command
+bool command_insert_unordered_list_action(DOM::Document& document, String const&)
+{
+    // Toggle lists with tag name "ul", then return true.
+    toggle_lists(document, HTML::TagNames::ul);
+    return true;
+}
+
+// https://w3c.github.io/editing/docs/execCommand/#the-insertunorderedlist-command
+bool command_insert_unordered_list_indeterminate(DOM::Document const& document)
+{
+    // True if the selection's list state is "mixed" or "mixed ul", false otherwise.
+    return first_is_one_of(selections_list_state(document), SelectionsListState::Mixed, SelectionsListState::MixedUl);
+}
+
+// https://w3c.github.io/editing/docs/execCommand/#the-insertunorderedlist-command
+bool command_insert_unordered_list_state(DOM::Document const& document)
+{
+    // True if the selection's list state is "ul", false otherwise.
+    return selections_list_state(document) == SelectionsListState::Ul;
+}
+
 // https://w3c.github.io/editing/docs/execCommand/#the-italic-command
 bool command_italic_action(DOM::Document& document, String const&)
 {
@@ -2245,6 +2267,14 @@ static Array const commands {
         .command = CommandNames::insertText,
         .action = command_insert_text_action,
     },
+    // https://w3c.github.io/editing/docs/execCommand/#the-insertunorderedlist-command
+    CommandDefinition {
+        .command = CommandNames::insertUnorderedList,
+        .action = command_insert_unordered_list_action,
+        .indeterminate = command_insert_unordered_list_indeterminate,
+        .state = command_insert_unordered_list_state,
+        .preserves_overrides = true,
+    },
     // https://w3c.github.io/editing/docs/execCommand/#the-italic-command
     CommandDefinition {
         .command = CommandNames::italic,

Libraries/LibWeb/Editing/Commands.h

@@ -53,6 +53,9 @@ bool command_insert_ordered_list_indeterminate(DOM::Document const&);
 bool command_insert_ordered_list_state(DOM::Document const&);
 bool command_insert_paragraph_action(DOM::Document&, String const&);
 bool command_insert_text_action(DOM::Document&, String const&);
+bool command_insert_unordered_list_action(DOM::Document&, String const&);
+bool command_insert_unordered_list_indeterminate(DOM::Document const&);
+bool command_insert_unordered_list_state(DOM::Document const&);
 bool command_italic_action(DOM::Document&, String const&);
 bool command_remove_format_action(DOM::Document&, String const&);
 bool command_strikethrough_action(DOM::Document&, String const&);

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

@@ -0,0 +1,3 @@
+<ul><li>foobar</li></ul>
+<div>foobar</div>
+<ul><li>foobar</li></ul>

Tests/LibWeb/Text/input/Editing/execCommand-insertUnorderedList.html

@@ -0,0 +1,31 @@
+<script src="../include.js"></script>
+<div contenteditable="true" id="d1">foobar</div>
+<div contenteditable="true" id="d2"><ul><li>foobar</li></ul></div>
+<div contenteditable="true" id="d3"><ol><li>foobar</li></ol></div>
+<script>
+    test(() => {
+        const range = document.createRange();
+        getSelection().addRange(range);
+
+        // Create unordered list of 'foobar'
+        const div1 = document.querySelector('#d1');
+        range.setStart(div1.firstChild, 0);
+        range.setEnd(div1.firstChild, 6);
+        document.execCommand('insertUnorderedList');
+        println(div1.innerHTML);
+
+        // De-unordered list 'foobar'
+        const div2 = document.querySelector('#d2');
+        range.setStart(div2.firstChild.firstChild.firstChild, 0);
+        range.setEnd(div2.firstChild.firstChild.firstChild, 6);
+        document.execCommand('insertUnorderedList');
+        println(div2.innerHTML);
+
+        // Change type of list
+        const div3 = document.querySelector('#d3');
+        range.setStart(div3.firstChild.firstChild.firstChild, 0);
+        range.setEnd(div3.firstChild.firstChild.firstChild, 6);
+        document.execCommand('insertUnorderedList');
+        println(div3.innerHTML);
+    });
+</script>