feat: half done of task list item

src/editor/config.js

@@ -70,7 +70,8 @@ export const CLASS_OR_ID = genUpper2LowerKeyHash([
   'AG_IMAGE_FAIL',
   'AG_REMOVE',
   'AG_EMOJI_MARKER',
-  'AG_NOTEXT_LINK'
+  'AG_NOTEXT_LINK',
+  'AG_TASK_LIST_ITEM'
 ])
 
 export const codeMirrorConfig = {

src/editor/contentState/updateCtrl.js

@@ -2,7 +2,7 @@ import selection from '../selection'
 import { tokenizer } from '../parser/parse'
 import { conflict } from '../utils'
 
-const INLINE_UPDATE_REG = /^([*+-]\s(\[\s\]\s)?)|^(\d+\.\s)|^(#{1,6})[^#]+|^(>).+|^(\*{3,}|-{3,}|_{3,})/
+const INLINE_UPDATE_REG = /^([*+-]\s)|^(\[[x\s]{1}\]\s)|^(\d+\.\s)|^(#{1,6})[^#]+|^(>).+|^(\*{3,}|-{3,}|_{3,})/
 
 const updateCtrl = ContentState => {
   ContentState.prototype.checkNeedRender = function (block) {
@@ -30,6 +30,7 @@ const updateCtrl = ContentState => {
 
   ContentState.prototype.checkInlineUpdate = function (block) {
     const { text } = block
+    const parent = this.getParent(block)
     const [match, disorder, tasklist, order, header, blockquote, hr] = text.match(INLINE_UPDATE_REG) || []
     let newType
 
@@ -42,8 +43,8 @@ const updateCtrl = ContentState => {
         this.updateList(block, 'disorder', disorder)
         return true
 
-      case !!tasklist:
-        this.updateList(block, 'tasklist', disorder) // tasklist is one type of disorder.
+      case !!tasklist && parent && parent.type === 'li':
+        this.updateTaskListItem(block, 'tasklist', tasklist)
         return true
 
       case !!order:
@@ -75,7 +76,29 @@ const updateCtrl = ContentState => {
     return false
   }
 
+  ContentState.prototype.updateTaskListItem = function (block, type, marker) {
+    const parent = this.getParent(block)
+    const checked = /\[x\]\s/.test(marker)
+    const checkbox = this.createBlock('input')
+    const { start, end } = this.cursor
+    checkbox.checked = checked
+    this.insertBefore(checkbox, block)
+    block.text = block.text.substring(marker.length)
+    parent.isTask = true
+    this.cursor = {
+      start: {
+        key: start.key,
+        offset: Math.max(0, start.offset - marker.length)
+      },
+      end: {
+        key: end.key,
+        offset: Math.max(0, end.offset - marker.length)
+      }
+    }
+  }
+
   ContentState.prototype.updateList = function (block, type, marker) {
+    console.log(type, marker)
     const parent = this.getParent(block)
     const preSibling = this.getPreSibling(block)
     const nextSibling = this.getNextSibling(block)

src/editor/index.css

@@ -28,6 +28,21 @@ li > h1, li > h2, li > h3, li > h4, li > h5, li > h6 {
   display: initial;
 }
 
+li.ag-task-list-item {
+  list-style-type: none;
+  position: relative;
+}
+
+li.ag-task-list-item > input[type=checkbox] {
+  position: absolute;
+  cursor: pointer;
+  width: inherit;
+  height: inherit;
+  margin: 4px 0px 0px;
+  top: 3px;
+  left: -20px;
+}
+
 li p .ag-hide:first-child {
   display: none;
 }

src/editor/parser/StateRender.js

@@ -68,6 +68,9 @@ class StateRender {
         if (block.type === 'ol') {
           Object.assign(data.props, { start: block.start })
         }
+        if (block.type === 'li' && block.isTask) {
+          blockSelector += `.${CLASS_OR_ID['AG_TASK_LIST_ITEM']}`
+        }
         return h(blockSelector, data, block.children.map(child => renderBlock(child)))
       } else {
         let children = block.text
@@ -91,6 +94,16 @@ class StateRender {
           children = ''
         }
 
+        if (block.type === 'input') {
+          const { checked, type, key } = block
+          Object.assign(data.props, { type: 'checkbox' })
+          if (checked) {
+            Object.assign(data.props, { checked: true })
+          }
+          blockSelector = `${type}#${key}`
+          children = ''
+        }
+
         if (block.temp) {
           blockSelector += `.${CLASS_OR_ID['AG_TEMP']}`
         }