Disable tab focus and indent list items with tab (#119)

.github/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - block html #110
 - raw html #110
+- you can now indent list items with tab key
 
 **:butterfly:Optimization**
 
@@ -12,6 +13,7 @@
 
 - fix: update outdated preferences on startup #100
 - fix: reset modification indicator after successfully saved changes
+- fix: disable tab focus
 
 ### 0.9.25
 

src/editor/contentState/index.js

@@ -435,10 +435,22 @@ class ContentState {
     return !block.nextSibling && !block.preSibling
   }
 
+  getLastChild (block) {
+    const len = block.children.length
+    if (len) {
+      return block.children[len - 1]
+    }
+    return null
+  }
+
   getLastBlock () {
     const arrayBlocks = this.getArrayBlocks()
     const len = arrayBlocks.length
-    return arrayBlocks[len - 1]
+    if (len) {
+      return arrayBlocks[len - 1]
+    } else {
+      throw new Error('article need at least has one paragraph')
+    }
   }
 
   wordCount () {

src/editor/contentState/tabCtrl.js

@@ -22,7 +22,69 @@ const tabCtrl = ContentState => {
     return false
   }
 
+  ContentState.prototype.isIndentableListItem = function () {
+    const { start, end } = this.cursor
+    const startBlock = this.getBlock(start.key)
+    if (startBlock.type !== 'p' || !startBlock.parent) {
+      return false
+    }
+
+    const listItem = this.getParent(startBlock)
+    if (listItem.type !== 'li' || start.key !== end.key || start.offset !== end.offset) {
+      return false
+    }
+
+    // Now we know it's a list item. Check whether we can indent the list item.
+    const list = this.getParent(listItem)
+    return list && /ol|ul/.test(list.type) && list.children.indexOf(listItem) >= 1
+  }
+
+  ContentState.prototype.indentListItem = function () {
+    const { start } = this.cursor
+    const startBlock = this.getBlock(start.key)
+    const listItem = this.getParent(startBlock)
+    const list = this.getParent(listItem)
+    const prevListItem = this.getPreSibling(listItem)
+
+    this.removeBlock(listItem)
+
+    // Search for a list in previous block
+    let newList = this.getLastChild(prevListItem)
+    if (!newList || !/ol|ul/.test(newList.type)) {
+      newList = this.createBlock(list.type)
+      this.appendChild(prevListItem, newList)
+    }
+
+    // Update item type only if we insert into an existing list
+    if (newList.children.length !== 0) {
+      listItem.isLooseListItem = newList.children[0].isLooseListItem
+    }
+
+    this.appendChild(newList, listItem)
+    this.render()
+  }
+
+  // ContentState.prototype.insertTab = function () {
+  //   // TODO(fxha): Tabs and all spaces with length > 1 are converted to a single space
+  //                  in editor mode. Maybe write a HTML "tab" element
+  //   // TODO(fxha): create setting entry "tabSize: <int>"
+  //   const tabCharacter = new Array(4).join(' ')
+  //   const { start, end } = this.cursor
+  //   const startBlock = this.getBlock(start.key)
+  //   const endBlock = this.getBlock(end.key)
+  //   if (this.cursor.start.key === this.cursor.end.key) {
+  //     startBlock.text = startBlock.text.substring(0, start.offset) + tabCharacter + endBlock.text.substring(end.offset)
+  //     // workaround: see todo 1
+  //     this.cursor.start.offset += 1 // tabCharacter.length
+  //     this.cursor.end.offset += 1 // tabCharacter.length
+  //     this.render()
+  //   }
+  // }
+
   ContentState.prototype.tabHandler = function (event) {
+    // disable tab focus
+    event.preventDefault()
+
     const { start, end } = selection.getCursorRange()
     const startBlock = this.getBlock(start.key)
     const endBlock = this.getBlock(end.key)
@@ -33,7 +95,6 @@ const tabCtrl = ContentState => {
       nextCell = endBlock
     }
     if (nextCell) {
-      event.preventDefault()
       const key = nextCell.key
       const textLength = nextCell.text.length
       this.cursor = {
@@ -41,7 +102,11 @@ const tabCtrl = ContentState => {
         end: { key, offset: textLength }
       }
       this.render()
-    }
+    } else if (this.isIndentableListItem()) {
+      this.indentListItem()
+    } // else {
+    //   this.insertTab()
+    // }
   }
 }