tiptap-vuetify/src/extensions/nativeExtensions/TodoList/TodoItemNode.ts

Vuetify WYSIWYG editor based on Tiptap.

// @ts-ignore
import { Node } from 'tiptap'
import { sinkListItem, splitToDefaultListItem, liftListItem } from 'tiptap-commands'
import TodoItemView from './TodoItemView.vue'

export default class TodoItem extends Node {
  options

  get name () {
    return 'todo_item'
  }

  get defaultOptions () {
    return {
      nested: false
    }
  }

  get view () {
    return TodoItemView
  }

  get schema () {
    return {
      attrs: {
        done: {
          default: false
        }
      },
      draggable: true,
      content: this.options.nested ? '(paragraph|todo_list)+' : 'paragraph+',
      toDOM: node => {
        const { done } = node.attrs

        return [
          'li',
          {
            'data-type': this.name,
            'data-done': done.toString()
          },
          ['span', { class: 'todo-checkbox', contenteditable: 'false' }],
          ['div', { class: 'todo-content' }, 0]
        ]
      },
      parseDOM: [{
        priority: 51,
        tag: `[data-type="${this.name}"]`,
        getAttrs: dom => ({
          done: dom.getAttribute('data-done') === 'true'
        })
      }]
    }
  }

  keys ({ type }) {
    return {
      Enter: splitToDefaultListItem(type),
      Tab: this.options.nested ? sinkListItem(type) : () => {},
      'Shift-Tab': liftListItem(type)
    }
  }
}