Support task list checkboxes outside p elements

Previously, list items with leading checkboxes would only be treated as task list items if the checkbox was wrapped in a `<p>` element, like:

    <li><p><input type="checkbox"> Other content</p></li>

This adds support for detecting task lists even when the checkbox is not nested in a `<p>`:

    <li><input type="checkbox"> Other content</li>

This does *not* add support for some other complex scenarios, such as the checkbox being inside other phrasing content, being more deeply nested, or having comments in front of it:

    <li><strong><input type="checkbox"> Other content</strong></li>
    <li><p><strong><input type="checkbox"> Other content</strong></p></li>
    <li><!-- Comment --><input type="checkbox"> Other content</li>

Fixes syntax-tree#80.

lib/handlers/li.js

@@ -17,37 +17,43 @@ import {phrasing} from 'hast-util-phrasing'
  *   mdast node.
  */
 export function li(state, node) {
-  const head = node.children[0]
   /** @type {boolean | null} */
   let checked = null
   /** @type {Element | undefined} */
   let clone
 
-  // Check if this node starts with a checkbox.
-  if (head && head.type === 'element' && head.tagName === 'p') {
-    const checkbox = head.children[0]
+  // Check if this node starts with a checkbox (or a paragraph that starts with
+  // a checkbox), indicating the list item is a GFM TaskListItem.
+  let checkboxParent = node
+  let checkbox = node.children[0]
+  if (checkbox && checkbox.type === 'element' && checkbox.tagName === 'p') {
+    checkboxParent = checkbox
+    checkbox = checkbox.children[0]
+  }
 
-    if (
-      checkbox &&
-      checkbox.type === 'element' &&
-      checkbox.tagName === 'input' &&
-      checkbox.properties &&
-      (checkbox.properties.type === 'checkbox' ||
-        checkbox.properties.type === 'radio')
-    ) {
-      checked = Boolean(checkbox.properties.checked)
-      clone = {
-        ...node,
-        children: [
-          {...head, children: head.children.slice(1)},
-          ...node.children.slice(1)
-        ]
-      }
+  if (
+    checkbox &&
+    checkbox.type === 'element' &&
+    checkbox.tagName === 'input' &&
+    checkbox.properties &&
+    (checkbox.properties.type === 'checkbox' ||
+      checkbox.properties.type === 'radio')
+  ) {
+    checked = Boolean(checkbox.properties.checked)
+
+    clone = {...node, children: [...node.children]}
+    if (checkboxParent === node) {
+      clone.children.splice(0, 1)
+    } else {
+      clone.children.splice(0, 1, {
+        ...checkboxParent,
+        children: checkboxParent.children.slice(1)
+      })
     }
+  } else {
+    clone = node
   }
 
-  if (!clone) clone = node
-
   const spread = spreadout(clone)
   const children = state.toFlow(state.all(clone))
 

test/fixtures/ol/index.html

@@ -59,4 +59,13 @@
   <li><p><input type="checkbox">Echo</p></li>
   <li><p><input type="checkbox"><strong>Foxtrot</strong></p></li>
   <li><p><input type="checkbox"> <strong>Golf</strong></p></li>
+  <li>
+    <p>
+      <input type="checkbox"> Hotel
+    </p>
+  </li>
+  <li><input type="checkbox"> India</li>
+  <li>
+    <input type="checkbox"> Juliet
+  </li>
 </ol>

test/fixtures/ol/index.md

@@ -57,3 +57,9 @@ Quuux.
 5. [ ] **Foxtrot**
 
 6. [ ] **Golf**
+
+7. [ ] Hotel
+
+8. [ ] India
+
+9. [ ] Juliet

test/fixtures/ul/index.html

@@ -59,4 +59,13 @@
   <li><p><input type="checkbox">Echo</p></li>
   <li><p><input type="checkbox"><strong>Foxtrot</strong></p></li>
   <li><p><input type="checkbox"> <strong>Golf</strong></p></li>
+  <li>
+    <p>
+      <input type="checkbox"> Hotel
+    </p>
+  </li>
+  <li><input type="checkbox"> India</li>
+  <li>
+    <input type="checkbox"> Juliet
+  </li>
 </ul>

test/fixtures/ul/index.md

@@ -57,3 +57,9 @@ Quuux.
 * [ ] **Foxtrot**
 
 * [ ] **Golf**
+
+* [ ] Hotel
+
+* [ ] India
+
+* [ ] Juliet