document and api understands checklist

assets/core.styl

@@ -55,6 +55,14 @@ resets(arr)
     list-style-type: none
   ul > li::before
     content: '\25CF'
+  ul[data-checked=true] > li::before,
+  ul[data-checked=false] > li::before
+    color: #777
+    cursor: pointer
+  ul[data-checked=true] > li::before
+    content: '\2611'
+  ul[data-checked=false] > li::before
+    content: '\2610'
   li::before
     display: inline-block
     margin-right: LIST_STYLE_MARGIN

formats/list.js

@@ -41,17 +41,23 @@ ListItem.tagName = 'LI';
 
 class List extends Container {
   static create(value) {
-    if (value === 'ordered') {
-      value = 'OL';
-    } else if (value === 'bullet') {
-      value = 'UL';
+    let tagName = value === 'ordered' ? 'OL' : 'UL';
+    let node = super.create(tagName);
+    if (value === 'checked' || value === 'unchecked') {
+      node.setAttribute('data-checked', value === 'checked');
     }
-    return super.create(value);
+    return node;
   }
 
   static formats(domNode) {
     if (domNode.tagName === 'OL') return 'ordered';
-    if (domNode.tagName === 'UL') return 'bullet';
+    if (domNode.tagName === 'UL') {
+      if (domNode.hasAttribute('data-checked')) {
+        return domNode.getAttribute('data-checked') === 'true' ? 'checked' : 'unchecked';
+      } else {
+        return 'bullet';
+      }
+    }
     return undefined;
   }
 
@@ -81,7 +87,8 @@ class List extends Container {
     let next = this.next;
     if (next != null && next.prev === this &&
         next.statics.blotName === this.statics.blotName &&
-        next.domNode.tagName === this.domNode.tagName) {
+        next.domNode.tagName === this.domNode.tagName &&
+        next.domNode.getAttribute('data-checked') === this.domNode.getAttribute('data-checked')) {
       next.moveChildren(this);
       next.remove();
     }

test/unit/formats/list.js

@@ -22,6 +22,33 @@ describe('List', function() {
     `);
   });
 
+  it('add checklist', function() {
+    let editor = this.initialize(Editor, `
+      <p>0123</p>
+      <p>5678</p>
+      <p>0123</p>
+    `);
+    editor.scroll.domNode.classList.add('ql-editor');
+    editor.formatText(4, 1, { list: 'checked' });
+    editor.formatText(9, 1, { list: 'unchecked' });
+    expect(editor.getDelta()).toEqual(new Delta()
+      .insert('0123')
+      .insert('\n', { list: 'checked' })
+      .insert('5678')
+      .insert('\n', { list: 'unchecked' })
+      .insert('0123\n')
+    );
+    expect(this.container).toEqualHTML(`
+      <ul data-checked="true">
+        <li>0123</li>
+      </ul>
+      <ul data-checked="false">
+        <li>5678</li>
+      </ul>
+      <p>0123</p>
+    `);
+  });
+
   it('remove', function() {
     let editor = this.initialize(Editor, `
       <p>0123</p>

ui/icons.js

@@ -36,7 +36,8 @@ module.exports = {
   'link'      : require('../assets/icons/link.svg'),
   'list': {
     'ordered' : require('../assets/icons/list-ordered.svg'),
-    'bullet'  : require('../assets/icons/list-bullet.svg')
+    'bullet'  : require('../assets/icons/list-bullet.svg'),
+    'unchecked' : require('../assets/icons/list-check.svg')
   },
   'script': {
     'sub'     : require('../assets/icons/subscript.svg'),