Add class to lists with tasks

* Add `contains-task-list` class to list if list contains at least one task list item.

Fixes #28 

Reviewed-by: Merlijn Vos <[email protected]>

Author: detj

lib/handlers/list.js

@@ -8,10 +8,27 @@ var all = require('../all')
 function list(h, node) {
   var props = {}
   var name = node.ordered ? 'ol' : 'ul'
+  var items
+  var index = -1
+  var length
 
   if (typeof node.start === 'number' && node.start !== 1) {
     props.start = node.start
   }
 
-  return h(node, name, props, wrap(all(h, node), true))
+  items = all(h, node)
+  length = items.length
+
+  // Like GitHub, add a class for custom styling
+  while (++index < length) {
+    if (
+      items[index].properties.className &&
+      items[index].properties.className.indexOf('task-list-item') !== -1
+    ) {
+      props.className = ['contains-task-list']
+      break
+    }
+  }
+
+  return h(node, name, props, wrap(items, true))
 }

test/list.js

@@ -33,6 +33,39 @@ test('List', function(t) {
     'should transform unordered lists to `ul`'
   )
 
+  t.deepEqual(
+    to(
+      u('list', {ordered: false}, [
+        u('listItem', {checked: true}, [u('paragraph', [u('text', 'todo')])])
+      ])
+    ),
+    u(
+      'element',
+      {tagName: 'ul', properties: {className: ['contains-task-list']}},
+      [
+        u('text', '\n'),
+        u(
+          'element',
+          {tagName: 'li', properties: {className: ['task-list-item']}},
+          [
+            u(
+              'element',
+              {
+                tagName: 'input',
+                properties: {type: 'checkbox', checked: true, disabled: true}
+              },
+              []
+            ),
+            u('text', ' '),
+            u('text', 'todo')
+          ]
+        ),
+        u('text', '\n')
+      ]
+    ),
+    'should identify task list items in unordered lists'
+  )
+
   t.deepEqual(
     to(
       u('list', {ordered: true, start: 3}, [