Add improved spread algorithm for list items

Closes GH-75.

Co-authored-by: TRIAEIOU <[email protected]>

Author: wooorm

lib/handlers/li.js

@@ -2,10 +2,10 @@
  * @typedef {import('../types.js').Handle} Handle
  * @typedef {import('../types.js').Element} Element
  * @typedef {import('../types.js').ElementChild} ElementChild
- * @typedef {import('../types.js').MdastNode} MdastNode
  */
 
 import {convertElement} from 'hast-util-is-element'
+import {phrasing} from 'hast-util-phrasing'
 import {wrapChildren} from '../util/wrap-children.js'
 
 const p = convertElement('p')
@@ -45,7 +45,52 @@ export function li(h, node) {
     }
   }
 
-  const content = wrapChildren(h, clone || node)
+  if (!clone) clone = node
 
-  return h(node, 'listItem', {spread: content.length > 1, checked}, content)
+  const spread = spreadout(clone)
+  const content = wrapChildren(h, clone)
+
+  return h(node, 'listItem', {spread, checked}, content)
+}
+
+/**
+ * Check if an element should spread out.
+ * The reason to spread out a markdown list item is primarily whether writing
+ * the equivalent in markdown, would yield a spread out item.
+ *
+ * A spread out item results in `<p>` and `</p>` tags.
+ * Otherwise, the phrasing would be output directly.
+ * We can check for that: if there’s a `<p>` element, spread it out.
+ *
+ * But what if there are no paragraphs?
+ * In that case, we can also assume that if two “block” things were written in
+ * an item, that it is spread out, because blocks are typically joined by blank
+ * lines, which also means a spread item.
+ *
+ * Lastly, because in HTML things can be wrapped in a `<div>` or similar, we
+ * delve into non-phrasing elements here to figure out if they themselves
+ * contain paragraphs or 2 or more flow non-phrasing elements.
+ *
+ * @param {Element} node
+ * @returns {boolean}
+ */
+function spreadout(node) {
+  let index = -1
+  let seenFlow = false
+
+  while (++index < node.children.length) {
+    const child = node.children[index]
+
+    if (child.type === 'element') {
+      if (phrasing(child)) continue
+
+      if (child.tagName === 'p' || seenFlow || spreadout(child)) {
+        return true
+      }
+
+      seenFlow = true
+    }
+  }
+
+  return false
 }

test/fixtures/dl/index.json

@@ -1,3 +1,5 @@
 {
+  "": "spread can’t be losslessly translated between HTML <> markdown",
+  "tree": false,
   "fragment": true
 }

test/fixtures/dl/index.md

@@ -22,7 +22,9 @@ Charlie.
 *   Firefox
 
     *   A web browser.
+
     *   A Red Panda.
+
     *   ```js
         charlie();
         ```

test/fixtures/ol/index.json

@@ -1,3 +1,5 @@
 {
+  "": "spread can’t be losslessly translated between HTML <> markdown",
+  "tree": false,
   "fragment": true
 }

test/fixtures/ol/index.md

@@ -1,5 +1,7 @@
 2.  Alpha
+
 3.  Bravo
+
 4.  ```js
     charlie();
     ```
@@ -27,23 +29,31 @@ Bar.
 Baz.
 
 1.
+
 2.  Something else
 
 Qux.
 
 1.  Something else
+
 2.
 
 Quux.
 
 1.  Something else
+
 2.
 
 Quuux.
 
 1.  [x] Bravo
+
 2.  [ ] Charlie
+
 3.  [x] Delta
+
 4.  [ ] Echo
+
 5.  [ ] **Foxtrot**
+
 6.  [ ] **Golf**

test/fixtures/ul/index.json

@@ -1,3 +1,5 @@
 {
+  "": "spread can’t be losslessly translated between HTML <> markdown",
+  "tree": false,
   "fragment": true
 }

test/fixtures/ul/index.md

@@ -1,5 +1,7 @@
 *   Alpha
+
 *   Bravo
+
 *   ```js
     charlie();
     ```
@@ -27,23 +29,31 @@ Bar.
 Baz.
 
 *
+
 *   Something else
 
 Qux.
 
 *   Something else
+
 *
 
 Quux.
 
 *   Something else
+
 *
 
 Quuux.
 
 *   [x] Bravo
+
 *   [ ] Charlie
+
 *   [x] Delta
+
 *   [ ] Echo
+
 *   [ ] **Foxtrot**
+
 *   [ ] **Golf**

test/index.js

@@ -166,13 +166,13 @@ test('fixtures', (t) => {
 
       const fromHtml = unified()
         .use(rehypeStringify)
-        // @ts-expect-error: turn into different tree..
-        .use(() => {
-          return transformer
-          function transformer(/** @type {Node} */ tree) {
-            return toMdast(tree, config)
+        .use(
+          /** @type {import('unified').Plugin<void[], import('hast').Root, import('mdast').Root>} */
+          () => {
+            // @ts-expect-error: root in -> root out.
+            return (tree) => toMdast(tree, config)
           }
-        })
+        )
         .use(remarkStringify)
 
       const tree = removePosition(fromHtml.runSync(fromHtml.parse(input)), true)