allow nested todo_lists via options on todo_item

examples/Components/Routes/TodoList/index.vue

@@ -69,7 +69,9 @@ export default {
           new CodeBlock(),
           new HardBreak(),
           new Heading({ levels: [1, 2, 3] }),
-          new TodoItem(),
+          new TodoItem({
+            nested: true,
+          }),
           new TodoList(),
           new Bold(),
           new Code(),
@@ -135,14 +137,23 @@ li[data-type="todo_item"] {
 
 .todo-content {
   flex: 1;
+  > p:last-of-type {
+    margin-bottom: 0;
+  }
+  > ul[data-type="todo_list"] {
+    margin: .5rem 0;
+  }
 }
 
 li[data-done="true"] {
-  text-decoration: line-through;
-}
-
-li[data-done="true"] .todo-checkbox {
-  background-color: $color-black;
+  > .todo-content {
+    > p {
+      text-decoration: line-through;
+    }
+  }
+  > .todo-checkbox {
+    background-color: $color-black;
+  }
 }
 
 li[data-done="false"] {

packages/tiptap-extensions/src/nodes/TodoItem.js

@@ -1,5 +1,5 @@
 import { Node } from 'tiptap'
-import { splitToDefaultListItem, liftListItem } from 'tiptap-commands'
+import { sinkListItem, splitListItem, liftListItem } from 'tiptap-commands'
 
 export default class TodoItem extends Node {
 
@@ -7,6 +7,12 @@ export default class TodoItem extends Node {
     return 'todo_item'
   }
 
+  get defaultOptions() {
+    return {
+      nested: false,
+    }
+  }
+
   get view() {
     return {
       props: ['node', 'updateAttrs', 'editable'],
@@ -34,7 +40,7 @@ export default class TodoItem extends Node {
         },
       },
       draggable: true,
-      content: 'paragraph*',
+      content: this.options.nested ? '(paragraph|todo_list)+' : 'paragraph+',
       toDOM: node => {
         const { done } = node.attrs
 
@@ -60,7 +66,8 @@ export default class TodoItem extends Node {
 
   keys({ type }) {
     return {
-      Enter: splitToDefaultListItem(type),
+      Enter: splitListItem(type),
+      Tab: this.options.nested ? sinkListItem(type) : () => {},
       'Shift-Tab': liftListItem(type),
     }
   }