diff --git a/examples/Components/Routes/TodoList/index.vue b/examples/Components/Routes/TodoList/index.vue index 0e92d41d..360f2fb0 100644 --- a/examples/Components/Routes/TodoList/index.vue +++ b/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"] { diff --git a/packages/tiptap-extensions/src/nodes/TodoItem.js b/packages/tiptap-extensions/src/nodes/TodoItem.js index 79be78c8..2213d2a1 100644 --- a/packages/tiptap-extensions/src/nodes/TodoItem.js +++ b/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), } }